@section('page-title')
    {{ $rate ? 'Edit Instructor Rate' : 'Add Instructor Rate' }}
@endsection

<x-layouts.admin>
    <div class="mx-auto w-full space-y-6">

                    <!-- Back -->
                    <a href="{{ route('admin.instructors.rates', $instructor->id ?? $rate->instructor_id) }}"
                        class="inline-flex items-center justify-center h-11 px-5 rounded-full border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:bg-gray-50 transition">

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


        <!-- Main Card -->
        <div class="overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm mt-4">
            <!-- Form -->
            <form method="POST"
                action="{{ $rate ? route('admin.instructor-rates.update', $rate->id) : route('admin.instructor-rates.store') }}"
                class="p-5 md:p-8 space-y-2">

                @csrf

                @if ($rate)
                    @method('PUT')
                @endif

                <input type="hidden"
                    name="instructor_id"
                    value="{{ $instructor->id ?? $rate->instructor_id }}">

                <!-- Success -->
                @if (session('success'))
                    <div
                        class="rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">

                        {{ session('success') }}

                    </div>
                @endif

                <!-- Errors -->
                @if ($errors->any())
                    <div
                        class="rounded-2xl border border-red-200 bg-red-50 px-5 py-4">

                        <div class="flex items-center gap-2 text-red-700 mb-3">

                            <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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>

                            <span class="font-semibold">
                                Please fix the following errors
                            </span>

                        </div>

                        <ul class="list-disc pl-5 text-sm text-red-600 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>

                    </div>
                @endif

                <!-- ================= RATE DETAILS ================= -->
                <div>

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

                        <!-- Lesson Type -->
                        <div>

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

                            <select name="lesson_type_id"
                                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-blue-500">

                                <option value="">
                                    Select Lesson Type
                                </option>

                                @foreach ($lessonTypes as $lesson)

                                    <option value="{{ $lesson->id }}"
                                        {{ old('lesson_type_id', $rate->lesson_type_id ?? '') == $lesson->id ? 'selected' : '' }}>

                                        {{ $lesson->lesson_type_code }}

                                    </option>

                                @endforeach

                            </select>

                        </div>

                        <!-- Hourly Rate -->
                        <div>

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

                            <div class="relative">

                                <span
                                    class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">
                                    $
                                </span>

                                <input type="number"
                                    step="0.01"
                                    name="rate"
                                    value="{{ old('rate', $rate->rate ?? '') }}"
                                    placeholder="Enter rate"
                                    class="w-full h-12 rounded-2xl border border-gray-300 bg-white pl-8 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                            </div>

                        </div>

                        <!-- From Date -->
                        <div>

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

                            <input type="date"
                                name="from_date"
                                value="{{ old('from_date', $rate->from_date ?? '') }}"
                                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-blue-500">

                        </div>

                        <!-- To Date -->
                        <div>

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

                            <input type="date"
                                name="to_date"
                                value="{{ old('to_date', $rate->to_date ?? '') }}"
                                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-blue-500">

                        </div>

                    </div>

                </div>
            
                <!-- ================= ACTION BUTTONS ================= -->
                <div class="flex flex-col-reverse sm:flex-row justify-end gap-3 pt-2">

                    <!-- Cancel -->
                    <a href="{{ route('admin.instructors.rates', $instructor->id ?? $rate->instructor_id) }}"
                        class="inline-flex items-center justify-center h-12 px-6 rounded-full border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:bg-gray-50 transition">

                        Cancel

                    </a>

                    <!-- Submit -->
                    <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"
                            stroke-width="2">

                            <path stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M5 13l4 4L19 7" />

                        </svg>

                        {{ $rate ? 'Update Rate' : 'Save Rate' }}

                    </button>

                </div>

            </form>

        </div>


</x-layouts.admin>