@extends('themes.frontend.layouts.app')
@section('body_class', 'bg-surface font-body text-on-surface')
@section('validate') @stop
@push('head_scripts')
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "surface-variant": "#e5e2de",
                        "surface-container-high": "#eae8e4",
                        "on-tertiary-fixed": "#211a13",
                        "secondary-container": "#d1e5fa",
                        "on-primary-container": "#809ddb",
                        error: "#ba1a1a",
                        "on-error-container": "#93000a",
                        "primary-container": "#0e336a",
                        "on-secondary-fixed-variant": "#36495a",
                        primary: "#001e49",
                        "inverse-on-surface": "#f3f0ec",
                        "secondary-fixed": "#d1e5fa",
                        "error-container": "#ffdad6",
                        "primary-fixed": "#d8e2ff",
                        "on-tertiary-fixed-variant": "#4e453c",
                        "surface-container-lowest": "#ffffff",
                        "on-primary-fixed-variant": "#26467d",
                        "on-error": "#ffffff",
                        "tertiary-fixed-dim": "#d1c4b8",
                        "on-primary": "#ffffff",
                        "on-secondary-fixed": "#091d2c",
                        surface: "#fcf9f5",
                        "outline-variant": "#c4c6d1",
                        "primary-fixed-dim": "#adc6ff",
                        "on-secondary": "#ffffff",
                        "surface-tint": "#405e97",
                        secondary: "#4e6072",
                        "on-secondary-container": "#546678",
                        "on-surface-variant": "#434750",
                        outline: "#747781",
                        "inverse-primary": "#adc6ff",
                        "tertiary-container": "#3b332b",
                        "on-tertiary": "#ffffff",
                        "secondary-fixed-dim": "#b5c9dd",
                        "tertiary-fixed": "#eee0d4",
                        "surface-container-highest": "#e5e2de",
                        "surface-container": "#f0ede9",
                        "surface-container-low": "#f6f3ef",
                        background: "#fcf9f5",
                        "on-background": "#1c1c1a",
                        "inverse-surface": "#31302e",
                        "on-primary-fixed": "#001a41",
                        "surface-dim": "#dcdad6",
                        "surface-bright": "#fcf9f5",
                        "on-tertiary-container": "#a79b90",
                        "on-surface": "#1c1c1a",
                        tertiary: "#251e16",
                    },
                    borderRadius: {
                        DEFAULT: "0.25rem",
                        lg: "0.5rem",
                        xl: "0.75rem",
                        full: "9999px",
                    },
                    fontFamily: {
                        headline: ["Manrope"],
                        body: ["Inter"],
                        label: ["Inter"],
                    },
                },
            },
        };
    </script>
@endpush
@push('styles')
    <style>
        .material-symbols-outlined {
            font-variation-settings:
                "FILL" 0,
                "wght" 300,
                "GRAD" 0,
                "opsz" 24;
        }

        /* nabrbar css */
        .chg-nav-glass-morphism {
            background: #ffffff;
            border-bottom: 1px solid rgba(0, 30, 73, 0.08);
        }

        .chg-nav-dropdown-container {
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
        }

        .chg-nav-link {
            @apply relative text-[#4e6072] font-semibold text-sm tracking-wide transition-colors duration-200 cursor-pointer;
        }

        .chg-nav-link:hover {
            @apply text-primary;
        }

        .chg-nav-active-nav-link {
            @apply text-primary;
        }

        .chg-nav-active-nav-link::after {
            /* content: ""; */
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #001e49;
        }

        .chg-nav-z-menu {
            z-index: 100;
        }

        /* navbar */
        .glass-card2 {
            background: rgba(14, 51, 106, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .text-glow {
            text-shadow: 0 0 20px rgba(173, 198, 255, 0.4);
        }

        .clip-path-slant {
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        }

        .glass-silk {
            background: rgba(252, 249, 245, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .glass-card {
            background: rgba(14, 51, 106, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
    </style>
@endpush
@section('content')
    <main class="pt-14">
        <!-- Section 1: Hero Cinematic 3-Column Split -->
        <section class="relative h-[621px] overflow-hidden flex flex-col md:flex-row w-full gap-1 p-1">
            <!-- Burlington Column -->
            <div class="relative flex-1 group overflow-hidden cursor-pointer h-full">
                <a href="{{ module_url('WebEnquiryController.locationData', ['slug' => 'burlington']) }}">
                    <div class="absolute inset-0 bg-primary/20 z-10 group-hover:bg-transparent transition-all duration-700">
                    </div>
                    <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
                        data-alt="Ultra-modern architectural dental clinic facade in Burlington with floor-to-ceiling glass and soft evening warm interior lighting"
                        src="{{ asset('themes/frontend') }}/images/location-1.webp" />
                    <div class="absolute bottom-12 left-12 z-20">
                        <h2 class="text-4xl md:text-5xl font-headline font-bold text-white tracking-tighter">
                            Burlington
                        </h2>
                    </div>
                </a>
            </div>
            <!-- Oakville Column -->
            <div class="relative flex-1 group overflow-hidden cursor-pointer h-full">
                <a href="{{ module_url('WebEnquiryController.locationData', ['slug' => 'oakville']) }}">
                    <div class="absolute inset-0 bg-primary/20 z-10 group-hover:bg-transparent transition-all duration-700">
                    </div>
                    <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
                        data-alt="Elegant luxury dental office exterior in Oakville featuring minimalist stone textures and manicured zen garden surroundings"
                        src="{{ asset('themes/frontend') }}/images/location-2.png" />
                    <div class="absolute bottom-12 left-12 z-20">
                        <h2 class="text-4xl md:text-5xl font-headline font-bold text-white tracking-tighter">
                            Oakville
                        </h2>
                    </div>
                </a>
            </div>
            <!-- Mississauga Column -->
            <div class="relative flex-1 group overflow-hidden cursor-pointer h-full">
                <a href="{{ module_url('WebEnquiryController.locationData', ['slug' => 'mississauga']) }}">
                    <div class="absolute inset-0 bg-primary/20 z-10 group-hover:bg-transparent transition-all duration-700">
                    </div>
                    <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
                        data-alt="Futuristic high-tech dental studio entrance in Mississauga with neon accent lighting and clean white architectural lines"
                        src="{{ asset('themes/frontend') }}/images/location-3.png" />
                    <div class="absolute bottom-12 left-12 z-20">
                        <h2 class="text-4xl md:text-5xl font-headline font-bold text-white tracking-tighter">
                            Mississauga
                        </h2>
                    </div>
                </a>
            </div>
            <!-- Central Content Overlay -->
        </section>
        <!-- Section 2: Locations Grid -->
        <section class="py-12 px-6 md:px-12 max-w-screen-2xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-8">
                <div class="max-w-2xl">
                    <h2 class="text-5xl md:text-7xl font-headline font-bold tracking-tighter leading-none text-primary">
                        Our Locations
                    </h2>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                <!-- Burlington Card -->
                <div
                    class="group relative p-1 rounded-[2rem] overflow-hidden bg-gradient-to-br from-primary/10 via-transparent to-primary/10">
                    <div
                        class=" h-full rounded-[1.9rem] p-10 flex flex-col gap-8 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-500 border border-white/20">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-3xl font-headline font-bold text-primary mb-2">
                                    Burlington
                                </h3>
                                <p class="text-secondary font-body">
                                    2455 Appleby Line, Suite #C08,<br />
                                    Burlington, ON L7L 0B6.
                                </p>
                            </div>
                            <span
                                class="flex items-center gap-2 bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                Open
                            </span>
                        </div>
                        <div class="space-y-1">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-lg" data-icon="mail">mail</span>
                                <span class="text-primary text-sm">burlington@chaggerdental.com</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-lg" data-icon="call">call</span>
                                <span class="text-primary text-sm">905-336-0600</span>
                            </div>
                        </div>
                        <div class="w-full h-48 rounded-2xl overflow-hidden transition-all duration-700" id="map2">
                        </div>
                        <div class="space-y-4">
                            <div class="flex justify-between text-sm">
                                <span class="text-outline">Mon — Fri</span>
                                <span class="text-primary font-semibold">8:00 AM — 7:00 PM</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-outline">Saturday</span>
                                <span class="text-primary font-semibold">9:00 AM — 3:00 PM</span>
                            </div>
                        </div>
                        <a href="{{ module_url('WebEnquiryController.locationData', ['slug' => 'burlington']) }}"><button
                                class="w-full py-4 rounded-xl bg-primary text-white font-headline font-bold hover:scale-[1.02] active:scale-95 transition-all">
                                Select Location
                            </button></a>
                    </div>
                </div>
                <!-- Oakville Card -->
                <div
                    class="group relative p-1 rounded-[2rem] overflow-hidden bg-gradient-to-br from-primary/10 via-transparent to-primary/10">
                    <div
                        class=" h-full rounded-[1.9rem] p-10 flex flex-col gap-8 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-500 border border-white/20">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-3xl font-headline font-bold text-primary mb-2">
                                    Oakville
                                </h3>
                                <p class="text-secondary font-body">
                                    231 Oak Park Blvd., Suite #108,<br />
                                    Oakville, ON L6H 7S8
                                </p>
                            </div>
                            <span
                                class="flex items-center gap-2 bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                Open
                            </span>
                        </div>
                        <div class="space-y-1">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-lg" data-icon="mail">mail</span>
                                <span class="text-primary text-sm">oakville@chaggerdental.com</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-lg" data-icon="call">call</span>
                                <span class="text-primary text-sm">905-257-2221</span>
                            </div>
                        </div>
                        <div class="w-full h-48 rounded-2xl overflow-hidden transition-all duration-700" id="map1">
                        </div>
                        <div class="space-y-4">
                            <div class="flex justify-between text-sm">
                                <span class="text-outline">Mon — Fri</span>
                                <span class="text-primary font-semibold">8:00 AM — 6:00 PM</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-outline">Saturday</span>
                                <span class="text-primary font-semibold">10:00 AM — 2:00 PM</span>
                            </div>
                        </div>
                        <a href="{{ module_url('WebEnquiryController.locationData', ['slug' => 'oakville']) }}"><button
                                class="w-full py-4 rounded-xl bg-primary text-white font-headline font-bold hover:scale-[1.02] active:scale-95 transition-all">
                                Select Location
                            </button></a>
                    </div>
                </div>
                <!-- Mississauga Card -->
                <div
                    class="group relative p-1 rounded-[2rem] overflow-hidden bg-gradient-to-br from-primary/10 via-transparent to-primary/10">
                    <div
                        class=" h-full rounded-[1.9rem] p-10 flex flex-col gap-8 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-500 border border-white/20">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-3xl font-headline font-bold text-primary mb-2">
                                    Mississauga
                                </h3>
                                <p class="text-secondary font-body">
                                    3427 Derry Rd East, Suite #201<br />
                                    Mississauga, ON L4T 4H7
                                </p>
                            </div>
                            <span
                                class="flex items-center gap-2 bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                Open
                            </span>
                        </div>
                        <div class="space-y-1">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-lg" data-icon="mail">mail</span>
                                <span class="text-primary text-sm">mississauga@chaggerdental.com</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-lg" data-icon="call">call</span>
                                <span class="text-primary text-sm">905-672-2244</span>
                            </div>
                        </div>
                        <div class="w-full h-48 rounded-2xl overflow-hidden transition-all duration-700" id="map3">
                        </div>
                        <div class="space-y-4">
                            <div class="flex justify-between text-sm">
                                <span class="text-outline">Mon — Fri</span>
                                <span class="text-primary font-semibold">7:00 AM — 8:00 PM</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-outline">Sat — Sun</span>
                                <span class="text-primary font-semibold">9:00 AM — 4:00 PM</span>
                            </div>
                        </div>
                        <a href="{{ module_url('WebEnquiryController.locationData', ['slug' => 'mississauga']) }}"><button
                                class="w-full py-4 rounded-xl bg-primary text-white font-headline font-bold hover:scale-[1.02] active:scale-95 transition-all">
                                Select Location
                            </button></a>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-12 px-8 bg-primary relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-tr from-primary to-primary-container"></div>
            <div class="max-w-4xl mx-auto relative z-10">
                <div class="text-center mb-10">
                    <h2 class="text-5xl font-headline font-extrabold text-white mb-2">
                        Contact Us
                    </h2>
                </div>
                <div class="glass-panel bg-white/10 p-12 rounded-[3rem] border border-white/20 backdrop-blur-xl">
                    <form action="{{ module_url('web.contact.submit') }}" method="POST" name="enquiry_form" id="enquiry_form" class="grid grid-cols-1 md:grid-cols-2 gap-6" novalidate>
                        {{ csrf_field() }}
                        <x-form.field.hidden name="recaptcha_v3" id="recaptcha_v3" />
                        <div class="md:col-span-2">
                            <div>
                                <label class="block text-sm font-label text-white/70 mb-2 px-1" for="{{ $fields['select_location']->field_name }}">{{ $fields['select_location']->field_label }}</label>
                                <select class="w-full bg-white/10 border-none rounded-xl text-white/70 focus:ring-2 focus:ring-primary-fixed py-4 cursor-pointer" name="{{ $fields['select_location']->field_name }}" id="{{ $fields['select_location']->field_name }}">
                                    @foreach ($clinicList as $id => $title)
                                        <option value="{{ $title }}" @selected(old($fields['select_location']->field_name) == $title) data-location-id="{{ $id }}" class="bg-primary-container">
                                            {{ $title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!-- Field 1 -->
                        <div>
                            <label class="block text-sm font-label text-white/70 mb-2 px-1"
                                for="{{ $fields['full_name']->field_name }}">{{ $fields['full_name']->field_label }}</label>
                            <input
                                class="w-full bg-white/10 border-none rounded-xl text-white placeholder-white/40 focus:ring-2 focus:ring-primary-fixed py-4"
                                placeholder="{{ $fields['full_name']->placeholder }}"
                                name="{{ $fields['full_name']->field_name }}"
                                id="{{ $fields['full_name']->field_name }}"
                                value="{{ old($fields['full_name']->field_name) }}" type="text" />
                        </div>
                        <!-- Field 2 -->
                        <div>
                            <label class="block text-sm font-label text-white/70 mb-2 px-1"
                                for="{{ $fields['phone_number']->field_name }}">{{ $fields['phone_number']->field_label }}</label>
                            <input
                                class="w-full bg-white/10 border-none rounded-xl text-white placeholder-white/40 focus:ring-2 focus:ring-primary-fixed py-4"
                                placeholder="{{ $fields['phone_number']->placeholder }}"
                                name="{{ $fields['phone_number']->field_name }}"
                                id="{{ $fields['phone_number']->field_name }}"
                                value="{{ old($fields['phone_number']->field_name) }}" type="tel" />
                        </div>
                        <!-- Field 3 -->
                        <div>
                            <label class="block text-sm font-label text-white/70 mb-2 px-1"
                                for="{{ $fields['email_address']->field_name }}">{{ $fields['email_address']->field_label }}</label>
                            <input
                                class="w-full bg-white/10 border-none rounded-xl text-white placeholder-white/40 focus:ring-2 focus:ring-primary-fixed py-4"
                                placeholder="{{ $fields['email_address']->placeholder }}"
                                name="{{ $fields['email_address']->field_name }}"
                                id="{{ $fields['email_address']->field_name }}"
                                value="{{ old($fields['email_address']->field_name) }}" type="email" />
                        </div>
                        <!-- Field 4 -->
                        <div>
                            <label class="text-sm font-label text-white/70 mb-2 px-1"
                                for="{{ $fields['service_type']->field_name }}">{{ $fields['service_type']->field_label }}</label>
                            <select
                                class="w-full bg-white/10 border-none rounded-xl text-white/70 focus:ring-2 focus:ring-primary-fixed py-4 cursor-pointer"
                                name="{{ $fields['service_type']->field_name }}"
                                id="{{ $fields['service_type']->field_name }}">
                                @foreach ($services as $value => $label)
                                    <option value="{{ $value }}" @selected(old($fields['service_type']->field_name) == $value) class="bg-primary-container">
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Field 5 -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-label text-white/70 mb-2 px-1"
                                for="{{ $fields['comments']->field_name }}">{{ $fields['comments']->field_label }}</label>
                            <textarea
                                class="w-full bg-white/10 border-none rounded-2xl text-white placeholder-white/40 focus:ring-2 focus:ring-primary-fixed py-4"
                                placeholder="{{ $fields['comments']->placeholder }}" name="{{ $fields['comments']->field_name }}"
                                id="{{ $fields['comments']->field_name }}" rows="4"></textarea>
                        </div>
                        <div class="md:col-span-2">
                            <button
                                class="w-full py-6 bg-white text-primary font-bold text-xl rounded-full hover:bg-surface-container-low transition-colors shadow-2xl"
                                type="button" id="send_enquiry_form" name="send_enquiry_form">
                                Submit
                            </button>
                        </div>

                        <div id="msg_id"></div>
                    </form>
                </div>
            </div>
        </section>
    </main>
@endsection
@push('scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYKAOpYx7GmXFhsI-OE7PGqSyIW7aH63E&callback=initMap" async
        defer></script>
    <script>
        // map js
        function createMap(id, lat, lng, title) {
            const location = {
                lat,
                lng
            };

            const map = new google.maps.Map(document.getElementById(id), {
                zoom: 15,
                center: location,
            });

            new google.maps.Marker({
                position: location,
                map: map,
                title: title,
            });
        }

        function initMap() {
            createMap("map1", 43.482842385477404, -79.71629011349353, "Location 1");
            createMap("map2", 43.405426825738026, -79.80530690313785, "Location 2");
            createMap("map3", 43.7134378, -79.6324435, "Location 3");
        }
    </script>
@endpush
@push('last_scripts')
    <script>
        // Form
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // --------------------------------------------------------
            // Build dynamic validation rules based on form fields
            // --------------------------------------------------------
            var dynamicRules = {};
            @foreach ($form->fields as $field)
                dynamicRules["{{ $field->field_name }}"] = {
                    required: {{ $field->required ? 'true' : 'false' }},
                    @if ($field->type === 'email')
                        email: true,
                    @endif
                };
            @endforeach

            $("#enquiry_form").validate({
                rules: dynamicRules,

                // Optional message structure (simple)
                messages: {
                    @foreach ($form->fields as $field)
                        "{{ $field->field_name }}": {
                            required: @if ($field->type === 'select' || $field->type === 'radio')
                                "Please select {{ strtolower($field->field_label) }}."
                            @else
                                "Please enter {{ strtolower($field->field_label) }}."
                            @endif
                        },
                    @endforeach
                },

                errorElement: "label",
                errorClass: "text-red-600 text-sm mt-1 block",

                errorPlacement: function(error, element) {
                    if (element.is(":radio")) {
                        error.appendTo(element.parents('.error-container'));
                    } else { // This is the default behavior
                        error.insertAfter(element);
                    }
                },

                highlight: function(element) {
                    $(element).addClass('ring-2 ring-red-400');
                },

                unhighlight: function(element) {
                    $(element).removeClass('ring-2 ring-red-400');
                }
            });

            // --------------------------------------------------------
            // Submit handler with Recaptcha + dynamic FormData
            // --------------------------------------------------------
            $("#send_enquiry_form").click(function(e) {
                e.preventDefault();

                grecaptcha.ready(function() {
                    grecaptcha.execute("{{ config('commonconstants.recaptcha.site_key') }}", {
                        action: 'enquiry_form'
                    }).then(function(token) {

                        if (token) {
                            $("#recaptcha_v3").val(token);

                            var form = $("#enquiry_form");

                            if (form.valid()) {

                                var formData = new FormData();

                                // Add recaptcha token
                                formData.append('recaptcha_v3', token);

                                // Add all dynamic fields
                                @foreach ($form->fields as $field)
                                    @if ($field->type === 'radio')
                                        // RADIO FIELD
                                        formData.append('{{ $field->field_name }}',
                                            $(
                                                'input[name="{{ $field->field_name }}"]:checked')
                                            .val() || ''
                                        );
                                    @else
                                        // OTHER FIELDS (text, email, tel, textarea, select, date)
                                        formData.append('{{ $field->field_name }}',
                                            $("#{{ $field->field_name }}").val()
                                        );
                                    @endif
                                @endforeach

                                var locationId = $("#select_location").find(':selected')
                                    .data('location-id');
                                formData.append('location_id', locationId);

                                $.ajax({
                                    url: "{{ module_url('web.contact.submit') }}",
                                    type: "POST",
                                    data: formData,
                                    contentType: false,
                                    processData: false,
                                    dataType: 'json',

                                    beforeSend: function() {
                                        $('#send_enquiry_form').prop('disabled',
                                            true);
                                        $("#send_enquiry_form").text(
                                            "{{ __('enquiry.button.processing_txt') }}"
                                        );
                                    },

                                    success: function(data) {
                                        // console.log(data);
                                        $('#send_enquiry_form').prop('disabled',
                                            false);
                                        $("#send_enquiry_form").text(
                                            "Submit"
                                        );

                                        showAlert(data);

                                        if (data['url']) {
                                            window.location.href = data['url'];
                                        }
                                    },

                                    error: function(e) {
                                        $("#msg_id").html(
                                            "<p class='text-red-500'>{{ __('enquiry.error.form_submit') }}</p>"
                                        );
                                    }
                                });
                            }
                        }

                    });
                });
            });
        });
    </script>
@endpush