// 🔍 ADD THIS SCRIPT TO THE BOTTOM OF booking/index.blade.php
// Place this before the closing </body> tag or in <script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔍 DEBUG: Booking form initialized');
    
    const form = document.getElementById('bookingForm');
    const submitBtn = document.getElementById('submitBooking');
    const agreeTerms = document.getElementById('agreeTerms');
    
    if (!form) {
        console.error('❌ Form not found');
        return;
    }

    // 🔍 DEBUG: Log form details
    console.log('🔍 Form details:', {
        action: form.action,
        method: form.method,
        hasCSRF: !!form.querySelector('[name="_token"]'),
        csrfValue: form.querySelector('[name="_token"]')?.value
    });

    // 🔍 DEBUG: Monitor agree terms checkbox
    if (agreeTerms) {
        agreeTerms.addEventListener('change', function() {
            console.log('🔍 Terms agreement:', this.checked);
            submitBtn.disabled = !this.checked;
            
            if (this.checked) {
                submitBtn.classList.remove('btn-outline-success');
                submitBtn.classList.add('btn-success');
            } else {
                submitBtn.classList.remove('btn-success');
                submitBtn.classList.add('btn-outline-success');
            }
        });
    }

    // 🔍 DEBUG: Form submission monitoring
    form.addEventListener('submit', function(e) {
        console.log('🚀 Form submission started');
        console.log('🔍 Form action:', this.action);
        console.log('🔍 Form method:', this.method);
        
        // Collect all form data
        const formData = new FormData(this);
        const formObject = {};
        
        for (let [key, value] of formData.entries()) {
            formObject[key] = value;
        }
        
        console.log('📝 Form data:', formObject);
        
        // Check required fields
        const requiredFields = this.querySelectorAll('[required]');
        const emptyFields = [];
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                emptyFields.push(field.name || field.id);
                console.error('❌ Empty required field:', field.name || field.id);
            }
        });
        
        if (emptyFields.length > 0) {
            e.preventDefault();
            console.error('❌ Submission prevented - empty required fields:', emptyFields);
            alert('Mohon lengkapi semua field yang wajib diisi:\n' + emptyFields.join(', '));
            return false;
        }
        
        // Check specific critical fields
        const criticalFields = {
            service_id: document.querySelector('[name="service_id"]:checked')?.value,
            therapist_id: document.getElementById('selected_therapist_id')?.value,
            booking_date: document.getElementById('selected_booking_date')?.value,
            booking_time: document.getElementById('selected_booking_time')?.value,
            patient_name: document.getElementById('patient_name')?.value,
            patient_phone: document.getElementById('patient_phone')?.value,
            patient_email: document.getElementById('patient_email')?.value,
            patient_date_of_birth: document.getElementById('patient_date_of_birth')?.value,
            patient_gender: document.getElementById('patient_gender')?.value,
            patient_complaint: document.getElementById('patient_complaint')?.value,
        };
        
        console.log('🔍 Critical fields check:', criticalFields);
        
        const missingCritical = [];
        for (const [field, value] of Object.entries(criticalFields)) {
            if (!value || value.trim() === '') {
                missingCritical.push(field);
            }
        }
        
        if (missingCritical.length > 0) {
            e.preventDefault();
            console.error('❌ Missing critical fields:', missingCritical);
            alert('Field penting belum diisi:\n' + missingCritical.join(', '));
            return false;
        }
        
        // Show loading state
        if (submitBtn) {
            submitBtn.innerHTML = '<i class="bi bi-spinner bi-spin me-2"></i>Memproses Booking...';
            submitBtn.disabled = true;
        }
        
        console.log('✅ Form submission proceeding...');
        
        // Set a timeout to detect if we're still on the same page (indicating redirect back)
        setTimeout(function() {
            if (window.location.pathname === '/reservasi' || window.location.pathname === '/reservasi/') {
                console.error('❌ DETECTED REDIRECT BACK TO BOOKING PAGE');
                console.error('This suggests a validation error or exception in the backend');
                
                // Reset button
                if (submitBtn) {
                    submitBtn.innerHTML = '<i class="bi bi-check-circle me-2"></i>Konfirmasi & Bayar DP';
                    submitBtn.disabled = false;
                }
                
                // Show error message
                const errorDiv = document.createElement('div');
                errorDiv.className = 'alert alert-danger mt-3';
                errorDiv.innerHTML = `
                    <strong>Debug Info:</strong> Form was submitted but redirected back to booking page. 
                    Check Laravel logs for validation errors or exceptions.
                `;
                form.appendChild(errorDiv);
            }
        }, 2000);
    });

    // 🔍 DEBUG: Monitor all form field changes
    const allInputs = form.querySelectorAll('input, select, textarea');
    allInputs.forEach(input => {
        input.addEventListener('change', function() {
            console.log(`🔍 Field changed: ${this.name || this.id} = ${this.value}`);
        });
    });

    // 🔍 DEBUG: Check if there are any existing validation errors
    const errorMessages = document.querySelectorAll('.alert-danger, .invalid-feedback, .text-danger');
    if (errorMessages.length > 0) {
        console.warn('⚠️ Existing validation errors found:', errorMessages.length);
        errorMessages.forEach((error, index) => {
            console.warn(`Error ${index + 1}:`, error.textContent.trim());
        });
    }

    // 🔍 DEBUG: Check Laravel session flash messages
        
        
    
    console.log('✅ Debug script loaded successfully');
});

// 🔍 DEBUG: Global error handler
window.addEventListener('error', function(e) {
    console.error('❌ JavaScript Error:', {
        message: e.message,
        filename: e.filename,
        lineno: e.lineno,
        colno: e.colno,
        error: e.error
    });
});

// 🔍 DEBUG: Monitor page unload (to detect redirects)
window.addEventListener('beforeunload', function(e) {
    console.log('🔍 Page unloading - this could be a redirect or navigation');
});

// 🔍 DEBUG: Check if we returned from a failed submission
if (window.location.search.includes('debug') || localStorage.getItem('booking_debug')) {
    console.warn('🔍 DEBUG MODE ACTIVE');
    
    // Add debug info to page
    const debugInfo = document.createElement('div');
    debugInfo.style.cssText = `
        position: fixed; top: 10px; right: 10px; z-index: 9999; 
        background: #f8f9fa; border: 2px solid #dc3545; padding: 10px; 
        border-radius: 5px; max-width: 300px; font-size: 12px;
    `;
    debugInfo.innerHTML = `
        <strong>🔍 DEBUG MODE</strong><br>
        URL: ${window.location.href}<br>
        Timestamp: ${new Date().toLocaleString()}<br>
        <button onclick="this.parentElement.remove()">Close</button>
    `;
    document.body.appendChild(debugInfo);
}

// 🔍 DEBUG: Enable debug mode
function enableBookingDebug() {
    localStorage.setItem('booking_debug', 'true');
    console.log('🔍 Debug mode enabled');
}

// 🔍 DEBUG: Disable debug mode  
function disableBookingDebug() {
    localStorage.removeItem('booking_debug');
    console.log('🔍 Debug mode disabled');
}

console.log('🔍 Available debug functions: enableBookingDebug(), disableBookingDebug()');


</script>
// ADD THIS TO booking/index.blade.php BEFORE EXISTING DEBUG SCRIPT
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔧 ENHANCED DEBUG: Starting form monitoring');
    
    const form = document.getElementById('bookingForm');
    const submitBtn = document.getElementById('submitBooking');
    const agreeTerms = document.getElementById('agreeTerms');
    
    if (!form) {
        console.error('❌ CRITICAL: Form #bookingForm not found!');
        return;
    }

    // 🔍 Monitor submit button state
    function checkSubmitButton() {
        const isTermsChecked = agreeTerms ? agreeTerms.checked : true;
        const isEnabled = !submitBtn.disabled;
        
        console.log('🔍 Submit button state:', {
            disabled: submitBtn.disabled,
            termsChecked: isTermsChecked,
            innerHTML: submitBtn.innerHTML,
            classList: submitBtn.classList.toString()
        });
        
        return isEnabled && isTermsChecked;
    }

    // 🔍 Override form submission to catch everything
    const originalSubmit = form.submit;
    form.submit = function() {
        console.log('🔧 Form.submit() called programmatically');
        return originalSubmit.call(this);
    };

    // 🔍 Monitor submit button clicks
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            console.log('🔧 Submit button clicked!');
            console.log('🔍 Button state:', checkSubmitButton());
            console.log('🔍 Event details:', {
                target: e.target.tagName,
                type: e.type,
                defaultPrevented: e.defaultPrevented,
                bubbles: e.bubbles
            });
            
            // Check if terms are agreed
            if (agreeTerms && !agreeTerms.checked) {
                console.warn('⚠️ Terms not agreed - form should not submit');
                e.preventDefault();
                alert('Mohon setujui syarat dan ketentuan terlebih dahulu');
                return false;
            }
            
            console.log('✅ Button click validation passed');
        });
    }

    // 🔍 Enhanced form submission monitoring
    form.addEventListener('submit', function(e) {
        console.log('🚀 FORM SUBMIT EVENT TRIGGERED');
        console.log('🔍 Event details:', {
            target: e.target.id,
            action: this.action,
            method: this.method,
            encoding: this.enctype,
            defaultPrevented: e.defaultPrevented
        });

        // Validate critical hidden fields
        const criticalHiddenFields = {
            'selected_therapist_id': document.getElementById('selected_therapist_id')?.value,
            'selected_booking_date': document.getElementById('selected_booking_date')?.value,
            'selected_booking_time': document.getElementById('selected_booking_time')?.value
        };

        console.log('🔍 Hidden fields check:', criticalHiddenFields);

        const missingHidden = Object.entries(criticalHiddenFields)
            .filter(([key, value]) => !value)
            .map(([key]) => key);

        if (missingHidden.length > 0) {
            console.error('❌ MISSING HIDDEN FIELDS:', missingHidden);
            e.preventDefault();
            alert('Error: Missing booking data - ' + missingHidden.join(', '));
            return false;
        }

        // Check service selection
        const selectedService = document.querySelector('[name="service_id"]:checked');
        if (!selectedService) {
            console.error('❌ NO SERVICE SELECTED');
            e.preventDefault();
            alert('Mohon pilih layanan terlebih dahulu');
            return false;
        }

        console.log('🔍 Selected service:', selectedService.value);

        // Force show all form data before submission
        const formData = new FormData(this);
        console.log('📋 COMPLETE FORM DATA BEFORE SUBMISSION:');
        for (let [key, value] of formData.entries()) {
            console.log(`  ${key}: ${value}`);
        }

        // Check form validity
        if (!this.checkValidity()) {
            console.error('❌ HTML5 FORM VALIDATION FAILED');
            const invalidFields = this.querySelectorAll(':invalid');
            console.error('Invalid fields:', Array.from(invalidFields).map(f => f.name || f.id));
            e.preventDefault();
            return false;
        }

        console.log('✅ All validations passed - form submitting...');
        
        // Show loading immediately
        if (submitBtn) {
            submitBtn.innerHTML = '<i class="bi bi-spinner bi-spin me-2"></i>Memproses...';
            submitBtn.disabled = true;
        }

        // Set timeout to detect if still on same page (redirect back)
        setTimeout(() => {
            const currentPath = window.location.pathname;
            if (currentPath === '/reservasi' || currentPath === '/reservasi/') {
                console.error('❌ STILL ON BOOKING PAGE AFTER 5 SECONDS');
                console.error('This indicates server-side error or validation failure');
                
                // Reset button
                if (submitBtn) {
                    submitBtn.innerHTML = '<i class="bi bi-check-circle me-2"></i>Konfirmasi & Bayar DP';
                    submitBtn.disabled = false;
                }
            }
        }, 5000);
    });

    // 🔍 Monitor page navigation
    window.addEventListener('beforeunload', function(e) {
        console.log('🔍 Page unloading - URL changing to:', 'unknown (beforeunload)');
    });

    // 🔍 Monitor URL changes
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;
    
    history.pushState = function(...args) {
        console.log('🔍 History push state:', args[2]);
        return originalPushState.apply(this, args);
    };
    
    history.replaceState = function(...args) {
        console.log('🔍 History replace state:', args[2]);
        return originalReplaceState.apply(this, args);
    };

    console.log('✅ Enhanced form debugging initialized');
});

// 🔍 Network request monitoring
const originalFetch = window.fetch;
window.fetch = function(...args) {
    console.log('🌐 Fetch request:', args[0]);
    return originalFetch.apply(this, args);
};

const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    console.log('🌐 XHR request:', method, url);
    return originalXHROpen.apply(this, arguments);
};
</script>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="3cI5wggTGp1VrSzNrIngXjUKUvzPdAWYX4aqnM3A">

    <!-- SEO Meta Tags -->
    <title>Reservasi Online - Booking Mudah &amp; Cepat</title>
    <meta name="description" content="Reservasi layanan fisioterapi online dengan sistem DP yang fleksibel. Pilih jadwal, bayar DP, dan dapatkan konfirmasi instan.">
    <meta name="keywords" content="fisioterapi, terapi fisik, rehabilitation, klinik kesehatan, reservasi online">
    <meta name="author" content="Klinik Fisioterapi Sehat">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Klinik Fisioterapi Sehat">
    <meta property="og:description" content="Layanan fisioterapi profesional dengan reservasi online mudah">
    <meta property="og:image" content="https://www.gfisioterapi.com.di-mep.com/images/og-image.jpg">
    <meta property="og:url" content="https://www.gfisioterapi.com.di-mep.com/reservasi">
    <meta property="og:type" content="website">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="https://www.gfisioterapi.com.di-mep.com/images/favicon.ico">
    <link rel="apple-touch-icon" href="https://www.gfisioterapi.com.di-mep.com/images/apple-touch-icon.png">
    
    <!-- Fonts - Inter for modern clean look -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Swiper CSS for carousels -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
    
    <!-- Custom CSS -->
    <link href="https://www.gfisioterapi.com.di-mep.com/css/frontend.css" rel="stylesheet">

     <link href="https://www.gfisioterapi.com.di-mep.com/css/booking.css" rel="stylesheet">
    
    <style>
    .step-indicator {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .step-indicator.active {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
    }
    
    .step-indicator.completed {
        background: var(--success);
    }
    
    .booking-step {
        display: none;
    }
    
    .booking-step.active {
        display: block;
        animation: fadeInUp 0.5s ease;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .service-selection-card {
        border: 2px solid var(--gray-200);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .service-selection-card:hover {
        border-color: var(--primary-blue);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    .service-selection-card.selected {
        border-color: var(--primary-blue);
        background: rgba(79, 70, 229, 0.05);
    }
    
    .therapist-card {
        border: 2px solid var(--gray-200);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .therapist-card:hover,
    .therapist-card.selected {
        border-color: var(--primary-blue);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    .time-slot-btn {
        border: 2px solid var(--gray-300);
        background: white;
        color: var(--gray-700);
        transition: all 0.3s ease;
    }
    
    .time-slot-btn:hover {
        border-color: var(--primary-blue);
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary-blue);
    }
    
    .time-slot-btn.selected {
        border-color: var(--primary-blue);
        background: var(--primary-blue);
        color: white;
    }
    
    .time-slot-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .pricing-summary {
        background: var(--gray-50);
        border-left: 4px solid var(--primary-blue);
    }
    
    .form-floating-custom .form-control {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }
    
    .form-floating-custom label {
        padding: 1rem 0.75rem;
    }
    
    .patient-search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid var(--gray-300);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .patient-search-item {
        padding: 0.75rem;
        cursor: pointer;
        border-bottom: 1px solid var(--gray-200);
        transition: background 0.2s ease;
    }
    
    .patient-search-item:hover {
        background: var(--gray-50);
    }
    
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.5rem;
    }
    
    .calendar-day {
        aspect-ratio: 1;
        border: 1px solid var(--gray-300);
        background: white;
        border-radius: var(--border-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }
    
    .calendar-day:hover {
        border-color: var(--primary-blue);
        background: rgba(79, 70, 229, 0.1);
    }
    
    .calendar-day.selected {
        background: var(--primary-blue);
        color: white;
        border-color: var(--primary-blue);
    }
    
    .calendar-day.disabled {
        background: var(--gray-100);
        color: var(--gray-400);
        cursor: not-allowed;
    }
    
    .calendar-day.past {
        background: var(--gray-100);
        color: var(--gray-400);
        cursor: not-allowed;
    }
</style>

    <!-- Structured Data for SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "MedicalClinic",
        "name": "Klinik Fisioterapi Sehat",
        "description": "Klinik fisioterapi profesional dengan layanan terapi fisik modern",
        "url": "https://www.gfisioterapi.com.di-mep.com",
        "telephone": "+628123456789",
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "Jl. Kesehatan No. 123",
            "addressLocality": "Jakarta",
            "addressCountry": "ID"
        },
        "medicalSpecialty": "Physical Therapy",
        "priceRange": "$$"
    }
    </script>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top" id="mainNavbar">
    <div class="container">
        <!-- Logo & Brand -->
        <a class="navbar-brand d-flex align-items-center" href="https://www.gfisioterapi.com.di-mep.com">
            <div class="logo-container me-2">
                <img src="https://www.gfisioterapi.com.di-mep.com/storage/https://www.gfisioterapi.com.di-mep.com/storage/clinic-settings/01K4PPA9M9B9D8YMZJ7YQDXBTA.jpg" 
                     alt="GFisioterapi" 
                     height="40" 
                     class="logo-img">
            </div>
            <div class="brand-text">
                <span class="brand-name fw-bold text-primary">GFisioterapi</span>
                <small class="brand-tagline d-block text-muted">Klinik Fisioterapi Profesional</small>
            </div>
        </a>

        <!-- Mobile Toggle Button -->
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navigation Menu -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <!-- Main Navigation Links -->
            <ul class="navbar-nav mx-auto">
                <!-- Home Link -->
                <li class="nav-item">
                    <a class="nav-link " href="https://www.gfisioterapi.com.di-mep.com">
                        <i class="bi bi-house-door me-1"></i>Beranda
                    </a>
                </li>

                <!-- Services Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle " 
                       href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-heart-pulse me-1"></i>Layanan
                    </a>
                    <ul class="dropdown-menu shadow-sm" aria-labelledby="servicesDropdown">
                        <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan">Semua Layanan</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <!-- Dynamic service categories -->
                                                                        <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=consultation">Consultation</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=exercise">Exercise</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=geriatri">Geriatri</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=manual">Manual</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=neurologi">Neurologi</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=ortopedi">Ortopedi</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=pediatri">Pediatri</a></li>
                                                <li><a class="dropdown-item" href="https://www.gfisioterapi.com.di-mep.com/layanan?category=sport">Sport</a></li>
                                            </ul>
                </li>

                <!-- Dynamic Pages from Database -->
                                                <li class="nav-item">
                    <a class="nav-link " 
                       href="https://www.gfisioterapi.com.di-mep.com/tentang-kami">
                                                        <i class="bi bi-people me-1"></i>
                                                        Tentang Kami
                    </a>
                </li>
                                <li class="nav-item">
                    <a class="nav-link " 
                       href="https://www.gfisioterapi.com.di-mep.com/contact">
                                                        <i class="bi bi-telephone me-1"></i>
                                                        Hubungi Kami
                    </a>
                </li>
                
                <!-- Static/System Links that don't have dynamic pages -->
                
                <!-- Blog/Articles Link -->
                <li class="nav-item">
                    <a class="nav-link " href="https://www.gfisioterapi.com.di-mep.com/artikel">
                        <i class="bi bi-journal-text me-1"></i>Artikel
                    </a>
                </li>

                            </ul>

            <!-- Action Buttons -->
            <div class="d-flex align-items-center">
                <!-- Phone Number (Desktop only) -->
                <div class="d-none d-lg-flex align-items-center me-3">
                    <i class="bi bi-telephone-fill text-primary me-2"></i>
                    <div>
                        <small class="text-muted d-block" style="font-size: 0.75rem;">Hubungi Kami</small>
                        <a href="tel:+62 853-5520-7292" class="text-dark fw-medium text-decoration-none">
                            +62 853-5520-7292
                        </a>
                    </div>
                </div>

                <!-- Primary CTA Button -->
                <a href="https://www.gfisioterapi.com.di-mep.com/reservasi" class="btn btn-primary px-4 py-2 fw-medium">
                    <i class="bi bi-calendar-plus me-2"></i>Reservasi Online
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- Navbar Spacer (to prevent content overlap) -->
<div class="navbar-spacer" style="height: 80px;"></div>

<style>
/* Navigation Styles */
.navbar {
    padding: 0.75rem 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.navbar.scrolled {
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Brand Styles */
.logo-container {
    position: relative;
}

.logo-img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover .logo-img {
    transform: scale(1.05);
}

.brand-name {
    font-size: 1.5rem;
    color: var(--primary-blue);
}

.brand-tagline {
    font-size: 0.7rem;
    line-height: 1;
    margin-top: -2px;
}

/* Navigation Links */
.nav-link {
    font-weight: 500;
    color: var(--gray-900) !important;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-blue) !important;
    background: rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.nav-link.active {
    color: var(--primary-blue) !important;
    background: rgba(79, 70, 229, 0.1);
    font-weight: 600;
}

.nav-link i {
    font-size: 0.9rem;
}

/* Dropdown Styles */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 0.5rem;
}

.dropdown-item:hover {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-blue);
    transform: translateX(5px);
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .nav-link {
        margin: 0.25rem 0;
    }
    
    .d-flex.align-items-center {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e9ecef;
    }
}

/* Navbar Toggler */
.navbar-toggler {
    padding: 0.5rem;
    border-radius: 8px;
}

.navbar-toggler:focus {
    box-shadow: none;
    border-color: var(--primary-blue);
}
</style>

<script>
// Navbar scroll effect
window.addEventListener('scroll', function() {
    const navbar = document.getElementById('mainNavbar');
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// Close navbar collapse when clicking on a link (mobile)
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
        const navbarCollapse = document.getElementById('navbarNav');
        if (navbarCollapse.classList.contains('show')) {
            bootstrap.Collapse.getInstance(navbarCollapse).hide();
        }
    });
});
</script>
    <!-- Main Content -->
    <main>
        <!-- Breadcrumb -->
<section class="breadcrumb-section bg-light">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="https://www.gfisioterapi.com.di-mep.com">Beranda</a></li>
                <li class="breadcrumb-item active" aria-current="page">Reservasi Online</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Booking Header -->
<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center mb-5" data-aos="fade-up">
                <div class="section-header">
                    <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-3">
                        <i class="bi bi-calendar-plus me-2"></i>Reservasi Online
                    </span>
                    <h1 class="text-headline mb-4">Booking Mudah & Cepat</h1>
                    <p class="text-subtitle">
                        Reservasi layanan fisioterapi dalam 4 langkah mudah. Pilih layanan, tentukan jadwal, 
                        isi data diri, dan bayar DP untuk mengamankan slot Anda.
                    </p>
                </div>
            </div>
        </div>

        <!-- Step Progress Indicator -->
        <div class="row mb-5" data-aos="fade-up" data-aos-delay="100">
            <div class="col-12">
                <div class="d-flex justify-content-center align-items-center">
                    <div class="d-flex align-items-center step-progress">
                        <!-- Step 1 -->
                        <div class="text-center me-4">
                            <div class="step-indicator active" id="step-indicator-1">1</div>
                            <small class="d-block mt-2 fw-medium">Pilih Layanan</small>
                        </div>
                        <div class="flex-grow-1" style="height: 2px; background: var(--gray-300); max-width: 100px;"></div>
                        
                        <!-- Step 2 -->
                        <div class="text-center mx-4">
                            <div class="step-indicator" id="step-indicator-2">2</div>
                            <small class="d-block mt-2 fw-medium">Pilih Jadwal</small>
                        </div>
                        <div class="flex-grow-1" style="height: 2px; background: var(--gray-300); max-width: 100px;"></div>
                        
                        <!-- Step 3 -->
                        <div class="text-center mx-4">
                            <div class="step-indicator" id="step-indicator-3">3</div>
                            <small class="d-block mt-2 fw-medium">Data Diri</small>
                        </div>
                        <div class="flex-grow-1" style="height: 2px; background: var(--gray-300); max-width: 100px;"></div>
                        
                        <!-- Step 4 -->
                        <div class="text-center ms-4">
                            <div class="step-indicator" id="step-indicator-4">4</div>
                            <small class="d-block mt-2 fw-medium">Konfirmasi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Booking Form -->
        <form id="bookingForm" action="https://www.gfisioterapi.com.di-mep.com/reservasi" method="POST" novalidate>
            <input type="hidden" name="_token" value="3cI5wggTGp1VrSzNrIngXjUKUvzPdAWYX4aqnM3A" autocomplete="off">            
            <!-- Step 1: Service Selection -->
            <div class="booking-step active" id="step-1" data-aos="fade-up">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">
                                    <i class="bi bi-heart-pulse me-2"></i>Pilih Layanan Fisioterapi
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="row g-4">
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="1"
                                             data-service-name="Fisioterapi Muskuloskeletal"
                                             data-service-price="300000.00"
                                             data-service-dp-percentage="25"
                                             data-service-dp-amount="75000"
                                             data-service-remaining="225000"
                                             data-service-duration="60">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Fisioterapi Muskuloskeletal</h6>
                                                    <p class="text-muted small mb-0">
                                                        Terapi untuk masalah tulang, sendi, dan otot
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">60 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 300.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (25%)</div>
                                                        <div class="fw-bold text-primary">Rp 75.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="1" 
                                                           id="service-1"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-1">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="2"
                                             data-service-name="Fisioterapi Neurologi"
                                             data-service-price="200000.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="60000"
                                             data-service-remaining="140000"
                                             data-service-duration="75">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Fisioterapi Neurologi</h6>
                                                    <p class="text-muted small mb-0">
                                                        Terapi untuk gangguan sistem saraf
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">75 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 200.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 60.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="2" 
                                                           id="service-2"
                                                           checked>
                                                    <label class="form-check-label fw-medium" for="service-2">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="9"
                                             data-service-name="Fisioterapi stroke"
                                             data-service-price="400.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="120"
                                             data-service-remaining="280"
                                             data-service-duration="90">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Fisioterapi stroke</h6>
                                                    <p class="text-muted small mb-0">
                                                        Tindakan fisioterapi yang dilakuakan diklinik untuk memberikan pemulihan terhada...
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">90 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 400</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 120</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="9" 
                                                           id="service-9"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-9">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="3"
                                             data-service-name="Fisioterapi Anak"
                                             data-service-price="175000.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="52500"
                                             data-service-remaining="122500"
                                             data-service-duration="45">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Fisioterapi Anak</h6>
                                                    <p class="text-muted small mb-0">
                                                        Terapi khusus untuk anak-anak dan remaja
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">45 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 175.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 52.500</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="3" 
                                                           id="service-3"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-3">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="4"
                                             data-service-name="Fisioterapi Lansia"
                                             data-service-price="160000.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="48000"
                                             data-service-remaining="112000"
                                             data-service-duration="50">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Fisioterapi Lansia</h6>
                                                    <p class="text-muted small mb-0">
                                                        Terapi untuk usia lanjut dengan pendekatan khusus
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">50 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 160.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 48.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="4" 
                                                           id="service-4"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-4">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="5"
                                             data-service-name="Fisioterapi Olahraga"
                                             data-service-price="180000.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="54000"
                                             data-service-remaining="126000"
                                             data-service-duration="60">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Fisioterapi Olahraga</h6>
                                                    <p class="text-muted small mb-0">
                                                        Terapi untuk cedera olahraga dan atlet
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">60 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 180.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 54.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="5" 
                                                           id="service-5"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-5">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="6"
                                             data-service-name="Terapi Manual"
                                             data-service-price="120000.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="36000"
                                             data-service-remaining="84000"
                                             data-service-duration="45">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Terapi Manual</h6>
                                                    <p class="text-muted small mb-0">
                                                        Terapi manual dan manipulasi sendi
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">45 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 120.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 36.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="6" 
                                                           id="service-6"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-6">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="7"
                                             data-service-name="Terapi Latihan"
                                             data-service-price="140000.00"
                                             data-service-dp-percentage="30"
                                             data-service-dp-amount="42000"
                                             data-service-remaining="98000"
                                             data-service-duration="60">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Terapi Latihan</h6>
                                                    <p class="text-muted small mb-0">
                                                        Program latihan terapeutik terstruktur
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">60 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 140.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (30%)</div>
                                                        <div class="fw-bold text-primary">Rp 42.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="7" 
                                                           id="service-7"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-7">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                        <div class="col-md-6">
                                        <div class="service-selection-card p-4 rounded-3 h-100" 
                                             data-service-id="8"
                                             data-service-name="Konsultasi &amp; Assessment"
                                             data-service-price="100000.00"
                                             data-service-dp-percentage="50"
                                             data-service-dp-amount="50000"
                                             data-service-remaining="50000"
                                             data-service-duration="30">
                                            
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="service-icon me-3">
                                                    <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                        <i class="bi bi-heart-pulse text-primary fs-4"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="fw-bold mb-2">Konsultasi &amp; Assessment</h6>
                                                    <p class="text-muted small mb-0">
                                                        Konsultasi dan pemeriksaan kondisi fisik
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="pricing-info bg-light p-3 rounded-2">
                                                <div class="row g-2 text-center">
                                                    <div class="col-4">
                                                        <div class="text-muted small">Durasi</div>
                                                        <div class="fw-bold">30 menit</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">Total Biaya</div>
                                                        <div class="fw-bold">Rp 100.000</div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-muted small">DP (50%)</div>
                                                        <div class="fw-bold text-primary">Rp 50.000</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <div class="form-check">
                                                    <input class="form-check-input service-radio" 
                                                           type="radio" 
                                                           name="service_id" 
                                                           value="8" 
                                                           id="service-8"
                                                           >
                                                    <label class="form-check-label fw-medium" for="service-8">
                                                        Pilih Layanan Ini
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                                    </div>
                                
                                <div class="row mt-4">
                                    <div class="col-12 text-center">
                                        <button type="button" class="btn btn-primary btn-lg px-5" id="nextToStep2" disabled>
                                            <i class="bi bi-arrow-right me-2"></i>Lanjut ke Pemilihan Jadwal
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Schedule Selection -->
            <div class="booking-step" id="step-2">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">
                                    <i class="bi bi-calendar-week me-2"></i>Pilih Jadwal & Terapis
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <!-- Therapist Selection -->
                                <div class="mb-4">
                                    <h6 class="fw-bold mb-3">1. Pilih Terapis</h6>
                                    <div class="row g-3" id="therapistContainer">
                                        <!-- Therapists will be loaded via AJAX -->
                                        <div class="col-12 text-center">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                            <p class="text-muted mt-2">Memuat daftar terapis...</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Date Selection -->
                                <div class="mb-4">
                                    <h6 class="fw-bold mb-3">2. Pilih Tanggal</h6>
                                    <div class="row">
                                        <div class="col-md-8 mx-auto">
                                            <div class="calendar-widget">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <button type="button" class="btn btn-outline-primary btn-sm" id="prevMonth">
                                                        <i class="bi bi-chevron-left"></i>
                                                    </button>
                                                    <h6 class="mb-0 fw-bold" id="currentMonth"></h6>
                                                    <button type="button" class="btn btn-outline-primary btn-sm" id="nextMonth">
                                                        <i class="bi bi-chevron-right"></i>
                                                    </button>
                                                </div>
                                                
                                                <!-- Calendar Header -->
                                                <div class="calendar-grid mb-2">
                                                    <small class="text-center fw-medium text-muted">Min</small>
                                                    <small class="text-center fw-medium text-muted">Sen</small>
                                                    <small class="text-center fw-medium text-muted">Sel</small>
                                                    <small class="text-center fw-medium text-muted">Rab</small>
                                                    <small class="text-center fw-medium text-muted">Kam</small>
                                                    <small class="text-center fw-medium text-muted">Jum</small>
                                                    <small class="text-center fw-medium text-muted">Sab</small>
                                                </div>
                                                
                                                <!-- Calendar Days -->
                                                <div class="calendar-grid" id="calendarDays">
                                                    <!-- Days will be populated via JavaScript -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Time Selection -->
                                <div class="mb-4">
                                    <h6 class="fw-bold mb-3">3. Pilih Waktu</h6>
                                    <div class="row g-2" id="timeSlotContainer">
                                        <div class="col-12 text-center text-muted">
                                            <i class="bi bi-clock fs-1 mb-3"></i>
                                            <p>Pilih terapis dan tanggal terlebih dahulu</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-6">
                                        <button type="button" class="btn btn-outline-secondary w-100" id="backToStep1">
                                            <i class="bi bi-arrow-left me-2"></i>Kembali
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="button" class="btn btn-primary w-100" id="nextToStep3" disabled>
                                            <i class="bi bi-arrow-right me-2"></i>Lanjut
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Patient Information -->
            <div class="booking-step" id="step-3">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">
                                    <i class="bi bi-person-lines-fill me-2"></i>Informasi Pasien
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <!-- Patient Search -->
                                <div class="mb-4">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle me-2"></i>
                                        <strong>Pasien Lama?</strong> Ketik nama atau nomor telepon untuk mencari data Anda
                                    </div>
                                    
                                    <div class="position-relative">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="patientSearch" 
                                                   placeholder="Cari nama atau nomor telepon...">
                                            <label for="patientSearch">
                                                <i class="bi bi-search me-2"></i>Cari Data Pasien
                                            </label>
                                        </div>
                                        <div class="patient-search-results d-none" id="patientSearchResults">
                                            <!-- Search results will be populated here -->
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Patient Form -->
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" name="patient_name" 
                                                   id="patient_name" placeholder="Nama Lengkap" required>
                                            <label for="patient_name">
                                                <i class="bi bi-person me-2"></i>Nama Lengkap *
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="tel" class="form-control" name="patient_phone" 
                                                   id="patient_phone" placeholder="Nomor Telepon" required>
                                            <label for="patient_phone">
                                                <i class="bi bi-telephone me-2"></i>Nomor Telepon *
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="email" class="form-control" name="patient_email" 
                                                   id="patient_email" placeholder="Email">
                                            <label for="patient_email">
                                                <i class="bi bi-envelope me-2"></i>Email *
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="date" class="form-control" name="patient_date_of_birth" 
                                                   id="patient_date_of_birth" required>
                                            <label for="patient_date_of_birth">
                                                <i class="bi bi-calendar-date me-2"></i>Tanggal Lahir *
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <select class="form-select" name="patient_gender" id="patient_gender" required>
                                                <option value="">Pilih Jenis Kelamin</option>
                                                <option value="male">Laki-laki</option>
                                                <option value="female">Perempuan</option>
                                            </select>
                                            <label for="patient_gender">
                                                <i class="bi bi-gender-ambiguous me-2"></i>Jenis Kelamin *
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" name="patient_address" 
                                                   id="patient_address" placeholder="Alamat">
                                            <label for="patient_address">
                                                <i class="bi bi-geo-alt me-2"></i>Alamat
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" name="emergency_contact_name" 
                                                   id="emergency_contact_name" placeholder="Nama Kontak Darurat">
                                            <label for="emergency_contact_name">
                                                <i class="bi bi-person-plus me-2"></i>Kontak Darurat (Nama)
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="tel" class="form-control" name="emergency_contact_phone" 
                                                   id="emergency_contact_phone" placeholder="Telepon Kontak Darurat">
                                            <label for="emergency_contact_phone">
                                                <i class="bi bi-telephone-plus me-2"></i>Kontak Darurat (Telepon)
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-floating">
                                            <textarea class="form-control" name="patient_complaint" 
                                                      id="patient_complaint" style="height: 100px" 
                                                      placeholder="Keluhan atau masalah kesehatan" required></textarea>
                                            <label for="patient_complaint">
                                                <i class="bi bi-chat-text me-2"></i>Keluhan / Masalah Kesehatan *
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-floating">
                                            <textarea class="form-control" name="notes" 
                                                      id="notes" style="height: 80px" 
                                                      placeholder="Catatan tambahan (opsional)"></textarea>
                                            <label for="notes">
                                                <i class="bi bi-sticky me-2"></i>Catatan Tambahan
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row mt-4">
                                    <div class="col-6">
                                        <button type="button" class="btn btn-outline-secondary w-100" id="backToStep2">
                                            <i class="bi bi-arrow-left me-2"></i>Kembali
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="button" class="btn btn-primary w-100" id="nextToStep4">
                                            <i class="bi bi-arrow-right me-2"></i>Review Booking
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 4: Confirmation -->
            <div class="booking-step" id="step-4">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">
                                    <i class="bi bi-check-circle me-2"></i>Konfirmasi Booking
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <!-- Booking Summary -->
                                <div id="bookingSummary">
                                    <!-- Summary will be populated via JavaScript -->
                                </div>
                                
                                <!-- Pricing Summary -->
                                <div class="pricing-summary p-4 rounded-3 mb-4">
                                    <h6 class="fw-bold mb-3">
                                        <i class="bi bi-credit-card me-2"></i>Ringkasan Pembayaran
                                    </h6>
                                    <div id="pricingSummary">
                                        <!-- Pricing will be populated via JavaScript -->
                                    </div>
                                </div>
                                
                                <!-- Terms & Conditions -->
                                <div class="mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="agreeTerms" required>
                                        <label class="form-check-label" for="agreeTerms">
                                            Saya menyetujui <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">syarat dan ketentuan</a> 
                                            serta <a href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">kebijakan privasi</a>
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-6">
                                        <button type="button" class="btn btn-outline-secondary w-100" id="backToStep3">
                                            <i class="bi bi-arrow-left me-2"></i>Kembali
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="submit" class="btn btn-success btn-lg w-100" id="submitBooking" disabled>
                                            <i class="bi bi-check-circle me-2"></i>Konfirmasi & Bayar DP
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Hidden Fields -->
            <input type="hidden" name="therapist_id" id="selected_therapist_id">
            <input type="hidden" name="booking_date" id="selected_booking_date">
            <input type="hidden" name="booking_time" id="selected_booking_time">
        </form>
    </div>
</section>

<!-- Terms Modal -->
<div class="modal fade" id="termsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Syarat dan Ketentuan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>1. Pembayaran Down Payment (DP)</h6>
                <ul>
                    <li>DP wajib dibayar untuk mengamankan slot booking Anda</li>
                    <li>DP sebesar 25% dari total biaya layanan</li>
                    <li>Sisa pembayaran dibayar saat hari treatment</li>
                </ul>
                
                <h6>2. Kebijakan Pembatalan</h6>
                <ul>
                    <li>Pembatalan H+1 (24 jam sebelum): DP dapat dikembalikan 100%</li>
                    <li>Pembatalan H-0 atau tidak hadir: DP hangus</li>
                    <li>Proses refund membutuhkan waktu 3-5 hari kerja</li>
                </ul>
                
                <h6>3. Kebijakan Reschedule</h6>
                <ul>
                    <li>Reschedule dapat dilakukan minimal H+1 (24 jam sebelum)</li>
                    <li>DP tetap berlaku untuk jadwal baru</li>
                    <li>Reschedule hanya dapat dilakukan 1 kali</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Mengerti</button>
            </div>
        </div>
    </div>
</div>

<!-- Privacy Modal -->
<div class="modal fade" id="privacyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kebijakan Privasi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Kami menghormati privasi dan kerahasiaan informasi pribadi Anda:</p>
                
                <h6>Informasi yang Kami Kumpulkan</h6>
                <ul>
                    <li>Data identitas (nama, tanggal lahir, jenis kelamin)</li>
                    <li>Informasi kontak (email, telepon, alamat)</li>
                    <li>Informasi medis (keluhan, riwayat treatment)</li>
                </ul>
                
                <h6>Penggunaan Informasi</h6>
                <ul>
                    <li>Memberikan layanan fisioterapi yang optimal</li>
                    <li>Komunikasi terkait appointment dan follow-up</li>
                    <li>Keperluan administratif dan legal</li>
                </ul>
                
                <h6>Keamanan Data</h6>
                <ul>
                    <li>Data disimpan dengan sistem keamanan tinggi</li>
                    <li>Akses terbatas hanya untuk staff medis yang authorized</li>
                    <li>Tidak dibagikan kepada pihak ketiga tanpa persetujuan</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Mengerti</button>
            </div>
        </div>
    </div>
</div>
    </main>

    <!-- Footer -->
    <!-- Footer -->
<footer class="footer bg-dark text-white">
    <div class="container">
        <!-- Main Footer Content -->
        <div class="row py-5">
            <!-- Clinic Info -->
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="footer-brand mb-4">
                    <div class="d-flex align-items-center mb-3">
                                                
                                                    <img src="https://www.gfisioterapi.com.di-mep.com/storage/clinic-settings/01K4PPC5Z1YX0TG7R6N5DJDNYY.jpg" 
                                 alt="GFisioterapi" 
                                 height="40" 
                                 class="me-3">
                                                
                        <div>
                            <h5 class="text-white mb-0">GFisioterapi</h5>
                            <small class="text-light">Klinik Fisioterapi Profesional</small>
                        </div>
                    </div>
                    <p class="text-light mb-4">
                        Memberikan pelayanan fisioterapi terbaik dengan terapis berpengalaman dan teknologi modern. 
                        Komitmen kami adalah membantu pemulihan dan kesehatan optimal untuk setiap pasien.
                    </p>
                    
                    <!-- Certification/Awards -->
                    <div class="certifications">
                        <h6 class="text-white mb-3">Sertifikasi & Penghargaan</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-primary">ISO 9001:2015</span>
                            <span class="badge bg-success">Akreditasi A</span>
                            <span class="badge bg-info">Best Clinic 2024</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="col-lg-2 col-md-6 mb-4">
                <h5 class="text-white mb-4">Layanan</h5>
                <ul class="list-unstyled footer-links">
                                                            <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan/fisioterapi-muskuloskeletal" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Fisioterapi Muskuloskeletal
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan/fisioterapi-neurologi" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Fisioterapi Neurologi
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan/fisioterapi-stroke" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Fisioterapi stroke
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan/fisioterapi-anak" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Fisioterapi Anak
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan/fisioterapi-lansia" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Fisioterapi Lansia
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan/fisioterapi-olahraga" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Fisioterapi Olahraga
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/layanan" class="text-primary text-decoration-none fw-medium">
                            <i class="bi bi-plus-circle me-1"></i>Lihat Semua Layanan
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Information Links -->
            <div class="col-lg-2 col-md-6 mb-4">
                <h5 class="text-white mb-4">Informasi</h5>
                <ul class="list-unstyled footer-links">
                    <!-- Dynamic Footer Pages -->
                                                            <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/tentang-kami" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Tentang Kami
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/contact" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Hubungi Kami
                        </a>
                    </li>
                                        <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/faq" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Pertanyaan yang Sering Diajukan (FAQ)
                        </a>
                    </li>
                    
                    <!-- Always show blog link -->
                    <li>
                        <a href="https://www.gfisioterapi.com.di-mep.com/artikel" class="text-light text-decoration-none">
                            <i class="bi bi-chevron-right me-1"></i>Artikel Kesehatan
                        </a>
                    </li>

                    <!-- Static fallbacks if no dynamic pages exist -->
                    
                    
                    <!-- Show placeholders for pages that don't exist yet -->
                    
                                        <li>
                        <a href="#" class="text-light text-decoration-none" onclick="alert('Halaman Kebijakan Privasi belum tersedia. Admin dapat membuat halaman ini di panel admin.')">
                            <i class="bi bi-chevron-right me-1"></i>Kebijakan Privasi
                        </a>
                    </li>
                    
                                        <li>
                        <a href="#" class="text-light text-decoration-none" onclick="alert('Halaman Syarat & Ketentuan belum tersedia. Admin dapat membuat halaman ini di panel admin.')">
                            <i class="bi bi-chevron-right me-1"></i>Syarat & Ketentuan
                        </a>
                    </li>
                                    </ul>
            </div>

            <!-- Contact Info -->
            <div class="col-lg-4 col-md-6 mb-4">
                <h5 class="text-white mb-4">Kontak & Lokasi</h5>
                
                <!-- Contact Details -->
                <div class="contact-info mb-4">

                    <div class="contact-item d-flex align-items-start mb-3">
                        <div class="contact-icon me-3">
                            <i class="bi bi-geo-alt-fill text-primary fs-5"></i>
                        </div>
                        <div>
                            <h6 class="text-white mb-1">Alamat</h6>
                            <p class="text-light mb-0">
                                Jalan Kayu Manis, Pekanbaru, Riau, Indonesia
                            </p>
                        </div>
                    </div>

                    <div class="contact-item d-flex align-items-start mb-3">
                        <div class="contact-icon me-3">
                            <i class="bi bi-telephone-fill text-primary fs-5"></i>
                        </div>
                        <div>
                            <h6 class="text-white mb-1">Telepon</h6>
                            <a href="tel:+62 853-5520-7292" class="text-light text-decoration-none">
                                +62 853-5520-7292
                            </a>
                                                    </div>
                    </div>

                    <div class="contact-item d-flex align-items-start mb-3">
                        <div class="contact-icon me-3">
                            <i class="bi bi-envelope-fill text-primary fs-5"></i>
                        </div>
                        <div>
                            <h6 class="text-white mb-1">Email</h6>
                            <a href="mailto:info@fisioterapi.com" class="text-light text-decoration-none">
                                info@fisioterapi.com
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Operating Hours -->
                <div class="operating-hours mb-4">
                    <h6 class="text-white mb-3">Jam Operasional</h6>
                    <div class="hours-list">
                        
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Senin</span>
                            <span class="text-white fw-medium ">
                                08:00 - 17:00
                            </span>
                        </div>
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Selasa</span>
                            <span class="text-white fw-medium ">
                                08:00 - 17:00
                            </span>
                        </div>
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Rabu</span>
                            <span class="text-white fw-medium ">
                                08:00 - 17:00
                            </span>
                        </div>
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Kamis</span>
                            <span class="text-white fw-medium ">
                                08:00 - 17:00
                            </span>
                        </div>
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Jumat</span>
                            <span class="text-white fw-medium ">
                                08:00 - 17:00
                            </span>
                        </div>
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Sabtu</span>
                            <span class="text-white fw-medium ">
                                08:00 - 15:00
                            </span>
                        </div>
                                                <div class="d-flex justify-content-between mb-1">
                            <span class="text-light">Minggu</span>
                            <span class="text-white fw-medium text-warning">
                                Tutup
                            </span>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <span class="text-light">Hari Libur</span>
                            <span class="text-warning fw-medium">Tutup</span>
                        </div>
                    </div>
                </div>

                <!-- Social Media -->
                <div class="social-media">
                    <h6 class="text-white mb-3">Ikuti Kami</h6>
                    <div class="d-flex gap-2">
                                                <a href="https://facebook.com/fisioterapi.sehat" 
                           target="_blank" class="btn btn-outline-light btn-sm" data-bs-toggle="tooltip" title="Facebook">
                            <i class="bi bi-facebook"></i>
                        </a>
                                                
                                                <a href="https://instagram.com/fisioterapi_sehat" 
                           target="_blank" class="btn btn-outline-light btn-sm" data-bs-toggle="tooltip" title="Instagram">
                            <i class="bi bi-instagram"></i>
                        </a>
                                                
                                                                        <a href="https://wa.me/6285355207292" 
                           target="_blank" class="btn btn-success btn-sm" data-bs-toggle="tooltip" title="WhatsApp">
                            <i class="bi bi-whatsapp"></i>
                        </a>
                        
                        
                        
                        <!-- Fallback social media if no database settings -->
                                            </div>
                </div>
            </div>
        </div>

        <!-- Newsletter Subscription -->
        <div class="newsletter-section bg-primary rounded-3 p-4 mb-4">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-3 mb-lg-0">
                    <h5 class="text-white mb-2">
                        <i class="bi bi-envelope-heart me-2"></i>Newsletter Kesehatan
                    </h5>
                    <p class="text-white mb-0 opacity-90">
                        Dapatkan tips kesehatan dan promo menarik langsung di email Anda
                    </p>
                </div>
                <div class="col-lg-6">
                    <form class="newsletter-form d-flex gap-2">
                        <input type="email" class="form-control" placeholder="Masukkan email Anda" required>
                        <button type="submit" class="btn btn-light px-4">
                            <i class="bi bi-send"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Footer Bottom -->
        <div class="footer-bottom border-top border-secondary py-4">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-3 mb-lg-0">
                    <p class="text-light mb-0">
                        &copy; 2026 GFisioterapi. All rights reserved.
                    </p>
                    <small class="text-muted">
                        Designed with <i class="bi bi-heart-fill text-danger"></i> for better healthcare
                    </small>
                </div>
                <div class="col-lg-6 text-lg-end">
                    <div class="footer-bottom-links">
                        <a href="#" class="text-light text-decoration-none me-3">Privacy Policy</a>
                        <a href="#" class="text-light text-decoration-none me-3">Terms of Service</a>
                        <a href="#" class="text-light text-decoration-none">Sitemap</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- WhatsApp Floating Button -->
<div class="whatsapp-float">
        
    <a href="https://wa.me/6285355207292?text=Halo%2C+saya+ingin+konsultasi+tentang+layanan+fisioterapi" 
       target="_blank" 
       class="whatsapp-btn"
       data-bs-toggle="tooltip" 
       data-bs-placement="left" 
       title="Chat WhatsApp">
        <i class="bi bi-whatsapp"></i>
        <span class="whatsapp-text">Chat WhatsApp</span>
    </a>
</div>

<!-- Scroll to Top Button -->
<button class="scroll-to-top" id="scrollToTop">
    <i class="bi bi-arrow-up"></i>
</button>

<style>
/* Footer Styles */
.footer {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.5), transparent);
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--primary-blue) !important;
    transform: translateX(5px);
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hours-list {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
}

.social-media .btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-media .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.newsletter-form .form-control {
    border: none;
    border-radius: 25px;
    padding: 0.75rem 1.25rem;
}

.newsletter-form .btn {
    border-radius: 25px;
    min-width: 50px;
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1050;
}

.whatsapp-btn {
    display: flex;
    align-items: center;
    background: #25D366;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    font-weight: 500;
}

.whatsapp-btn:hover {
    background: #20B954;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-btn i {
    font-size: 1.5rem;
    margin-right: 8px;
}

.whatsapp-text {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 25px;
    left: 25px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 1040;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: var(--primary-blue-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(79, 70, 229, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    .whatsapp-text {
        display: none;
    }
    
    .whatsapp-btn {
        padding: 15px;
        border-radius: 50%;
    }
    
    .whatsapp-btn i {
        margin-right: 0;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-item .contact-icon {
        margin: 0 auto 1rem auto;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form .form-control {
        margin-bottom: 0.5rem;
    }
}

/* Animation for footer elements */
.footer-brand, .footer-links, .contact-info, .operating-hours, .social-media {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>

<script>
// Newsletter subscription
document.querySelector('.newsletter-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = this.querySelector('input[type="email"]').value;
    
    // Here you would typically send the email to your backend
    alert('Terima kasih! Kami akan mengirimkan newsletter kesehatan ke email Anda.');
    this.reset();
});

// Scroll to top functionality
const scrollToTopBtn = document.getElementById('scrollToTop');

window.addEventListener('scroll', function() {
    if (window.scrollY > 300) {
        scrollToTopBtn.classList.add('show');
    } else {
        scrollToTopBtn.classList.remove('show');
    }
});

scrollToTopBtn.addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

// WhatsApp button analytics (optional)
document.querySelector('.whatsapp-btn').addEventListener('click', function() {
    // Track WhatsApp click event
    if (typeof gtag !== 'undefined') {
        gtag('event', 'click', {
            event_category: 'Contact',
            event_label: 'WhatsApp Float Button'
        });
    }
});
</script>

    <!-- Scroll to Top Button -->
    <button class="scroll-to-top" id="scrollToTop">
        <i class="bi bi-arrow-up"></i>
    </button>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    
    <!-- AOS Animation -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    
    <!-- CountUp.js for statistics animation -->
    <script src="https://unpkg.com/countup.js@2.6.0/dist/countUp.umd.js"></script>
    
    <!-- Custom JavaScript -->
    <script src="https://www.gfisioterapi.com.di-mep.com/js/frontend.js" defer></script>
    
    <!-- Initialize Libraries -->
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });

        // Initialize Tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
    
    <script src="https://www.gfisioterapi.com.di-mep.com/js/booking.js"></script>

    <!-- Google Analytics (Optional) -->
    </body>
</html>