<div id="BookingForm" class="bf-booking-form">
    <div class="bf-main-icon"><span uk-icon="icon: calendar; ratio: 1" class="uk-icon"></span></div>

    <h2 class="uk-h3">Book Your Session</h2>

    <!-- Pricing -->
    <div class="bf-form-section">
        <div class="bf-form-section-title uk-heading-line"><span>
                <span uk-icon="icon: ryal; ratio: 1" class="uk-icon"></span>Select Duration</span>
        </div>
        <div class="bf-pricing-grid">
            <div class="bf-pricing-card" onclick="selectPricing(this, 30, 280)">
                <div class="bf-pricing-duration">30 Min</div>
                <div class="bf-pricing-amount">280 SAR</div>
            </div>
            <div class="bf-pricing-card selected" onclick="selectPricing(this, 45, 400)">
                <div class="bf-pricing-duration">45 Min</div>
                <div class="bf-pricing-amount">400 SAR</div>
            </div>
            <div class="bf-pricing-card" onclick="selectPricing(this, 60, 480)">
                <div class="bf-pricing-duration">60 Min</div>
                <div class="bf-pricing-amount">480 SAR</div>
            </div>
            <div class="bf-pricing-card" onclick="selectPricing(this, 90, 650)">
                <div class="bf-pricing-duration">90 Min</div>
                <div class="bf-pricing-amount">650 SAR</div>
            </div>
        </div>
    </div>

    <!-- Calendar -->
    <div class="bf-form-section">
        <div class="bf-form-section-title uk-heading-line"><span>
                <span uk-icon="icon: calendar; ratio: .7" class="uk-icon"></span>Select Date</span>
        </div>
        <div class="bf-modern-calendar">
            <!-- Month/Year Selectors -->
            <div class="bf-calendar-controls">
                <select class="uk-select bf-month-select" id="monthSelect" onchange="updateCalendar()">
                    <option value="0">January</option>
                    <option value="1">February</option>
                    <option value="2">March</option>
                    <option value="3">April</option>
                    <option value="4">May</option>
                    <option value="5">June</option>
                    <option value="6">July</option>
                    <option value="7" selected>August</option>
                    <option value="8">September</option>
                    <option value="9">October</option>
                    <option value="10">November</option>
                    <option value="11">December</option>
                </select>
                <select class="uk-select bf-year-select" id="yearSelect" onchange="updateCalendar()">
                    <option value="2024">2024</option>
                    <option value="2025" selected>2025</option>
                    <option value="2026">2026</option>
                </select>
            </div>

            <!-- Calendar Grid -->
            <div class="bf-modern-calendar-grid" id="calendarGrid">
                <!-- Day Headers -->
                <div class="bf-modern-day-header">Sun</div>
                <div class="bf-modern-day-header">Mon</div>
                <div class="bf-modern-day-header">Tue</div>
                <div class="bf-modern-day-header">Wed</div>
                <div class="bf-modern-day-header">Thu</div>
                <div class="bf-modern-day-header">Fri</div>
                <div class="bf-modern-day-header">Sat</div>

                <!-- Calendar Days will be populated by JavaScript -->
            </div>
        </div>
    </div>

    <!-- Time Slots -->
    <div class="bf-form-section">
        <div class="bf-form-section-title uk-heading-line"><span>
                <span uk-icon="icon: clock; ratio: .7" class="uk-icon"></span>Select Time</span>
        </div>
        <div id="timeSlots" class="bf-time-slots-grid" style="display: none;">
            <div class="bf-time-slot" onclick="selectTime(this, '09:00')">09:00</div>
            <div class="bf-time-slot" onclick="selectTime(this, '10:00')">10:00</div>
            <div class="bf-time-slot unavailable">11:00</div>
            <div class="bf-time-slot" onclick="selectTime(this, '14:00')">14:00</div>
            <div class="bf-time-slot" onclick="selectTime(this, '15:00')">15:00</div>
            <div class="bf-time-slot" onclick="selectTime(this, '16:00')">16:00</div>
        </div>
        <p id="selectDateFirst" class="select-date-first uk-text-center">Please select a date first</p>
    </div>

    <!-- Session Details -->
    <div class="bf-form-section">
        <div class="bf-form-section-title uk-heading-line"><span>
                <span uk-icon="icon: text; ratio: .7" class="uk-icon"></span>Session Details</span>
        </div>

        <div class="uk-margin">
            <label class="form-label">Session Language</label>
            <select class="uk-select" id="sessionLanguage">
                <option value="english">English</option>
                <option value="arabic">Arabic</option>
            </select>
        </div>

        <div class="uk-margin">
            <label class="form-label">Session Focus</label>
            <textarea class="uk-textarea" rows="3" placeholder="Describe what you want to focus on during the session..."></textarea>
        </div>
    </div>

    <!-- CV Upload -->
    <div class="bf-form-section">
        <div class="bf-form-section-title uk-heading-line"><span>
                <span uk-icon="icon: upload; ratio: .7" class="uk-icon"></span>Upload CV (Optional)</span>
        </div>
        <div class="bf-file-upload" onclick="document.getElementById('cvUpload').click()">
            <span uk-icon="icon: upload; ratio: 1" class="uk-icon"></span>
            <p><strong>Click to upload</strong> or drag and drop</p>
            <p class="uk-text-small uk-text-muted">PDF, DOC files up to 10MB</p>
            <input type="file" id="cvUpload" accept=".pdf,.doc,.docx">
        </div>
    </div>

    <!-- Booking Summary -->
    <div class="bf-booking-summary">
        <h4 class="uk-heading-line"><span>Booking Summary</span></h4>
        <div class="invoice-row">
            <span class="invoice-label">Session (45 min)</span>
            <span class="invoice-value">180 SAR</span>
        </div>

        <div class="invoice-row">
            <span class="invoice-label">Platform Fee</span>
            <span class="invoice-value">15 SAR</span>
        </div>

        <div class="invoice-row">
            <span class="invoice-label">Subtotal</span>
            <span class="invoice-value">195 SAR</span>
        </div>

        <div class="invoice-row">
            <span class="invoice-label">VAT (15%)</span>
            <span class="invoice-value">29.25 SAR</span>
        </div>

        <div class="invoice-row invoice-total">
            <span class="invoice-label">Total Amount</span>
            <span class="invoice-value total-value">224.25 SAR</span>
        </div>
    </div>

    <button class="uk-button uk-button-primary uk-width-1-1 payment-btn" id="bookButton" disabled onclick="proceedToPayment()">
        Select Date & Time to Book
    </button>

</div>

<script>
    // Booking system state
    let bookingState = {
        duration: 45,
        price: 400,
        date: null,
        time: null,
        language: 'english'
    };

    // Calendar state
    let currentDate = new Date();
    let selectedDateElement = null;

    // Initialize page
    document.addEventListener('DOMContentLoaded', function() {
        updateBookingSummary();
        generateCalendar();

        // File upload handling
        const fileUpload = document.getElementById('cvUpload');
        const fileUploadArea = document.querySelector('.bf-file-upload');

        if (fileUpload && fileUploadArea) {
            fileUpload.addEventListener('change', handleFileUpload);

            // Drag and drop
            fileUploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                fileUploadArea.classList.add('drag-over');
            });

            fileUploadArea.addEventListener('dragleave', () => {
                fileUploadArea.classList.remove('drag-over');
            });

            fileUploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                fileUploadArea.classList.remove('drag-over');
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    fileUpload.files = files;
                    handleFileUpload({
                        target: {
                            files: files
                        }
                    });
                }
            });
        }
    });

    // Generate calendar days
    function generateCalendar() {
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');
        const calendarGrid = document.getElementById('calendarGrid');

        if (!monthSelect || !yearSelect || !calendarGrid) return;

        const month = parseInt(monthSelect.value);
        const year = parseInt(yearSelect.value);

        // Remove existing calendar days (keep headers)
        const existingDays = calendarGrid.querySelectorAll('.bf-modern-calendar-day');
        existingDays.forEach(day => day.remove());

        // Get first day of month and number of days
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const startDate = new Date(firstDay);
        startDate.setDate(startDate.getDate() - firstDay.getDay());

        // Generate 42 days (6 weeks)
        for (let i = 0; i < 42; i++) {
            const currentDay = new Date(startDate);
            currentDay.setDate(startDate.getDate() + i);

            const dayElement = document.createElement('div');
            dayElement.className = 'bf-modern-calendar-day';
            dayElement.textContent = currentDay.getDate();

            // Add classes based on day status
            if (currentDay.getMonth() !== month) {
                dayElement.classList.add('other-month');
            } else if (isPastDate(currentDay)) {
                dayElement.classList.add('disabled');
            } else if (isAvailableDate(currentDay)) {
                dayElement.classList.add('available');
                dayElement.onclick = () => selectModernDate(dayElement, currentDay.getDate());
            } else {
                dayElement.classList.add('disabled');
            }

            // Append directly to calendar grid
            calendarGrid.appendChild(dayElement);
        }
    }

    // Check if date is in the past
    function isPastDate(date) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        return date < today;
    }

    // Check if date is available (you can customize this logic)
    function isAvailableDate(date) {
        const day = date.getDay();
        const dateNum = date.getDate();

        // Example logic: available on weekdays and some specific dates
        // Customize this based on your availability logic
        if (day === 0 || day === 6) return false; // No weekends
        if ([12, 17, 18, 19, 24, 25, 26].includes(dateNum)) return false; // Blocked dates

        return true;
    }

    // Modern date selection
    function selectModernDate(element, date) {
        // Remove previous selection
        if (selectedDateElement) {
            selectedDateElement.classList.remove('selected');
        }

        // Select current
        element.classList.add('selected');
        selectedDateElement = element;

        // Update booking state
        bookingState.date = date;

        // Show time slots
        const timeSlots = document.getElementById('timeSlots');
        const selectDateFirst = document.getElementById('selectDateFirst');

        if (timeSlots) timeSlots.style.display = 'grid';
        if (selectDateFirst) selectDateFirst.style.display = 'none';

        // Clear previous time selection
        document.querySelectorAll('.bf-time-slot').forEach(slot => {
            slot.classList.remove('selected');
        });
        bookingState.time = null;

        updateBookingSummary();
        updateBookButton();
    }

    // Update calendar when month/year changes
    function updateCalendar() {
        generateCalendar();

        // Clear any previous selections
        if (selectedDateElement) {
            selectedDateElement.classList.remove('selected');
            selectedDateElement = null;
        }

        bookingState.date = null;
        bookingState.time = null;

        // Hide time slots
        const timeSlots = document.getElementById('timeSlots');
        const selectDateFirst = document.getElementById('selectDateFirst');

        if (timeSlots) timeSlots.style.display = 'none';
        if (selectDateFirst) selectDateFirst.style.display = 'block';

        updateBookingSummary();
        updateBookButton();
    }

    // Pricing selection
    function selectPricing(element, duration, price) {
        // Remove previous selection
        document.querySelectorAll('.bf-pricing-card').forEach(card => {
            card.classList.remove('selected');
        });

        // Select current
        element.classList.add('selected');

        // Update booking state
        bookingState.duration = duration;
        bookingState.price = price;

        updateBookingSummary();
    }

    // Legacy date selection (for backward compatibility if needed)
    function selectDate(element, date) {
        selectModernDate(element, date);
    }

    // Time selection
    function selectTime(element, time) {
        // Remove previous selection
        document.querySelectorAll('.bf-time-slot').forEach(slot => {
            slot.classList.remove('selected');
        });

        // Select current
        element.classList.add('selected');

        // Update booking state
        bookingState.time = time;

        updateBookingSummary();
        updateBookButton();
    }

    // Update booking summary
    function updateBookingSummary() {
        const subtotal = bookingState.price;
        const vat = Math.round(subtotal * 0.15);
        const total = subtotal + vat;

        const monthNames = [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'
        ];

        const elements = {
            selectedDuration: document.getElementById('selectedDuration'),
            selectedDate: document.getElementById('selectedDate'),
            selectedTime: document.getElementById('selectedTime'),
            subtotal: document.getElementById('subtotal'),
            vat: document.getElementById('vat'),
            total: document.getElementById('total')
        };

        if (elements.selectedDuration) elements.selectedDuration.textContent = bookingState.duration + ' Minutes';

        if (elements.selectedDate) {
            if (bookingState.date) {
                const monthSelect = document.getElementById('monthSelect');
                const yearSelect = document.getElementById('yearSelect');
                if (monthSelect && yearSelect) {
                    const monthName = monthNames[parseInt(monthSelect.value)];
                    const year = yearSelect.value;
                    elements.selectedDate.textContent = `${monthName} ${bookingState.date}, ${year}`;
                } else {
                    elements.selectedDate.textContent = `Selected: ${bookingState.date}`;
                }
            } else {
                elements.selectedDate.textContent = 'Select date';
            }
        }

        if (elements.selectedTime) elements.selectedTime.textContent = bookingState.time || 'Select time';
        if (elements.subtotal) elements.subtotal.textContent = subtotal + ' SAR';
        if (elements.vat) elements.vat.textContent = vat + ' SAR';
        if (elements.total) elements.total.textContent = total + ' SAR';
    }

    // Update book button
    function updateBookButton() {
        const button = document.getElementById('bookButton');
        if (!button) return;

        const canBook = bookingState.date && bookingState.time;

        button.disabled = !canBook;
        button.textContent = canBook ? 'Book Session - ' + (bookingState.price + Math.round(bookingState.price * 0.15)) + ' SAR' : 'Select Date & Time to Book';
    }

    // Calendar navigation (for dropdown changes)
    function previousMonth() {
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');

        if (!monthSelect || !yearSelect) return;

        let month = parseInt(monthSelect.value);
        let year = parseInt(yearSelect.value);

        month--;
        if (month < 0) {
            month = 11;
            year--;
        }

        monthSelect.value = month;
        yearSelect.value = year;
        updateCalendar();
    }

    function nextMonth() {
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');

        if (!monthSelect || !yearSelect) return;

        let month = parseInt(monthSelect.value);
        let year = parseInt(yearSelect.value);

        month++;
        if (month > 11) {
            month = 0;
            year++;
        }

        monthSelect.value = month;
        yearSelect.value = year;
        updateCalendar();
    }

    // File upload handling
    function handleFileUpload(event) {
        const file = event.target.files[0];
        if (file) {
            const fileUploadArea = document.querySelector('.bf-file-upload');
            if (fileUploadArea) {
                fileUploadArea.innerHTML = `
                    <span uk-icon="icon: upload; ratio: 1" class="uk-icon"></span>
                    <p><strong>${file.name}</strong> uploaded successfully</p>
                    <p class="uk-text-small uk-text-muted">Click to change file</p>
                `;

                // Show UIKit notification if available
                if (typeof UIkit !== 'undefined') {
                    UIkit.notification('CV uploaded successfully!', 'success');
                } else {
                    console.log('CV uploaded successfully!');
                }
            }
        }
    }

    // Proceed to payment
    function proceedToPayment() {
        if (!bookingState.date || !bookingState.time) {
            // Show UIKit notification if available
            if (typeof UIkit !== 'undefined') {
                UIkit.notification('Please select date and time', 'warning');
            } else {
                alert('Please select date and time');
            }
            return;
        }

        // Get session focus from textarea
        const sessionFocus = document.querySelector('textarea') ? document.querySelector('textarea').value : '';
        const sessionLanguage = document.getElementById('sessionLanguage') ? document.getElementById('sessionLanguage').value : 'english';

        // Get selected month and year for proper date formatting
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');
        const month = monthSelect ? parseInt(monthSelect.value) + 1 : 8; // +1 because JS months are 0-indexed
        const year = yearSelect ? yearSelect.value : 2025;

        // Prepare booking data for checkout
        const bookingData = {
            duration: bookingState.duration,
            price: bookingState.price,
            date: bookingState.date,
            month: month,
            year: year,
            time: bookingState.time,
            language: sessionLanguage,
            focus: sessionFocus,
            total: bookingState.price + Math.round(bookingState.price * 0.15)
        };

        // Convert to URL parameters
        const params = new URLSearchParams(bookingData);

        // Redirect to checkout page
        window.location.href = `checkout.php?${params.toString()}`;
    }

    // Get booking data (useful for integration)
    function getBookingData() {
        const sessionFocus = document.querySelector('textarea') ? document.querySelector('textarea').value : '';
        const sessionLanguage = document.getElementById('sessionLanguage') ? document.getElementById('sessionLanguage').value : 'english';

        // Get selected month and year
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');
        const month = monthSelect ? parseInt(monthSelect.value) + 1 : 8;
        const year = yearSelect ? yearSelect.value : 2025;

        return {
            duration: bookingState.duration,
            price: bookingState.price,
            date: bookingState.date,
            month: month,
            year: year,
            time: bookingState.time,
            language: sessionLanguage,
            focus: sessionFocus,
            total: bookingState.price + Math.round(bookingState.price * 0.15)
        };
    }

    // Reset booking form
    function resetBookingForm() {
        bookingState = {
            duration: 45,
            price: 400,
            date: null,
            time: null,
            language: 'english'
        };

        // Reset UI
        document.querySelectorAll('.bf-pricing-card').forEach(card => {
            card.classList.remove('selected');
        });

        const defaultPricingCard = document.querySelector('.bf-pricing-card[onclick*="45, 400"]');
        if (defaultPricingCard) {
            defaultPricingCard.classList.add('selected');
        }

        // Reset calendar selection
        if (selectedDateElement) {
            selectedDateElement.classList.remove('selected');
            selectedDateElement = null;
        }

        document.querySelectorAll('.bf-time-slot').forEach(slot => {
            slot.classList.remove('selected');
        });

        const timeSlots = document.getElementById('timeSlots');
        const selectDateFirst = document.getElementById('selectDateFirst');

        if (timeSlots) timeSlots.style.display = 'none';
        if (selectDateFirst) selectDateFirst.style.display = 'block';

        const sessionLanguage = document.getElementById('sessionLanguage');
        const textarea = document.querySelector('textarea');

        if (sessionLanguage) sessionLanguage.value = 'english';
        if (textarea) textarea.value = '';

        // Reset calendar to current month
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');

        if (monthSelect) monthSelect.value = 7; // August
        if (yearSelect) yearSelect.value = 2025;

        generateCalendar();
        updateBookingSummary();
        updateBookButton();
    }
</script>