@extends('layouts.public')

@section('title', __('booking.title') . ' — ' . config('app.name'))
@section('meta_description', __('booking.subtitle'))

@section('content')
<div class="container mx-auto max-w-3xl px-4 py-10 md:py-16">
    <div class="mb-8 text-center">
        <h1 class="text-3xl font-extrabold text-ink-900 md:text-4xl">{{ __('booking.title') }}</h1>
        <p class="mt-2 text-ink-500">{{ __('booking.subtitle') }}</p>
    </div>

    {{-- Step indicator --}}
    <ol class="mb-8 flex items-center justify-center gap-2 text-sm font-semibold text-ink-400" id="stepIndicator">
        @foreach ([__('booking.step_type'), __('booking.step_consultant'), __('booking.step_slot'), __('booking.step_details')] as $i => $label)
            <li class="step-pill flex items-center gap-2 rounded-full px-3 py-1.5" data-step="{{ $i + 1 }}">
                <span class="step-dot flex h-5 w-5 items-center justify-center rounded-full bg-ink-200 text-xs text-white">{{ $i + 1 }}</span>
                <span class="hidden sm:inline">{{ $label }}</span>
            </li>
        @endforeach
    </ol>

    <div id="bookingError" class="mb-5 hidden rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700"></div>

    {{-- Step 1: consultation type --}}
    <section class="wizard-step card-sc" data-step="1">
        <h2 class="text-lg">{{ __('booking.choose_type') }}</h2>
        <div class="mt-4 grid gap-4 sm:grid-cols-2">
            <button type="button" class="type-option rounded-2xl border-2 border-ink-200 p-5 text-start transition hover:border-brand-500" data-type="onsite">
                <span class="text-2xl">🏥</span>
                <p class="mt-2 font-bold text-ink-900">{{ __('booking.type_onsite') }}</p>
                <p class="mt-1 text-sm text-ink-500">{{ __('booking.type_onsite_desc') }}</p>
            </button>
            <button type="button" class="type-option rounded-2xl border-2 border-ink-200 p-5 text-start transition hover:border-brand-500" data-type="online">
                <span class="text-2xl">💻</span>
                <p class="mt-2 font-bold text-ink-900">{{ __('booking.type_online') }}</p>
                <p class="mt-1 text-sm text-ink-500">{{ __('booking.type_online_desc') }}</p>
            </button>
        </div>
    </section>

    {{-- Step 2: consultant --}}
    <section class="wizard-step card-sc hidden" data-step="2">
        <h2 class="text-lg">{{ __('booking.choose_consultant') }}</h2>
        <div id="consultantList" class="mt-4 grid gap-3 sm:grid-cols-2"></div>
        <p id="consultantEmpty" class="hidden py-6 text-center text-ink-400">{{ __('booking.no_consultants') }}</p>
        <button type="button" class="step-back btn-ghost mt-5 text-sm">{{ __('booking.back') }}</button>
    </section>

    {{-- Step 3: date + slot --}}
    <section class="wizard-step card-sc hidden" data-step="3">
        <h2 class="text-lg">{{ __('booking.choose_date') }}</h2>

        <div id="calendarWrap" class="mt-4">
            <div class="flex items-center justify-between px-1">
                <button type="button" id="calPrev" class="cal-nav-btn" aria-label="{{ __('booking.back') }}">‹</button>
                <p id="calMonthLabel" class="text-base font-extrabold text-ink-900"></p>
                <button type="button" id="calNext" class="cal-nav-btn" aria-label="next">›</button>
            </div>
            <div id="calWeekdays" class="mt-3 grid grid-cols-7 pb-2 text-center text-xs font-bold text-ink-400"></div>
            <div id="calGrid" class="grid grid-cols-7 overflow-hidden rounded-lg"></div>
        </div>
        <p id="dateEmpty" class="hidden py-6 text-center text-ink-400">{{ __('booking.no_dates') }}</p>

        <div id="slotSection" class="mt-6 hidden">
            <h3 class="field-label">{{ __('booking.choose_slot') }}</h3>
            <div id="slotList" class="mt-2 grid grid-cols-3 gap-2 sm:grid-cols-4"></div>
        </div>

        <button type="button" class="step-back btn-ghost mt-5 text-sm">{{ __('booking.back') }}</button>
    </section>

    {{-- Step 4: patient details --}}
    <section class="wizard-step card-sc hidden" data-step="4">
        <div id="selectedSlotSummary" class="mb-5 rounded-2xl bg-brand-50 px-4 py-3 text-sm font-semibold text-brand-800"></div>

        <form id="bookingForm" class="space-y-4">
            @csrf
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label for="patient_name" class="field-label">{{ __('booking.full_name') }} *</label>
                    <input id="patient_name" name="patient_name" type="text" required class="field-input">
                    <p class="field-error hidden" data-error="patient_name"></p>
                </div>
                <div>
                    <label for="phone" class="field-label">{{ __('booking.phone') }} *</label>
                    <input id="phone" name="phone" type="tel" dir="ltr" placeholder="05XXXXXXXX" required class="field-input">
                    <p class="field-error hidden" data-error="phone"></p>
                </div>
                <div>
                    <label for="national_id" class="field-label">{{ __('booking.national_id') }} <span class="text-ink-400">({{ __('booking.national_id_optional') }})</span></label>
                    <input id="national_id" name="national_id" type="text" dir="ltr" class="field-input">
                    <p class="field-error hidden" data-error="national_id"></p>
                </div>
                <div>
                    <label for="gender" class="field-label">{{ __('booking.gender') }} *</label>
                    <select id="gender" name="gender" required class="field-input">
                        <option value="male">{{ __('common.male') }}</option>
                        <option value="female">{{ __('common.female') }}</option>
                    </select>
                    <p class="field-error hidden" data-error="gender"></p>
                </div>
                <div>
                    <label for="date_of_birth" class="field-label">{{ __('booking.date_of_birth') }} *</label>
                    <input id="date_of_birth" name="date_of_birth" type="date" required class="field-input">
                    <p class="field-error hidden" data-error="date_of_birth"></p>
                </div>
                <div>
                    <label for="visit_type" class="field-label">{{ __('booking.visit_type') }} *</label>
                    <select id="visit_type" name="visit_type" required class="field-input">
                        <option value="first_time">{{ __('appointments.visit_types.first_time') }}</option>
                        <option value="follow_up">{{ __('appointments.visit_types.follow_up') }}</option>
                    </select>
                    <p class="field-error hidden" data-error="visit_type"></p>
                </div>
                <div>
                    <label for="weight_kg" class="field-label">{{ __('booking.weight_kg') }} *</label>
                    <input id="weight_kg" name="weight_kg" type="number" step="0.1" required class="field-input">
                    <p class="field-error hidden" data-error="weight_kg"></p>
                </div>
                <div>
                    <label for="height_cm" class="field-label">{{ __('booking.height_cm') }} *</label>
                    <input id="height_cm" name="height_cm" type="number" step="0.1" required class="field-input">
                    <p class="field-error hidden" data-error="height_cm"></p>
                </div>
            </div>

            <div>
                <label for="address" class="field-label">{{ __('booking.address') }}</label>
                <input id="address" name="address" type="text" class="field-input">
                <p class="field-error hidden" data-error="address"></p>
            </div>

            <div>
                <label for="consultation_topic" class="field-label">{{ __('booking.consultation_topic') }} *</label>
                <textarea id="consultation_topic" name="consultation_topic" rows="2" required class="field-input"></textarea>
                <p class="field-error hidden" data-error="consultation_topic"></p>
            </div>

            <input type="hidden" name="time_slot_id" id="time_slot_id">

            <div class="flex gap-3">
                <button type="button" class="step-back btn-ghost text-sm">{{ __('booking.back') }}</button>
                <button type="submit" class="btn-brand flex-1" id="submitBtn">{{ __('booking.confirm_booking') }}</button>
            </div>
        </form>
    </section>
</div>
@endsection

@push('head')
<style>
    .step-pill.is-active { background: var(--sc-green, #5F8A31); color: #fff; }
    .step-pill.is-active .step-dot { background: rgba(255,255,255,.35); }
    .type-option.is-selected, .consultant-option.is-selected, .date-option.is-selected {
        border-color: var(--sc-green, #5F8A31) !important;
        background: rgba(47, 180, 35, 0.06);
    }
    .slot-option.is-selected { background: var(--sc-green, #5F8A31); color: #fff; border-color: var(--sc-green, #5F8A31); }
    .slot-option:disabled { opacity: .4; cursor: not-allowed; }

    .cal-nav-btn {
        display: flex; align-items: center; justify-content: center;
        width: 2.25rem; height: 2.25rem; border-radius: 9999px;
        font-size: 1.25rem; font-weight: 800; color: var(--sc-green, #5F8A31);
        background: rgba(47, 180, 35, 0.08); transition: background .15s;
    }
    .cal-nav-btn:hover { background: rgba(47, 180, 35, 0.16); }
    .cal-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

    #calGrid { border-top: 1px solid #e5e7eb; border-inline-start: 1px solid #e5e7eb; }
    .cal-day {
        position: relative;
        display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
        gap: .3rem;
        padding: .4rem;
        min-height: 4.75rem;
        border-inline-end: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
        background: #fff;
        font-weight: 700;
        font-size: .8125rem;
        color: #b8bcc4; /* gray: no slots */
        cursor: not-allowed;
        text-align: start;
    }
    .cal-day.is-empty { background: #fafafa; cursor: default; }
    .cal-day.has-slots {
        color: #1f2937;
        cursor: pointer;
        background: #fff;
    }
    .cal-day.has-slots:hover { background: rgba(47, 180, 35, .06); }
    .cal-day-num {
        display: flex; align-items: center; justify-content: center;
        width: 1.5rem; height: 1.5rem; border-radius: 9999px;
    }
    .cal-day.is-today .cal-day-num { background: #e5382e; color: #fff; }
    .cal-day.is-selected { background: rgba(47, 180, 35, .1); }
    .cal-day.is-selected .cal-day-num { background: var(--sc-green, #5F8A31); color: #fff; }
    .cal-day-badge {
        align-self: stretch;
        display: flex; align-items: center; justify-content: center;
        gap: .25rem;
        padding: .1rem .4rem;
        border-radius: .35rem;
        background: rgba(47, 180, 35, .12);
        color: var(--sc-green, #5F8A31);
        font-size: .6875rem;
        font-weight: 700;
        line-height: 1.3;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const state = { type: null, consultant: null, consultantName: null, date: null, slot: null, slotLabel: null };
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    const steps = document.querySelectorAll('.wizard-step');
    const pills = document.querySelectorAll('.step-pill');
    const errorBox = document.getElementById('bookingError');

    function showStep(n) {
        steps.forEach(s => s.classList.toggle('hidden', s.dataset.step != n));
        pills.forEach(p => p.classList.toggle('is-active', p.dataset.step <= n));
        errorBox.classList.add('hidden');
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function showError(message) {
        errorBox.textContent = message;
        errorBox.classList.remove('hidden');
    }

    document.querySelectorAll('.step-back').forEach(btn => {
        btn.addEventListener('click', function () {
            const current = parseInt(this.closest('.wizard-step').dataset.step, 10);
            showStep(Math.max(1, current - 1));
        });
    });

    // Step 1 -> type
    document.querySelectorAll('.type-option').forEach(btn => {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.type-option').forEach(b => b.classList.remove('is-selected'));
            this.classList.add('is-selected');
            state.type = this.dataset.type;
            loadConsultants();
        });
    });

    function loadConsultants() {
        const list = document.getElementById('consultantList');
        const empty = document.getElementById('consultantEmpty');
        list.innerHTML = `<p class="col-span-2 py-6 text-center text-ink-400">{{ __('booking.loading') }}</p>`;
        empty.classList.add('hidden');
        showStep(2);

        fetch(`{{ route('booking.consultants') }}?type=${state.type}`)
            .then(r => r.json())
            .then(({ data }) => {
                list.innerHTML = '';
                if (!data.length) {
                    empty.classList.remove('hidden');
                    return;
                }
                data.forEach(c => {
                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'consultant-option rounded-2xl border-2 border-ink-200 p-4 text-start transition hover:border-brand-500';
                    btn.innerHTML = `<p class="font-bold text-ink-900">${c.name}</p>` +
                        (c.job_title ? `<p class="mt-1 text-sm text-ink-500">${c.job_title}</p>` : '');
                    btn.addEventListener('click', () => {
                        document.querySelectorAll('.consultant-option').forEach(b => b.classList.remove('is-selected'));
                        btn.classList.add('is-selected');
                        state.consultant = c.id;
                        state.consultantName = c.name;
                        loadSlots();
                    });
                    list.appendChild(btn);
                });
            })
            .catch(() => showError(@json(__('booking.error_generic'))));
    }

    let slotsByDate = {};
    let calendarViewDate = new Date();
    calendarViewDate.setDate(1);

    function loadSlots() {
        const calWrap = document.getElementById('calendarWrap');
        const dateEmpty = document.getElementById('dateEmpty');
        const slotSection = document.getElementById('slotSection');
        calWrap.classList.remove('hidden');
        dateEmpty.classList.add('hidden');
        slotSection.classList.add('hidden');
        showStep(3);

        fetch(`{{ route('booking.slots') }}?consultant_id=${state.consultant}&type=${state.type}`)
            .then(r => r.json())
            .then(({ data }) => {
                slotsByDate = data;
                const dates = Object.keys(data);
                if (!dates.length) {
                    calWrap.classList.add('hidden');
                    dateEmpty.classList.remove('hidden');
                    return;
                }
                // Start the calendar on the month of the first available date.
                calendarViewDate = new Date(dates[0] + 'T00:00:00');
                calendarViewDate.setDate(1);
                renderCalendar();
            })
            .catch(() => showError(@json(__('booking.error_generic'))));
    }

    document.getElementById('calPrev').addEventListener('click', () => {
        calendarViewDate.setMonth(calendarViewDate.getMonth() - 1);
        renderCalendar();
    });
    document.getElementById('calNext').addEventListener('click', () => {
        calendarViewDate.setMonth(calendarViewDate.getMonth() + 1);
        renderCalendar();
    });

    function renderCalendar() {
        const weekdaysEl = document.getElementById('calWeekdays');
        const gridEl = document.getElementById('calGrid');
        const labelEl = document.getElementById('calMonthLabel');
        const slotSection = document.getElementById('slotSection');
        slotSection.classList.add('hidden');

        const year = calendarViewDate.getFullYear();
        const month = calendarViewDate.getMonth();
        labelEl.textContent = calendarViewDate.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });

        const weekdayFmt = new Intl.DateTimeFormat(undefined, { weekday: 'narrow' });
        weekdaysEl.innerHTML = '';
        for (let i = 0; i < 7; i++) {
            const d = new Date(2024, 5, 2 + i); // a known Sunday-start week
            const span = document.createElement('span');
            span.textContent = weekdayFmt.format(d);
            weekdaysEl.appendChild(span);
        }

        const firstDayOfMonth = new Date(year, month, 1);
        const startOffset = firstDayOfMonth.getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        const todayStr = new Date().toISOString().slice(0, 10);

        gridEl.innerHTML = '';
        for (let i = 0; i < startOffset; i++) {
            const empty = document.createElement('div');
            empty.className = 'cal-day is-empty';
            gridEl.appendChild(empty);
        }

        for (let day = 1; day <= daysInMonth; day++) {
            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
            const daySlots = slotsByDate[dateStr] || [];
            const hasSlots = daySlots.length > 0;

            const cell = document.createElement('button');
            cell.type = 'button';
            cell.className = 'cal-day' + (hasSlots ? ' has-slots' : '');
            cell.disabled = !hasSlots;
            if (dateStr === todayStr) cell.classList.add('is-today');
            cell.innerHTML = `<span class="cal-day-num">${day}</span>` +
                (hasSlots
                    ? `<span class="cal-day-badge">${daySlots.length} {{ __('booking.choose_slot') }}</span>`
                    : '');

            if (hasSlots) {
                cell.addEventListener('click', () => {
                    document.querySelectorAll('.cal-day').forEach(b => b.classList.remove('is-selected'));
                    cell.classList.add('is-selected');
                    state.date = dateStr;
                    renderSlots(dateStr);
                });
            }

            gridEl.appendChild(cell);
        }
    }

    function renderSlots(date) {
        const slotSection = document.getElementById('slotSection');
        const slotList = document.getElementById('slotList');
        slotList.innerHTML = '';
        slotSection.classList.remove('hidden');

        (slotsByDate[date] || []).forEach(slot => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'slot-option rounded-xl border-2 border-ink-200 px-2 py-2 text-sm font-bold transition hover:border-brand-500';
            btn.textContent = slot.start;
            btn.addEventListener('click', () => {
                document.querySelectorAll('.slot-option').forEach(b => b.classList.remove('is-selected'));
                btn.classList.add('is-selected');
                state.slot = slot.id;
                state.slotLabel = `${slot.start} – ${slot.end}`;
                goToDetails();
            });
            slotList.appendChild(btn);
        });
    }

    function goToDetails() {
        document.getElementById('time_slot_id').value = state.slot;
        document.getElementById('selectedSlotSummary').textContent =
            `${state.consultantName} · ${new Date(state.date + 'T00:00:00').toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' })} · ${state.slotLabel}`;
        showStep(4);
    }

    // Step 4 -> submit
    document.getElementById('bookingForm').addEventListener('submit', function (e) {
        e.preventDefault();

        document.querySelectorAll('.field-error').forEach(el => el.classList.add('hidden'));
        errorBox.classList.add('hidden');

        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.textContent = '{{ __('booking.loading') }}';

        fetch(@json(route('booking.store')), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: new FormData(this),
        })
            .then(response => response.json().then(data => ({ status: response.status, data })))
            .then(({ status, data }) => {
                if (status === 200 && data.redirect) {
                    window.location.href = data.redirect;
                    return;
                }

                if (status === 422 && data.errors) {
                    Object.entries(data.errors).forEach(([field, messages]) => {
                        const el = document.querySelector(`[data-error="${field}"]`);
                        if (el) {
                            el.textContent = messages[0];
                            el.classList.remove('hidden');
                        }
                    });
                    showError(data.message || @json(__('booking.error_generic')));
                } else if (status === 409) {
                    showError(data.message || @json(__('booking.slot_taken')));
                } else {
                    showError(data.message || @json(__('booking.error_generic')));
                }

                submitBtn.disabled = false;
                submitBtn.textContent = @json(__('booking.confirm_booking'));
            })
            .catch(() => {
                showError(@json(__('booking.error_generic')));
                submitBtn.disabled = false;
                submitBtn.textContent = @json(__('booking.confirm_booking'));
            });
    });

    showStep(1);
});
</script>
@endpush