@section('page-title')
    Lesson Types
@endsection

@section('page-description')
    Manage all lesson pricing and configurations
@endsection

<x-layouts.admin>

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

        <div class="flex flex-col gap-3 md:gap-4 sm:flex-row sm:items-center sm:justify-end">

    <!-- Add Button -->
    <a href="{{ route('admin.lesson-types.create') }}"
        class="inline-flex items-center justify-center gap-2
        h-9 md:h-12
        px-4 md: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 md:text-sm
        font-semibold
        shadow-md hover:shadow-lg
        transition duration-200">

        <svg xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 md:w-5 md: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>

        Add Lesson Type

    </a>

</div>

<!-- FILTERS -->
<div class="rounded-2xl md:rounded-3xl border border-gray-200 bg-white p-3 md:p-5 shadow-sm">

    <form method="GET">

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

            <!-- Lesson Type Code -->
            <div class="relative">

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

                    <path stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m21 21-4.34-4.34" />

                    <circle cx="11"
                        cy="11"
                        r="8" />

                </svg>

                <input type="text"
                    name="lesson_type_code"
                    placeholder="Search lesson code..."
                    value="{{ request('lesson_type_code') }}"
                    class="w-full
                    h-9 md:h-12
                    rounded-xl md:rounded-2xl
                    border border-gray-300 bg-white
                    pl-9 md:pl-11 pr-3 md:pr-4
                    text-xs md:text-sm
                    text-gray-700 placeholder-gray-400
                    shadow-sm transition
                    focus:border-blue-500
                    focus:outline-none
                    focus:ring-2 md:focus:ring-4
                    focus:ring-blue-100">

            </div>

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

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

                    <path stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m21 21-4.34-4.34" />

                    <circle cx="11"
                        cy="11"
                        r="8" />

                </svg>

                <input type="text"
                    name="description"
                    placeholder="Search description..."
                    value="{{ request('description') }}"
                    class="w-full
                    h-9 md:h-12
                    rounded-xl md:rounded-2xl
                    border border-gray-300 bg-white
                    pl-9 md:pl-11 pr-3 md:pr-4
                    text-xs md:text-sm
                    text-gray-700 placeholder-gray-400
                    shadow-sm transition
                    focus:border-blue-500
                    focus:outline-none
                    focus:ring-2 md:focus:ring-4
                    focus:ring-blue-100">

            </div>

            <!-- Per Page -->
            <div>

                <select name="per_page"
                    onchange="this.form.submit()"
                    class="w-full
                    h-9 md:h-12
                    rounded-xl md:rounded-2xl
                    border border-gray-300 bg-white
                    px-3 md:px-4
                    text-xs md:text-sm
                    text-gray-700
                    shadow-sm transition
                    focus:border-blue-500
                    focus:outline-none
                    focus:ring-2 md:focus:ring-4
                    focus:ring-blue-100">

                    <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>
                        10 Per Page
                    </option>

                    <option value="15" {{ request('per_page') == 15 ? 'selected' : '' }}>
                        15 Per Page
                    </option>

                    <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>
                        20 Per Page
                    </option>

                    <option value="30" {{ request('per_page') == 30 ? 'selected' : '' }}>
                        30 Per Page
                    </option>

                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>
                        50 Per Page
                    </option>

                </select>

            </div>

            <!-- Filter -->
            <button type="submit"
                class="inline-flex items-center justify-center gap-2
                h-9 md:h-12
                rounded-full
                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-semibold
                shadow-md hover:shadow-lg
                transition duration-200">

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

                    <path stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707L14 14v5a1 1 0 01-1.447.894l-2-1A1 1 0 0110 18v-4L3.293 6.293A1 1 0 013 5.586V4z" />

                </svg>

                Filter

            </button>

            <!-- Reset -->
            <a href="{{ route('admin.lesson-types.index') }}"
                class="inline-flex items-center justify-center
                h-9 md:h-12
                rounded-full
                border border-gray-300
                bg-white
                px-4 md:px-6
                text-xs md:text-sm
                font-medium text-gray-700
                transition hover:bg-gray-50">

                Reset

            </a>

        </div>

    </form>

</div>

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

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

        <table class="min-w-full text-sm">

            <!-- TABLE HEADER -->
            <thead class="bg-gradient-to-r from-gray-50 to-gray-100 text-xs uppercase tracking-wider text-gray-500 border-b border-gray-200">

                <tr>

                    <th class="px-6 py-4 text-left font-medium">ID</th>

                    <th class="px-6 py-4 text-left font-medium">
                        Lesson Type
                    </th>

                    <th class="px-6 py-4 text-left font-medium">
                        Duration 
                    </th>

                    <th class="px-6 py-4 text-left font-medium">
                        Note
                    </th>

                    <th class="px-6 py-4 text-left font-medium">
                        Price
                    </th>

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

                </tr>

            </thead>

            <!-- TABLE BODY -->
            <tbody class="divide-y divide-gray-100 bg-white">

                @forelse ($lessonTypes as $lesson)

                    <tr class="hover:bg-blue-50/40 transition duration-200">

                        <!-- ID -->
                        <td class="px-6 py-4 text-gray-700 font-medium whitespace-nowrap">
                            #{{ $lesson->id }}
                        </td>

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

                            <div class="font-semibold text-gray-800">
                                {{ $lesson->lesson_type_code }}
                            </div>

                            <div class="text-sm text-gray-500 mt-1">
                                {{ $lesson->description ?: 'No description available' }}
                            </div>

                        </td>

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

                            <span
                                class="inline-flex items-center px-3 py-1.5 rounded-full bg-blue-500/10 text-blue-600 text-xs font-semibold ring-1 ring-inset ring-blue-600/20">

                                {{ $lesson->duration }} Minutes

                            </span>

                        </td>

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

                            <span
                                class="inline-flex items-center px-3 py-1.5 rounded-full bg-purple-500/10 text-purple-600 text-xs font-semibold ring-1 ring-inset ring-purple-600/20">

                                {{ $lesson->note ?? '-'}}

                            </span>

                        </td>

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

                            <span
                                class="inline-flex items-center px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-600 text-sm font-semibold ring-1 ring-inset ring-emerald-600/20">

                                ${{ number_format($lesson->unit_price, 2) }}

                            </span>

                        </td>

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

                            <div class="flex justify-end gap-2">

                                <!-- Edit -->
                                <a href="{{ route('admin.lesson-types.edit', $lesson->id) }}"
                                    title="Edit"
                                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-zinc-500/10 hover:bg-zinc-500/20 text-zinc-600 transition duration-200">

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

                                        <path stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="M12 20h9" />

                                        <path stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5Z" />

                                    </svg>

                                </a>

                                <!-- Delete -->
                                <form action="{{ route('admin.lesson-types.destroy', $lesson->id) }}"
                                    method="POST">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        title="Delete"
                                        class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-red-500/10 hover:bg-red-600/20 text-red-500 transition duration-200">

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

                                            <path d="M10 11v6"></path>

                                            <path d="M14 11v6"></path>

                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>

                                            <path d="M3 6h18"></path>

                                            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>

                                        </svg>

                                    </button>

                                </form>

                            </div>

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td colspan="6"
                            class="px-6 py-16 text-center text-gray-500">

                            No lesson types found

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

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

    @forelse ($lessonTypes as $lesson)

        <div
            class="rounded-2xl bg-white border border-gray-200 shadow-sm p-4">

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

                <div class="min-w-0">

                    <div class="text-[10px] text-gray-400 uppercase tracking-wider">
                        #{{ $lesson->id }}
                    </div>

                    <div class="font-semibold text-gray-800 truncate">
                        {{ $lesson->lesson_type_code }}
                    </div>

                    <div class="text-xs text-gray-500 mt-1 line-clamp-1">
                        {{ $lesson->description ?: 'No description available' }}
                    </div>

                </div>

                <div class="text-right shrink-0">

                    <div class="text-[10px] text-gray-400 uppercase tracking-wider">
                        Price
                    </div>

                    <div class="font-bold text-emerald-600 tabular-nums">
                        ${{ number_format($lesson->unit_price, 2) }}
                    </div>

                </div>

            </div>

            <!-- Hours -->
            <div class="mt-4 grid grid-cols-2 gap-2">

                <!-- Student -->
                <div
                    class="rounded-xl bg-blue-50 px-3 py-2 border border-blue-100">

                    <div class="text-[10px] uppercase tracking-wider text-gray-500">
                        Student
                    </div>

                    <div class="font-semibold text-blue-600">
                        {{ $lesson->hours_students }} hr
                    </div>

                </div>

                <!-- Teacher -->
                <div
                    class="rounded-xl bg-purple-50 px-3 py-2 border border-purple-100">

                    <div class="text-[10px] uppercase tracking-wider text-gray-500">
                        Teacher
                    </div>

                    <div class="font-semibold text-purple-600">
                        {{ $lesson->hours_teachers }} hr
                    </div>

                </div>

            </div>

            <!-- Actions -->
            <div class="mt-4 grid grid-cols-2 gap-2">

                <!-- Edit -->
                <a href="{{ route('admin.lesson-types.edit', $lesson->id) }}"
                    class="h-10 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold inline-flex items-center justify-center gap-1.5 transition">

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

                        <path stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M12 20h9" />

                        <path stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5Z" />

                    </svg>

                    Edit

                </a>

                <!-- Delete -->
                <form action="{{ route('admin.lesson-types.destroy', $lesson->id) }}"
                    method="POST">

                    @csrf
                    @method('DELETE')

                    <button type="submit"
                        class="w-full h-10 rounded-xl bg-red-500 hover:bg-red-600 text-white text-xs font-semibold inline-flex items-center justify-center gap-1.5 transition">

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

                            <path d="M10 11v6"></path>

                            <path d="M14 11v6"></path>

                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>

                            <path d="M3 6h18"></path>

                            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>

                        </svg>

                        Delete

                    </button>

                </form>

            </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 lesson types found
            </p>

        </div>

    @endforelse

</div>

        <!-- PAGINATION -->
        <div>
            {{ $lessonTypes->links() }}
        </div>

    </div>

</x-layouts.admin>