We want to add one more bit of interaction with the backend and it's to clear the card when the user clicked start new order. Now mind you in a real e-commerce project, at the confirm order step, we should probably have solidified an order with the items and the status of confirmed, but here we've just opened a model. I don't think we're going to implement that, but what we should do is when we clear the card have some endpoints in the level backend that clears all the card items

clear the card have some endpoints in the level backend that clears all the card items from the card to start from scratch. This should be really straightforward. So let's start with the button and we can copy the style from the sidebar one more time. So in the active card , we had the confirm order button here and I'm going to copy that and inside our confirmation model at the bottom after the closing rose 100 bucks, which is this one, I'm going to have the

confirmation model at the bottom after the closing rose 100 bucks, which is this one, I'm going to have the button. Now we don't want it to be a popover target and we want it to say start new order. It's definitely going to need some margin top. For now, let's click confirm order and yeah, here it is. So we want to make it full width spacing on top and I feel like the gap between these two, these two and these two is the same. So I'm going to backpedal and create a stacked flex container and

two and these two is the same. So I'm going to backpedal and create a stacked flex container and this is going to be on our popover element. So I'll go flex flex call gap eight. So we're going to have a icon. Then we're going to group the h2 and p tag. Then we have our least item and order total. And then we have our confirmation button. But also let me remove a few items from the card. And so let's take a look. And okay, I've done something very wrong here. All

from the card. And so let's take a look. And okay, I've done something very wrong here. All right. So yeah, the elements themselves have margin top. So you can see here a margin top and also here. So now that I'm controlling the spacing with the flex parent, let's get rid of this margin top here and this big empty eight here. This should start looking a lot better. All right, I like that. Although gap eight might have been just a little too big. So let's go change it

right, I like that. Although gap eight might have been just a little too big. So let's go change it . And that's the nice thing about it is we can change it in one place. So here I'll go gap six. Yeah, that's nice. And a benefit of having this stacked flex element is we have now the button stretching out full width without us changing anything. So I think our button is done. So now when we click this button, we want to hit an endpoint that is going to clear the cards and

when we click this button, we want to hit an endpoint that is going to clear the cards and basically allow users to start over. All right, let's go in web.php. And we're going to have a route post. And this one will be cut clear. And let's see if copilot can work out the rest. Yes, it does. However, if I leave that here, because we have dynamic routes here, this one is never going to be picked up. So I need to move it at the top. I might just give a slightly

never going to be picked up. So I need to move it at the top. I might just give a slightly better naming to the controller method here empty card. And let's go cat that empty card here as well. So all right, let's go in the card controller. And we're going to implement the empty card, public function empty card. And spoiler alert, this is exactly what we want to do. If the card exists, we pick up the items and we delete all of them. And then we

do. If the card exists, we pick up the items and we delete all of them. And then we return back. And so that should take care of reloading the same page with the dialogue closed, the popover closed, and the card hopefully empty to start a new order. All is left to do in our confirmation template here is to wrap our button here inside a phone. And the action is going to be a new route that we'd called card that empty card. The method is going to be post, we need

going to be a new route that we'd called card that empty card. The method is going to be post, we need the ad CSRF token here. And let's add a type of submit to our button. And I think that's all we need to do. I feel like I want to be too fast, and it's almost too easy for it to work. But also Laravel makes things super easy and fast. So it might work. Let's give it a try. Okay, so I have my order, and I confirm it. Oops, we have lost the button styles because we've added a

have my order, and I confirm it. Oops, we have lost the button styles because we've added a form around the button. Let's not worry about this now. Let's see if when I click start new order, it clears the card and we can start a new order. Ready, click. It did it worked. That's amazing. And if I refresh the card, it's well and truly gone. And I can start a new order. So I can add some items. Whoops, I can't seem to be Oh, what? Oh, I'm having an issue where I can't click on the

some items. Whoops, I can't seem to be Oh, what? Oh, I'm having an issue where I can't click on the elements in the middle of the page. And I feel like it's because the popover is actually still showing even if not visible. Let me inspect the page. That's what I was thinking. It looks like the popover, despite being closed, is still showing. And as you can see, I was able to click on this element, but not the middle one, because it's behind. That makes sense. This is what the

on this element, but not the middle one, because it's behind. That makes sense. This is what the popover looks like. So we must have done a mistake. I after all did have a feeling that I went a little bit too quick. Let's go figure that out. Well, I have the opening form element around the button, but I did not close the form. And I'm sure you had seen this and we're yelling at me through the screens. Okay, so let's try again. Hopefully I should be able to know I still

at me through the screens. Okay, so let's try again. Hopefully I should be able to know I still can't, but I can probably remove that item. Yep. And no, it's still not working. So the popover should have a display none property applied to it. Let's scroll down until we find the user agent styles. There we go. Here, display none is overridden. Oh, okay. I think I think I figured it out. Remember when I changed the stacking to a flex container, so I could have consistent spacing. I

Remember when I changed the stacking to a flex container, so I could have consistent spacing. I 've added this flex class, which is a display class on the popover element. And that's probably the problem. Yes. So if I wanted to keep it here, I should probably go open flex and then open flex call and open gap six. This is really getting convoluted and hard to reason about. I would probably refactor it to something a little bit easier to grasp. And that was my

would probably refactor it to something a little bit easier to grasp. And that was my initial intuition to have an inner div for the container. But let's see if that works. And the good news is it's not showing here when I hover, so it's probably what it was. And so let's check that our confirmation order still works. It does, but the button has gone back to narrow. I'm going to go here pattern for the messiness in this lesson, but this is part of a real life

to go here pattern for the messiness in this lesson, but this is part of a real life building stuff. All right. So here, let's give the button a class of width full. And that should do the trick. And yeah, it does. Okay. So apologies for that. I'm going to try to start a new order. It should delete all the cart items. And now I should be able to add as many cart items, including the ones that are below the top of her, because now it's set to display none. Everything

including the ones that are below the top of her, because now it's set to display none. Everything is working properly. I can still increment, decrement, I can remove items from the card, add them back. And everything works properly. We have a nice confirmation order with a fading fade out effect . And we can reset the cards when we click start new order. Excellent. I think it's time to do a responsive pass. Just check things at different viewport sizes and also check the challenge rules and

responsive pass. Just check things at different viewport sizes and also check the challenge rules and requirements and see if we can meet them and start thinking about submitting our challenge.