@extends('layouts.public')

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

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

        @if (! $appointment->canSelfReschedule())
            <div class="mt-5 rounded-2xl bg-amber-50 p-4 text-sm text-amber-800">
                {{ __('booking.reschedule_locked', [
                    'hours' => \App\Models\Appointment::RESCHEDULE_CUTOFF_HOURS,
                    'max' => \App\Models\Appointment::MAX_RESCHEDULES,
                ]) }}
            </div>
        @else
            <p class="mt-3 text-sm font-semibold text-brand-700">
                {{ __('booking.reschedule_remaining', [
                    'count' => \App\Models\Appointment::MAX_RESCHEDULES - $appointment->reschedule_count,
                    'max' => \App\Models\Appointment::MAX_RESCHEDULES,
                ]) }}
            </p>

            <div id="errorBox" class="mt-4 hidden rounded-2xl bg-red-50 p-4 text-sm text-red-700"></div>

            <div id="dateList" class="mt-5 grid grid-cols-2 gap-2 sm:grid-cols-3"></div>
            <p id="noDates" class="mt-5 hidden text-center text-ink-400">{{ __('booking.no_dates') }}</p>

            <div id="slotSection" class="mt-5 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>
        @endif
    </div>
</div>
@endsection

@if ($appointment->canSelfReschedule())
    @push('scripts')
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const consultantId = {{ $appointment->consultant_id }};
        const type = @json($appointment->type);
        let slotsByDate = {};

        fetch(`{{ route('booking.slots') }}?consultant_id=${consultantId}&type=${type}`)
            .then(r => r.json())
            .then(({ data }) => {
                slotsByDate = data;
                const dates = Object.keys(data);
                const dateList = document.getElementById('dateList');

                if (!dates.length) {
                    document.getElementById('noDates').classList.remove('hidden');
                    return;
                }

                dates.forEach(date => {
                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'rounded-xl border-2 border-ink-200 px-3 py-2 text-sm font-bold transition hover:border-brand-500';
                    btn.textContent = new Date(date + 'T00:00:00').toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' });
                    btn.addEventListener('click', () => {
                        document.querySelectorAll('#dateList button').forEach(b => b.classList.remove('is-selected', 'border-brand-500'));
                        btn.classList.add('is-selected', 'border-brand-500');
                        renderSlots(date);
                    });
                    dateList.appendChild(btn);
                });
            })
            .catch(() => showError(@json(__('booking.error_generic'))));

        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 = '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', () => submitReschedule(slot.id));
                slotList.appendChild(btn);
            });
        }

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

        function submitReschedule(slotId) {
            fetch(@json(route('booking.reschedule.update', $appointment->qr_token)), {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': @json(csrf_token()),
                },
                body: JSON.stringify({ time_slot_id: slotId }),
            })
                .then(r => r.json().then(data => ({ status: r.status, data })))
                .then(({ status, data }) => {
                    if (status >= 200 && status < 300 && data.redirect) {
                        window.location.href = data.redirect;
                    } else {
                        showError(data.errors ? Object.values(data.errors).flat()[0] : @json(__('booking.error_generic')));
                    }
                })
                .catch(() => showError(@json(__('booking.error_generic'))));
        }
    });
    </script>
    @endpush
@endif