@section('page-title', 'Edit Booking')

@section('page-description')
    {{ $booking->booking_reference }}
@endsection

<x-layouts.admin>

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

        <form method="POST" action="{{ route('admin.bookings.update', $booking->id) }}" class="space-y-4 lg:space-y-6">

            @csrf
            @method('PUT')

            <div class="bg-white rounded-2xl lg:rounded-3xl border border-gray-200 shadow-sm p-4 md:p-6 lg:p-8">

                <!-- Header -->
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 lg:gap-4 mb-5 lg:mb-8">

                    <div>

                        <h2 class="text-xl lg:text-2xl font-bold text-gray-800">
                            Edit Booking
                        </h2>

                        <p class="text-xs lg:text-sm text-gray-500 mt-1">
                            Update booking details and payment information
                        </p>

                    </div>

                    <div
                        class="inline-flex items-center gap-2 px-3 lg:px-4 py-2 rounded-xl lg:rounded-2xl bg-indigo-50 text-indigo-700 text-xs lg:text-sm font-medium">

                        <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="M9 12h6m-6 4h6M8 4h8a2 2 0 0 1 2 2v14l-3-2-3 2-3-2-3 2V6a2 2 0 0 1 2-2Z" />

                        </svg>

                        {{ $booking->booking_reference }}

                    </div>

                </div>

                <!-- Validation Errors -->
                @if ($errors->any())
                    <div class="mb-4 lg:mb-6 rounded-xl lg:rounded-2xl border border-red-200 bg-red-50 p-3 lg:p-4">

                        <ul class="space-y-1 text-xs lg:text-sm text-red-600">

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

                        </ul>

                    </div>
                @endif

                <!-- Form Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">

                    <!-- Instructor -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Instructor

                        </label>

                        <select name="instructor_id"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                            @foreach ($instructors as $ins)
                                <option value="{{ $ins->id }}"
                                    {{ $booking->instructor_id == $ins->id ? 'selected' : '' }}>

                                    {{ $ins->user->name }}

                                </option>
                            @endforeach

                        </select>

                    </div>

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

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Lesson Type

                        </label>

                        <select name="lesson_type_id"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                            @foreach ($lessonTypes as $type)
                                <option value="{{ $type->id }}" data-duration="{{ $type->duration }}"
                                    data-price="{{ $type->unit_price }}"
                                    {{ $booking->lesson_type_id == $type->id ? 'selected' : '' }}>

                                    {{ $type->lesson_type_code }}

                                </option>
                            @endforeach

                        </select>

                    </div>

                    <!-- Lesson Date -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Lesson Date

                        </label>

                        <input type="date" name="lesson_date"
                            value="{{ old('lesson_date', $booking->lesson_date) }}"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Booking Status -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Booking Status

                        </label>

                        <select name="status"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="completed" class="text-green-600 font-semibold"
                                {{ $booking->status == 'completed' ? 'selected' : '' }}>

                                Completed

                            </option>
                            <option value="pending" class="text-yellow-600 font-semibold"
                                {{ $booking->status == 'pending' ? 'selected' : '' }}>

                                Pending

                            </option>

                            <option value="confirmed" class="text-blue-600 font-semibold"
                                {{ $booking->status == 'confirmed' ? 'selected' : '' }}>

                                Confirmed

                            </option>



                            <option value="cancelled" class="text-red-600 font-semibold"
                                {{ $booking->status == 'cancelled' ? 'selected' : '' }}>

                                Cancelled

                            </option>

                        </select>

                    </div>

                    <!-- Unit -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Unit

                        </label>

                        <input type="number" step="0.01" name="unit" value="{{ old('unit', $booking->unit) }}"
                            placeholder="Enter unit"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Price -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Price

                        </label>

                        <input type="number" step="0.01" name="price" value="{{ old('price', $booking->price) }}"
                            placeholder="Enter booking price"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Start Time -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Start Time

                        </label>

                        <input type="time" name="start_time" value="{{ old('start_time', $booking->start_time) }}"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- End Time -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            End Time

                        </label>

                        <input type="time" name="end_time" value="{{ old('end_time', $booking->end_time) }}"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Payment Status -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Payment Status

                        </label>

                        <select name="payment_status"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                            <option value="paid" {{ $booking->payment_status == 'paid' ? 'selected' : '' }}>

                                Paid

                            </option>

                            <option value="unpaid" {{ $booking->payment_status == 'unpaid' ? 'selected' : '' }}>

                                Unpaid

                            </option>

                        </select>

                    </div>

                    <!-- Payment Method -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Payment Method

                        </label>

                        <select name="payment_method"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                            <option value="website" {{ $booking->payment_method == 'website' ? 'selected' : '' }}>

                                Website (PayPal / Stripe)

                            </option>

                            <option value="bank_transfer"
                                {{ $booking->payment_method == 'bank_transfer' ? 'selected' : '' }}>

                                Bank Transfer

                            </option>

                            <option value="cash" {{ $booking->payment_method == 'cash' ? 'selected' : '' }}>

                                Cash

                            </option>

                        </select>

                    </div>

                    <!-- Student Email -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Student Email

                        </label>

                        <input type="email" name="student_email"
                            value="{{ old('student_email', $booking->student_email) }}"
                            placeholder="Enter student email"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Student Phone -->
                    <div>

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Student Phone

                        </label>

                        <input type="text" name="student_phone"
                            value="{{ old('student_phone', $booking->student_phone) }}"
                            placeholder="Enter phone number"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Address -->
                    <div class="md:col-span-2">

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Student Address

                        </label>

                        <input type="text" name="student_address"
                            value="{{ old('student_address', $booking->student_address) }}" placeholder="Enter address"
                            class="w-full h-10 lg:h-12 rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">

                    </div>

                    <!-- Notes -->
                    <div class="md:col-span-2">

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Notes

                        </label>

                        <textarea name="notes" rows="3" placeholder="Add booking notes..."
                            class="w-full rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 py-2.5 lg:py-3 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('notes', $booking->notes) }}</textarea>

                    </div>

                    <!-- Cancel Reason -->
                    <div class="md:col-span-2">

                        <label class="block text-xs lg:text-sm font-medium text-gray-700 mb-1.5 lg:mb-2">

                            Cancel Reason

                        </label>

                        <textarea name="cancel_reason" rows="3" placeholder="Enter cancellation reason..."
                            class="w-full rounded-xl lg:rounded-2xl border border-gray-300 bg-white px-3 lg:px-4 py-2.5 lg:py-3 text-xs lg:text-sm focus:outline-none focus:ring-2 focus:ring-red-500">{{ old('cancel_reason', $booking->cancel_reason) }}</textarea>

                    </div>

                </div>

                <!-- Actions -->
                <div class="mt-6 lg:mt-8 flex flex-col-reverse sm:flex-row justify-end gap-2 lg:gap-3">

                    <!-- Delete -->
                    <button type="button"
                        onclick="if(confirm('Are you sure you want to delete this booking?')) document.getElementById('deleteBookingForm').submit()"
                        class="inline-flex items-center justify-center h-10 lg:h-12 px-4 lg:px-6 rounded-full border border-gray-300 bg-red-500 text-white text-xs lg:text-sm font-medium hover:bg-red-600 transition">

                        Delete

                    </button>

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

                        Cancel

                    </a>

                    <!-- Update -->
                    <button type="submit"
                        class="inline-flex items-center justify-center gap-2 h-10 lg:h-12 px-5 lg:px-8 rounded-full bg-gradient-to-r from-indigo-500 to-blue-500 hover:from-indigo-600 hover:to-blue-600 text-white text-xs lg: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 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="M5 13l4 4L19 7" />

                        </svg>

                        Update Booking

                    </button>

                </div>

            </div>

        </form>

        <!-- DELETE FORM -->
        <form id="deleteBookingForm" action="{{ route('admin.bookings.destroy', $booking) }}" method="POST"
            class="hidden">

            @csrf
            @method('DELETE')

        </form>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Enable searchable dropdown
            // $('#student_select').select2({
            //     placeholder: "Search student by name",
            //     allowClear: true,
            //     width: '100%'
            // });

            // // Auto fill email
            // $('#student_select').on('change', function() {
            //     let email = $(this).find(':selected').data('email') || '';
            //     let phone = $(this).find(':selected').data('phone') || '';
            //     let address = $(this).find(':selected').data('address') || '';
            //     $('#student_email').val(email);
            //     $('input[name="student_phone"]').val(phone);
            //     $('input[name="student_address"]').val(address);
            // });

            // Auto fill price and duration based on lesson type
            $('select[name="lesson_type_id"]').on('change', function() {

                let selectedOption = $(this).find(':selected');

                let lessonPrice = parseFloat(selectedOption.data('price')) || 0;

                // Every lesson type starts with 1 unit
                $('input[name="unit"]').val(1);

                // Default full price
                $('input[name="price"]').val(lessonPrice.toFixed(2));

            });

            $('input[name="unit"]').on('input', function() {

                let unit = parseFloat($(this).val()) || 0;

                let selectedOption = $('select[name="lesson_type_id"]').find(':selected');

                let lessonPrice = parseFloat(selectedOption.data('price')) || 0;

                // Price based on unit
                let totalPrice = lessonPrice * unit;

                $('input[name="price"]').val(totalPrice.toFixed(2));

            });


        });
    </script>

</x-layouts.admin>