@section('page-title')
    Add Booking
@endsection

<x-layouts.admin>

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

        <div class="bg-white rounded-2xl md:rounded-3xl border border-gray-200 shadow-sm overflow-hidden">

            <!-- Header -->
            <div class="px-4 py-4 md:px-6 md:py-5 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">

                <div class="flex items-center gap-3 md:gap-4">

                    <div
                        class="w-10 h-10 md:w-12 md:h-12 rounded-xl md:rounded-2xl bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center shadow-md">

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

                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M8 7V3m8 4V3m-9 8h10m-11 9h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2Z" />

                        </svg>

                    </div>

                    <div>

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

                        <p class="text-xs md:text-sm text-gray-500 mt-0.5 md:mt-1">
                            Manage instructor and student booking details
                        </p>

                        @if ($errors->error)
                            <p class="text-red-500 text-xs md:text-sm mt-1">
                                {{ $errors->first('error') }}
                            </p>
                        @endif

                    </div>

                </div>

            </div>

            <!-- Form -->
            <form method="POST" action="{{ route('admin.instructor.bookings.store.instructor') }}"
                class="p-4 md:p-8 space-y-4 md:space-y-5">

                @csrf

                <!-- ================= BOOKING DETAILS ================= -->
                <div>

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

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

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

                            <input type="text" id="instructor_search" placeholder="Search instructor..."
                                value="{{ old('instructor_name') }}" autocomplete="off"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 px-3 md:px-4 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                            @error('instructor_id')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                            <input type="hidden" name="instructor_id" id="instructor_id"
                                value="{{ old('instructor_id') }}">
                            <input type="hidden" name="instructor_name" id="instructor_name"
                                value="{{ old('instructor_name') }}">

                            <div id="instructor_results"
                                class="absolute z-50 bg-white border rounded-xl mt-1 w-full shadow-lg hidden max-h-60 overflow-y-auto">

                            </div>

                        </div>

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

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Select Student
                            </label>

                            <input type="text" id="student_search" placeholder="Search student..."
                                value="{{ old('student_name') }}" autocomplete="off"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 px-3 md:px-4 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                            @error('student_id')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                            <input type="hidden" name="student_id" id="student_id" value="{{ old('student_id') }}">

                            <input type="hidden" name="student_name" id="student_name"
                                value="{{ old('student_name') }}">

                            <div id="student_results"
                                class="absolute z-50 bg-white border rounded-xl mt-1 shadow-lg hidden max-h-60 overflow-y-auto">
                            </div>


                        </div>

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

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

                            <select name="lesson_type_id"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md: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') == $lesson->id ? 'selected' : '' }}
                                        data-duration="{{ $lesson->duration }}"
                                        data-price="{{ $lesson->unit_price }}">

                                        {{ $lesson->lesson_type_code }}

                                    </option>
                                @endforeach

                            </select>

                            @error('lesson_type_id')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                    </div>

                </div>

                <!-- ================= STUDENT DETAILS ================= -->
                <div>

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

                        <!-- Email -->
                        <div>

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Student Email
                            </label>

                            <input type="email" id="student_email" name="student_email"
                                value="{{ old('student_email') }}"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                            @error('student_email')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Phone -->
                        <div>

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Phone Number
                            </label>

                            <input type="text" name="student_phone" value="{{ old('student_phone') }}"
                                id="student_phone"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                            @error('student_phone')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div>

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

                            <input type="text" name="student_address" value="{{ old('student_address') }}"
                                id="student_address"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">

                            @error('student_address')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                    </div>

                </div>

                <!-- ================= LESSON DETAILS ================= -->
                <div>

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

                        <!-- Status -->
                        <div>

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Booking Status
                            </label>

                            <select name="status"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">
                                <option class="text-green-600 font-semibold" value="completed"
                                    {{ old('status') == 'completed' ? 'selected' : '' }}>
                                    Completed</option>

                                <option class="text-yellow-600 font-semibold" value="pending"
                                    {{ old('status') == 'pending' ? 'selected' : '' }}>Pending
                                </option>
                                
                                <option class="text-blue-600 font-semibold" value="confirmed"
                                    {{ old('status') == 'confirmed' ? 'selected' : '' }}>
                                    Confirmed</option>

                                <option class="text-red-600 font-semibold" value="cancelled"
                                    {{ old('status') == 'cancelled' ? 'selected' : '' }}>
                                    Cancelled</option>

                            </select>
                            @error('status')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                        <!-- Date -->
                        <div>

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Lesson Date
                            </label>

                            <input type="date" name="lesson_date"
                                value="{{ old('lesson_date', now()->format('Y-m-d')) }}"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">
                            @error('lesson_date')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Start -->
                        <div>

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Start Time
                            </label>

                            <select id="start_time" name="start_time"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">

                                <option value="">Select Start Time</option>

                            </select>
                            @error('start_time')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                        <!-- End -->
                        <div>

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                End Time
                            </label>

                            <select id="end_time" name="end_time"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">

                                <option value="">Select End Time</option>

                            </select>
                            @error('end_time')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                        <!-- Duration -->
                        <div>

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

                            <input type="number" step="any" min="0" name="unit" id="unit"
                                value="{{ old('unit') }}"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">
                            @error('unit')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Price -->
                        <div>

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

                            <input type="number" step="any" name="price" value="{{ old('price') }}"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">
                            @error('price')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

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

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Payment Method
                            </label>

                            <select name="payment_method"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">

                                <option value="website">Website (PayPal/Stripe)</option>

                                <option value="bank_transfer">
                                    Bank Transfer
                                </option>

                                <option value="cash">
                                    Cash
                                </option>

                            </select>
                            @error('payment_method')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

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

                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-1.5 md:mb-2">
                                Payment Status
                            </label>

                            <select name="payment_status"
                                class="w-full h-10 md:h-12 rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 text-xs md:text-sm">

                                <option value="unpaid">Unpaid</option>
                                <option value="paid">Paid</option>

                            </select>
                            @error('payment_status')
                                <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                    </div>

                </div>

                <!-- Notes -->
                <div>

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

                    <textarea name="notes" rows="3"
                        class="w-full rounded-xl md:rounded-2xl border border-gray-300 bg-white px-3 md:px-4 py-2.5 md:py-3 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('notes') }}</textarea>
                    @error('notes')
                        <p class="text-red-500 text-xs md:text-sm mt-1 md:mt-2">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Buttons -->
                <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 md:gap-3 pt-1 md:pt-2">

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

                        Cancel

                    </a>

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

                        </svg>

                        Create Booking

                    </button>

                </div>

            </form>

        </div>

    </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>

    <script>
        const startTime = document.getElementById('start_time');
        const endTime = document.getElementById('end_time');

        // Generate time options
        function generateTimes() {

            let times = [];

            // 7 AM to 8 PM
            for (let h = 7; h <= 20; h++) {

                for (let m = 0; m < 60; m += 15) {

                    let hour = h % 12 || 12;
                    let minutes = m.toString().padStart(2, '0');
                    let ampm = h < 12 ? 'AM' : 'PM';

                    let label = `${hour}:${minutes} ${ampm}`;

                    let totalMinutes = h * 60 + m;

                    times.push({
                        label,
                        totalMinutes
                    });
                }
            }

            times.forEach(time => {

                startTime.innerHTML += `
            <option value="${time.label}" data-minutes="${time.totalMinutes}">
                ${time.label}
            </option>`;

                endTime.innerHTML += `
            <option value="${time.label}" data-minutes="${time.totalMinutes}">
                ${time.label}
            </option>`;
            });
        }
        generateTimes();

        // Start time change
        startTime.addEventListener('change', function() {

            let startMinutes = parseInt(
                this.options[this.selectedIndex].dataset.minutes
            );

            if (!isNaN(startMinutes)) {

                let autoEnd = startMinutes + 60;

                selectEndTimeByMinutes(autoEnd);

                //updateDuration();
            }
        });

        // End time change
        endTime.addEventListener('change', function() {
            //updateDuration();
        });

        // Select end time by minutes
        function selectEndTimeByMinutes(minutes) {

            for (let option of endTime.options) {

                if (parseInt(option.dataset.minutes) === minutes) {

                    endTime.value = option.value;

                    break;
                }
            }
        }
    </script>

    <script>
        async function setupAutocomplete(
            inputId,
            resultId,
            hiddenId,
            apiUrl
        ) {

            const input = document.getElementById(inputId);
            const results = document.getElementById(resultId);
            const hidden = document.getElementById(hiddenId);

            async function fetchResults(search = '') {

                const response = await fetch(
                    `${apiUrl}?search=${search}`
                );

                const data = await response.json();

                results.innerHTML = '';

                if (data.length > 0) {

                    results.classList.remove('hidden');

                    data.forEach(item => {

                        const div = document.createElement('div');
                        const fullName = `${item.name || ''} ${item.last_name || ''}`.trim();
                        div.className =
                            'px-4 py-3 hover:bg-gray-100 cursor-pointer border-b';

                        div.innerText = fullName || '';

                        div.onclick = () => {

                            if (apiUrl.includes('instructors')) {
                                const fullName = `${item.name || ''} ${item.last_name || ''}`.trim();
                                document.getElementById('instructor_name').value =
                                    fullName || '';
                            }

                            if (apiUrl.includes('students')) {

                                document.getElementById('student_email').value =
                                    item.email || '';

                                document.getElementById('student_phone').value =
                                    item.phone || '';

                                document.getElementById('student_address').value =
                                    item.address || '';
                                document.getElementById('student_name').value =
                                    item.name + ' ' + item.last_name || '';
                            }
                            const fullName = `${item.name || ''} ${item.last_name || ''}`.trim();

                            input.value = fullName || '';

                            hidden.value = item.id;

                            results.classList.add('hidden');


                        };

                        results.appendChild(div);
                    });

                } else {

                    results.classList.add('hidden');
                }
            }

            // Show default 10 on focus
            input.addEventListener('focus', () => {
                fetchResults();
            });

            // Search on typing
            input.addEventListener('input', () => {
                fetchResults(input.value);
            });

            // Hide dropdown on outside click
            document.addEventListener('click', function(e) {

                if (!input.contains(e.target) &&
                    !results.contains(e.target)) {

                    results.classList.add('hidden');
                }
            });
        }

        // Instructor
        setupAutocomplete(
            'instructor_search',
            'instructor_results',
            'instructor_id',
            '/admin/search/instructors'
        );

        // Student
        setupAutocomplete(
            'student_search',
            'student_results',
            'student_id',
            '/admin/search/students'
        );
    </script>

</x-layouts.admin>