@section('page-title')
    Instructor Availability
@endsection

@section('page-description')
    {{ $instructor->user->name }}
@endsection

<x-layouts.admin>

    <div class="mx-auto w-full space-y-6">

        <!-- ================= HEADER ================= -->
        <div
            class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

            <div class="flex items-center gap-4">

                <!-- Back -->
                <a href="{{ route('admin.instructors.index') }}"
                    class="inline-flex items-center gap-2 rounded-full border border-gray-300 bg-white px-5 h-11 text-sm font-medium text-gray-700 hover:bg-gray-50 transition shadow-sm">

                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="w-5 h-5"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor">

                        <path stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M15 19l-7-7 7-7" />
                    </svg>

                    Back

                </a>

            </div>

        </div>

        <!-- ================= ADD AVAILABILITY ================= -->
        <div
            class="overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm">

            <!-- Card Header -->
            <div
                class="border-b border-gray-200 bg-gradient-to-r from-slate-50 to-white px-6 py-5">

                <h3 class="text-lg font-semibold text-gray-800">
                    Add Weekly Availability
                </h3>

                <p class="text-sm text-gray-500 mt-1">
                    Set instructor available days and times
                </p>

            </div>

            <!-- Form -->
            <form method="POST"
                action="{{ route('admin.instructor.availability.store', $instructor->id) }}"
                class="p-5 md:p-8">

                @csrf

                <div
                    class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-5">

                    <!-- Day -->
                    <div>

                        <label
                            class="block text-sm font-medium text-gray-700 mb-2">
                            Day
                        </label>

                        <select name="day_of_week"
                            class="w-full h-12 rounded-2xl border border-gray-300 bg-white px-4 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">

                            @foreach ($days as $key => $day)

                                <option value="{{ $key }}">
                                    {{ $day }}
                                </option>

                            @endforeach

                        </select>

                    </div>

                    <!-- Start Time -->
                    <div>

                        <label
                            class="block text-sm font-medium text-gray-700 mb-2">
                            Start Time
                        </label>

                        <div class="flex gap-2">

                            <select name="start_hour"
                                class="w-full h-12 rounded-2xl border border-gray-300 bg-white px-4 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">

                                @for ($i = 1; $i <= 12; $i++)

                                    <option value="{{ $i }}">
                                        {{ $i }}
                                    </option>

                                @endfor

                            </select>

                            <select name="start_period"
                                class="w-28 h-12 rounded-2xl border border-gray-300 bg-white px-4 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">

                                <option value="AM">AM</option>
                                <option value="PM">PM</option>

                            </select>

                        </div>

                    </div>

                    <!-- End Time -->
                    <div>

                        <label
                            class="block text-sm font-medium text-gray-700 mb-2">
                            End Time
                        </label>

                        <div class="flex gap-2">

                            <select name="end_hour"
                                class="w-full h-12 rounded-2xl border border-gray-300 bg-white px-4 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">

                                @for ($i = 1; $i <= 12; $i++)

                                    <option value="{{ $i }}">
                                        {{ $i }}
                                    </option>

                                @endfor

                            </select>

                            <select name="end_period"
                                class="w-28 h-12 rounded-2xl border border-gray-300 bg-white px-4 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">

                                <option value="AM">AM</option>
                                <option value="PM">PM</option>

                            </select>

                        </div>

                    </div>

                    <!-- Button -->
                    <div
                        class="xl:col-span-2 flex items-end">

                        <button type="submit"
                            class="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-semibold shadow-md hover:shadow-lg transition duration-200">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="w-5 h-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor">

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M12 4v16m8-8H4" />

                            </svg>

                            Add Availability

                        </button>

                    </div>

                </div>

            </form>

        </div>

        <!-- ================= WEEKLY SCHEDULE ================= -->
        <div
            class="overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm">

            <!-- Header -->
            <div
                class="border-b border-gray-200 bg-gradient-to-r from-slate-50 to-white px-6 py-5">

                <h3 class="text-lg font-semibold text-gray-800">
                    Weekly Schedule
                </h3>

                <p class="text-sm text-gray-500 mt-1">
                    Update or remove instructor available timings
                </p>

            </div>

            <!-- Responsive Table -->
            <div class="overflow-x-auto">

                <table class="w-full min-w-[850px] text-sm">

                    <thead class="bg-gray-50 text-gray-600">

                        <tr>

                            <th class="px-6 py-4 text-left font-semibold">
                                Day
                            </th>

                            <th class="px-6 py-4 text-left font-semibold">
                                Start Time
                            </th>

                            <th class="px-6 py-4 text-left font-semibold">
                                End Time
                            </th>

                            <th class="px-6 py-4 text-left font-semibold">
                                Update Time
                            </th>

                            <th class="px-6 py-4 text-right font-semibold">
                                Actions
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-100">

                        @forelse ($availability as $item)

                            <tr class="hover:bg-gray-50 transition">

                                <!-- Day -->
                                <td class="px-6 py-5">

                                    <div
                                        class="inline-flex items-center rounded-full bg-blue-50 px-4 py-1 text-sm font-medium text-blue-700">

                                        {{ $days[$item->day_of_week] }}

                                    </div>

                                </td>

                                <!-- Start -->
                                <td class="px-6 py-5 text-gray-700 font-medium">

                                    {{ \Carbon\Carbon::parse($item->start_time)->format('h:i A') }}

                                </td>

                                <!-- End -->
                                <td class="px-6 py-5 text-gray-700 font-medium">

                                    {{ \Carbon\Carbon::parse($item->end_time)->format('h:i A') }}

                                </td>

                                <!-- Update Form -->
                                <td class="px-6 py-5">

                                    <form method="POST"
                                        action="{{ route('admin.instructor.availability.update', $item->id) }}"
                                        class="flex flex-col xl:flex-row items-start xl:items-center gap-3">

                                        @csrf
                                        @method('PUT')

                                        <input type="time"
                                            name="start_time"
                                            value="{{ $item->start_time }}"
                                            class="h-11 rounded-xl border border-gray-300 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                                        <input type="time"
                                            name="end_time"
                                            value="{{ $item->end_time }}"
                                            class="h-11 rounded-xl border border-gray-300 bg-white px-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                                        <button
                                            class="inline-flex items-center justify-center h-11 px-5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition">

                                            Update

                                        </button>

                                    </form>

                                </td>

                                <!-- Delete -->
                                <td class="px-6 py-5 text-right">

                                    <form method="POST"
                                        action="{{ route('admin.instructor.availability.destroy', $item->id) }}">

                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                            class="inline-flex items-center justify-center w-11 h-11 rounded-full bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 transition">

                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                class="w-5 h-5"
                                                fill="none"
                                                viewBox="0 0 24 24"
                                                stroke="currentColor"
                                                stroke-width="2">

                                                <path stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-7 0h8" />

                                            </svg>

                                        </button>

                                    </form>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="5"
                                    class="px-6 py-14 text-center">

                                    <div class="flex flex-col items-center">

                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="w-14 h-14 text-gray-300 mb-4"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor">

                                            <path stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="1.5"
                                                d="M8 7V3m8 4V3m-9 8h10m-11 9h12a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v11a2 2 0 002 2z" />

                                        </svg>

                                        <h4 class="text-lg font-semibold text-gray-700">
                                            No Availability Found
                                        </h4>

                                        <p class="text-sm text-gray-500 mt-1">
                                            Add weekly availability to get started.
                                        </p>

                                    </div>

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</x-layouts.admin>