@section('page-title')
    Booking Management
@endsection
@section('page-description')
    Manage all student lessons
@endsection
<x-layouts.admin>
    <div class="mx-auto w-full space-y-6">

        <!-- Header -->


        <div class="rounded-2xl bg-card border border-border shadow-card p-3 md:p-4 lg:p-5 bg-white">

            <form method="GET">

                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-7 gap-3 md:gap-4">

                    <!-- Student -->
                    <div class="relative">

                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 w-4 h-4 md:w-5 md:h-5 text-gray-400"
                            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />

                            <circle cx="10" cy="7" r="4"></circle>

                        </svg>

                        <input type="text" name="student" placeholder="Student Name" value="{{ request('student') }}"
                            class="w-full
                    h-9 md:h-11
                    pl-9 md:pl-10 pr-3 md:pr-4
                    rounded-full
                    border border-gray-300
                    bg-gray-100/30
                    text-xs md:text-sm
                    text-gray-700 placeholder-gray-400
                    focus:outline-none
                    focus:ring-2 focus:ring-blue-500
                    focus:border-transparent
                    transition duration-200">

                    </div>

                    <!-- Instructor -->
                    <div class="relative">

                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 w-4 h-4 md:w-5 md:h-5 text-gray-400"
                            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z" />

                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 14l6.16-3.422A12.083 12.083 0 0 1 20 17.944" />

                        </svg>

                        <input type="text" name="instructor" placeholder="Instructor Name"
                            value="{{ request('instructor') }}"
                            class="w-full
                    h-9 md:h-11
                    pl-9 md:pl-10 pr-3 md:pr-4
                    rounded-full
                    border border-gray-300
                    bg-gray-100/30
                    text-xs md:text-sm
                    text-gray-700 placeholder-gray-400
                    focus:outline-none
                    focus:ring-2 focus:ring-blue-500
                    focus:border-transparent
                    transition duration-200">

                    </div>
                    <!-- Lesson Type -->
                    <div class="relative">
                        <select name="lesson_type"
                            class="w-full
                    h-9 md:h-11
                    pl-4 md:pl-5 pr-3 md:pr-4
                    rounded-full
                    border border-gray-300
                    bg-gray-100/30
                    text-xs md:text-sm
                    text-gray-700
                    focus:outline-none
                    focus:ring-2 focus:ring-blue-500
                    focus:border-transparent
                    transition duration-200">
                            <option value="">Lesson</option>
                            @foreach ($lessonTypes as $type)
                                <option value="{{ $type->id }}"
                                    {{ request('lesson_type') == $type->id ? 'selected' : '' }}>
                                    {{ $type->lesson_type_code }}
                                </option>
                            @endforeach
                        </select>
                    </div>


                    <!-- Date -->
                    <div class="relative">

                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 w-4 h-4 md:w-5 md:h-5 text-gray-400"
                            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                            <rect x="3" y="4" width="18" height="18" rx="2"></rect>

                            <line x1="16" y1="2" x2="16" y2="6"></line>

                            <line x1="8" y1="2" x2="8" y2="6"></line>

                            <line x1="3" y1="10" x2="21" y2="10"></line>

                        </svg>

                        <input type="date" name="date" value="{{ request('date') }}"
                            class="w-full
                    h-9 md:h-11
                    pl-9 md:pl-10 pr-3 md:pr-4
                    rounded-full
                    border border-gray-300
                    bg-gray-100/30
                    text-xs md:text-sm
                    text-gray-700 placeholder-gray-400
                    focus:outline-none
                    focus:ring-2 focus:ring-blue-500
                    focus:border-transparent
                    transition duration-200">

                    </div>

                    <!-- Status -->
                    <div class="relative">

                        <select name="datefilter"
                            class="w-full
                    h-9 md:h-11
                    pl-4 md:pl-5 pr-3 md:pr-4
                    rounded-full
                    border border-gray-300
                    bg-gray-100/30
                    text-xs md:text-sm
                    text-gray-700
                    focus:outline-none
                    focus:ring-2 focus:ring-blue-500
                    focus:border-transparent
                    transition duration-200">

                            <option value="">Sort</option>
                            <option value="dateAsc" {{ request('datefilter') == 'dateAsc' ? 'selected' : '' }}>
                                Date Ascending
                            </option>
                            <option value="dateDesc" {{ request('datefilter') == 'dateDesc' ? 'selected' : '' }}>
                                Date Descending
                            </option>
                            <option value="oldest" {{ request('datefilter') == 'oldest' ? 'selected' : '' }}>
                                Oldest Bookings
                            </option>
                            <option value="newest" {{ request('datefilter') == 'newest' ? 'selected' : '' }}>
                                Newest Bookings
                            </option>
                            <option value="paid" {{ request('datefilter') == 'paid' ? 'selected' : '' }}>
                                Paid
                            </option>
                            <option value="unpaid" {{ request('datefilter') == 'unpaid' ? 'selected' : '' }}>
                                Unpaid
                            </option>


                        </select>

                    </div>

                    <!-- Per Page -->
                    <div class="relative">

                        <select name="per_page"
                            class="w-full
                    h-9 md:h-11
                    pl-4 md:pl-5 pr-3 md:pr-4
                    rounded-full
                    border border-gray-300
                    bg-gray-100/30
                    text-xs md:text-sm
                    text-gray-700
                    focus:outline-none
                    focus:ring-2 focus:ring-blue-500
                    focus:border-transparent
                    transition duration-200">

                            <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>
                                10 Per Page
                            </option>

                            <option value="15" {{ $perPage == 15 ? 'selected' : '' }}>
                                15 Per Page
                            </option>

                            <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>
                                20 Per Page
                            </option>

                            <option value="30" {{ $perPage == 30 ? 'selected' : '' }}>
                                30 Per Page
                            </option>

                            <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>
                                50 Per Page
                            </option>

                            <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>
                                100 Per Page
                            </option>

                        </select>

                    </div>

                    <!-- Buttons -->
                    <div class="flex gap-2 md:gap-3">

                        <!-- Apply -->
                        <button type="submit"
                            class="flex-1
                    h-8 md:h-10
                    rounded-md
                    bg-gradient-to-r from-blue-500 to-indigo-600
                    hover:from-blue-600 hover:to-indigo-700
                    text-white
                    text-xs md:text-sm
                    font-medium
                    shadow-md hover:shadow-lg
                    transition">

                            Apply

                        </button>

                        <!-- Reset -->
                        <a href="{{ route('admin.bookings.index') }}"
                            class="flex-1 inline-flex items-center justify-center
                    h-8 md:h-10
                    rounded-md
                    border border-gray-300
                    bg-white
                    text-gray-700
                    text-xs md:text-sm
                    font-medium
                    hover:bg-gray-50
                    transition">

                            Reset

                        </a>

                    </div>

                </div>

            </form>

        </div>


        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 lg:gap-4 ">

            <!-- Status Tabs -->
            <div class="flex flex-nowrap gap-1.5 lg:gap-2 overflow-x-auto pb-1 scrollbar-hide">

                <a href="{{ route('admin.bookings.index') }}"
                    class="inline-flex items-center gap-1.5 px-3 lg:px-5 h-9 lg:h-11 rounded-full whitespace-nowrap border text-xs lg:text-sm font-medium transition duration-200
            {{ request('status') == null
                ? 'bg-gradient-to-r from-indigo-500 to-blue-500 border-indigo-500 text-white shadow-md'
                : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                    All ({{ $counts['all'] }})
                </a>

                <a href="{{ route('admin.bookings.index', ['status' => 'pending']) }}"
                    class="inline-flex items-center gap-1.5 px-3 lg:px-5 h-9 lg:h-11 rounded-full whitespace-nowrap border text-xs lg:text-sm font-medium transition duration-200
            {{ request('status') == 'pending'
                ? 'bg-yellow-500 border-yellow-500 text-white shadow-md'
                : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                    Pending ({{ $counts['pending'] }})
                </a>

                <a href="{{ route('admin.bookings.index', ['status' => 'completed']) }}"
                    class="inline-flex items-center gap-1.5 px-3 lg:px-5 h-9 lg:h-11 rounded-full whitespace-nowrap border text-xs lg:text-sm font-medium transition duration-200
            {{ request('status') == 'completed'
                ? 'bg-green-500 border-green-500 text-white shadow-md'
                : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                    Completed ({{ $counts['completed'] }})
                </a>

                <a href="{{ route('admin.bookings.index', ['status' => 'cancelled']) }}"
                    class="inline-flex items-center gap-1.5 px-3 lg:px-5 h-9 lg:h-11 rounded-full whitespace-nowrap border text-xs lg:text-sm font-medium transition duration-200
            {{ request('status') == 'cancelled'
                ? 'bg-red-500 border-red-500 text-white shadow-md'
                : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                    Cancelled ({{ $counts['cancelled'] }})
                </a>

                <a href="{{ route('admin.bookings.index', ['status' => 'upcoming']) }}"
                    class="inline-flex items-center gap-1.5 px-3 lg:px-5 h-9 lg:h-11 rounded-full whitespace-nowrap border text-xs lg:text-sm font-medium transition duration-200
            {{ request('status') == 'upcoming'
                ? 'bg-blue-500 border-blue-500 text-white shadow-md'
                : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                    Upcoming ({{ $counts['upcoming'] }})
                </a>

            </div>

            <!-- Action Buttons -->
            <div class="flex flex-wrap gap-2 lg:gap-3">

                <!-- New Booking -->
                <a href="{{ route('admin.bookings.create.select.instructor') }}"
                    class="inline-flex items-center justify-center gap-1.5 lg:gap-2 h-10 lg:h-11 px-4 lg:px-6 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-xs lg:text-sm font-medium shadow-md hover:shadow-lg transition duration-200">

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

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

                    </svg>

                    New Booking

                </a>

                <!-- Add Student -->
                <a href="{{ route('admin.students.create') }}"
                    class="inline-flex items-center justify-center gap-1.5 lg:gap-2 h-10 lg:h-11 px-4 lg:px-6 rounded-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white text-xs lg:text-sm font-medium shadow-md hover:shadow-lg transition duration-200">

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

                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />

                        <circle cx="10" cy="7" r="4"></circle>

                        <line x1="20" y1="8" x2="20" y2="14"></line>

                        <line x1="23" y1="11" x2="17" y2="11"></line>

                    </svg>

                    Add Student

                </a>

            </div>

        </div>

        <!-- Desktop Table -->
        <!-- Desktop Table -->
        <div class="hidden md:block bg-white rounded-3xl border border-gray-200 shadow-sm overflow-hidden">

            <div class="overflow-x-auto">

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

                    <thead
                        class="bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 border-b border-gray-200 uppercase">

                        <tr>
                            <th class="px-6 py-4 font-semibold text-xs">#</th>
                            <th class="px-6 py-4 font-semibold text-xs">Date</th>
                            <th class="px-6 py-4 font-semibold text-xs">Student</th>
                            <th class="px-6 py-4 font-semibold text-xs">Instructor</th>
                            <th class="px-6 py-4 font-semibold text-xs">Lesson</th>
                            <th class="px-6 py-4 font-semibold text-xs">Unit</th>
                            <th class="px-6 py-4 font-semibold text-xs">Time</th>
                            <th class="px-6 py-4 font-semibold text-xs">Status</th>
                            <th class="px-6 py-4 font-semibold text-xs"></th>
                        </tr>

                    </thead>

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

                        @forelse($bookings as $key => $booking)
                            <tr class="hover:bg-blue-50/40 transition duration-200 cursor-pointer {{ $booking->lessonType->lesson_type_code == '1HPT' ? 'bg-orange-200 hover:bg-orange-300' : '' }}
        {{ $booking->lessonType->lesson_type_code == 'CH' ? 'bg-blue-200 hover:bg-blue-300' : '' }}"
                                onclick="window.location='{{ route('admin.bookings.edit', $booking->id) }}'">

                                <td class="px-6 py-4 font-medium text-gray-900">
                                    {{ $bookings->firstItem() + $key }}
                                </td>
                                <!-- Date -->
                                <td class="px-6 py-4 whitespace-nowrap text-gray-700">
                                    {{ \Carbon\Carbon::parse($booking->lesson_date)->format('d M Y') }}
                                </td>

                                <!-- Student -->
                                <td class="px-6 py-4 font-medium text-gray-800">
                                    {{ $booking->student->user->full_name ?? '-' }}
                                </td>

                                <!-- Instructor -->
                                <td class="px-6 py-4 text-gray-700">
                                    {{ $booking->instructor->user->name ?? '-' }}
                                </td>

                                <!-- Lesson -->
                                <td class="px-6 py-4 text-gray-700">
                                    {{ $booking->lessonType->lesson_type_code ?? '-' }}
                                </td>

                                <!-- Unit -->
                                <td class="px-6 py-4 text-gray-700">
                                    {{ $booking->unit ?? '-' }}
                                </td>

                                <!-- Time -->
                                <td class="px-6 py-4 whitespace-nowrap text-gray-600">

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

                                </td>

                                <!-- Status -->
                                <td class="px-6 py-4">

                                    @if ($booking->status == 'pending')
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">

                                            <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
                                            Pending

                                        </span>
                                    @elseif($booking->status == 'completed')
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">

                                            <span class="w-2 h-2 rounded-full bg-green-500"></span>
                                            Completed

                                        </span>
                                    @elseif($booking->status == 'cancelled')
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600">

                                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                            Cancelled

                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-600">

                                            <span class="w-2 h-2 rounded-full bg-blue-500"></span>
                                            {{ ucfirst($booking->status) }}

                                        </span>
                                    @endif

                                </td>
                                <td>
                                    {{-- show right tick if paid else cross red svg --}}
                                    @if ($booking->payment_status == 'paid')
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="w-5 h-5 text-green-500 inline-block ml-2" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
                                        </svg>
                                    @else
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="w-5 h-5 text-red-500 inline-block ml-2" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
                                        </svg>
                                    @endif
                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="6" class="px-6 py-12 text-center text-gray-400">

                                    No bookings found

                                </td>

                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        <!-- Mobile Cards -->
        <div class="md:hidden mt-4 space-y-3">

            @forelse($bookings as $key => $booking)
                <div onclick="window.location='{{ route('admin.bookings.edit', $booking->id) }}'"
                    class="rounded-2xl bg-white border border-gray-200 shadow-sm p-4 cursor-pointer active:scale-[0.98] transition">

                    <div class="flex items-start justify-between gap-3">

                        <!-- Left -->
                        <div class="flex items-center gap-3 min-w-0">

                            <!-- Date Box -->
                            <div
                                class="h-12 w-12 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 text-white flex flex-col items-center justify-center shrink-0 shadow-sm">

                                <span class="text-[9px] uppercase opacity-80 leading-none">
                                    {{ \Carbon\Carbon::parse($booking->lesson_date)->format('M') }}
                                </span>

                                <span class="text-sm font-bold leading-none mt-0.5">
                                    {{ \Carbon\Carbon::parse($booking->lesson_date)->format('d') }}
                                </span>

                            </div>



                            <!-- Student / Instructor -->
                            <div class="min-w-0">

                                <div class="font-semibold text-sm text-gray-800 truncate">
                                    {{ $booking->student->user->full_name ?? '-' }}
                                </div>

                                <div class="text-xs text-gray-500 truncate">
                                    with {{ $booking->instructor->user->full_name ?? '-' }}
                                </div>

                            </div>

                        </div>

                        <!-- Status -->
                        <div>
                            @php $serialno = $key + 1; @endphp

                            @if ($booking->status == 'pending')
                                <span
                                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200">

                                    <span class="h-1.5 w-1.5 rounded-full bg-yellow-500"></span>
                                    Pending

                                </span>
                                <span>{{ '#' . $serialno }}</span>
                            @elseif($booking->status == 'completed')
                                <span
                                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium bg-green-100 text-green-700 ring-1 ring-green-200">

                                    <span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>
                                    Completed

                                </span>
                                <span>{{ '#' . $serialno }}</span>
                            @elseif($booking->status == 'cancelled')
                                <span
                                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium bg-red-100 text-red-600 ring-1 ring-red-200">

                                    <span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>
                                    Cancelled

                                </span>
                                <span>{{ '#' . $serialno }}</span>
                            @else
                                <span
                                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium bg-blue-100 text-blue-600 ring-1 ring-blue-200">

                                    <span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>
                                    {{ ucfirst($booking->status) }}

                                </span>
                            @endif


                        </div>
                    </div>

                    <!-- Bottom -->
                    <div class="mt-2 flex items-center justify-between">

                        <div>
                            <div class="text-xs text-gray-500">
                                Lesson
                            </div>

                            <div class="text-sm font-medium text-gray-700">
                                {{ $booking->lessonType->lesson_type_code ?? '-' }}
                            </div>


                        </div>

                        <div class="text-xs text-gray-500 mt-1">
                            Unit
                            <div class="text-sm font-medium text-gray-700">
                                {{ $booking->unit ?? '-' }}
                            </div>
                        </div>

                        <div class="text-right">

                            <div class="text-xs text-gray-500">
                                Time
                            </div>

                            <div class="text-sm font-semibold text-gray-800 tabular-nums">

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

                            </div>

                        </div>

                    </div>

                </div>

            @empty

                <div class="rounded-2xl border border-dashed border-gray-300 bg-white p-10 text-center">

                    <p class="text-sm text-gray-400">
                        No bookings found
                    </p>

                </div>
            @endforelse
            <!-- Pagination -->
            <div class="py-4 ">
                {{ $bookings->links() }}
            </div>

        </div>
    </div>

</x-layouts.admin>