Now that we have implemented our notification options, I want to change it, because some users might want to be notified using different forms of communication, which means we will need to change our radio buttons to checkboxes. But I want to do a little bit more, I want to add two radio buttons, a yes and a no, so that users can opt in to notifications. If they click on the no radio button, then we will hide the notification options, because why would they need to see that? But if they click on yes, then we would display the notification options. And it sounds like a lot, it kind of is, but it's still relatively simple. But the first thing we will need to do is roll back our migration, because the column

And it sounds like a lot, it kind of is, but it's still relatively simple. But the first thing we will need to do is roll back our migration, because the column that we created for storing the notification was designed for a single value, and now we need to store multiple values. So let's open up that migration, let's go ahead and change the column name as well. Instead of notification, it is now going to be notifications. And it is also going to be nullable. So let's instead of calling default, change it to nullable, we won't pass anything in, and that's going to work just fine. So now we can migrate our database, but we will need to make some modifications.

and that's going to work just fine. So now we can migrate our database, but we will need to make some modifications. Let's open up the Article model. We now want to change notification to notifications. And I want to cast the notifications as an array. By doing this, Laravel is going to essentially store this array as a JSON structure in the database, and it is going to convert back and forth. So we don't have to manually do that. And now we can turn our attention to our form object, because really this is where the majority of all of our changes are going to take place.

And now we can turn our attention to our form object, because really this is where the majority of all of our changes are going to take place. I say that. We will need to make a lot of changes inside of the view, but we will get there. The first big change is notification is now notifications. And it is going to be an array, because it can contain multiple values. So we could go ahead and make those changes. But one thing we should note is whenever we set notifications from the provided article, because it could be null, therefore, we should check if it is null, and if it is, then we will assign an empty array.

because it could be null, therefore, we should check if it is null, and if it is, then we will assign an empty array. Whenever we store the article information, we need to pass in notifications, not notification, and the same thing for update. So now we can turn our attention to the edit view. We will focus on the edit view and then make the necessary changes in the create view. So let's find where our radio buttons are. They are right here. And let's copy, well, let's copy them all. And we will just paste them in.

And let's copy, well, let's copy them all. And we will just paste them in. We don't need three in this case, so let's get rid of that third radio button. But here's where we start to make our changes. So we still, of course, want radios. The value for these are going to be different. This first one is going to be true because it will be the yes radio button. The next will have a value of false, and the text will be no. Now our model is going to be different because we no longer, first of all, have notification, but this is going to be different.

Now our model is going to be different because we no longer, first of all, have notification, but this is going to be different. We could call this like allowNotifications. There's probably a better term, but this is what we're going to go with, which means that we will need to add this property to our form object. So let's go ahead and do that. Let's also go ahead and set a default value of false. But let's do this. Whenever we set the article information, we will set the allowNotifications to be based upon the number of elements inside of the notifications array.

Whenever we set the article information, we will set the allow notifications to be based upon the number of elements inside of the notifications array. If we have anything in the array, then allow notifications should be true. If not, it should be false. This means we will need to also take that into account whenever we save and update. So we would need to check if we don't have any notifications, or if we don't allow notifications, then we should set notifications as an empty array, and we will need to do that both in the store and the update methods. But I think for the most part, that's it as far as our form object is concerned. So everything else we will do inside of the view.

But I think for the most part, that's it as far as our form object is concerned. So everything else we will do inside of the view. So now we can look at the old radio buttons. There's one for email, the other for SMS, and this third one will have push notifications. But first of all, we need to change those to text boxes. We need to change the model to the notifications property. Let's change the value of this third one to push, and the text to push. So back in the browser, okay, we need some spacing here, and I want to put each communication option on its own line. So of course we can do that with CSS.

option on its own line. So of course we can do that with CSS. First of all, let's add some margin to the bottom of our notification choice. Then let's just get rid of the flex and gap-6 classes. We now see our email, SMS, and push options are on their own lines, which is what I want, but I want this to be hidden when the choice is no. Now Livewire itself doesn't have this capability, but Livewire is built on Alpine, and we have Alpine. We can use it in conjunction with Livewire. So what we can do is for the div that contains our check boxes, we could add the x-show attribute,

We can use it in conjunction with Livewire. So what we can do is for the div that contains our check boxes, we could add the x-show attribute, and there's a magic property called wiret that we can then link to a property on our form, which is the allowNotifications. So when we change the value of allowNotifications, it will show and hide this div element. So going back to the browser, we can see that with no selected, our notification options are hidden. If we click on yes, they appear. If we click on no, they don't disappear, and they should. But this is when we need to remember that we are dealing with data from the browser,

If we click on no, they don't disappear, and they should. But this is when we need to remember that we are dealing with data from the browser, which are typically strings. So even though we have a true and false value for our radio buttons, they are still strings. They are not being treated as real Boolean values. So when we set up the model for our radio buttons, we need to use the Boolean modifier. That way on the server, we know that we are working with Boolean values, and everything should work as it needs to. So now, of course, clicking on yes shows our options. If we click back on no, they are hidden, and we can go back and forth clicking this all.

So now, of course, clicking on yes shows our options. If we click back on no, they are hidden, and we can go back and forth clicking this all day long. But now the moment of truth. If we opt into email notifications and save, we'll go back to that article, and we should see email is still checked. If we decide on email and push notifications, when we go back to the edit page, we should and we do see email and push. But now let's test this. If we click no, remember we have opted out of notifications, therefore we shouldn't have

But now let's test this. If we click no, remember we have opted out of notifications, therefore we shouldn't have any notifications. If we edit again, we can see no is still checked. It's based upon the notifications, which if we click on yes, we can see that those were cleared out. So that is working just fine. Now we need to essentially copy this functionality for the create form. So let's do this. All we really need are the new radio buttons and the checkboxes.

So let's do this. All we really need are the new radio buttons and the checkboxes. So let's copy the div that contains all of those elements. Let's go to the create view. Let's find that same div element, and let's replace it. Let's expand this just to make sure everything, yep, our model for allowNotifications is being cast as Boolean. Everything else should be okay. So let's attempt to create an article. This is a test with new notification options.

So let's attempt to create an article. This is a test with new notification options. Contents doesn't matter. We want this published, and let's opt in to push notifications. If we save this, we scroll all the way down to the bottom. We have our new article, which that's good. Let's edit. We can see that it is published. Notification options are enabled for push notifications. In this lesson, we primarily looked at two things.

Notification options are enabled for push notifications. In this lesson, we primarily looked at two things. First, we looked at how we can work with a group of form elements, like multiple checkboxes. I've said this a lot, but on the server, it's just Laravel. In a typical Laravel application, we would work with a group of checkboxes as an array. The only thing that we really needed to do is to make sure that each checkbox used the same form property as its model. And that's it. That was very simple to do. The second thing is how we can use Alpine to interact with our Livewire components.

That was very simple to do. The second thing is how we can use Alpine to interact with our Livewire components. We just need to use the wire magic property, and then we can work with and interact with our components' data.