@extends('layouts.portal')

@section('title', __('time_slots.add_time_slot') . ' — ' . config('app.name'))
@section('page_title', __('time_slots.add_time_slot'))

@section('page_actions')
    <a href="{{ route('portal.time-slots.index') }}" class="btn-ghost !px-5 !py-2.5 text-sm no-underline">{{ __('common.back') }}</a>
@endsection

@section('content')
    <div class="grid gap-5 xl:grid-cols-2">

        {{-- Single day --}}
        <div class="card-sc">
            <h2 class="text-lg">{{ __('time_slots.add_available_time_slot_title') }}</h2>
            <p class="mt-1 text-sm text-ink-500">{{ __('time_slots.slot_automatically_divided') }}</p>

            <form id="singleSlotForm" method="POST" action="{{ route('portal.time-slots.store') }}" class="mt-5 space-y-4">
                @csrf
                @include('portal.time-slots._type-picker', ['name' => 'type', 'id' => 'single'])
                <div>
                    <label for="date" class="field-label">{{ __('appointments.appointment_date') }}</label>
                    <input id="date" name="date" type="date" required min="{{ now()->toDateString() }}" class="field-input">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="start_time" class="field-label">{{ __('time_slots.start_time_label') }}</label>
                        <input id="start_time" name="start_time" type="time" required class="field-input">
                    </div>
                    <div>
                        <label for="end_time" class="field-label">{{ __('time_slots.end_time_label') }}</label>
                        <input id="end_time" name="end_time" type="time" required class="field-input">
                    </div>
                </div>
                <button type="submit" class="btn-brand w-full">{{ __('time_slots.add_time_slot') }}</button>
            </form>
        </div>

        {{-- Weekly bulk --}}
        <div class="card-sc">
            <h2 class="text-lg">{{ __('time_slots.add_weekly_time_slots_title') }}</h2>
            <p class="mt-1 text-sm text-ink-500">{{ __('time_slots.weekly_slots_automatically_divided') }}</p>

            <form id="bulkForm" method="POST" action="{{ route('portal.time-slots.bulk-create') }}" class="mt-5 space-y-4">
                @csrf
                @include('portal.time-slots._type-picker', ['name' => 'type', 'id' => 'bulk'])

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="start_date" class="field-label">{{ __('time_slots.start_date') }}</label>
                        <input id="start_date" name="start_date" type="date" required
                               value="{{ now()->toDateString() }}" min="{{ now()->toDateString() }}" class="field-input">
                    </div>
                    <div>
                        <label for="end_date" class="field-label">{{ __('time_slots.end_date') }}</label>
                        <input id="end_date" name="end_date" type="date" required
                               value="{{ now()->addWeek()->toDateString() }}" min="{{ now()->toDateString() }}" class="field-input">
                    </div>
                </div>

                <div>
                    <label class="field-label">{{ __('time_slots.off_days') }}</label>
                    <p class="mb-2 text-xs text-ink-400">{{ __('time_slots.off_days_hint') }}</p>
                    <div class="flex flex-wrap gap-3">
                        @foreach (__('time_slots.days') as $index => $label)
                            <label class="flex items-center gap-2 rounded-xl border border-ink-200 px-3 py-2 text-sm font-semibold text-ink-600 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50 has-[:checked]:text-brand-700">
                                <input type="checkbox" name="off_days[]" value="{{ $index }}"
                                       class="rounded border-ink-300 text-brand-500 focus:ring-brand-300"
                                       @checked(in_array($index, [5, 6]))>
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="field-label">{{ __('time_slots.time_slots_label') }}</label>
                    <div id="timeSlotsList" class="space-y-2">
                        <div class="timeSlotRow grid grid-cols-[1fr_1fr_auto] gap-2">
                            <input type="time" name="time_slots[0][start_time]" class="field-input" required>
                            <input type="time" name="time_slots[0][end_time]" class="field-input" required>
                            <button type="button" class="removeSlot btn-ghost hidden !px-3" aria-label="{{ __('common.delete') }}">✕</button>
                        </div>
                    </div>
                    <button type="button" class="btn-ghost mt-2 text-sm" id="addSlotBtn">{{ __('time_slots.add_another_slot') }}</button>
                </div>

                <button type="submit" class="btn-brand w-full">{{ __('time_slots.add_available_time_slot') }}</button>
            </form>
        </div>
    </div>

    {{-- Feedback modal (simple, no Bootstrap JS dependency) --}}
    <div id="feedbackModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-brand-900/40 p-4">
        <div class="w-full max-w-md rounded-3xl bg-white p-6 shadow-card">
            <h3 id="feedbackTitle" class="text-lg font-bold"></h3>
            <p id="feedbackMessage" class="mt-2 text-ink-600"></p>
            <ul id="feedbackList" class="mt-2 list-inside list-disc text-sm text-red-600"></ul>
            <button type="button" id="feedbackClose" class="btn-brand mt-5 w-full">OK</button>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function addMinutes(timeStr, minutes) {
    let [hours, mins] = timeStr.split(':').map(Number);
    mins += minutes;
    hours += Math.floor(mins / 60);
    mins = mins % 60;
    hours = hours % 24;
    return String(hours).padStart(2, '0') + ':' + String(mins).padStart(2, '0');
}

document.addEventListener('DOMContentLoaded', function () {
    const startTimeInput = document.querySelector('#singleSlotForm input[name="start_time"]');
    const endTimeInput = document.querySelector('#singleSlotForm input[name="end_time"]');
    if (startTimeInput && endTimeInput) {
        startTimeInput.addEventListener('change', function () {
            if (this.value) endTimeInput.value = addMinutes(this.value, 45);
        });
    }

    const bulkForm = document.getElementById('bulkForm');
    bulkForm.addEventListener('change', function (e) {
        if (e.target.name && e.target.name.includes('start_time')) {
            const row = e.target.closest('.timeSlotRow');
            const endInput = row?.querySelector('input[name*="end_time"]');
            if (endInput && e.target.value) endInput.value = addMinutes(e.target.value, 45);
        }
    });

    const modal = document.getElementById('feedbackModal');
    const modalTitle = document.getElementById('feedbackTitle');
    const modalMessage = document.getElementById('feedbackMessage');
    const modalList = document.getElementById('feedbackList');

    function showFeedback(kind, message, list) {
        modalTitle.textContent = kind === 'success' ? 'Success' : 'Error';
        modalTitle.className = 'text-lg font-bold ' + (kind === 'success' ? 'text-emerald-700' : 'text-red-700');
        modalMessage.textContent = message || '';
        modalList.innerHTML = '';
        (list || []).forEach(msg => {
            const li = document.createElement('li');
            li.textContent = msg;
            modalList.appendChild(li);
        });
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    document.getElementById('feedbackClose').addEventListener('click', function () {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    });

    function submitForm(form) {
        const formData = new FormData(form);

        fetch(form.getAttribute('action'), {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            body: formData,
        })
            .then(response => response.json().then(data => ({ status: response.status, data })))
            .then(({ status, data }) => {
                if (status === 200 && data.status === 'success') {
                    let message = data.message || 'Time slots added successfully!';
                    if (data.skipped) message += ` (${data.skipped} already existed and were skipped.)`;
                    showFeedback('success', message);
                    form.reset();
                } else {
                    const errors = data.errors ? Object.values(data.errors).flat() : [];
                    showFeedback('error', data.message || 'Please check the form and try again.', errors);
                }
            })
            .catch(error => showFeedback('error', 'An error occurred: ' + error.message));
    }

    document.getElementById('singleSlotForm').addEventListener('submit', function (e) {
        e.preventDefault();
        submitForm(this);
    });

    bulkForm.addEventListener('submit', function (e) {
        e.preventDefault();
        submitForm(this);
    });

    document.getElementById('addSlotBtn').addEventListener('click', function () {
        const list = document.getElementById('timeSlotsList');
        const count = list.querySelectorAll('.timeSlotRow').length;

        const row = document.createElement('div');
        row.className = 'timeSlotRow grid grid-cols-[1fr_1fr_auto] gap-2';
        row.innerHTML = `
            <input type="time" name="time_slots[${count}][start_time]" class="field-input" required>
            <input type="time" name="time_slots[${count}][end_time]" class="field-input" required>
            <button type="button" class="removeSlot btn-ghost !px-3" aria-label="Remove">✕</button>`;
        list.appendChild(row);
        updateRemoveButtons();
    });

    function updateRemoveButtons() {
        const rows = document.querySelectorAll('.timeSlotRow');
        rows.forEach(row => {
            const btn = row.querySelector('.removeSlot');
            btn.classList.toggle('hidden', rows.length <= 1);
        });
    }

    document.addEventListener('click', function (e) {
        if (e.target.closest('.removeSlot')) {
            e.preventDefault();
            e.target.closest('.timeSlotRow').remove();
            updateRemoveButtons();
        }
    });

    updateRemoveButtons();
});
</script>
@endpush