{% extends 'base.html.twig' %}

{% block title %}{{ serviceProvider.fullName }} - HomeHelper{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6/main.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6/main.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6/main.min.css" />
    <style>
        .booking-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }

        .booking-card h2 {
            margin-top: 0;
            margin-bottom: 1.5rem;
            color: #2d3748;
            font-size: 1.5rem;
        }

        .booking-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #e2e8f0;
        }

        .booking-step {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 0.5rem;
        }

        .booking-step::after {
            content: '';
            position: absolute;
            top: 1.5rem;
            right: -50%;
            width: 100%;
            height: 2px;
            background: #e2e8f0;
            z-index: -1;
        }

        .booking-step:last-child::after {
            display: none;
        }

        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e2e8f0;
            color: #718096;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .booking-step.active .step-number {
            background: #667eea;
            color: white;
        }

        .booking-step.completed .step-number {
            background: #48bb78;
            color: white;
        }

        .step-label {
            font-size: 0.875rem;
            color: #718096;
        }

        .booking-step.active .step-label {
            color: #2d3748;
            font-weight: 600;
        }

        .calendar-container {
            margin-bottom: 2rem;
        }

        .fc {
            border-radius: 8px;
            overflow: hidden;
        }

        .fc-event {
            cursor: pointer;
        }

        .booking-section {
            display: none;
        }

        .booking-section.active {
            display: block;
        }

        .time-slot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .time-slot {
            padding: 0.75rem;
            text-align: center;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }

        .time-slot:hover:not(.disabled) {
            border-color: #667eea;
            background: #f7fafc;
        }

        .time-slot.selected {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }

        .time-slot.disabled {
            background: #f7fafc;
            color: #cbd5e0;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .selected-date-display {
            background: #ebf4ff;
            border-left: 4px solid #667eea;
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 4px;
        }

        .booking-summary {
            background: #f7fafc;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .summary-row:last-child {
            border-bottom: none;
            font-weight: 600;
            font-size: 1.125rem;
            color: #667eea;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
        }

        .btn-outline {
            background: white;
            border: 2px solid #667eea;
            color: #667eea;
        }

        .btn-outline:hover {
            background: #667eea;
            color: white;
        }

        .price-tag {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 600;
        }

        .legend {
            display: flex;
            gap: 1.5rem;
            margin-top: 1rem;
            font-size: 0.875rem;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #2d3748;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .availability-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }

        .availability-card h3 {
            margin-top: 0;
            margin-bottom: 1.5rem;
            color: #2d3748;
        }

        .availability-list {
            list-style: none;
            padding: 0;
            margin-bottom: 1.5rem;
        }

        .availability-list li {
            padding: 0.75rem 0;
            color: #4a5568;
            font-size: 1rem;
        }

        .btn-full {
            width: 100%;
        }

        #booking-form-section {
            scroll-margin-top: 2rem;
        }
    </style>
{% endblock %}

{% block body %}
    <section class="staff-detail">
        <div class="container">
            <a href="{{ path('app_services') }}" class="back-link">← Zpět na seznam personálu</a>

            <div class="staff-profile">
                <div class="profile-header">
                    {% if serviceProvider.profileImage %}
                        <img src="{{ asset('uploads/profiles/' ~ serviceProvider.profileImage) }}"
                             alt="{{ serviceProvider.fullName }}"
                             class="profile-avatar-large-img">
                    {% else %}
                        <div class="profile-avatar-large">{{ serviceProvider.initials }}</div>
                    {% endif %}
                    <div class="profile-info">
                        <h1>{{ serviceProvider.fullName }}</h1>
                        <div class="profile-meta">
                            <span class="rating">⭐ {{ serviceProvider.rating ?? '5.0' }} ({{ serviceProvider.totalReviews }} recenzí)</span>
                            <span class="experience">{{ serviceProvider.yearsOfExperience }} let zkušeností</span>
                            {% if serviceProvider.isVerified %}
                                <span class="verified">✓ Ověřený profesionál</span>
                            {% endif %}
                        </div>
                        <p class="profile-rate">{{ serviceProvider.hourlyRate }} Kč za hodinu</p>
                    </div>
                </div>

                <div class="profile-content">
                    <div class="profile-main">
                        <section class="profile-section">
                            <h2>O {{ serviceProvider.user.firstName }}</h2>
                            <p>{{ serviceProvider.bio ?? (serviceProvider.user.firstName ~ ' je oddaný profesionál pro domácnost s ' ~ serviceProvider.yearsOfExperience ~ ' lety zkušeností v poskytování výjimečných úklidových a organizačních služeb. ' ~ serviceProvider.user.firstName ~ ' se pyšní důrazem na detail a průběžně získává vynikající zpětnou vazbu od klientů. ' ~ serviceProvider.user.firstName ~ ' je spolehlivý, důvěryhodný a ke každé práci přistupuje s profesionalitou a péčí.') }}</p>
                        </section>

                        <section class="profile-section">
                            <h2>Nabízené služby</h2>
                            <div class="services-list">
                                {% for sps in serviceProvider.serviceProviderServices %}
                                    <div class="service-detail-card">
                                        <h3>{{ sps.service.icon ?? '🔧' }} {{ sps.service.name }}</h3>
                                        <p>{{ sps.service.description ?? 'Profesionální služba ' ~ sps.service.name|lower ~ '.' }}</p>
                                    </div>
                                {% endfor %}
                            </div>
                        </section>

                        {% if serviceProvider.reviews|length > 0 %}
                            <section class="profile-section">
                                <h2>Recenze</h2>
                                <div class="reviews">
                                    {% for review in serviceProvider.reviews|slice(0, 5) %}
                                        {% if review.isApproved %}
                                            <div class="review-card">
                                                <div class="review-header">
                                                    <strong>{{ review.customerName }}</strong>
                                                    <span class="review-rating">{{ review.ratingStars }}</span>
                                                </div>
                                                <p>{{ review.comment }}</p>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </section>
                        {% endif %}
                    </div>

                    <div class="profile-sidebar">
                        <div class="availability-card">
                            <h3>Dostupnost</h3>
                            <ul class="availability-list">
                                {% if serviceProvider.availability.monday %}
                                    <li>✓ Pondělí - Pátek</li>
                                {% endif %}
                                {% if serviceProvider.availability.saturday or serviceProvider.availability.sunday %}
                                    <li>✓ Víkendy (omezeně)</li>
                                {% endif %}
                                <li>✓ Dostupný na stejný den</li>
                            </ul>
                            <button type="button" class="btn btn-primary btn-full" id="scroll-to-booking">
                                Objednat nyní
                            </button>
                        </div>

                        <div class="booking-card" id="booking-form-section">
                            <h2>Objednat služby {{ serviceProvider.user.firstName }}</h2>

                            <!-- Booking Steps Progress -->
                            <div class="booking-steps">
                                <div class="booking-step active" id="step-indicator-1">
                                    <div class="step-number">1</div>
                                    <div class="step-label">Služba a datum</div>
                                </div>
                                <div class="booking-step" id="step-indicator-2">
                                    <div class="step-number">2</div>
                                    <div class="step-label">Čas a délka</div>
                                </div>
                                <div class="booking-step" id="step-indicator-3">
                                    <div class="step-number">3</div>
                                    <div class="step-label">Vaše údaje</div>
                                </div>
                                <div class="booking-step" id="step-indicator-4">
                                    <div class="step-number">4</div>
                                    <div class="step-label">Potvrzení</div>
                                </div>
                            </div>

                            {{ form_start(form, {'action': path('app_booking_create', {serviceProviderId: serviceProvider.id}), 'attr': {'class': 'booking-form', 'id': 'booking-form', 'novalidate': 'novalidate'}}) }}

                                <!-- Step 1: Service Selection & Calendar -->
                                <div class="booking-section active" id="step-1">
                                    <div class="form-group">
                                        {{ form_label(form.service) }}
                                        {{ form_widget(form.service, {'attr': {'id': 'service-select'}}) }}
                                        {{ form_errors(form.service) }}
                                    </div>

                                    <h3>Vyberte datum</h3>
                                    <div class="calendar-container">
                                        <div id="booking-calendar"></div>
                                        <div class="legend">
                                            <div class="legend-item">
                                                <div class="legend-color" style="background: #667eea;"></div>
                                                <span>Potvrzená rezervace</span>
                                            </div>
                                            <div class="legend-item">
                                                <div class="legend-color" style="background: #f59e0b;"></div>
                                                <span>Čekající rezervace</span>
                                            </div>
                                        </div>
                                    </div>

                                    {{ form_widget(form.serviceDate, {'required': false, 'attr': {'style': 'position: absolute; left: -9999px;', 'id': 'hidden-service-date'}}) }}

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary" id="next-to-step-2" disabled>Další: Vybrat čas</button>
                                    </div>
                                </div>

                                <!-- Step 2: Time Selection -->
                                <div class="booking-section" id="step-2">
                                    <div class="selected-date-display" id="selected-date-display">
                                        <strong>Vybrané datum:</strong> <span id="selected-date-text"></span>
                                    </div>

                                    <h3>Dostupné časové sloty</h3>
                                    <div class="time-slot-grid" id="time-slots-container"></div>

                                    {{ form_widget(form.serviceTime, {'required': false, 'attr': {'style': 'position: absolute; left: -9999px;', 'id': 'hidden-service-time'}}) }}

                                    <div class="form-group">
                                        {{ form_label(form.hours) }}
                                        {{ form_widget(form.hours, {'attr': {'id': 'hours-select'}}) }}
                                        {{ form_errors(form.hours) }}
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline" id="back-to-step-1">Zpět</button>
                                        <button type="button" class="btn btn-primary" id="next-to-step-3" disabled>Další: Vaše údaje</button>
                                    </div>
                                </div>

                                <!-- Step 3: Customer Information -->
                                <div class="booking-section" id="step-3">
                                    <h3>Vaše kontaktní informace</h3>

                                    <div class="form-group">
                                        {{ form_label(form.customerName) }}
                                        {{ form_widget(form.customerName) }}
                                        {{ form_errors(form.customerName) }}
                                    </div>

                                    <div class="form-group">
                                        {{ form_label(form.customerEmail) }}
                                        {{ form_widget(form.customerEmail) }}
                                        {{ form_errors(form.customerEmail) }}
                                    </div>

                                    <div class="form-group">
                                        {{ form_label(form.customerPhone) }}
                                        {{ form_widget(form.customerPhone) }}
                                        {{ form_errors(form.customerPhone) }}
                                    </div>

                                    <div class="form-group">
                                        {{ form_label(form.serviceAddress) }}
                                        {{ form_widget(form.serviceAddress) }}
                                        {{ form_errors(form.serviceAddress) }}
                                    </div>

                                    <div class="form-group">
                                        {{ form_label(form.specialInstructions) }}
                                        {{ form_widget(form.specialInstructions) }}
                                        {{ form_errors(form.specialInstructions) }}
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline" id="back-to-step-2">Zpět</button>
                                        <button type="button" class="btn btn-primary" id="next-to-step-4">Další: Zkontrolovat a potvrdit</button>
                                    </div>
                                </div>

                                <!-- Step 4: Review & Confirm -->
                                <div class="booking-section" id="step-4">
                                    <h3>Zkontrolujte svou objednávku</h3>

                                    <div class="booking-summary" id="booking-summary">
                                        <div class="summary-row">
                                            <span>Služba:</span>
                                            <span id="summary-service">-</span>
                                        </div>
                                        <div class="summary-row">
                                            <span>Datum:</span>
                                            <span id="summary-date">-</span>
                                        </div>
                                        <div class="summary-row">
                                            <span>Čas:</span>
                                            <span id="summary-time">-</span>
                                        </div>
                                        <div class="summary-row">
                                            <span>Délka trvání:</span>
                                            <span id="summary-hours">-</span>
                                        </div>
                                        <div class="summary-row">
                                            <span>Sazba:</span>
                                            <span>{{ serviceProvider.hourlyRate }} Kč/hodina</span>
                                        </div>
                                        <div class="summary-row">
                                            <span>Celková cena:</span>
                                            <span class="price-tag" id="summary-total">0 Kč</span>
                                        </div>
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline" id="back-to-step-3">Zpět</button>
                                        <button type="submit" class="btn btn-primary">Potvrdit objednávku</button>
                                    </div>
                                    <p class="form-note">Potvrdíme vaši objednávku do 24 hodin</p>
                                </div>

                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6/locales/cs.global.min.js"></script>
    <script>
        // Wait for both DOM and FullCalendar to be ready
        function initializeBookingSystem() {
            // Check if FullCalendar is loaded
            if (typeof FullCalendar === 'undefined') {
                console.log('FullCalendar not loaded yet, retrying...');
                setTimeout(initializeBookingSystem, 100);
                return;
            }

            const providerId = {{ serviceProvider.id }};
            const hourlyRate = {{ serviceProvider.hourlyRate }};
            const bufferTime = {{ serviceProvider.bufferTime }}; // Buffer time in minutes for travel/preparation
            let selectedDate = null;
            let selectedTime = null;
            let currentStep = 1;
            let bookedEvents = [];
            let calendar = null;

            // Helper function to format date as dd.mm.YYYY
            function formatDate(dateStr) {
                const date = new Date(dateStr);
                const day = String(date.getDate()).padStart(2, '0');
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const year = date.getFullYear();
                return `${day}.${month}.${year}`;
            }

            // Step navigation functions (define early)
            function goToStep(stepNumber) {
                console.log('Going to step:', stepNumber);

                // Hide all sections
                document.querySelectorAll('.booking-section').forEach(section => {
                    section.classList.remove('active');
                });

                // Show target section
                document.getElementById(`step-${stepNumber}`).classList.add('active');

                // Update step indicators
                document.querySelectorAll('.booking-step').forEach((step, index) => {
                    step.classList.remove('active', 'completed');
                    if (index + 1 < stepNumber) {
                        step.classList.add('completed');
                    } else if (index + 1 === stepNumber) {
                        step.classList.add('active');
                    }
                });

                currentStep = stepNumber;

                // Special actions for specific steps
                if (stepNumber === 2) {
                    generateTimeSlots();
                    document.getElementById('selected-date-text').textContent = formatDate(selectedDate);
                } else if (stepNumber === 4) {
                    updateBookingSummary();
                }
            }

            // Initialize Calendar
            const calendarEl = document.getElementById('booking-calendar');
            if (!calendarEl) {
                console.error('Calendar element not found');
                return;
            }

            calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'cs',
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                },
                buttonText: {
                    today: 'Dnes'
                },
                validRange: {
                    start: new Date().toISOString().split('T')[0]
                },
                selectable: true,
                selectMirror: true,
                dateClick: function(info) {
                    const clickedDate = new Date(info.dateStr);
                    const today = new Date();
                    today.setHours(0, 0, 0, 0);

                    if (clickedDate >= today) {
                        selectedDate = info.dateStr;

                        // Try to find date input by ID or by name
                        let dateInput = document.getElementById('hidden-service-date');
                        if (!dateInput) {
                            dateInput = document.querySelector('input[name="booking[serviceDate]"]');
                        }
                        if (dateInput) {
                            dateInput.value = info.dateStr;
                            console.log('Date set:', info.dateStr);
                        } else {
                            console.error('Date input not found');
                        }

                        const nextBtn = document.getElementById('next-to-step-2');
                        if (nextBtn) {
                            nextBtn.disabled = false;
                            console.log('Next button enabled');
                        }

                        // Remove previous selection highlight
                        document.querySelectorAll('.fc-day').forEach(day => {
                            day.style.backgroundColor = '';
                        });

                        // Highlight selected date
                        info.dayEl.style.backgroundColor = '#ebf4ff';
                    }
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    fetch(`/api/bookings/provider/${providerId}`)
                        .then(response => response.json())
                        .then(data => {
                            bookedEvents = data;
                            successCallback(data);
                        })
                        .catch(error => {
                            console.error('Error fetching bookings:', error);
                            failureCallback(error);
                        });
                }
            });

            // Render calendar with error handling
            try {
                calendar.render();
                console.log('Calendar rendered successfully');
            } catch (error) {
                console.error('Error rendering calendar:', error);
            }

            // Time slots generation
            function generateTimeSlots() {
                const container = document.getElementById('time-slots-container');
                container.innerHTML = '';

                const times = [
                    '08:00', '09:00', '10:00', '11:00', '12:00',
                    '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'
                ];

                times.forEach(time => {
                    const slot = document.createElement('div');
                    slot.className = 'time-slot';
                    slot.textContent = time;
                    slot.dataset.time = time;

                    // Check if this time slot is booked
                    const isBooked = isTimeSlotBooked(selectedDate, time);
                    if (isBooked) {
                        slot.classList.add('disabled');
                    } else {
                        slot.addEventListener('click', function() {
                            if (!this.classList.contains('disabled')) {
                                document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
                                this.classList.add('selected');
                                selectedTime = this.dataset.time;

                                // Try to find time input by ID or by name
                                let timeInput = document.getElementById('hidden-service-time');
                                if (!timeInput) {
                                    timeInput = document.querySelector('input[name="booking[serviceTime]"]');
                                }
                                if (timeInput) {
                                    timeInput.value = this.dataset.time + ':00';
                                    console.log('Time set:', this.dataset.time);
                                } else {
                                    console.error('Time input not found');
                                }

                                updateNextButton();
                            }
                        });
                    }

                    container.appendChild(slot);
                });
            }

            function isTimeSlotBooked(date, time) {
                if (!date || !bookedEvents.length) return false;

                // Convert time string to minutes for easier comparison
                const timeToMinutes = (timeStr) => {
                    const [hours, minutes] = timeStr.split(':').map(Number);
                    return hours * 60 + minutes;
                };

                const selectedTimeMinutes = timeToMinutes(time);

                return bookedEvents.some(event => {
                    const eventDate = event.start.split('T')[0];

                    // Only check events on the same date
                    if (eventDate !== date) return false;

                    // Get start and end times in minutes
                    const eventStartTime = event.start.split('T')[1].substring(0, 5);
                    const eventEndTime = event.end.split('T')[1].substring(0, 5);

                    const eventStartMinutes = timeToMinutes(eventStartTime);
                    const eventEndMinutes = timeToMinutes(eventEndTime);

                    // Add buffer time before and after the booking
                    const bookingStartWithBuffer = eventStartMinutes - bufferTime;
                    const bookingEndWithBuffer = eventEndMinutes + bufferTime;

                    // Check if selected time falls within the booking period (including buffer)
                    // A time slot is unavailable if it's >= (start - buffer) and < (end + buffer)
                    return selectedTimeMinutes >= bookingStartWithBuffer && selectedTimeMinutes < bookingEndWithBuffer;
                });
            }

            function updateNextButton() {
                let hoursSelect = document.getElementById('hours-select');
                if (!hoursSelect) {
                    hoursSelect = document.querySelector('select[name="booking[hours]"]');
                }

                const nextBtn = document.getElementById('next-to-step-3');
                if (hoursSelect && nextBtn) {
                    nextBtn.disabled = !(selectedTime && hoursSelect.value);
                }
            }

            const hoursSelectElement = document.getElementById('hours-select');
            console.log('Hours select element:', hoursSelectElement);
            if (hoursSelectElement) {
                hoursSelectElement.addEventListener('change', updateNextButton);
            } else {
                console.warn('hours-select element not found, checking for Symfony generated ID');
                // Try to find by name instead
                const hoursSelectByName = document.querySelector('select[name="booking[hours]"]');
                console.log('Hours select by name:', hoursSelectByName);
                if (hoursSelectByName) {
                    hoursSelectByName.id = 'hours-select';
                    hoursSelectByName.addEventListener('change', updateNextButton);
                }
            }

            function updateBookingSummary() {
                let serviceSelect = document.getElementById('service-select');
                let hoursSelect = document.getElementById('hours-select');

                // Fallback: try to find by name attribute
                if (!serviceSelect) {
                    serviceSelect = document.querySelector('select[name="booking[service]"]');
                }
                if (!hoursSelect) {
                    hoursSelect = document.querySelector('select[name="booking[hours]"]');
                }

                if (!serviceSelect || !hoursSelect) {
                    console.error('Form elements not found', { serviceSelect, hoursSelect });
                    return;
                }

                const serviceName = serviceSelect.options[serviceSelect.selectedIndex].text;
                const hours = hoursSelect.value;
                const total = hours * hourlyRate;

                const summaryElements = {
                    service: document.getElementById('summary-service'),
                    date: document.getElementById('summary-date'),
                    time: document.getElementById('summary-time'),
                    hours: document.getElementById('summary-hours'),
                    total: document.getElementById('summary-total')
                };

                if (summaryElements.service) summaryElements.service.textContent = serviceName;
                if (summaryElements.date) summaryElements.date.textContent = formatDate(selectedDate);
                if (summaryElements.time) summaryElements.time.textContent = selectedTime;
                if (summaryElements.hours) summaryElements.hours.textContent = hours + (hours == 1 ? ' hodina' : hours < 5 ? ' hodiny' : ' hodin');
                if (summaryElements.total) summaryElements.total.textContent = total.toFixed(0) + ' Kč';
            }

            // Navigation buttons with null checks
            const navButtons = {
                'next-to-step-2': () => goToStep(2),
                'next-to-step-3': () => goToStep(3),
                'next-to-step-4': () => goToStep(4),
                'back-to-step-1': () => goToStep(1),
                'back-to-step-2': () => goToStep(2),
                'back-to-step-3': () => goToStep(3)
            };

            Object.keys(navButtons).forEach(buttonId => {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        console.log(buttonId + ' clicked');
                        navButtons[buttonId]();
                    });
                } else {
                    console.warn('Button not found:', buttonId);
                }
            });

            // Form submission handler - validate before submit
            document.getElementById('booking-form').addEventListener('submit', function(e) {
                // Check if date and time are set - try both ID and name
                let dateInput = document.getElementById('hidden-service-date');
                if (!dateInput) {
                    dateInput = document.querySelector('input[name="booking[serviceDate]"]');
                }

                let timeInput = document.getElementById('hidden-service-time');
                if (!timeInput) {
                    timeInput = document.querySelector('input[name="booking[serviceTime]"]');
                }

                console.log('Form submit - Date:', dateInput ? dateInput.value : 'not found');
                console.log('Form submit - Time:', timeInput ? timeInput.value : 'not found');

                if (!dateInput || !dateInput.value) {
                    e.preventDefault();
                    alert('Please select a date from the calendar');
                    goToStep(1);
                    return false;
                }

                if (!timeInput || !timeInput.value) {
                    e.preventDefault();
                    alert('Please select a time slot');
                    goToStep(2);
                    return false;
                }

                // All validations passed
                console.log('Form validation passed, submitting...');
            });

            // Scroll to booking form button
            const scrollToBookingBtn = document.getElementById('scroll-to-booking');
            if (scrollToBookingBtn) {
                scrollToBookingBtn.addEventListener('click', function() {
                    const bookingSection = document.getElementById('booking-form-section');
                    if (bookingSection) {
                        bookingSection.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            }
        }

        // Initialize when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializeBookingSystem);
        } else {
            // DOM already loaded
            initializeBookingSystem();
        }
    </script>
{% endblock %}