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

@section('page-description')
    Manage instructor lesson rates and pricing
@endsection

<x-layouts.admin>

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

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

            <!-- Left Side -->
            <div class="flex items-center gap-3">

                <!-- Back Button -->
                <a href="{{ route('admin.instructors.index') }}"
                    class="inline-flex items-center justify-center gap-2 h-11 px-5 rounded-full border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-medium shadow-sm 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 19-7-7 7-7" />

                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 12H5" />

                    </svg>

                    Back

                </a>
            </div>

            <!-- Add Button -->
            <a href="{{ route('admin.instructors.rates.create', $instructor->id) }}"
                class="inline-flex items-center justify-center gap-2 h-11 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-sm font-medium 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" stroke-width="2">

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

                </svg>

                Add Rate

            </a>

        </div>

        <!-- ================= ERROR MESSAGE ================= -->
        @if ($errors->any())

            <div class="rounded-2xl border border-red-200 bg-red-50 p-5">

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

                    <div class="h-10 w-10 rounded-xl bg-red-100 flex items-center justify-center flex-shrink-0">

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

                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />

                        </svg>

                    </div>

                    <div>

                        <h4 class="font-semibold text-red-700">
                            Please fix the following errors
                        </h4>

                        <ul class="mt-2 space-y-1 text-sm text-red-600 list-disc pl-5">

                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach

                        </ul>

                    </div>

                </div>

            </div>

        @endif



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

                <table class="w-full">

                    <thead class="bg-gray-50 border-b border-gray-100">

                        <tr>

                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Lesson Type
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Rate
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                From Date
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                To Date
                            </th>

                            <th
                                class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Action
                            </th>

                        </tr>

                    </thead>

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

                        @forelse($rates as $rate)
                            <tr class="hover:bg-blue-50/30 transition">

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

                                    <div
                                        class="inline-flex items-center px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-medium">

                                        {{ $rate->lessonType->lesson_type_code ?? 'N/A' }}

                                    </div>

                                </td>

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

                                    <p class="font-bold text-green-600">
                                        $ {{ number_format($rate->rate ?? 0, 2) }}
                                    </p>

                                </td>

                                <td class="px-6 py-5 text-sm text-gray-700">
                                    {{ $rate->from_date ? \Carbon\Carbon::parse($rate->from_date)->format('d M Y') : 'N/A' }}
                                </td>

                                <td class="px-6 py-5 text-sm text-gray-700">
                                    {{ $rate->to_date ? \Carbon\Carbon::parse($rate->to_date)->format('d M Y') : 'N/A' }}
                                </td>

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

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

                                        <!-- Edit Button -->
                                        <a href="{{ route('admin.instructor-rates.edit', $rate->id) }}"
                                            class="inline-flex items-center gap-1 px-3 py-3 rounded-full bg-zinc-600/10 hover:bg-zinc-600/20 text-zinc-500 text-xs font-medium transition">

                                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5" />

                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />

                                            </svg>
                                        </a>

                                        <!-- Delete Button -->
                                        <form action="{{ route('admin.instructor-rates.destroy', $rate->id) }}"
                                            method="POST">

                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                onclick="return confirm('Are you sure you want to delete this rate?')"
                                                class="inline-flex items-center gap-1 px-3 py-3 rounded-full bg-red-500/10 hover:bg-red-600/20 text-red-500 text-xs font-medium transition delete-btn">

                                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7" />

                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M10 11v6m4-6v6" />

                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3M4 7h16" />

                                                </svg>

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

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

                                        <div
                                            class="h-16 w-16 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">

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

                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M9 12h6m-6 4h6M7 4h10a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z" />

                                            </svg>

                                        </div>

                                        <h4 class="text-lg font-semibold text-gray-800">
                                            No rates found
                                        </h4>

                                        <p class="text-sm text-gray-500 mt-1">
                                            No instructor rates are available right now.
                                        </p>

                                    </div>

                                </td>

                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

            <!-- Mobile Cards -->
            <div class="lg:hidden divide-y divide-gray-100">

                @forelse($rates as $rate)
                    <div class="p-5 space-y-4">

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

                            <div>

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

                                <h4 class="font-semibold text-gray-900 mt-1">
                                    {{ $rate->lessonType->lesson_type_code ?? 'N/A' }}
                                </h4>

                            </div>

                            <div class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-semibold">

                                $ {{ number_format($rate->rate ?? 0, 2) }}

                            </div>

                        </div>

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

                            <div>

                                <p class="text-xs text-gray-500">
                                    From Date
                                </p>

                                <p class="text-sm font-medium text-gray-800 mt-1">
                                    {{ $rate->from_date ? \Carbon\Carbon::parse($rate->from_date)->format('d M Y') : 'N/A' }}
                                </p>

                            </div>

                            <div>

                                <p class="text-xs text-gray-500">
                                    To Date
                                </p>

                                <p class="text-sm font-medium text-gray-800 mt-1">
                                    {{ $rate->to_date ? \Carbon\Carbon::parse($rate->to_date)->format('d M Y') : 'N/A' }}
                                </p>

                            </div>

                        </div>

                        <div class="flex items-center gap-3 pt-2">
                            <!-- Edit -->
                            <a href="{{ route('admin.instructor-rates.edit', $rate->id) }}"
                                class="flex-1 inline-flex items-center justify-center gap-2 h-11 rounded-xl bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-medium transition">

                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5" />

                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />

                                </svg>


                            </a>

                            <!-- Delete -->
                            <form action="{{ route('admin.instructor-rates.destroy', $rate->id) }}" method="POST"
                                class="flex-1">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                    onclick="return confirm('Are you sure you want to delete this rate?')"
                                    class="w-full inline-flex items-center justify-center gap-2 h-11 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition">

                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7" />

                                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 11v6m4-6v6" />

                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3M4 7h16" />

                                    </svg>


                                </button>

                            </form>

                        </div>

                    </div>

                @empty

                    <div class="p-10 text-center">

                        <p class="text-gray-500">
                            No rates found
                        </p>

                    </div>
                @endforelse

            </div>


        </div>
        <!-- Pagination -->
        @if ($rates->hasPages())
            <div class="p-5 border-t border-gray-100">

                {{ $rates->links() }}

            </div>
        @endif

    </div>

</x-layouts.admin>