@extends('layouts.portal')

@section('content')
<style>
    .booking-container {
        max-width: 900px;
        margin: 4rem auto 6rem;
        padding: 0 1.5rem;
    }
    .booking-card {
        background: var(--card-bg, rgba(17, 24, 39, 0.75));
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
        border-radius: 28px;
        padding: 3rem;
        backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }
    .booking-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #FFF 30%, #9CA3AF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    .booking-subtitle {
        color: var(--text-muted, #9CA3AF);
        text-align: center;
        margin-bottom: 2.5rem;
        font-size: 1.05rem;
    }
    .form-label {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-main, #F3F4F6);
        margin-bottom: 0.5rem;
        display: block;
    }
    .form-control, .form-select {
        background: rgba(0, 0, 0, 0.35) !important;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
        color: #FFFFFF !important;
        padding: 0.8rem 1.2rem;
        border-radius: 12px;
        font-size: 0.95rem;
        width: 100%;
        margin-bottom: 1.2rem;
        transition: border-color 0.3s ease;
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--primary, #6366F1) !important;
        outline: none;
    }
    select option {
        background-color: #111827 !important;
        color: #FFFFFF !important;
    }
    select option:disabled {
        color: #6B7280 !important;
        background-color: #1F2937 !important;
    }
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }
    }
    .btn-submit-booking {
        background: linear-gradient(135deg, var(--primary, #6366F1) 0%, #4F46E5 100%);
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 700;
        font-size: 1.05rem;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 1rem;
    }
    .btn-submit-booking:hover {
        box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
        transform: translateY(-2px);
    }
</style>

<div class="booking-container">
    <div class="booking-card">
        <h1 class="booking-title">Book a <span>Consultation</span></h1>
        <p class="booking-subtitle">Schedule your session with certified mental health specialists.</p>

        @if(session('success'))
            <div style="background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.2); padding: 1rem; border-radius: 12px; margin-bottom: 2rem;">
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div style="background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.2); padding: 1rem; border-radius: 12px; margin-bottom: 2rem;">
                <ul style="margin:0; padding-left: 1.2rem;">
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('booking.store') }}" method="POST" id="bookingForm">
            @csrf
            <div class="form-grid">
                <div>
                    <label class="form-label">Select Specialist / Doctor</label>
                    <select name="counsellor_id" id="counsellor_id" class="form-select" required style="pointer-events: none; background-color: #e9ecef; appearance: none; -webkit-appearance: none; -moz-appearance: none;" tabindex="-1">
                        <option value="">-- Choose Counsellor --</option>
                        @foreach($counsellors as $c)
                            <option value="{{ $c->id }}" {{ ($selectedCounsellorId == $c->id || count($counsellors) == 1) ? 'selected' : '' }}>
                                {{ $c->first_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="form-label">Session Type</label>
                    <select name="session_type" id="session_type" class="form-select" required onchange="updateAmount()">
                        <option value="" data-fees="0">-- Select Session Type --</option>
                        @foreach($sessionTypes as $st)
                            <option value="{{ $st->id }}" data-fees="{{ $st->fees }}">
                                {{ $st->name }} (₹{{ $st->fees }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-grid">
                <div>
                    <label class="form-label">Appointment Date</label>
                    <input type="date" name="appointment_date" class="form-control" min="{{ date('Y-m-d') }}" required>
                </div>

                <div>
                    <label class="form-label">Number of Sessions</label>
                    <input type="number" name="sessions" id="sessions" class="form-control" min="1" value="1" required oninput="updateAmount()" onchange="updateAmount()">
                </div>
            </div>

            <div>
                <label class="form-label">Available Time Slot</label>
                <select id="time_slot_select" class="form-select" required>
                    <option value="">-- Choose a Slot --</option>
                </select>
                <input type="hidden" name="start_time" id="start_time_hidden">
                <input type="hidden" name="end_time" id="end_time_hidden">
            </div>

            <div>
                <label class="form-label">Total Amount (₹)</label>
                <input type="text" name="amount" id="amount" class="form-control" readonly placeholder="₹ 0" required>
            </div>

            <div>
                <label class="form-label">Additional Notes / Concerns (Optional)</label>
                <textarea name="note" class="form-control" rows="3" placeholder="Share any specific goals, concerns, or preference..."></textarea>
            </div>

            <button type="submit" class="btn-submit-booking">Confirm Appointment Booking</button>
        </form>
    </div>
</div>

<script>
    document.getElementById('bookingForm').addEventListener('submit', function(e) {
        @if(!Auth::check())
            e.preventDefault();
            alert('Please login first to confirm your appointment booking.');
            window.location.href = "{{ route('portal.customer.login') }}";
        @endif
    });

    function updateAmount() {
        const select = document.getElementById('session_type');
        const selectedOption = select.options[select.selectedIndex];
        const fees = parseFloat(selectedOption.getAttribute('data-fees') || 0);
        const sessions = parseInt(document.getElementById('sessions').value || 1);
        const total = fees * sessions;
        document.getElementById('amount').value = total ? total : '';
    }

    document.getElementById('session_type').addEventListener('change', fetchAvailableSlot);
    document.getElementById('counsellor_id').addEventListener('change', fetchAvailableSlot);

    // Call on page load in case values are pre-selected
    document.addEventListener('DOMContentLoaded', () => {
        fetchAvailableSlot();
        updateAmount();
    });

    function fetchAvailableSlot() {
        const counsellorId = document.getElementById('counsellor_id').value;
        const sessionTypeId = document.getElementById('session_type').value;

        if (counsellorId && sessionTypeId) {
            fetch(`/get-first-available-slot?counsellor_id=${counsellorId}&session_type_id=${sessionTypeId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.querySelector('input[name="appointment_date"]').value = data.date;
                        document.getElementById('start_time_hidden').value = data.start_time;
                        document.getElementById('end_time_hidden').value = data.end_time;
                        
                        // Load slots for the date and pre-select this slot
                        fetchSlotsForDate(data.start_time, data.end_time);
                    } else {
                        // If no first available slot can be retrieved, fetch slots for the current selected date
                        fetchSlotsForDate();
                    }
                })
                .catch(error => {
                    console.error('Error fetching slot:', error);
                    fetchSlotsForDate();
                });
        } else {
            fetchSlotsForDate();
        }
    }

    const dateInput = document.querySelector('input[name="appointment_date"]');
    if (dateInput) {
        dateInput.addEventListener('change', () => {
            fetchSlotsForDate();
        });
    }

    const slotSelect = document.getElementById('time_slot_select');
    if (slotSelect) {
        slotSelect.addEventListener('change', function() {
            updateHiddenTimes(this.value);
        });
    }

    function fetchSlotsForDate(preSelectedStart = null, preSelectedEnd = null) {
        const counsellorId = document.getElementById('counsellor_id').value;
        const sessionTypeId = document.getElementById('session_type').value;
        const dateInput = document.querySelector('input[name="appointment_date"]');
        const date = dateInput ? dateInput.value : '';
        const slotSelect = document.getElementById('time_slot_select');

        if (!slotSelect) return;

        // Clear existing options
        slotSelect.innerHTML = '<option value="">-- Choose a Slot --</option>';
        document.getElementById('start_time_hidden').value = '';
        document.getElementById('end_time_hidden').value = '';

        if (counsellorId && date) {
            let url = `/get-slots/${counsellorId}?date=${date}`;
            if (sessionTypeId) {
                url += `&session_type_id=${sessionTypeId}`;
            }
            fetch(url)
                .then(response => response.json())
                .then(slots => {
                    let optionsAdded = 0;
                    let autoSelectValue = '';

                    if (Array.isArray(slots)) {
                        slots.forEach(slot => {
                            const optionValue = slot.raw_start + '|' + slot.raw_end;
                            const optionText = `${slot.start_time} - ${slot.end_time}`;
                            
                            const option = document.createElement('option');
                            option.value = optionValue;

                            if (slot.is_booked) {
                                option.disabled = true;
                                option.textContent = `${optionText} (Booked)`;
                            } else {
                                option.textContent = optionText;
                                optionsAdded++;
                            }

                            // Check if we should pre-select this option
                            if (preSelectedStart && preSelectedEnd) {
                                const psStart = parseTimeToMinutes(preSelectedStart);
                                const psEnd = parseTimeToMinutes(preSelectedEnd);
                                const slotStart = parseTimeToMinutes(slot.raw_start);
                                const slotEnd = parseTimeToMinutes(slot.raw_end);

                                if (psStart === slotStart && psEnd === slotEnd && !slot.is_booked) {
                                    autoSelectValue = optionValue;
                                }
                            }

                            slotSelect.appendChild(option);
                        });
                    } else if (slots && slots.debug && slots.debug.message) {
                        const option = document.createElement('option');
                        option.value = '';
                        option.disabled = true;
                        option.textContent = slots.debug.message;
                        slotSelect.appendChild(option);
                    }

                    if (optionsAdded === 0 && (!slots || !slots.debug)) {
                        const option = document.createElement('option');
                        option.value = '';
                        option.disabled = true;
                        option.textContent = 'No slots available for this date.';
                        slotSelect.appendChild(option);
                    }

                    // If we found a matching auto-select value, select it
                    if (autoSelectValue) {
                        slotSelect.value = autoSelectValue;
                        updateHiddenTimes(autoSelectValue);
                    }
                })
                .catch(error => {
                    console.error('Error fetching slots:', error);
                });
        }
    }

    function parseTimeToMinutes(timeStr) {
        if (!timeStr) return -1;
        const parts = timeStr.split(':');
        if (parts.length < 2) return -1;
        let hours = parseInt(parts[0]);
        let minutes = parseInt(parts[1]);
        
        if (timeStr.toLowerCase().includes('pm') && hours < 12) {
            hours += 12;
        } else if (timeStr.toLowerCase().includes('am') && hours === 12) {
            hours = 0;
        }
        return hours * 60 + minutes;
    }

    function updateHiddenTimes(value) {
        const startHidden = document.getElementById('start_time_hidden');
        const endHidden = document.getElementById('end_time_hidden');
        if (value) {
            const times = value.split('|');
            if (times.length === 2) {
                startHidden.value = times[0];
                endHidden.value = times[1];
            }
        } else {
            startHidden.value = '';
            endHidden.value = '';
        }
    }
</script>
@endsection