<?php
/**
 * Public Booking Page - Select Time
 *
 * @package Freelance_Studio
 */

if (!defined('ABSPATH')) {
    exit;
}

$meeting_type = $data['meeting_type'];
$business = $data['business'];
$business_timezone = get_option('fs_booking_timezone', wp_timezone_string());

// Calculate date range
$min_date = gmdate('Y-m-d', strtotime('+' . $meeting_type->min_notice_hours . ' hours'));
$max_date = gmdate('Y-m-d', strtotime('+' . $meeting_type->max_days_advance . ' days'));

// Common timezones for dropdown
$common_timezones = array(
    'America/New_York' => 'Eastern Time (ET)',
    'America/Chicago' => 'Central Time (CT)',
    'America/Denver' => 'Mountain Time (MT)',
    'America/Los_Angeles' => 'Pacific Time (PT)',
    'America/Anchorage' => 'Alaska Time (AKT)',
    'Pacific/Honolulu' => 'Hawaii Time (HT)',
    'America/Phoenix' => 'Arizona (no DST)',
    'America/Toronto' => 'Toronto (ET)',
    'America/Vancouver' => 'Vancouver (PT)',
    'Europe/London' => 'London (GMT/BST)',
    'Europe/Paris' => 'Paris (CET)',
    'Europe/Berlin' => 'Berlin (CET)',
    'Asia/Tokyo' => 'Tokyo (JST)',
    'Asia/Shanghai' => 'Shanghai (CST)',
    'Asia/Kolkata' => 'India (IST)',
    'Australia/Sydney' => 'Sydney (AEST)',
    'Pacific/Auckland' => 'Auckland (NZST)',
);
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title><?php echo esc_html($meeting_type->name . ' - ' . $business['business_name']); ?></title>
    <?php include JEEB_FS_PLUGIN_DIR . 'includes/views/public/booking/booking-styles.php'; ?>
</head>
<body class="fs-booking-page">
    <div class="fs-booking-container fs-booking-select-time">
        <header class="fs-booking-header">
            <?php 
            $permalink_structure = get_option('permalink_structure');
            if (empty($permalink_structure)) {
                $back_url = add_query_arg('fs_booking', '1', home_url('/'));
            } else {
                $back_url = home_url('/book/');
            }
            ?>
            <a href="<?php echo esc_url($back_url); ?>" class="fs-back-link">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="15,18 9,12 15,6"></polyline>
                </svg>
                <?php esc_html_e('Back', 'freelance-studio'); ?>
            </a>
            <?php if ($business['business_logo']): ?>
                <img src="<?php echo esc_url($business['business_logo']); ?>" alt="<?php echo esc_attr($business['business_name']); ?>" class="fs-booking-logo">
            <?php endif; ?>
        </header>
        
        <div class="fs-booking-layout">
            <!-- Meeting Type Info -->
            <div class="fs-booking-sidebar">
                <div class="fs-meeting-info" style="--type-color: <?php echo esc_attr($meeting_type->color); ?>">
                    <div class="fs-meeting-color"></div>
                    <h2><?php echo esc_html($meeting_type->name); ?></h2>
                    <?php if ($meeting_type->description): ?>
                        <p><?php echo esc_html($meeting_type->description); ?></p>
                    <?php endif; ?>
                    <div class="fs-meeting-details">
                        <div class="fs-detail">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polyline points="12,6 12,12 16,14"></polyline>
                            </svg>
                            <?php echo  esc_html( FS_Meeting_Type::get_duration_display($meeting_type->duration) ); ?>
                        </div>
                        <div class="fs-detail">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            <?php echo  esc_html( FS_Meeting_Type::get_location_display($meeting_type->location_type, $meeting_type->location_details) ); ?>
                        </div>
                        <?php if ($meeting_type->price): ?>
                            <div class="fs-detail fs-price">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="12" y1="1" x2="12" y2="23"></line>
                                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                                </svg>
                                $<?php echo number_format($meeting_type->price, 2); ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <!-- Booking Form -->
            <div class="fs-booking-main">
                <!-- Step 1: Select Date -->
                <div class="fs-booking-step" id="step-date">
                    <h3><?php esc_html_e('Select a Date', 'freelance-studio'); ?></h3>
                    
                    <!-- Timezone Selector -->
                    <div class="fs-timezone-selector">
                        <label for="visitor-timezone">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="2" y1="12" x2="22" y2="12"></line>
                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                            </svg>
                            <?php esc_html_e('Time zone:', 'freelance-studio'); ?>
                        </label>
                        <select id="visitor-timezone" class="fs-timezone-select">
                            <?php foreach ($common_timezones as $tz_value => $tz_label): ?>
                                <option value="<?php echo esc_attr($tz_value); ?>"><?php echo esc_html($tz_label); ?></option>
                            <?php endforeach; ?>
                            <option value="other" disabled>──────────</option>
                            <option value="other"><?php esc_html_e('Other...', 'freelance-studio'); ?></option>
                        </select>
                    </div>
                    
                    <div class="fs-date-picker">
                        <div class="fs-date-nav">
                            <button type="button" id="prev-week" class="fs-date-nav-btn">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="15,18 9,12 15,6"></polyline>
                                </svg>
                            </button>
                            <span id="current-week-label"></span>
                            <button type="button" id="next-week" class="fs-date-nav-btn">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="9,18 15,12 9,6"></polyline>
                                </svg>
                            </button>
                        </div>
                        <div class="fs-date-grid" id="date-grid">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                </div>
                
                <!-- Step 2: Select Time -->
                <div class="fs-booking-step" id="step-time" style="display: none;">
                    <h3><?php esc_html_e('Select a Time', 'freelance-studio'); ?></h3>
                    <p id="selected-date-label"></p>
                    
                    <div class="fs-time-slots" id="time-slots">
                        <div class="fs-loading"><?php esc_html_e('Loading available times...', 'freelance-studio'); ?></div>
                    </div>
                    
                    <button type="button" class="fs-btn-secondary" id="back-to-date">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="15,18 9,12 15,6"></polyline>
                        </svg>
                        <?php esc_html_e('Back to dates', 'freelance-studio'); ?>
                    </button>
                </div>
                
                <!-- Step 3: Enter Details -->
                <div class="fs-booking-step" id="step-details" style="display: none;">
                    <h3><?php esc_html_e('Enter Your Details', 'freelance-studio'); ?></h3>
                    <p id="booking-summary"></p>
                    
                    <form id="booking-form" class="fs-booking-form">
                        <input type="hidden" name="meeting_type_id" value="<?php echo esc_attr($meeting_type->id); ?>">
                        <input type="hidden" name="date" id="form-date" value="">
                        <input type="hidden" name="time" id="form-time" value="">
                        
                        <div class="fs-form-group">
                            <label for="name"><?php esc_html_e('Your Name', 'freelance-studio'); ?> <span class="required">*</span></label>
                            <input type="text" name="name" id="name" required>
                        </div>
                        
                        <div class="fs-form-group">
                            <label for="email"><?php esc_html_e('Email Address', 'freelance-studio'); ?> <span class="required">*</span></label>
                            <input type="email" name="email" id="email" required>
                        </div>
                        
                        <div class="fs-form-group">
                            <label for="phone"><?php esc_html_e('Phone Number', 'freelance-studio'); ?></label>
                            <input type="tel" name="phone" id="phone">
                        </div>
                        
                        <div class="fs-form-group">
                            <label for="notes"><?php esc_html_e('Additional Notes', 'freelance-studio'); ?></label>
                            <textarea name="notes" id="notes" rows="3" placeholder="<?php esc_attr_e('Anything you\'d like us to know before the meeting...', 'freelance-studio'); ?>"></textarea>
                        </div>
                        
                        <?php 
                        // Show reminder option if reminders are configured
                        $reminder_hours = get_option('fs_booking_reminder_hours', '24');
                        if ($reminder_hours && $reminder_hours !== '0'):
                            $reminder_text = '';
                            switch($reminder_hours) {
                                case '1': $reminder_text = __('1 hour', 'freelance-studio'); break;
                                case '2': $reminder_text = __('2 hours', 'freelance-studio'); break;
                                case '24': $reminder_text = __('24 hours', 'freelance-studio'); break;
                                case '48': $reminder_text = __('48 hours', 'freelance-studio'); break;
                                /* translators: 1. hours value */
                                default: $reminder_text = sprintf(__('%s hours', 'freelance-studio'), $reminder_hours);
                            }
                        ?>
                        <div class="fs-form-group fs-checkbox-group">
                            <label class="fs-checkbox-label">
                                <input type="checkbox" name="wants_reminder" value="1" checked>
                                <?php /* translators: 1. reminder email value */ ?>
                                <span><?php echo wp_kses_post( sprintf( __('Send me a reminder email %s before the meeting', 'freelance-studio'), $reminder_text)); ?></span>
                            </label>
                        </div>
                        <?php endif; ?>
                        
                        <div class="fs-form-actions">
                            <button type="button" class="fs-btn-secondary" id="back-to-time">
                                <?php esc_html_e('Back', 'freelance-studio'); ?>
                            </button>
                            <button type="submit" class="fs-btn-primary" id="confirm-booking">
                                <?php esc_html_e('Confirm Booking', 'freelance-studio'); ?>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <footer class="fs-booking-footer">
            <p><?php echo esc_html($business['business_name']); ?></p>
        </footer>
    </div>
    
    <script>
    (function() {
        const meetingTypeId = <?php echo  intval( $meeting_type->id ); ?>;
        const minDate = '<?php echo  esc_html( $min_date ); ?>';
        const maxDate = '<?php echo  esc_html( $max_date ); ?>';
        const duration = <?php echo  esc_html( $meeting_type->duration ); ?>;
        const ajaxUrl = '<?php echo  esc_url( admin_url('admin-ajax.php') ); ?>';
        const businessTimezone = '<?php echo esc_js($business_timezone); ?>';
        
        let currentWeekStart = getMonday(new Date());
        let selectedDate = null;
        let selectedTime = null;
        let visitorTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        
        // Set the detected timezone in the dropdown
        const tzSelect = document.getElementById('visitor-timezone');
        let foundTz = false;
        for (let i = 0; i < tzSelect.options.length; i++) {
            if (tzSelect.options[i].value === visitorTimezone) {
                tzSelect.selectedIndex = i;
                foundTz = true;
                break;
            }
        }
        // If not found in common list, try to match by offset or add it
        if (!foundTz) {
            // Check if it's a US timezone variant
            const tzMap = {
                'America/Indiana/Indianapolis': 'America/New_York',
                'America/Detroit': 'America/New_York',
                'America/Kentucky/Louisville': 'America/New_York',
                'America/Indiana/Knox': 'America/Chicago',
                'America/Boise': 'America/Denver',
            };
            if (tzMap[visitorTimezone]) {
                visitorTimezone = tzMap[visitorTimezone];
                for (let i = 0; i < tzSelect.options.length; i++) {
                    if (tzSelect.options[i].value === visitorTimezone) {
                        tzSelect.selectedIndex = i;
                        foundTz = true;
                        break;
                    }
                }
            }
        }
        // If still not found, default to Eastern
        if (!foundTz) {
            tzSelect.value = 'America/New_York';
            visitorTimezone = 'America/New_York';
        }
        
        // Handle timezone change
        tzSelect.addEventListener('change', function() {
            if (this.value === 'other') {
                // Show prompt for manual entry
                const tz = prompt('<?php esc_html_e('Enter your timezone (e.g., America/Denver):', 'freelance-studio'); ?>', visitorTimezone);
                if (tz) {
                    visitorTimezone = tz;
                    // Add it to dropdown temporarily
                    const opt = document.createElement('option');
                    opt.value = tz;
                    opt.textContent = tz;
                    opt.selected = true;
                    tzSelect.insertBefore(opt, tzSelect.querySelector('option[value="other"]'));
                } else {
                    // Revert selection
                    for (let i = 0; i < tzSelect.options.length; i++) {
                        if (tzSelect.options[i].value === visitorTimezone) {
                            tzSelect.selectedIndex = i;
                            break;
                        }
                    }
                }
            } else {
                visitorTimezone = this.value;
            }
            // Re-render time slots if on time selection step
            if (selectedDate && document.getElementById('step-time').style.display !== 'none') {
                loadTimeSlots(selectedDate);
            }
        });
        
        /**
         * Convert time from business timezone to visitor timezone
         * @param {string} dateStr - Date in YYYY-MM-DD format
         * @param {string} timeStr - Time in HH:MM format (24hr)
         * @returns {object} - { time12: '3:00 PM', time24: '15:00', dateMayDiffer: boolean }
         */
        function convertToVisitorTimezone(dateStr, timeStr) {
            // Create date in business timezone
            const businessDateTime = new Date(`${dateStr}T${timeStr}:00`);
            
            // Format in business timezone to get the actual intended time
            const businessFormatter = new Intl.DateTimeFormat('en-US', {
                timeZone: businessTimezone,
                hour: 'numeric',
                minute: '2-digit',
                hour12: false,
            });
            
            // Now create a proper Date object representing the business time
            // We need to interpret the time AS IF it's in the business timezone
            const businessParts = businessFormatter.formatToParts(businessDateTime);
            let businessHour = parseInt(businessParts.find(p => p.type === 'hour')?.value || timeStr.split(':')[0]);
            let businessMinute = parseInt(businessParts.find(p => p.type === 'minute')?.value || timeStr.split(':')[1]);
            
            // Create a date string with explicit timezone
            const isoString = `${dateStr}T${timeStr.padStart(5, '0')}:00`;
            
            // Get timezone offset for the business timezone on this date
            const tempDate = new Date(isoString);
            const businessOffset = getTimezoneOffset(businessTimezone, tempDate);
            const visitorOffset = getTimezoneOffset(visitorTimezone, tempDate);
            
            // Calculate the difference in minutes
            const offsetDiff = visitorOffset - businessOffset;
            
            // Apply the offset
            const visitorDate = new Date(tempDate.getTime() + offsetDiff * 60 * 1000);
            
            // Format for display in visitor timezone
            const formatter12 = new Intl.DateTimeFormat('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true,
            });
            
            const formatter24 = new Intl.DateTimeFormat('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false,
            });
            
            return {
                time12: formatter12.format(visitorDate),
                time24: formatter24.format(visitorDate).replace(/^24:/, '00:'),
                visitorDate: visitorDate,
                dateMayDiffer: visitorDate.toDateString() !== tempDate.toDateString(),
            };
        }
        
        /**
         * Get timezone offset in minutes for a given timezone and date
         */
        function getTimezoneOffset(timezone, date) {
            const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
            const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
            return (tzDate - utcDate) / 60000;
        }
        
        // Initialize
        renderWeek();
        
        // Navigation
        document.getElementById('prev-week').addEventListener('click', function() {
            currentWeekStart.setDate(currentWeekStart.getDate() - 7);
            renderWeek();
        });
        
        document.getElementById('next-week').addEventListener('click', function() {
            currentWeekStart.setDate(currentWeekStart.getDate() + 7);
            renderWeek();
        });
        
        document.getElementById('back-to-date').addEventListener('click', function() {
            document.getElementById('step-time').style.display = 'none';
            document.getElementById('step-date').style.display = 'block';
        });
        
        document.getElementById('back-to-time').addEventListener('click', function() {
            document.getElementById('step-details').style.display = 'none';
            document.getElementById('step-time').style.display = 'block';
        });
        
        // Form submission
        document.getElementById('booking-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const btn = document.getElementById('confirm-booking');
            btn.disabled = true;
            btn.textContent = '<?php esc_html_e('Booking...', 'freelance-studio'); ?>';
            
            const formData = new FormData(this);
            formData.append('action', 'fs_create_booking');
            
            fetch(ajaxUrl, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = data.data.confirmation_url;
                } else {
                    alert(data.data.message || '<?php esc_html_e('An error occurred. Please try again.', 'freelance-studio'); ?>');
                    btn.disabled = false;
                    btn.textContent = '<?php esc_html_e('Confirm Booking', 'freelance-studio'); ?>';
                }
            })
            .catch(error => {
                alert('<?php esc_html_e('An error occurred. Please try again.', 'freelance-studio'); ?>');
                btn.disabled = false;
                btn.textContent = '<?php esc_html_e('Confirm Booking', 'freelance-studio'); ?>';
            });
        });
        
        function getMonday(d) {
            d = new Date(d);
            const day = d.getDay();
            const diff = d.getDate() - day + (day === 0 ? -6 : 1);
            return new Date(d.setDate(diff));
        }
        
        function formatDate(date) {
            // Use local date components to avoid UTC conversion issues
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        function formatDateDisplay(dateStr) {
            const date = new Date(dateStr + 'T00:00:00');
            return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
        }
        
        function renderWeek() {
            const grid = document.getElementById('date-grid');
            grid.innerHTML = '';
            
            const weekLabel = document.getElementById('current-week-label');
            const weekEnd = new Date(currentWeekStart);
            weekEnd.setDate(weekEnd.getDate() + 6);
            
            weekLabel.textContent = currentWeekStart.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + 
                ' - ' + weekEnd.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            
            for (let i = 0; i < 7; i++) {
                const date = new Date(currentWeekStart);
                date.setDate(date.getDate() + i);
                const dateStr = formatDate(date);
                
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'fs-date-btn';
                btn.dataset.date = dateStr;
                
                const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
                const dayNum = date.getDate();
                
                btn.innerHTML = `<span class="fs-day-name">${dayName}</span><span class="fs-day-num">${dayNum}</span>`;
                
                if (dateStr < minDate || dateStr > maxDate) {
                    btn.disabled = true;
                    btn.classList.add('fs-date-disabled');
                } else {
                    btn.addEventListener('click', function() {
                        selectDate(dateStr);
                    });
                }
                
                grid.appendChild(btn);
            }
            
            // Disable prev button if at min date
            const prevBtn = document.getElementById('prev-week');
            const firstDate = formatDate(currentWeekStart);
            prevBtn.disabled = firstDate <= minDate;
        }
        
        function selectDate(dateStr) {
            selectedDate = dateStr;
            document.getElementById('form-date').value = dateStr;
            document.getElementById('selected-date-label').textContent = formatDateDisplay(dateStr);
            
            document.getElementById('step-date').style.display = 'none';
            document.getElementById('step-time').style.display = 'block';
            
            loadTimeSlots(dateStr);
        }
        
        function loadTimeSlots(dateStr) {
            const container = document.getElementById('time-slots');
            container.innerHTML = '<div class="fs-loading"><?php esc_html_e('Loading available times...', 'freelance-studio'); ?></div>';
            
            const formData = new FormData();
            formData.append('action', 'fs_get_available_slots');
            formData.append('meeting_type_id', meetingTypeId);
            formData.append('date', dateStr);
            
            fetch(ajaxUrl, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data.slots.length > 0) {
                    container.innerHTML = '';
                    
                    // Check if timezones differ
                    const showDualTime = businessTimezone !== visitorTimezone;
                    
                    data.data.slots.forEach(slot => {
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.className = 'fs-time-btn';
                        btn.dataset.time = slot.start_24;
                        btn.dataset.businessTime = slot.start_time;
                        btn.dataset.businessEndTime = slot.end_time;
                        
                        // Convert to visitor timezone
                        const converted = convertToVisitorTimezone(dateStr, slot.start_24);
                        const endTime24 = slot.start_24.split(':');
                        let endHour = parseInt(endTime24[0]);
                        let endMin = parseInt(endTime24[1]) + duration;
                        if (endMin >= 60) {
                            endHour += Math.floor(endMin / 60);
                            endMin = endMin % 60;
                        }
                        const endTime24Str = String(endHour).padStart(2, '0') + ':' + String(endMin).padStart(2, '0');
                        const convertedEnd = convertToVisitorTimezone(dateStr, endTime24Str);
                        
                        btn.dataset.visitorTime = converted.time12;
                        btn.dataset.visitorEndTime = convertedEnd.time12;
                        
                        if (showDualTime) {
                            // Show visitor timezone time prominently
                            btn.innerHTML = `<span class="fs-time-primary">${converted.time12}</span>`;
                            if (converted.dateMayDiffer) {
                                btn.innerHTML += '<span class="fs-time-note"><?php esc_html_e('(next day)', 'freelance-studio'); ?></span>';
                            }
                        } else {
                            btn.textContent = slot.start_time;
                        }
                        
                        btn.addEventListener('click', function() {
                            selectTime(
                                slot.start_24, 
                                showDualTime ? converted.time12 : slot.start_time, 
                                showDualTime ? convertedEnd.time12 : slot.end_time,
                                slot.start_time,
                                slot.end_time
                            );
                        });
                        container.appendChild(btn);
                    });
                } else {
                    container.innerHTML = '<div class="fs-no-slots"><?php esc_html_e('No available times for this date. Please select another date.', 'freelance-studio'); ?></div>';
                }
            })
            .catch(error => {
                container.innerHTML = '<div class="fs-error"><?php esc_html_e('Error loading times. Please try again.', 'freelance-studio'); ?></div>';
            });
        }
        
        function selectTime(time, startDisplay, endDisplay, businessStart, businessEnd) {
            selectedTime = time;
            document.getElementById('form-time').value = time;
            
            let summary = formatDateDisplay(selectedDate) + ' at ' + startDisplay + ' - ' + endDisplay;
            
            // Add business timezone note if different
            if (businessTimezone !== visitorTimezone) {
                const tzShort = visitorTimezone.split('/').pop().replace(/_/g, ' ');
                summary += ` (${tzShort})`;
            }
            
            document.getElementById('booking-summary').textContent = summary;
            
            document.getElementById('step-time').style.display = 'none';
            document.getElementById('step-details').style.display = 'block';
        }
    })();
    </script>
</body>
</html>
