{% extends "base.html" %}

{% block title %}Termin buchen - Inventarsystem{% endblock %}

{% block head %}
{{ super() }}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet">
<style>
    #client-slot-calendar {
        min-height: 520px;
    }
    .fc .fc-timegrid-slot-label-cushion,
    .fc .fc-timegrid-axis-cushion,
    .fc .fc-col-header-cell-cushion {
        font-weight: 600;
    }
    .slot-selected-chip {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border-radius: 999px;
        background: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
        padding: .35rem .75rem;
        font-size: .9rem;
        font-weight: 700;
    }
    .day-slider-wrap {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: .9rem;
        padding: .8rem 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-xxl-11">
            <div class="row g-4">
                <div class="col-12 col-lg-4">
                    <div class="card border-0 shadow-lg rounded-4 h-100">
                        <div class="card-body p-4 p-md-5">
                            <p class="text-uppercase text-muted fw-semibold mb-2">Terminplaner</p>
                            <h1 class="h3 fw-bold mb-3">Termin buchen - {{ available.title }}</h1>
                            <p class="text-muted mb-4">Wählen Sie im Kalender einen freien Slot aus. Den gewählten Termin können Sie danach direkt wie in einem Kalender-Block verschieben.</p>

                            <div class="p-3 rounded-3 bg-light mb-3">
                                <div class="fw-semibold">Zeitraum</div>
                                <div>{{ available.date_start }} bis {{ available.date_end }}</div>
                            </div>
                            <div class="p-3 rounded-3 bg-light mb-3">
                                <div class="fw-semibold">Verfügbare Slots</div>
                                <div>{{ available.slots_left }} von {{ available.slots_total }} frei</div>
                            </div>
                            <div class="p-3 rounded-3 bg-light mb-3">
                                <div class="fw-semibold">Slot-Länge</div>
                                <div>{{ available.slot_lenght }} Minuten</div>
                            </div>

                            <div class="p-3 rounded-3 bg-light mb-3">
                                <div class="fw-semibold mb-2">Gewählter Termin</div>
                                <div id="selected-slot-badge" class="text-muted small">Noch kein Slot ausgewählt.</div>
                            </div>

                            {% if available.slots_booked %}
                            <div class="p-3 rounded-3 bg-light">
                                <div class="fw-semibold mb-2">Bereits gebucht</div>
                                <ul class="mb-0 small">
                                    {% for booking in available.slots_booked %}
                                    <li>
                                        {{ booking.start }}
                                        {% if can_view_booking_names and booking.name %}
                                        - {{ booking.name }}
                                        {% else %}
                                        - Belegt
                                        {% endif %}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-8">
                    <div class="card border-0 shadow-lg rounded-4 h-100">
                        <div class="card-body p-4 p-md-5 bg-white">
                            <h2 class="h4 fw-bold mb-3">Termin im Kalender auswählen</h2>

                            <div class="day-slider-wrap mb-3">
                                <div class="d-flex justify-content-between align-items-center gap-2 mb-2">
                                    <span class="small text-muted">Tag wählen</span>
                                    <strong id="day-slider-label" class="small"></strong>
                                </div>
                                <input id="day-slider" type="range" class="form-range m-0" min="0" max="0" value="0">
                            </div>

                            <div id="client-slot-calendar" class="mb-4"></div>

                            <form id="client-booking-form" method="post" action="{{ url_for('terminplaner.client', appointment_id=appointment_id, tenant=tenant_id) }}" class="vstack gap-3">
                                <div>
                                    <label for="start_day_time" class="form-label fw-semibold">Gewünschter Zeitpunkt</label>
                                    <input type="text" id="start_day_time" name="start_day_time" class="form-control form-control-lg" placeholder="Bitte im Kalender auswählen" readonly required>
                                    <div class="form-text">Klicken Sie auf einen freien Slot oder verschieben Sie den gewählten Block.</div>
                                </div>
                                <div>
                                    <label for="client_name" class="form-label fw-semibold">Ihr Name</label>
                                    <input type="text" id="client_name" name="client_name" class="form-control form-control-lg" placeholder="Vor- und Nachname" required>
                                </div>
                                <div class="d-flex flex-column flex-sm-row gap-2 pt-2">
                                    <button type="submit" class="btn btn-primary btn-lg">Termin buchen</button>
                                    <a class="btn btn-outline-secondary btn-lg" href="{{ url_for('terminplaner.main', tenant=tenant_id) }}">Zur Übersicht</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="calendarDownloadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Termin zum Kalender hinzufügen?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2">Sie haben einen Termin ausgewählt.</p>
                <p class="mb-0 small text-muted">Mit einem Klick auf ".ics herunterladen" können Sie den Termin in Apple/Google/Outlook-Kalender importieren.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button id="confirm-booking-only" type="button" class="btn btn-primary">Jetzt buchen</button>
                <button id="confirm-booking-with-ics" type="button" class="btn btn-success">Buchen + .ics</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script>
    (function () {
        const available = {{ available|tojson }};
        const appointmentId = {{ appointment_id|tojson }};
        const slider = document.getElementById('day-slider');
        const sliderLabel = document.getElementById('day-slider-label');
        const sliderWrap = slider ? slider.closest('.day-slider-wrap') : null;
        const selectedSlotInput = document.getElementById('start_day_time');
        const selectedSlotBadge = document.getElementById('selected-slot-badge');
        const clientNameInput = document.getElementById('client_name');
        const form = document.getElementById('client-booking-form');
        const calendarEl = document.getElementById('client-slot-calendar');
        const modalEl = document.getElementById('calendarDownloadModal');
        const confirmBookingOnlyBtn = document.getElementById('confirm-booking-only');
        const confirmBookingWithIcsBtn = document.getElementById('confirm-booking-with-ics');
        const modal = modalEl ? new bootstrap.Modal(modalEl) : null;

        const slotLength = Number.parseInt(available.slot_lenght, 10) || 45;
        const bookedStarts = new Set((available.slots_booked || []).map(function (entry) {
            return String(entry.start || '').trim();
        }).filter(Boolean));

        function formatDateForInput(dateObj) {
            const y = dateObj.getFullYear();
            const m = String(dateObj.getMonth() + 1).padStart(2, '0');
            const d = String(dateObj.getDate()).padStart(2, '0');
            const hh = String(dateObj.getHours()).padStart(2, '0');
            const mm = String(dateObj.getMinutes()).padStart(2, '0');
            return y + '-' + m + '-' + d + ' ' + hh + ':' + mm;
        }

        function formatDateReadable(value) {
            if (!value) return 'Noch kein Slot ausgewählt.';
            return 'Ausgewählt: ' + value;
        }

        function dateRangeInclusive(startStr, endStr) {
            const days = [];
            const start = new Date(startStr + 'T00:00:00');
            const end = new Date(endStr + 'T00:00:00');
            if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
                return days;
            }
            const cursor = new Date(start);
            while (cursor <= end) {
                const y = cursor.getFullYear();
                const m = String(cursor.getMonth() + 1).padStart(2, '0');
                const d = String(cursor.getDate()).padStart(2, '0');
                days.push(y + '-' + m + '-' + d);
                cursor.setDate(cursor.getDate() + 1);
            }
            return days;
        }

        function addMinutes(dateObj, minutes) {
            return new Date(dateObj.getTime() + minutes * 60000);
        }

        function formatTimeForCalendar(dateObj) {
            return String(dateObj.getHours()).padStart(2, '0') + ':' + String(dateObj.getMinutes()).padStart(2, '0') + ':00';
        }

        function addDays(dateStr, days) {
            const d = new Date(dateStr + 'T00:00:00');
            d.setDate(d.getDate() + days);
            const y = d.getFullYear();
            const m = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return y + '-' + m + '-' + day;
        }

        function parseTimeSpanEntry(entry) {
            const value = String(entry || '').trim();
            let m = value.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})-(\d{2}:\d{2})$/);
            if (m) {
                return { date: m[1], from: m[2], to: m[3] };
            }
            m = value.match(/^(\d{2}:\d{2})-(\d{2}:\d{2})$/);
            if (m) {
                return { date: null, from: m[1], to: m[2] };
            }
            return null;
        }

        function buildCandidateSlots() {
            const slots = [];
            const allowedDates = dateRangeInclusive(String(available.date_start || ''), String(available.date_end || ''));
            const spans = Array.isArray(available.time_span) ? available.time_span : [];

            spans.forEach(function (entry) {
                const parsed = parseTimeSpanEntry(entry);
                if (!parsed) {
                    return;
                }

                const targetDates = parsed.date ? [parsed.date] : allowedDates;
                targetDates.forEach(function (date) {
                    const from = new Date(date + 'T' + parsed.from + ':00');
                    const to = new Date(date + 'T' + parsed.to + ':00');
                    if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime()) || from >= to) {
                        return;
                    }

                    let cursor = new Date(from);
                    while (addMinutes(cursor, slotLength) <= to) {
                        const slotStart = formatDateForInput(cursor);
                        if (!bookedStarts.has(slotStart)) {
                            slots.push({
                                start: slotStart,
                                end: formatDateForInput(addMinutes(cursor, slotLength)),
                            });
                        }
                        cursor = addMinutes(cursor, slotLength);
                    }
                });
            });

            return slots;
        }

        const candidateSlots = buildCandidateSlots();
        const slotStartSet = new Set(candidateSlots.map(function (slot) { return slot.start; }));
        const allDays = dateRangeInclusive(String(available.date_start || ''), String(available.date_end || ''));

        // Show the requested UI time window from 08:15 to 20:00 and highlight available slots
        let slotMinTime = '08:15:00';
        let slotMaxTime = '20:00:00';
        if (candidateSlots.length > 0) {
            const starts = candidateSlots.map(function (slot) {
                return new Date(slot.start.replace(' ', 'T') + ':00');
            }).filter(function (d) { return !Number.isNaN(d.getTime()); });
            const ends = candidateSlots.map(function (slot) {
                return new Date(slot.end.replace(' ', 'T') + ':00');
            }).filter(function (d) { return !Number.isNaN(d.getTime()); });

            // Keep the computed min/max for gap calculations below
            var computedMinStart = null;
            var computedMaxEnd = null;
            if (starts.length > 0 && ends.length > 0) {
                computedMinStart = starts[0];
                computedMaxEnd = ends[0];
                starts.forEach(function (d) { if (d < computedMinStart) computedMinStart = d; });
                ends.forEach(function (d) { if (d > computedMaxEnd) computedMaxEnd = d; });
            }
        }

        const visibleStart = allDays[0] || String(available.date_start || '');
        const visibleEndExclusive = allDays.length > 0
            ? addDays(allDays[allDays.length - 1], 1)
            : addDays(String(available.date_end || available.date_start || ''), 1);

        const multiDayDuration = Math.max(1, allDays.length || 1);
        const initialViewName = multiDayDuration === 1 ? 'timeGridDay' : 'timeGridRange';
        let selectedSlot = '';
        let selectedEvent = null;
        let allowImmediateSubmit = false;

        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: initialViewName,
            views: {
                timeGridRange: {
                    type: 'timeGrid',
                    duration: { days: multiDayDuration },
                    buttonText: 'Zeitraum'
                }
            },
            locale: 'de',
            firstDay: 1,
            height: 'auto',
            allDaySlot: false,
            editable: true,
            eventStartEditable: true,
            eventDurationEditable: false,
            selectable: false,
            slotDuration: '00:15:00',
            snapDuration: '00:15:00',
            slotMinTime: slotMinTime,
            slotMaxTime: slotMaxTime,
            nowIndicator: true,
            validRange: {
                start: visibleStart,
                end: visibleEndExclusive,
            },
            visibleRange: {
                start: visibleStart,
                end: visibleEndExclusive,
            },
            headerToolbar: {
                left: '',
                center: 'title',
                right: multiDayDuration === 1 ? '' : 'timeGridDay,timeGridRange'
            },
            events: [],
            eventDrop: function (info) {
                if (info.event.id !== 'selected-slot') {
                    return;
                }
                const droppedStart = formatDateForInput(info.event.start);
                if (!slotStartSet.has(droppedStart)) {
                    info.revert();
                    window.alert('Dieser Zeitpunkt ist nicht als freier Slot verfügbar.');
                    return;
                }
                applySelectedSlot(droppedStart);
            },
            eventClick: function (info) {
                const slotType = info.event.extendedProps ? info.event.extendedProps.slotType : '';
                if (slotType !== 'free') {
                    return;
                }
                applySelectedSlot(info.event.extendedProps.slotStart || '');
            }
        });

        // No background greying: show full calendar skeleton and only mark possible slots

        function updateSliderLabel() {
            const dateList = dateRangeInclusive(String(available.date_start || ''), String(available.date_end || ''));
            const idx = Number.parseInt(slider.value, 10) || 0;
            sliderLabel.textContent = dateList[idx] || '';
        }

        function applySelectedSlot(value) {
            selectedSlot = String(value || '').trim();
            selectedSlotInput.value = selectedSlot;
            selectedSlotBadge.innerHTML = selectedSlot
                ? '<span class="slot-selected-chip">' + selectedSlot + '</span>'
                : 'Noch kein Slot ausgewählt.';

            if (selectedEvent) {
                selectedEvent.remove();
                selectedEvent = null;
            }

            if (!selectedSlot) {
                return;
            }

            const start = new Date(selectedSlot.replace(' ', 'T') + ':00');
            const end = addMinutes(start, slotLength);
            selectedEvent = calendar.addEvent({
                id: 'selected-slot',
                title: 'Ihr ausgewählter Termin',
                start: start,
                end: end,
                color: '#0d6efd',
                editable: true,
            });

            refreshIcsLink();
        }

        function getIcsDownloadUrl() {
            const base = {{ url_for('terminplaner.client_slot_calendar_export', appointment_id=appointment_id, tenant=tenant_id)|tojson }};
            const url = new URL(base, window.location.origin);
            if (selectedSlot) {
                url.searchParams.set('start', selectedSlot);
            }
            const name = String(clientNameInput.value || '').trim();
            if (name) {
                url.searchParams.set('name', name);
            }
            return url.toString();
        }

        function refreshIcsLink() {
            const icsUrl = getIcsDownloadUrl();
            if (confirmBookingWithIcsBtn) {
                confirmBookingWithIcsBtn.setAttribute('data-ics-url', icsUrl);
            }
        }

        // No background gaps: keep full skeleton/grid visible

        // Add candidate free slots (blue)
        candidateSlots.forEach(function (slot) {
            const start = new Date(slot.start.replace(' ', 'T') + ':00');
            const end = new Date(slot.end.replace(' ', 'T') + ':00');
            calendar.addEvent({
                title: 'Freier Slot',
                start: start,
                end: end,
                color: '#0d6efd',
                textColor: '#ffffff',
                editable: false,
                extendedProps: {
                    slotStart: slot.start,
                    slotType: 'free',
                }
            });
        });

        (available.slots_booked || []).forEach(function (booking) {
            const startStr = String(booking.start || '').trim();
            if (!startStr) {
                return;
            }
            const start = new Date(startStr.replace(' ', 'T') + ':00');
            const end = addMinutes(start, slotLength);
            calendar.addEvent({
                title: 'Gebucht' + (booking.name ? ' - ' + booking.name : ''),
                start: start,
                end: end,
                color: '#dc3545',
                editable: false,
                display: 'block',
            });
        });

        form.addEventListener('submit', function (ev) {
            if (!selectedSlotInput.value) {
                ev.preventDefault();
                window.alert('Bitte zuerst im Kalender einen freien Slot auswählen.');
                return;
            }

            if (allowImmediateSubmit) {
                return;
            }

            ev.preventDefault();
            if (modal) {
                modal.show();
            }
        });

        if (confirmBookingOnlyBtn) {
            confirmBookingOnlyBtn.addEventListener('click', function () {
                allowImmediateSubmit = true;
                if (modal) {
                    modal.hide();
                }
                form.submit();
            });
        }

        if (confirmBookingWithIcsBtn) {
            confirmBookingWithIcsBtn.addEventListener('click', function () {
                const icsUrl = confirmBookingWithIcsBtn.getAttribute('data-ics-url') || getIcsDownloadUrl();
                if (icsUrl) {
                    window.open(icsUrl, '_blank');
                }
                allowImmediateSubmit = true;
                if (modal) {
                    modal.hide();
                }
                form.submit();
            });
        }

        clientNameInput.addEventListener('input', refreshIcsLink);

        if (sliderWrap) {
            sliderWrap.style.display = multiDayDuration > 1 ? '' : 'none';
        }

        slider.max = String(Math.max(0, allDays.length - 1));
        slider.value = '0';
        updateSliderLabel();
        if (allDays.length > 0) {
            calendar.gotoDate(allDays[0]);
        }

        slider.addEventListener('input', function () {
            const idx = Number.parseInt(slider.value, 10) || 0;
            updateSliderLabel();
            if (allDays[idx]) {
                if (calendar.view.type === 'timeGridDay') {
                    calendar.gotoDate(allDays[idx]);
                }
            }
        });

        calendar.render();
        refreshIcsLink();
    })();
</script>
{% endblock %}