Okay, let's work on editing ideas. So I want the User to be able to click this, edit idea, and have something pop up that allows them to edit their idea. So I want it to look similar to the Laravel form. So this is pretty much the same thing as editing, and you can see a modal here that pops up from the bottom. So let's go ahead and do that. So it's gonna look similar to the create idea form, maybe a bit wider, and have it show up somewhere here in the middle. Okay, so I'm gonna make use of the Tailwind UI modal and modify that. And there is a free modal here, which we'll make use of. So let's explore the preview, let's look for modals, and let's grab the first one here, which you can see. Okay, so let's grab the code, and I'm gonna put it in the show blade. So this

preview, let's look for modals, and let's grab the first one here, which you can see. Okay, so let's grab the code, and I'm gonna put it in the show.blade.php. So this is the view for showing an Idea, and that's pretty much this entire view right here. And this is a Livewire component, so we'll put it right underneath it like this. So let's just paste it in and see if it actually works. Okay, that's the modal code from Tailwind UI, and there it is. So let's just modify this so it shows up on the bottom and shows a form like this. Okay, so first thing I'm gonna do is extract it to a Livewire component, because we know later on that we're gonna use Livewire to edit the Idea. So php artisan Livewire make, let's call it editIdea. Okay, and let's go into that, editIdea, and let's paste

on that we're gonna use Livewire to edit the Idea. So php artisan Livewire make, let's call it editIdea. Okay, and let's go into that, editIdea, and let's paste that into here. Okay, let's remove it from here. So let's just undo, and we can do Livewire, editIdea, and eventually we're gonna have to pass in the idea, but we'll worry about that when we get there. Okay, and this should be the same, and it is. Okay, so let's just modify the CSS for this. So back into here, editIdea, let's get rid of this comment here. Okay, and this first div is fine, and next I'm gonna get rid of these. Don't need those for our modal, and these comments are for how to do the transition, and we'll do that in the next video when we're working with Alpine. So this is the div that has sort of the gray background. You

how to do the transition, and we'll do that in the next video when we're working with Alpine. So this is the div that has sort of the gray background. You can see bg-opacity-75 here. So let's see if I change it to green, let's see if it changes the color of the background, and it does, and you can see it's on the bottom now after the few changes that we made. So let's continue working on this, put it back to gray-500. Okay, and we don't need this because it's not centered, and this is the actual modal here. So I'm gonna name it here, say modal, and I don't think I need these classes, and I want the rounded corners just to be on the top, so it looks like it's coming in from the bottom. So let's remove these two rounded corners here, so we can do rounded-tl-2xl,

already, so let's get rid of that. So I believe it's this section here. Okay. Okay, so let's go ahead and grab the markup from the CreateIdea form, and then put it in here. So let's go to CreateIdea, and let's look for the form here, and let's just grab everything, and see if it renders okay. Okay, and let's put it in here. So let's get rid of this, and let's get rid of this. We don't need this success message. Let's just see if it renders correctly. Where's the form here? Okay, and let's just re-indent that, and let's see if it renders okay, and there's a few variables that aren't here. So it's the categories, which we didn't pass in, so we'll just hard-code it for now. Let's get rid of this foreach, and we'll just hard-code one for now. So this would be categoryName, let's just say.

pass in, so we'll just hard-code it for now. Let's get rid of this for each, and we'll just hard-code one for now. So this would be categoryName, let's just say categoryOne. Okay, and this would be just the ID, so let's just put 1 in here. Okay, anything else? Okay, so that actually looks pretty good. Let's put a heading up here. So right above the form, let's say h3, say edit Idea. Let's give it some classes actually. text-center, text-large, font-medium, and text-gray-900. Okay, looks good. Let's also add some text underneath it. So let's add a p tag, text-extra-small, center as well. Let's make it text-gray-500, and give it a margin-top of 4. And I'm just gonna say you have one hour to edit your idea from the time you created it. So we'll take a look at this when we work with policies, but I

of 4. And I'm just gonna say you have one hour to edit your Idea from the time you created it. So we'll take a look at this when we work with policies, but I only want the User to be able to edit their Idea up to one hour after creating it. So this will prevent the User from changing the Idea entirely. Okay, so yeah, that's looking pretty good. I think I want to close button in the top right, and I think one of the models in Tailwind UI does have an X button here, right here, but it's not in the free version, so we'll just do it manually. Let's say up here, my indentation is messed up because it's two spaces when I copied it, but that's fine. Let's say absolute top 0 right 0, and let's give it some padding. pt-4 and pr-4. Okay, and let's put a button in here, and this

looks better. So yeah, a few more things here. I am going to hide this for now, and work on some other things. So let's just say hidden for this entire thing. Okay, and I want to add the editIdea to this menu over here. So that would be an Idea show, I believe. Say, yeah, here are the list items. So this should be an Idea. So let's change it to Idea, and let's add... I'm gonna move this up actually, and I'm going to add one for editIdea. Okay, so change this to editIdea. Okay, and as we click this, we want the model to pop up, and we'll work on that in the next video. I also want to make a small change here. So if you look at the hover state, when we hover over these, the button hovers as well. So we don't want that. So that's because in my markup, you'll see that the ul right here is within the button. So

actually does show up on the index page as well, but I'm gonna get rid of it here as I just want to show up on the show page. That's because that's the way Laravel casts work as well. So as you see on the index page, there is no three buttons for the options, but if we go into it, you'll see it down here. Okay, so let's get rid of that, and then we can finish off the video. So that would be in the ideas/show, I believe, or ideas/index. Yep, and let's look for the button. Sorry, it's actually the ideas/index. Let's look for the button here. So it's this one here. Let's get rid of it, and yeah, that should be good. Let's check the index page. Should be gone, and we have more room here. Okay, so let's put that back so it shows the model by default. So editIdea. Let's take the hidden out, and then we

Should be gone, and we have more room here. Okay, so let's put that back so it shows the model by default. So edit Idea. Let's take the hidden out, and then we can make a commit here. Actually, before we do that, let me make sure that the scroll works for overflow. Overflow Y at least. So I'm gonna resize the browser here, and it does seem to work. So we can scroll the actual model, and we can still scroll the page. And whenever I make models manually, I always run into this issue. But the model that Tailwind UI provides works great. Okay, so let's go ahead and make a commit here. Actually, before I make a commit, I'm just gonna go behind the scenes and clean up the indentation here. Okay, indentation is fixed. Let's go ahead and make a commit. Again, episode 37, right? Yeah, git add,

behind the scenes and clean up the indentation here. Okay, indentation is fixed. Let's go ahead and make a commit. Again, episode 37, right? Yeah, git add, git commit, episode 37, edit Idea, CSS for model.