<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Todo List
        </h2>
    </x-slot>

    <div class="m-4">
        @if (session('message.success'))
            <div class="p-4 bg-cyan-200 text-blue-500 rounded-md text-2xl">
                {{ session('message.success') }}
            </div>
        @endif
    </div>

    <div class="mx-4">
        <table class="min-w-full divide-y divide-gray-200">
            <thead>
                @php
                    $ths = ['ID', 'Task', 'Created At', 'Updated At', 'delete'];
                @endphp
                <tr>
                    @foreach ($ths as $th)
                        <th class="p-1 bg-slate-300">{{ $th }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($todos as $todo)
                    <tr class="{{ $loop->iteration % 2 === 0 ? 'bg-slate-200' : 'bg-white' }}">
                        <td class="p-1 text-center">{{ $todo->id }}</td>
                        <td class="p-1">{{ $todo->task }}</td>
                        <td class="p-1 text-center">{{ $todo->created_at }}</td>
                        <td class="p-1 text-center">{{ $todo->updated_at }}</td>
                        <td class="p-1">
                            <form action="{{ route('todo.destroy', $todo->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                {{-- 上の行は、DELETEリクエストを送信するために必要な@methodディレクティブです。 --}}
                                <button type="submit" class="p-1 bg-red-400 text-white rounded-md"
                                    onclick="return confirm('本当に{{ $todo->id }}番を削除する？');">削除</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="m-4">
        <form action="{{ route('todo.store') }}" method="POST">
            @csrf
            <div class="flex items-center">
                <input type="text" name="task" class="w-full p-2 border border-gray-300 rounded-md"
                    placeholder="Add a new task">
                <button type="submit" class="p-2 ml-2 bg-blue-500 text-white rounded-md">Add</button>
            </div>
        </form>
    </div>
</x-app-layout>