{% extends "layout/layout.twig" %}

{# ===== SEO VARIABLES ===== #}
{% set title = "Contact Us" %}
{% set meta_title = "Contact Us | Professional AC & Maintenance Services in Dubai" %}
{% set meta_description = "Get in touch with our team for AC installation, waterproofing, painting and maintenance services. Available 24/7 in Dubai." %}
{% set meta_keywords = "contact Dubai, AC service contact, maintenance company Dubai, emergency service" %}
{% set meta_robots = "index, follow" %}
{% set og_image = base_url ~ "/assets/images/contact-og.jpg" %}

{% block content %}

<style>
    /* ===== CONTACT PAGE STYLES ===== */
    .contact-page {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #1e293b;
        background: #f8fafc;
        padding: 60px 0;
    }
    
    .contact-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }
    
    /* ===== LEFT COLUMN - COMPANY INFO ===== */
    .contact-info-sidebar {
        flex: 0 0 380px;
    }
    
    .info-card {
        background: white;
        border-radius: 28px;
        padding: 40px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.03);
        border: 1px solid #f1f5f9;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .info-card:hover {
        box-shadow: 0 30px 60px rgba(57,49,134,0.06);
    }
    
    /* Brand Header */
    .brand-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 40px;
        padding-bottom: 30px;
        border-bottom: 2px solid #f1f5f9;
    }
    
    .brand-logo {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #393186 0%, #4a3aa8 100%);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.8rem;
        box-shadow: 0 10px 20px rgba(57,49,134,0.15);
    }
    
    .brand-name {
        font-size: 1.8rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 4px 0;
        letter-spacing: -0.5px;
    }
    
    .brand-tagline {
        color: #64748b;
        font-size: 0.85rem;
        margin: 0;
        opacity: 0.9;
    }
    
    /* Contact Sections */
    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 35px;
        margin-bottom: 35px;
    }
    
    .contact-section {
        position: relative;
    }
    
    .section-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 36px;
        height: 36px;
        background: #f0eff7;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #393186;
        font-size: 1rem;
    }
    
    .section-title {
        color: #393186;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        margin-bottom: 20px;
        text-transform: uppercase;
        position: relative;
        display: inline-block;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 40px;
        height: 3px;
        background: #393186;
        border-radius: 2px;
        opacity: 0.3;
    }
    
    /* Email List */
    .email-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .email-link {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #1e293b;
        text-decoration: none;
        padding: 12px 16px;
        background: #f8fafc;
        border-radius: 16px;
        transition: all 0.2s ease;
        font-weight: 500;
    }
    
    .email-link i {
        color: #393186;
        font-size: 0.9rem;
        transition: transform 0.2s ease;
    }
    
    .email-link:hover {
        background: #393186;
        color: white;
        transform: translateX(5px);
    }
    
    .email-link:hover i {
        color: white;
        transform: scale(1.1);
    }
    
    /* Hours List */
    .hours-list {
        background: #f8fafc;
        border-radius: 20px;
        padding: 20px;
    }
    
    .hours-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px dashed #e2e8f0;
    }
    
    .hours-row:last-child {
        border-bottom: none;
    }
    
    .days {
        font-weight: 600;
        color: #0f172a;
        font-size: 0.95rem;
    }
    
    .time {
        color: #475569;
        font-weight: 500;
        font-size: 0.95rem;
    }
    
    .closed {
        color: #ef4444;
        font-weight: 600;
        background: #fee2e2;
        padding: 4px 12px;
        border-radius: 30px;
        font-size: 0.85rem;
    }
    
    /* Emergency Card */
    .emergency-card {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        border-radius: 20px;
        padding: 28px;
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 35px;
        border: 1px solid rgba(255,255,255,0.1);
        transition: all 0.3s ease;
    }
    
    .emergency-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(15,23,42,0.2);
    }
    
    .emergency-icon-wrapper {
        width: 45px;
        height: 45px;
        background: rgba(255,255,255,0.1);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .emergency-content {
        flex: 1;
    }
    
    .emergency-label {
        display: block;
        color: #94a3b8;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 4px;
        text-transform: uppercase;
    }
    
    .emergency-number {
        display: block;
        color: white;
        font-size: 1.3rem;
        font-weight: 700;
        text-decoration: none;
        letter-spacing: -0.5px;
        transition: color 0.2s ease;
    }
    
    .emergency-number:hover {
        color: #94a3b8;
    }
    
    /* Social Section */
    .social-section {
        display: flex;
        gap: 12px;
        padding-top: 30px;
        border-top: 2px solid #f1f5f9;
    }
    
    .social-icon {
        width: 48px;
        height: 48px;
        background: #f8fafc;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 1.1rem;
        transition: all 0.2s ease;
        text-decoration: none;
    }
    
    .social-icon:hover {
        background: #393186;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(57,49,134,0.2);
    }
    
    /* ===== RIGHT COLUMN - FORM (STICKY) ===== */
    .contact-form-main {
        flex: 1;
        align-self: flex-start;
        position: sticky;
        top: 40px;
        height: fit-content;
    }
    
    .form-card {
        background: white;
        border-radius: 28px;
        padding: 40px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.03);
        border: 1px solid #f1f5f9;
    }
    
    .form-header {
        margin-bottom: 32px;
    }
    
    .form-header h2 {
        font-size: 1.8rem;
        color: #0f172a;
        margin-bottom: 8px;
        font-weight: 700;
    }
    
    .form-header p {
        color: #64748b;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    /* Phone Input with Country Code */
    .phone-input-group {
        display: flex;
        gap: 10px;
    }
    
    .country-code-select {
        width: 140px;
        padding: 16px 12px;
        border: 1.5px solid #edf2f7;
        border-radius: 16px;
        font-size: 0.95rem;
        background: #fafbfc;
        color: #0f172a;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23393186' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
    }
    
    .country-code-select:focus {
        outline: none;
        border-color: #393186;
        background: white;
        box-shadow: 0 0 0 4px rgba(57,49,134,0.05);
    }
    
    .phone-number-input {
        flex: 1;
        padding: 16px 20px;
        border: 1.5px solid #edf2f7;
        border-radius: 16px;
        font-size: 0.95rem;
        transition: all 0.2s;
        background: #fafbfc;
    }
    
    .phone-number-input:focus {
        outline: none;
        border-color: #393186;
        background: white;
        box-shadow: 0 0 0 4px rgba(57,49,134,0.05);
    }
    
    /* Regular Inputs */
    .form-input {
        width: 100%;
        padding: 16px 20px;
        border: 1.5px solid #edf2f7;
        border-radius: 16px;
        font-size: 0.95rem;
        transition: all 0.2s;
        background: #fafbfc;
    }
    
    .form-input:focus {
        outline: none;
        border-color: #393186;
        background: white;
        box-shadow: 0 0 0 4px rgba(57,49,134,0.05);
    }
    
    .form-input::placeholder {
        color: #94a3b8;
    }
    
    select.form-input {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23393186' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 16px;
    }
    
    textarea.form-input {
        resize: vertical;
        min-height: 150px;
    }
    
    .submit-btn {
        background: #393186;
        color: white;
        border: none;
        padding: 18px 32px;
        border-radius: 16px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        transition: all 0.2s;
        width: 100%;
        justify-content: center;
        margin-top: 16px;
    }
    
    .submit-btn:hover {
        background: #2e2770;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(57,49,134,0.2);
    }
    
    .alert-success {
        background: #e6f7e6;
        color: #0b6e0b;
        padding: 16px 20px;
        border-radius: 16px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid #b3e6b3;
    }
    
    /* Map Section */
    .map-section {
        max-width: 1200px;
        margin: 60px auto 0;
        padding: 0 20px;
    }
    
    .map-container {
        background: white;
        border-radius: 28px;
        padding: 8px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.03);
        border: 1px solid #f1f5f9;
        overflow: hidden;
    }
    
    .map-container iframe {
        width: 100%;
        height: 400px;
        border: 0;
        border-radius: 24px;
    }
    
    /* Responsive */
    @media (max-width: 1000px) {
        .contact-container {
            flex-direction: column;
        }
        
        .contact-info-sidebar {
            flex: 0 0 auto;
            width: 100%;
        }
        
        .contact-form-main {
            width: 100%;
            position: static;
            top: 0;
        }
        
        .form-row {
            grid-template-columns: 1fr;
        }
        
        .brand-header {
            flex-direction: column;
            text-align: center;
        }
        
        .brand-logo {
            margin: 0 auto;
        }
        
        .section-icon {
            position: static;
            margin-bottom: 15px;
        }
        
        .section-title::after {
            left: 50%;
            transform: translateX(-50%);
        }
        
        .section-title {
            text-align: center;
            display: block;
        }
    }
    
    @media (max-width: 600px) {
        .info-card,
        .form-card {
            padding: 30px;
        }
        
        .hours-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        
        .emergency-card {
            flex-direction: column;
            text-align: center;
        }
        
        .social-section {
            justify-content: center;
        }
        
        .phone-input-group {
            flex-direction: column;
        }
        
        .country-code-select {
            width: 100%;
        }
    }
</style>

    <section id="subheader" class="jarallax text-light">
        <div class="container relative z-index-1000">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    {# <div class="subtitle s2 bg-color text-light wow fadeInUp mb-2">Our Blog</div> #}
                    <h1>Contact Us</h1>
                    <ul class="crumb">
                        <li><a href="{{ base_url }}">Home</a></li>
                        <li class="active">Contact Us</li>
                    </ul>
                </div>
                {# <div class="col-lg-6 text-lg-end">
                    <div class="fs-20 fw-600 no-bottom sm-hide">
                        Air Conditioning and Heating Specialists
                    </div>
                </div> #}
            </div>
        </div>
        <div class="de-overlay"></div>
    </section>
<div class="contact-page">
    <div class="contact-container">
        <!-- ===== LEFT COLUMN - COMPANY INFO ===== -->
        <div class="contact-info-sidebar">
            <div class="info-card">
                <!-- Brand Header -->
                <div class="brand-header">
                    <div class="brand-logo">
                        <i class="fas fa-snowflake"></i>
                    </div>
                    <div>
                        <h2 class="brand-name">Contact Us</h2>
                        <p class="brand-tagline">Professional AC & Maintenance Services</p>
                    </div>
                </div>
                
                <!-- Contact Information -->
                <div class="contact-grid">
                    <!-- EMAIL US -->
                    <div class="contact-section">
                        {#<div class="section-icon">#}
                        {#    <i class="fas fa-envelope"></i>#}
                        {#</div>#}
                        <h3 class="section-title">EMAIL US</h3>
                        <div class="email-list">
                            <a href="mailto:info@conair.ae" class="email-link">
                                <i class="fas fa-envelope"></i>
                                info@conair.ae
                            </a>
                            <a href="mailto:support@conair.ae" class="email-link">
                                <i class="fas fa-envelope"></i>
                                support@conair.ae
                            </a>
                        </div>
                    </div>
                    
                    <!-- BUSINESS HOURS -->
                    <div class="contact-section">
                        {#<div class="section-icon">#}
                        {#    <i class="fas fa-clock"></i>#}
                        {#</div>#}
                        <h3 class="section-title">BUSINESS HOURS</h3>
                        <div class="hours-list">
                            <div class="hours-row">
                                <span class="days">Monday - Saturday</span>
                                <span class="time">8:00 AM - 8:00 PM</span>
                            </div>
                            {# <div class="hours-row">
                                <span class="days">Friday</span>
                                <span class="time">2:00 PM - 8:00 PM</span>
                            </div>
                            <div class="hours-row">
                                <span class="days">Saturday</span>
                                <span class="time">9:00 AM - 6:00 PM</span>
                            </div> #}
                            <div class="hours-row">
                                <span class="days">Sunday</span>
                                <span class="time ">Closed</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 24/7 EMERGENCY SERVICE -->
                <div class="emergency-card">
                    <div class="emergency-icon-wrapper">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="emergency-content">
                        <span class="emergency-label">24/7 Maintenance Support</span>
                        <a href="tel:+971501234567" class="emergency-number">
                            +971 50 123 4567
                        </a>
                    </div>
                </div>
                
                <!-- SOCIAL MEDIA -->
                <div class="social-section">
                    <a href="https://www.facebook.com/profile.php?id=61587027433133#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com/conairuae" class="social-icon"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.linkedin.com/company/conair-engineering-solutions" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                    <a href="https://wa.me/971501234567?text=Hello%20I%20would%20like%20to%20enquire" class="social-icon"><i class="fab fa-whatsapp"></i></a>
                </div>
            </div>
        </div>
        
        <!-- ===== RIGHT COLUMN - CONTACT FORM (STICKY) ===== -->
        <div class="contact-form-main">
            <div class="form-card">
                <div class="form-header">
                    <h2>Send Us a Message</h2>
                    <p>We'll get back to you within 24 hours</p>
                </div>
                
                {% if session.success %}
                <div class="alert-success">
                    <i class="fas fa-check-circle"></i>
                    {{ session.success }}
                </div>
                {% endif %}
                
                <form method="POST" action="{{ base_url }}/contact">
                    <div class="form-row">
                        <div class="form-group">
                            <input type="text" name="name" class="form-input" placeholder="Your Full Name *" required>
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" class="form-input" placeholder="Your Email *" required>
                        </div>
                    </div>
                    
                    <!-- ===== PHONE WITH SHORT COUNTRY CODE DROPDOWN ===== -->
                    <div class="form-group">
                        <div class="phone-input-group">
                            <select name="country_code" id="countryCode" class="country-code-select" required>
                                <option value="" disabled>Country Code</option>
                            </select>
                            <input type="tel" name="phone" class="phone-number-input" placeholder="Phone Number">
                        </div>
                    </div>
                    
                    <div class="form-">
                        <div class="form-group">
                            <select name="service" class="form-input">
                                <option value="" disabled selected>Select Service</option>
                                <option value="ac-installation">AC Installation</option>
                                <option value="ac-repair">AC Repair</option>
                                <option value="waterproofing">Waterproofing</option>
                                <option value="painting">Painting</option>
                                <option value="maintenance">General Maintenance</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <textarea name="message" class="form-input" placeholder="Your Message *" required></textarea>
                    </div>
                    
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i>
                        Send Message
                    </button>
                    
                    <p style="color: #94a3b8; font-size: 0.8rem; margin-top: 20px; text-align: center;">
                        <i class="fas fa-lock" style="margin-right: 4px;"></i>
                        Your information is secure and will not be shared
                    </p>
                </form>
            </div>
        </div>
    </div>
    
    <!-- ===== MAP SECTION ===== -->
    <div class="map-section">
        <div class="map-container">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.178512345678!2d55.270782!3d25.204849!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDEyJzE3LjUiTiA1NcKwMTYnMTQuOCJF!5e0!3m2!1sen!2sae!4v1234567890"
                height="400" 
                allowfullscreen="" 
                loading="lazy">
            </iframe>
        </div>
    </div>
</div>

<!-- ===== SHORT COUNTRY CODES JSON (2-LETTER FORMAT) ===== -->
<script>
    // Country codes with SHORT names (2-letter) for dropdown
    const countryCodes = [
        { code: "+93", short: "AF", name: "Afghanistan" },
        { code: "+355", short: "AL", name: "Albania" },
        { code: "+213", short: "DZ", name: "Algeria" },
        { code: "+376", short: "AD", name: "Andorra" },
        { code: "+244", short: "AO", name: "Angola" },
        { code: "+54", short: "AR", name: "Argentina" },
        { code: "+374", short: "AM", name: "Armenia" },
        { code: "+61", short: "AU", name: "Australia" },
        { code: "+43", short: "AT", name: "Austria" },
        { code: "+994", short: "AZ", name: "Azerbaijan" },
        { code: "+973", short: "BH", name: "Bahrain" },
        { code: "+880", short: "BD", name: "Bangladesh" },
        { code: "+32", short: "BE", name: "Belgium" },
        { code: "+975", short: "BT", name: "Bhutan" },
        { code: "+55", short: "BR", name: "Brazil" },
        { code: "+673", short: "BN", name: "Brunei" },
        { code: "+359", short: "BG", name: "Bulgaria" },
        { code: "+855", short: "KH", name: "Cambodia" },
        { code: "+237", short: "CM", name: "Cameroon" },
        { code: "+1", short: "CA", name: "Canada" },
        { code: "+56", short: "CL", name: "Chile" },
        { code: "+86", short: "CN", name: "China" },
        { code: "+57", short: "CO", name: "Colombia" },
        { code: "+506", short: "CR", name: "Costa Rica" },
        { code: "+385", short: "HR", name: "Croatia" },
        { code: "+357", short: "CY", name: "Cyprus" },
        { code: "+420", short: "CZ", name: "Czech Republic" },
        { code: "+45", short: "DK", name: "Denmark" },
        { code: "+20", short: "EG", name: "Egypt" },
        { code: "+372", short: "EE", name: "Estonia" },
        { code: "+358", short: "FI", name: "Finland" },
        { code: "+33", short: "FR", name: "France" },
        { code: "+49", short: "DE", name: "Germany" },
        { code: "+30", short: "GR", name: "Greece" },
        { code: "+852", short: "HK", name: "Hong Kong" },
        { code: "+36", short: "HU", name: "Hungary" },
        { code: "+354", short: "IS", name: "Iceland" },
        { code: "+91", short: "IN", name: "India" },
        { code: "+62", short: "ID", name: "Indonesia" },
        { code: "+98", short: "IR", name: "Iran" },
        { code: "+964", short: "IQ", name: "Iraq" },
        { code: "+353", short: "IE", name: "Ireland" },
        { code: "+972", short: "IL", name: "Israel" },
        { code: "+39", short: "IT", name: "Italy" },
        { code: "+81", short: "JP", name: "Japan" },
        { code: "+962", short: "JO", name: "Jordan" },
        { code: "+7", short: "KZ", name: "Kazakhstan" },
        { code: "+254", short: "KE", name: "Kenya" },
        { code: "+965", short: "KW", name: "Kuwait" },
        { code: "+996", short: "KG", name: "Kyrgyzstan" },
        { code: "+856", short: "LA", name: "Laos" },
        { code: "+371", short: "LV", name: "Latvia" },
        { code: "+961", short: "LB", name: "Lebanon" },
        { code: "+423", short: "LI", name: "Liechtenstein" },
        { code: "+370", short: "LT", name: "Lithuania" },
        { code: "+352", short: "LU", name: "Luxembourg" },
        { code: "+853", short: "MO", name: "Macao" },
        { code: "+60", short: "MY", name: "Malaysia" },
        { code: "+960", short: "MV", name: "Maldives" },
        { code: "+356", short: "MT", name: "Malta" },
        { code: "+52", short: "MX", name: "Mexico" },
        { code: "+377", short: "MC", name: "Monaco" },
        { code: "+976", short: "MN", name: "Mongolia" },
        { code: "+212", short: "MA", name: "Morocco" },
        { code: "+95", short: "MM", name: "Myanmar" },
        { code: "+977", short: "NP", name: "Nepal" },
        { code: "+31", short: "NL", name: "Netherlands" },
        { code: "+64", short: "NZ", name: "New Zealand" },
        { code: "+234", short: "NG", name: "Nigeria" },
        { code: "+47", short: "NO", name: "Norway" },
        { code: "+968", short: "OM", name: "Oman" },
        { code: "+92", short: "PK", name: "Pakistan" },
        { code: "+507", short: "PA", name: "Panama" },
        { code: "+595", short: "PY", name: "Paraguay" },
        { code: "+51", short: "PE", name: "Peru" },
        { code: "+63", short: "PH", name: "Philippines" },
        { code: "+48", short: "PL", name: "Poland" },
        { code: "+351", short: "PT", name: "Portugal" },
        { code: "+974", short: "QA", name: "Qatar" },
        { code: "+40", short: "RO", name: "Romania" },
        { code: "+7", short: "RU", name: "Russia" },
        { code: "+966", short: "SA", name: "Saudi Arabia" },
        { code: "+65", short: "SG", name: "Singapore" },
        { code: "+421", short: "SK", name: "Slovakia" },
        { code: "+386", short: "SI", name: "Slovenia" },
        { code: "+27", short: "ZA", name: "South Africa" },
        { code: "+82", short: "KR", name: "South Korea" },
        { code: "+34", short: "ES", name: "Spain" },
        { code: "+94", short: "LK", name: "Sri Lanka" },
        { code: "+46", short: "SE", name: "Sweden" },
        { code: "+41", short: "CH", name: "Switzerland" },
        { code: "+886", short: "TW", name: "Taiwan" },
        { code: "+255", short: "TZ", name: "Tanzania" },
        { code: "+66", short: "TH", name: "Thailand" },
        { code: "+216", short: "TN", name: "Tunisia" },
        { code: "+90", short: "TR", name: "Turkey" },
        { code: "+971", short: "UAE", name: "UAE" },
        { code: "+44", short: "GB", name: "UK" },
        { code: "+1", short: "US", name: "USA" },
        { code: "+598", short: "UY", name: "Uruguay" },
        { code: "+998", short: "UZ", name: "Uzbekistan" },
        { code: "+58", short: "VE", name: "Venezuela" },
        { code: "+84", short: "VN", name: "Vietnam" }
    ];

    // Populate country code dropdown with SHORT names
    document.addEventListener('DOMContentLoaded', function() {
        const select = document.getElementById('countryCode');
        
        if (select) {
            // Clear existing options
            select.innerHTML = '<option value="" disabled selected>Country Code</option>';
            
            // Sort countries by short code
            countryCodes.sort((a, b) => a.short.localeCompare(b.short));
            
            // Add options from JSON - SHORT format
            countryCodes.forEach(country => {
                const option = document.createElement('option');
                option.value = country.code;
                // Display: IN (+91) or AE (+971) etc.
                option.textContent = `${country.short} (${country.code})`;
                
                // Set India (+91) as default selected
                if (country.code === '+971') {
                    option.selected = true;
                }
                
                select.appendChild(option);
            });
        }
    });
</script>

{% endblock %}