@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')
    {{-- <div class="contact-us-template">

        <div
            style="position: relative; width: 100%; height: clamp(300px, 30vw, 600px); background: center top/cover no-repeat; display: flex; align-items: center; justify-content: center; background-image: url('{{ $page->feature_image->getPath() }}')">
            <div style="position: absolute; inset: 0; background: rgba(10, 37, 64, 0.3); z-index: 1;"></div>
            <h1
                style="position: relative; z-index: 2; font: 450 clamp(32px, 5vw, 80px)/1.2 'Jost', sans-serif; color: #FFF; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); text-align: center; padding: 0 20px;">
                {{ $page->title }}</h1>
        </div>

        <!-- Contact Section -->
        <section class="contact-template-section" style=" margin:3% 10% 0 10%;">
            <div class="contact-template-info">
                <h3
                    style="font: 600 clamp(14px, 1vw, 18px)/1 sans-serif; margin-bottom: clamp(20px, 3vw, 40px); color: #d41414;">
                    CONTACT US</h3>
                <h2
                    style="font: 600 clamp(28px, 3vw, 48px)/1.2 sans-serif; margin-bottom: clamp(15px, 2vw, 30px); color: #10418C;">
                    Get in Touch</h2>

                <div class="contact-details">
                    @if ($setting->address && $setting->map_link)
                        <div class="contact-template-item">
                            <a href="{{ $setting->map_link }}" target="_blank"
                                style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
                                <div
                                    style="width: clamp(20px, 1.5vw, 24px); height: clamp(20px, 1.5vw, 24px); color: #10418C; display: flex; align-items: center; justify-content: center; border: 2px solid #10418C; border-radius: 8px; padding: 10px; box-sizing: content-box; font-size: clamp(12px, 1vw, 16px); margin-right: 15px; flex-shrink: 0;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        fill="currentColor" viewBox="0 0 16 16">
                                        <path
                                            d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 style="font-size: clamp(14px, 1vw, 18px); margin-bottom: 5px; color: #444;">Visit Us
                                    </h3>
                                    <p style="color: #10418C; font-size: clamp(14px, 1vw, 18px);">{{ $setting->address }}
                                    </p>
                                </div>
                            </a>
                        </div>
                    @endif

                    @if ($setting->alternate_phone)
                        <div class="contact-template-item">
                            <a href="tel:{{ $setting->alternate_phone }}"
                                style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
                                <div
                                    style="width: clamp(20px, 1.5vw, 24px); height: clamp(20px, 1.5vw, 24px); color: #10418C; display: flex; align-items: center; justify-content: center; border: 2px solid #10418C; border-radius: 8px; padding: 10px; box-sizing: content-box; font-size: clamp(12px, 1vw, 16px); margin-right: 15px; flex-shrink: 0;">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M21 16.42V19.9561C21 20.4811 20.5941 20.9167 20.0705 20.9537C19.6331 20.9846 19.2763 21 19 21C10.1634 21 3 13.8366 3 5C3 4.72371 3.01545 4.36687 3.04635 3.9295C3.08337 3.40588 3.51894 3 4.04386 3H7.5801C7.83678 3 8.05176 3.19442 8.07753 3.4498C8.10067 3.67907 8.12218 3.86314 8.14207 4.00202C8.34435 5.41472 8.75753 6.75936 9.3487 8.00303C9.44359 8.20265 9.38171 8.44159 9.20185 8.57006L7.04355 10.1118C8.35752 13.1811 10.8189 15.6425 13.8882 16.9565L15.4271 14.8019C15.5572 14.6199 15.799 14.5573 16.001 14.6532C17.2446 15.2439 18.5891 15.6566 20.0016 15.8584C20.1396 15.8782 20.3225 15.8995 20.5502 15.9225C20.8056 15.9483 21 16.1633 21 16.42Z" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 style="font-size: clamp(14px, 1vw, 18px); margin-bottom: 5px; color: #444;">Call Us
                                    </h3>
                                    <p style="color: #10418C; font-size: clamp(14px, 1vw, 18px);">
                                        {{ $setting->alternate_phone }}</p>
                                </div>
                            </a>
                        </div>
                    @endif

                    @if ($setting->phone)
                        <div class="contact-template-item">
                            <a href="tel:{{ $setting->phone }}"
                                style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
                                <div
                                    style="width: clamp(20px, 1.5vw, 24px); height: clamp(20px, 1.5vw, 24px); color: #10418C; display: flex; align-items: center; justify-content: center; border: 2px solid #10418C; border-radius: 8px; padding: 10px; box-sizing: content-box; font-size: clamp(12px, 1vw, 16px); margin-right: 15px; flex-shrink: 0;">


                                    <svg viewBox="0 0 24 24" fill="#10418C" xmlns="http://www.w3.org/2000/svg">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <path
                                                d="M12 18H12.01M11 6H13M9.2 21H14.8C15.9201 21 16.4802 21 16.908 20.782C17.2843 20.5903 17.5903 20.2843 17.782 19.908C18 19.4802 18 18.9201 18 17.8V6.2C18 5.0799 18 4.51984 17.782 4.09202C17.5903 3.71569 17.2843 3.40973 16.908 3.21799C16.4802 3 15.9201 3 14.8 3H9.2C8.0799 3 7.51984 3 7.09202 3.21799C6.71569 3.40973 6.40973 3.71569 6.21799 4.09202C6 4.51984 6 5.07989 6 6.2V17.8C6 18.9201 6 19.4802 6.21799 19.908C6.40973 20.2843 6.71569 20.5903 7.09202 20.782C7.51984 21 8.07989 21 9.2 21Z"
                                                stroke="#10418C" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </div>
                                <div>
                                    <h3 style="font-size: clamp(14px, 1vw, 18px); margin-bottom: 5px; color: #444;">Message
                                        Us</h3>
                                    <p style="color: #10418C; font-size: clamp(14px, 1vw, 18px);">{{ $setting->phone }}</p>
                                </div>
                            </a>
                        </div>
                    @endif

                    @if ($setting->email)
                        <div class="contact-template-item">
                            <a href="mailto:{{ $setting->email }}"
                                style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
                                <div
                                    style="width: clamp(20px, 1.5vw, 24px); height: clamp(20px, 1.5vw, 24px); color: #10418C; display: flex; align-items: center; justify-content: center; border: 2px solid #10418C; border-radius: 8px; padding: 10px; box-sizing: content-box; font-size: clamp(12px, 1vw, 16px); margin-right: 15px; flex-shrink: 0;">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 style="font-size: clamp(14px, 1vw, 18px); margin-bottom: 5px; color: #444;">Email Us
                                    </h3>
                                    <p style="color: #10418C; font-size: clamp(14px, 1vw, 18px);">{{ $setting->email }}</p>
                                </div>
                            </a>
                        </div>
                    @endif

                </div>
            </div>

            <div class="contact-form"
                style="background: #FBFBFB; padding: clamp(20px, 3vw, 40px); border-radius: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);">
                <h2
                    style="font: 900 clamp(28px, 3vw, 48px)/1 sans-serif; margin-bottom: clamp(15px, 2vw, 30px); color: #10418C;">
                    Let's Talk</h2>
                <form class="contact-form" action="{{ route('contact-us-submit') }}" id="inquireForm" method="POST">
                    @csrf
                    <div style="margin-bottom: clamp(15px, 2vw, 25px);">
                        <label for="fullname"
                            style="display: block; margin-bottom: 8px; color: #555; font-size: clamp(14px, 1vw, 18px);">Full
                            Name*</label>
                        <input type="text" id="name" name="name" placeholder="eg. John Doe"
                            style="width: 100%; padding: clamp(6px, 0.8vw, 10px); border: 1px solid #ddd; border-radius: 4px; font-size: clamp(14px, 1vw, 18px); line-height: 1.2;">
                    </div>

                    <div style="margin-bottom: clamp(15px, 2vw, 25px);">
                        <label for="email"
                            style="display: block; margin-bottom: 8px; color: #555; font-size: clamp(14px, 1vw, 18px);">Email*</label>
                        <input type="email" id="email" name="email" placeholder="eg. abc@gmail.com"
                            style="width: 100%; padding: clamp(6px, 0.8vw, 10px); border: 1px solid #ddd; border-radius: 4px; font-size: clamp(14px, 1vw, 18px); line-height: 1.2;">
                    </div>

                    <div style="margin-bottom: clamp(15px, 2vw, 25px);">
                        <label for="subject"
                            style="display: block; margin-bottom: 8px; color: #555; font-size: clamp(14px, 1vw, 18px);">Subject*</label>
                        <input type="text" id="subject" name="subject" placeholder="eg. Risk Factors"
                            style="width: 100%; padding: clamp(6px, 0.8vw, 10px); border: 1px solid #ddd; border-radius: 4px; font-size: clamp(14px, 1vw, 18px); line-height: 1.2;">
                    </div>

                    <div style="margin-bottom: clamp(15px, 2vw, 25px);">
                        <label for="message"
                            style="display: block; margin-bottom: 8px; color: #555; font-size: clamp(14px, 1vw, 18px);">Message*</label>
                        <textarea id="message" name="message" placeholder="Your message here..."
                            style="width: 100%; padding: clamp(6px, 0.8vw, 10px); border: 1px solid #ddd; border-radius: 4px; font-size: clamp(14px, 1vw, 18px); line-height: 1.2; height: clamp(10px, 15vw, 100px); resize: vertical;"></textarea>
                    </div>

                    <style>
                        .app-btn:hover {
                            background-color: #10418C !important;
                        }
                    </style>
                    <button id="submit-btn" class="g-recaptcha app-btn"
                        data-sitekey="{{ config('services.recaptcha_v3.siteKey') }}" data-callback="onSubmit"
                        data-action="submitInquiry"
                        style="background: #d41414; text-decoration: none; color: white; border: none; padding: clamp(6px, 1vw, 10px) clamp(15px, 2.5vw, 30px); font-size: clamp(13px, 0.9vw, 16px); border-radius: 50px; cursor: pointer; transition: background 0.3s;">
                        Send Message
                    </button>

                    <button id="submit-btn" class="g-recaptcha app-btn"
                        data-sitekey="{{ config('services.recaptcha_v3.siteKey') }}" data-callback="onSubmit"
                        data-action="submitInquiry"
                        style="background: #d41414; text-decoration: none; color: white; border: none; padding: clamp(6px, 1vw, 10px) clamp(15px, 2.5vw, 30px); font-size: clamp(13px, 0.9vw, 16px); border-radius: 50px; cursor: pointer; transition: background 0.3s;"
                        onmouseover="this.style.background='#8a0e0e'" onmouseout="this.style.background='#d41414'"> Send
                        Message</button>
                </form>


            </div>

        </section>
        @if ($setting->map_iframe)
            <div class="map-container">
                <iframe src="{{ $setting->map_iframe }}" width="100%" height="500" style="border:0;"
                    allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        @endif
    </div> --}}

    <!-- Contact Section -->
    <div class="container my-5">
        <div class="row rounded-4 shadow overflow-hidden g-0">
            <!-- Left: Image Section - Full height matching form -->
            <div class="col-12 col-md-6 p-0 position-relative">
                <div class="h-100" style="height: 400px;">
                    <img src="{{ $page->feature_image->getPath() }}" class="img-fluid w-100 h-100 object-fit-cover"
                        alt="Hot air balloons" style="object-position: center;">
                    <div class="glass-overlay">

                    </div>

                </div>
            </div>

            <!-- Right: Contact Form Section -->
            <div class="col-12 col-md-6 bg-white p-4 d-flex flex-column" style="min-height: 400px;">
                <h4 class="text-warning fw-semibold mb-4">Contact us</h4>
                <form id="contactForm" method="post" action="{{ route('contact-us-submit') }}"
                    class="flex-grow-1 d-flex flex-column">
                    @csrf
                    <!-- Name Row -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary fw-semibold">First Name *</label>
                            <input type="text" name="first_name" value="{{ old('first_name') }}"
                                class="form-control border-grey-700 rounded-3" placeholder="eg: John">
                            @error('first_name')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary fw-semibold">Last Name *</label>
                            <input type="text" name="last_name" value="{{ old('last_name') }}"
                                class="form-control border-grey-700 rounded-3" placeholder="eg: Doe">
                            @error('last_name')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                    </div>

                    <!-- Contact Row -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary fw-semibold">Email *</label>
                            <input type="email" name="email" value="{{ old('email') }}"
                                class="form-control border-grey-700 rounded-3" placeholder="john@gmail.com">
                            @error('email')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary fw-semibold">Contact Number *</label>
                            <input type="text" name="phone" value="{{ old('phone') }}"
                                class="form-control border-grey-700 rounded-3" placeholder="eg: 98000000">
                            @error('phone')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <!-- Preferences Row -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary fw-semibold">Country *</label>

                            <select name="country" class="form-select border-grey-700 rounded-3 "
                                aria-label="Large select example" id="countries">
                                <option class="light-black-text capitalize" value="" selected>
                                    Select a country
                                </option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary fw-semibold">Adventure interested In *</label>
                            <input type="text" name="interested" value="{{ old('$interested') }}"
                                class="form-control border-grey-700 rounded-3" placeholder="Eg: Hiking">

                        </div>
                    </div>

                    <!-- Message Box -->
                    <div class="mb-3 flex-grow-1">
                        <label class="form-label text-secondary fw-semibold">Message *</label>
                        <textarea class="form-control border-grey-700 rounded-3 h-100" name="message" placeholder="Enter your message"
                            style="min-height: 120px;">{{ old('message') }}</textarea>
                        @error('message')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <!-- Terms Checkbox -->
                    <div class="form-check mb-3 mt-3 py-2">
                        @if (!empty($terms_page))
                            <input class="form-check-input rounded-circle" name="agree" value="1" type="checkbox"
                                id="termsCheck"
                                style="width: 1.2em; height: 1.2em; border-color: {{ old('agree') ? '#13C038' : '#dee2e6' }}; background-color: {{ old('agree') ? '#13C038' : '' }}; cursor: pointer;"
                                onchange="this.style.backgroundColor = this.checked ? '#13C038' : ''; this.style.borderColor = this.checked ? '#13C038' : '#dee2e6';"
                                {{ old('agree') ? 'checked' : '' }}>

                            <label class="form-check-label text-secondary ms-2" for="termsCheck" style="cursor: pointer">
                                I agree with <a href="{{ $terms_page->slug }}" target="_blank"
                                    class="text-primary text-decoration-underline">{{ $terms_page->title }}</a>
                            </label>
                        @else
                        @endif
                        @error('agree')
                            <span class="invalid-feedback d-block mt-1" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <!-- Submit Button -->

                    <button type="submit" id="submit-btn" data-sitekey="{{ config('services.recaptcha_v3.siteKey') }}"
                        data-callback="submitContactForm" data-action="submitInquiry"
                        class="btn bg-primary g-recaptcha text-white px-4 align-self-start ">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>

    <section class="py-5">
        <div class="container">

            <!-- Section Title -->
            <div class="text-center mb-5">
                <h2 class="fw-medium font-family-Onest fs-1 m-0">
                    <span class="text-dark">Your Trusted</span>
                    <span style="color: var(--secondary-color);">Connection</span>
                </h2>
                <p class="mt-2 font-family-Onest">
                    We are always here to assist you
                </p>
            </div>

            <!-- Cards -->
            <div class="row g-4">

                <!-- Card -->
                @foreach ($page->contactUsAddressesMeta as $address)
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="glass-card gradient-card h-100 rounded-4 p-4">

                            <!-- Name -->
                            <div class="d-flex align-items-center gap-3 mb-3">
                                <div class="icon">
                                    <i class="bi bi-person"></i>
                                </div>
                                <div>
                                    <div class="glass-label">Name</div>
                                    <div class="glass-value">{!! $address->meta['name'] !!}</div>
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="d-flex align-items-center gap-3 mb-3">
                                <div class="icon">
                                    <i class="bi bi-envelope"></i>
                                </div>
                                <div>
                                    <div class="glass-label">Email</div>
                                    <a href="mailto:{!! $address->meta['email'] !!}" class="glass-value link-item">
                                        {!! $address->meta['email'] !!}
                                    </a>
                                </div>
                            </div>


                            <div class="d-flex align-items-center gap-3 mb-3">
                                <div class="icon">
                                    <i class="bi bi-geo-alt"></i>
                                </div>
                                <div>
                                    <div class="glass-label">Location</div>
                                    <div class="glass-value">{!! $address->meta['country'] !!}</div>
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="d-flex align-items-center gap-3">
                                <div class="icon">
                                    <i class="bi bi-telephone"></i>
                                </div>
                                <div>
                                    <div class="glass-label">Phone</div>
                                    <a href="tel:+977980000000" class="glass-value link-item">
                                        {!! $address->meta['phone'] !!}
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </section>
@endsection


@push('frontend_js')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha_v3.siteKey') }}"></script>

    <script>
        function submitContactForm(token) {
            const submit_btn = document.getElementById("submit-btn");
            if (submit_btn.getAttribute("data-form") === "processing") {
                return false;
            }

            submit_btn.setAttribute("data-form", "processing");
            submit_btn.classList.add("disabled");
            submit_btn.innerText = "Submitting...";

            const form = document.getElementById('contactForm');
            const url = form.action;
            const formData = new FormData(form);
            formData.append('g-recaptcha-response', token);

            fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        "Accept": "application/json"
                    }
                })
                .then(async response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }
                    let res = await response.json();
                    res["flag"] = response.ok;
                    return res;
                })
                .then(response => {
                    const oldErrors = document.querySelectorAll('.invalid-feedback');
                    oldErrors.forEach(err => err.remove());

                    if (!response.flag) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: response.message,
                            showConfirmButton: false,
                            timer: 2500
                        });
                        // Show field errors if any...
                    } else {
                        Swal.fire({
                            icon: 'success',
                            text: response.message,
                            width: 300,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        }).then(() => {
                            form.reset();
                        });
                    }
                })
                .catch(err => console.error(err))
                .finally(() => {
                    submit_btn.classList.remove("disabled");
                    submit_btn.innerText = "Submit";
                    submit_btn.setAttribute("data-form", ""); // Reset for future submissions
                });

            return false;
        }
    </script>

    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contactForm');
            const submitBtn = document.getElementById('submit-btn');
            const siteKey = submitBtn.getAttribute('data-sitekey');

            // Prevent form from submitting normally
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                return false;
            });

            // Handle button click
            submitBtn.addEventListener('click', function(e) {
                e.preventDefault();

                // Check if already processing
                if (submitBtn.hasAttribute('data-processing')) {
                    return false;
                }

                // Execute reCAPTCHA and get token
                if (typeof grecaptcha !== 'undefined') {
                    grecaptcha.ready(function() {
                        grecaptcha.execute(siteKey, {
                                action: 'submitInquiry'
                            })
                            .then(function(token) {
                                submitContactForm(token);
                            })
                            .catch(function(error) {
                                console.error('reCAPTCHA error:', error);
                                submitContactForm(''); // Submit without token on error
                            });
                    });
                } else {
                    console.warn('reCAPTCHA not loaded');
                    submitContactForm(''); // Submit without token if reCAPTCHA not loaded
                }
            });
        });

        function submitContactForm(token) {
            const submit_btn = document.getElementById("submit-btn");
            const form = document.getElementById('contactForm');
            const url = form.action;
            const container = document.getElementById("contactForm");
            const originalContent = submit_btn.innerHTML;

            // Prevent double submission
            if (submit_btn.hasAttribute('data-processing')) {
                console.log('Already processing...');
                return false;
            }

            console.log('Starting form submission...');

            // Disable button and show submitting text
            submit_btn.setAttribute('data-processing', 'true');
            submit_btn.disabled = true;
            submit_btn.classList.add("disabled");
            submit_btn.style.opacity = "0.6";
            submit_btn.style.cursor = "not-allowed";
            submit_btn.textContent = "Submitting..."; // Use textContent instead of innerText

            const formData = new FormData(form);
            formData.append('g-recaptcha-response', token);

            fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        "Accept": "application/json",
                        "X-Requested-With": "XMLHttpRequest"
                    }
                })
                .then(async response => {
                    console.log('Response received:', response.status);
                    let res = await response.json();
                    res.flag = response.ok;
                    return res;
                })
                .then(response => {
                    console.log('Response data:', response);

                    // Clear ALL previous errors
                    const oldErrors = container.querySelectorAll('.invalid-feedback');
                    oldErrors.forEach(err => err.remove());

                    if (!response.flag && response.errors) {
                        console.log('Validation errors found');

                        // Display field errors
                        Object.keys(response.errors).forEach(fieldName => {
                            const field = container.querySelector(`[name="${fieldName}"]`);

                            if (field) {
                                const firstError = response.errors[fieldName][0];
                                const errorEl = document.createElement('span');
                                errorEl.className = 'invalid-feedback d-block';
                                errorEl.innerHTML = `<strong>${firstError}</strong>`;

                                const wrapper = field.closest('.col-md-6, .mb-3, .form-check') || field
                                    .parentNode;
                                wrapper.appendChild(errorEl);

                                // Clear error on input
                                field.addEventListener('input', function clearError() {
                                    const parent = this.closest('.col-md-6, .mb-3, .form-check');
                                    if (parent) {
                                        const errors = parent.querySelectorAll('.invalid-feedback');
                                        errors.forEach(e => e.remove());
                                    }
                                    this.removeEventListener('input', clearError);
                                }, {
                                    once: true
                                });
                            }
                        });
                    } else if (response.flag) {
                        console.log('Form submitted successfully');

                        // Success: Reset form
                        form.reset();

                        // Success toast
                        Swal.fire({
                            icon: 'success',
                            text: response.message || 'Form submitted successfully!',
                            width: 300,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true,
                            customClass: {
                                popup: 'small-toast-popup',
                                icon: 'swal2-icon-success-fixed'
                            }
                        });
                    }
                })
                .catch(error => {
                    console.error('Fetch error:', error);
                    Swal.fire({
                        icon: 'error',
                        text: 'An error occurred. Please try again.',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000
                    });
                })
                .finally(() => {
                    console.log('Restoring button state');

                    // Restore button state
                    submit_btn.removeAttribute('data-processing');
                    submit_btn.disabled = false;
                    submit_btn.classList.remove("disabled");
                    submit_btn.style.opacity = "1";
                    submit_btn.style.cursor = "pointer";
                    submit_btn.innerHTML = originalContent;
                });

            return false;
        }
    </script> --}}

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const regionNames = new Intl.DisplayNames(['en'], {
                type: 'region'
            });
            const select = document.getElementById('countries');

            // Full list of ISO 3166-1 alpha-2 country codes
            const countryCodes = [
                "AF", "AX", "AL", "DZ", "AS", "AD", "AO", "AI", "AQ", "AG", "AR", "AM", "AW", "AU", "AT", "AZ",
                "BS", "BH", "BD", "BB", "BY", "BE", "BZ", "BJ", "BM", "BT", "BO", "BQ", "BA", "BW", "BV", "BR",
                "IO", "BN", "BG", "BF", "BI", "KH", "CM", "CA", "CV", "KY", "CF", "TD", "CL", "CN", "CX", "CC",
                "CO", "KM", "CG", "CD", "CK", "CR", "CI", "HR", "CU", "CW", "CY", "CZ", "DK", "DJ", "DM", "DO",
                "EC", "EG", "SV", "GQ", "ER", "EE", "SZ", "ET", "FK", "FO", "FJ", "FI", "FR", "GF", "PF", "TF",
                "GA", "GM", "GE", "DE", "GH", "GI", "GR", "GL", "GD", "GP", "GU", "GT", "GG", "GN", "GW", "GY",
                "HT", "HM", "VA", "HN", "HK", "HU", "IS", "IN", "ID", "IR", "IQ", "IE", "IM", "IL", "IT", "JM",
                "JP", "JE", "JO", "KZ", "KE", "KI", "KP", "KR", "KW", "KG", "LA", "LV", "LB", "LS", "LR", "LY",
                "LI", "LT", "LU", "MO", "MG", "MW", "MY", "MV", "ML", "MT", "MH", "MQ", "MR", "MU", "YT", "MX",
                "FM", "MD", "MC", "MN", "ME", "MS", "MA", "MZ", "MM", "NA", "NR", "NP", "NL", "NC", "NZ", "NI",
                "NE", "NG", "NU", "NF", "MK", "MP", "NO", "OM", "PK", "PW", "PS", "PA", "PG", "PY", "PE", "PH",
                "PN", "PL", "PT", "PR", "QA", "RE", "RO", "RU", "RW", "BL", "SH", "KN", "LC", "MF", "PM", "VC",
                "WS", "SM", "ST", "SA", "SN", "RS", "SC", "SL", "SG", "SX", "SK", "SI", "SB", "SO", "ZA", "GS",
                "SS", "ES", "LK", "SD", "SR", "SJ", "SE", "CH", "SY", "TW", "TJ", "TZ", "TH", "TL", "TG", "TK",
                "TO", "TT", "TN", "TR", "TM", "TC", "TV", "UG", "UA", "AE", "GB", "US", "UM", "UY", "UZ", "VU",
                "VE", "VN", "VG", "VI", "WF", "EH", "YE", "ZM", "ZW"
            ];

            countryCodes.forEach(code => {
                const countryName = regionNames.of(code);
                const option = document.createElement('option');
                option.value = countryName; // store country name in DB
                option.textContent = countryName; // display country name
                select.appendChild(option);
            });
        })
    </script>
@endpush