gistfile1.txt

I'm using Jetstream and Livewire 2

Blade:

<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    Tasks
                </h2>
            </div>
            <div class="flex mb-2">
                <a href="{{ url('tasks/create') }}"
                class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150"
                >
                    Create Task
                </a>
            </div>
        </div>
    </x-slot>
    {{-- {{ json_encode($checked) }} --}}
    <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
        <div>
        <div class="flex flex-col">
            <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                        </th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                            Task
                        </th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                            Completed
                        </th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                            Alert Date
                        </th>


                        <th class="px-6 py-3 bg-gray-50"></th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($tasks as $task)
                        <tr>
                        <td class="px-6 py-4 whitespace-no-wrap">
                         <div class="text-sm leading-5 text-gray-900">
                                <input
                                    type="checkbox"
                                    value="{{ $task->id }}"
                                    class="form-checkbox border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                                    wire:model="checked({{$task->id}})"
                                />
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap">
                            <div class="flex items-center">
                                <div class="text-sm leading-5 font-medium text-gray-900">
                                {{ $task->body }}
                                </div>
                            </div>
                        </td>

                        <td class="px-6 py-4 whitespace-no-wrap">
                            @if($task->completed == 0)
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                No
                            </span>
                            @else
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Yes
                            </span>
                            @endif
                        </td>

                        <td class="px-6 py-4 whitespace-no-wrap">
                            <div class="text-sm leading-5 text-gray-900">{{ $task->alert ? $task->alert->toFormattedDateString() : 'N/A' }}</div>
                        </td>

                        <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
                            <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                        </td>
                        </tr>
                    @endforeach
                    </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

</x-app-layout>

// Livewire Component Class
namespace App\Http\Livewire;

use App\Models\Tasks as TaskModel;
use Livewire\Component;

class Tasks extends Component
{
    public $checked = [];
    
    public function updatedChecked()
    {
        dd('Completed?');
        // $task = TaskModel::where('id', $id)->first();
        // $task->completed = 1;
        // $this->dispatchBrowserEvent('swal', [
        //     'title' => 'Task completed',
        //     'timer' => 3000,
        //     'icon' => 'success',
        //     'toast' => true,
        //     'position' => 'top-right',
        //     'showConfirmButton' => false,
        //     'animation' => false
        // ]);
    }

    public function render()
    {
        $tasks = TaskModel::isOwner();
        return view('livewire.tasks', compact('tasks'));
    }
}