@section('page-title')
    {{ $lessonType ? 'Edit Lesson Type' : 'Add Lesson Type' }}
@endsection

@section('page-description')
    Configure lesson type details and pricing
@endsection

<x-layouts.admin>
    <!-- Back Button -->
    <a href="{{ route('admin.lesson-types.index') }}"
        class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-900 transition mb-6">

        <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 to lesson types

    </a>

    <main class="max-w-[768px] mx-auto w-full space-y-6">
        <!-- Form Card -->
        <div class="max-w-4xl mx-auto rounded-3xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            <form method="POST"
                action="{{ $lessonType ? route('admin.lesson-types.update', $lessonType->id) : route('admin.lesson-types.store') }}"
                class="p-5 lg:p-8 space-y-6">

                @csrf

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

                <!-- ================= BASIC INFO ================= -->
                <section class="space-y-5">

                    <div>

                        <h3 class="text-lg font-semibold text-gray-900">
                            Basic Information
                        </h3>

                        <p class="text-sm text-gray-500 mt-1">
                            Code and invoice handling for this lesson type.
                        </p>

                    </div>

                    <div class="space-y-4">

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

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

                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M20.59 13.41 11 23H4v-7l9.59-9.59a2 2 0 0 1 2.82 0l4.18 4.18a2 2 0 0 1 0 2.82Z" />

                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 6l3 3" />

                            </svg>

                            <input type="text" name="lesson_type_code"
                                value="{{ old('lesson_type_code', $lessonType->lesson_type_code ?? '') }}"
                                placeholder=" "
                                class="peer w-full h-14 rounded-2xl border border-gray-300 bg-gray-50/60 pl-11 pr-4 pt-5 text-sm text-gray-800 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-100 transition">
                            <label for="lesson_type_code"
                                class="absolute left-11 top-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400 transition-all
                                peer-placeholder-shown:top-1/2
                                peer-placeholder-shown:-translate-y-1/2
                                peer-placeholder-shown:text-sm
                                peer-placeholder-shown:normal-case
                                peer-placeholder-shown:tracking-normal
                                peer-focus:top-2
                                peer-focus:translate-y-0
                                peer-focus:text-[11px]
                                peer-focus:uppercase
                                peer-focus:tracking-wider">

                                Lesson Code

                            </label>

                        </div>

                        <div class="relative">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path
                                    d="M12 7V12L13.5 14.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                                    stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>

                        
                                <input type="number" name="duration" id="duration" min="1" step="1"
                                value="{{ old('duration', $lessonType->duration ?? '') }}" placeholder=" "
                                class="peer w-full h-14 rounded-2xl border border-gray-300 px-11 pt-5 pb-2
    text-sm text-gray-700 focus:outline-none focus:ring-2
    focus:ring-blue-500 focus:border-transparent">
                            <label for="duration"
                                class="absolute left-11 top-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400 transition-all
                                peer-placeholder-shown:top-1/2
                                peer-placeholder-shown:-translate-y-1/2
                                peer-placeholder-shown:text-sm
                                peer-placeholder-shown:normal-case
                                peer-placeholder-shown:tracking-normal
                                peer-focus:top-2
                                peer-focus:translate-y-0
                                peer-focus:text-[11px]
                                peer-focus:uppercase
                                peer-focus:tracking-wider">

                                Course Duration (in minutes)

                            </label>

                        </div>

                        @error('lesson_type_code')
                            <p class="text-sm text-red-500">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                </section>

                <!-- ================= DETAILS ================= -->
                <section class="space-y-5">

                    <div>

                        <h3 class="text-lg font-semibold text-gray-900">
                            Details
                        </h3>

                        <p class="text-sm text-gray-500 mt-1">
                            Add description and internal notes.
                        </p>

                    </div>

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

                        <textarea name="description" rows="3" placeholder="Description"
                            class="w-full rounded-2xl border border-gray-300 bg-gray-50/60 pl-4 pr-4 py-4 text-sm focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-100 resize-none transition">{{ old('description', $lessonType->description ?? '') }}</textarea>

                    </div>

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

                        <textarea name="note" rows="3" placeholder="Note"
                            class="w-full rounded-2xl border border-gray-300 bg-gray-50/60 pl-4 pr-4 py-4 text-sm focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-100 resize-none transition">{{ old('note', $lessonType->note ?? '') }}</textarea>

                    </div>

                </section>

                <!-- ================= PRICING ================= -->
                <section class="space-y-5 ">

                    <div>

                        <h3 class="text-lg font-semibold text-gray-900">
                            Pricing & Dates
                        </h3>

                        <p class="text-sm text-gray-500 mt-1">
                            Configure lesson pricing and date range.
                        </p>

                    </div>

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

                        <!-- Start Date -->
                        <input type="date" name="rate_date"
                            value="{{ old('rate_date', $lessonType->rate_date ?? '') }}"
                            class="w-full h-14 rounded-2xl border border-gray-300 bg-gray-50/60 px-4 text-sm focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-100 transition">

                        <!-- End Date -->
                        <input type="date" name="end_date" value="{{ old('end_date', $lessonType->end_date ?? '') }}"
                            class="w-full h-14 rounded-2xl border border-gray-300 bg-gray-50/60 px-4 text-sm focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-100 transition">

                    </div>



                    <!-- Unit Price -->
                    <div class="relative">

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

                            <line x1="12" y1="2" x2="12" y2="22"></line>

                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>

                        </svg>

                        <input type="number" step="0.01" name="unit_price"
                            value="{{ old('unit_price', $lessonType->unit_price ?? '') }}" placeholder="Unit Price"
                            class="w-full h-14 rounded-2xl border border-gray-300 bg-gray-50/60 pl-11 pr-4 text-sm focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-100 transition">

                    </div>

                </section>

                <!-- ================= ACTIONS ================= -->
                <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">

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

                        Cancel

                    </a>

                    <button type="submit"
                        class="inline-flex items-center justify-center gap-2 h-12 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-semibold shadow-md hover:shadow-lg 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="M5 13l4 4L19 7" />

                        </svg>

                        {{ $lessonType ? 'Update Lesson Type' : 'Save Lesson Type' }}

                    </button>

                </div>

            </form>

        </div>

    </main>

</x-layouts.admin>