@push('meta')
    <meta name="title" content="{{ $bannerData['meta_title'] }}" />

    <meta name="description" content="{{ $bannerData['meta_description'] }}" />

    <meta name="keywords" content="{{ $bannerData['meta_keywords'] }}" />
@endPush

<!-- Page Layout -->
<x-shop::layouts :has-header="true" :has-footer="true">


    <!-- Page Title -->
    <x-slot:title>
        {{ $bannerData['title'] }}
    </x-slot>
    <div class="relative font-['Acumin Variable Concept'] w-full flex items-center justify-center " style="height: 600px">
        <img class="aspect-[4/1] absolute object-cover w-full h-full " src="{{ $bannerData['banner_img'] }}"
            alt="{{ $bannerData['title'] }}" />

        <div
            class="absolute inset-0 bg-opacity-0 bg-[rgb(0,0,0,0.3)] flex items-center justify-center transition-all duration-300">

        </div>

        <div class="relative text-center text-white px-4 max-w-4xl mx-auto mt-6">
            <div class="flex justify-center">
                <img src="{{ bagisto_asset('images/Heading.svg') }}"
                    class="h-full absolute mx-auto remove_margin_left" alt="the chef its you" width="400" />
            </div>
            <h1 class=" tracking-[16px] cms_pages_title text-[66px] text-white  uppercase font-stritch mt-[100px]">
                {{ $bannerData['title'] }}
            </h1>

            <div class="container flex w-full justify-center items-center">
                <p class="text-[#FFFFFF] font-[500] text-[18px] text-center w-full max-w-[523px]">
                    {{ $bannerData['short_description'] }}
                </p>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap relative max-w-[100%] max-h-[auto] h-full w-full font-['Acumin Variable Concept'] bg-[#D9D9D9] max-1180:px-5 max-md:mt-6 max-md:px-4 max-sm:mt-2 contact_us_height_set"
        style="
    height: 1000px;
">
        <div class="max-w-[100%] max-h-[auto] w-full h-full bg-[#F5F5F5] reduce_the_height_contact_us"
            style="height: 829px; width:calc(100%);">

        </div>
        <!-- <div class="max-w-[100%] max-h-[auto] w-full h-full bg-[#D9D9D9]" style="max-height: 829px; width:calc(100% - 1200px);">

            </div> -->
        <div class="absolute flex flex-wrap gap-[80px] max-w-[90%] max-h-[auto] h-full w-full contact_us_top_reduce"
            style="margin-block: auto; top: 120px; left: 4.5%;">
            <div class="flex flex-col max-w-[100%] max-h-[auto] w-full h-full">





            </div>
            <!-- <div class="max-w-[40%] max-h-auto w-full h-full bg-[#D9D9D9] contact_us_extra_div_hidden"
                    style="max-height: auto; width:40%">
                </div> -->
            <div class="absolute flex px-5 gap-[80px] max-w-[100%] min-h-[589px] h-full w-full contact_us_card_grid"
                style="margin-block:auto;">

                <div
                    class="flex flex-col items-center sm:items-center md:items-start lg:items-start my-auto max-w-[100%] max-h-[100%] w-full h-full">


                    <div class="flex flex-col max-w-[100%] max-h-[217px] w-full h-full">
                        <div class="relative max-w-[100%] max-h-[130px] w-full h-full reduce_height_of_get_in_touch">
                            <img src="{{ bagisto_asset('images/store-icon.svg') }}"
                                class="h-full absolute w-[400px] top-[-50px] contact_us_image_height_and_top_set z-0 mx-auto"
                                alt="Missing image" width="358" />
                            <h1
                                class="relative text-[66px] leading-[66px] font-stritch font-[500] tracking-[16px] text-[#7E7071] max-md:text-4xl max-sm:tracking-[12px] max-sm:text-[35px] z-10 reduce_get_in_touch_tracking">
                                GET IN TOUCH
                            </h1>
                        </div>


                        <span class="text-black leading-[18px] font-[400]">
                            {!! htmlspecialchars_decode($bannerData['description']) !!}
                        </span>
                    </div>


                    <div
                        class="flex flex-col text-center sm:text-center md:text-start lg:text-start max-w-[317px] max-h-[190px] w-full h-full mt-4 max-md:max-w-full">
                        <div class="flex flex-row gap-[16px] mb-4">
                            <img src="{{ bagisto_asset('images/location.svg') }}"
                                class="h-8 w-8 dark:mix-blend-exclusion dark:invert">
                            <span class="text-black leading-[27px] font-[400] my-auto max-sm:text-left">
                                <a target="_blank" class="hover:text-[#915C44]"
                                    href="http://maps.google.com/?q={{ $generalData ? $generalData->address : '' }}">{{ $generalData ? $generalData->address : '' }}
                                </a>
                            </span>
                        </div>
                        <div class="flex flex-row mt-4 gap-[16px] max-sm:mt-0">
                            <img src="{{ bagisto_asset('images/phone.png') }}"
                                class="h-8 w-8 dark:mix-blend-exclusion dark:invert">

                            <span class="text-black leading-[27px] font-[400] my-auto">
                                <a href="tel:{{ $generalData ? $generalData->email : '' }}"
                                    class="hover:text-[#915C44]">{{ $generalData ? $generalData->phone : '' }}
                                </a></span>

                        </div>
                        <div class="flex flex-row mt-4  gap-[16px]">
                            <img src="{{ bagisto_asset('images/email.svg') }}"
                                class="h-8 w-8 dark:mix-blend-exclusion dark:invert">
                            <span class="text-black leading-[27px] font-[400] my-auto">
                                <a href="mailto:{{ $generalData ? $generalData->email : '' }}"
                                    class="hover:text-[#915C44]">
                                    {{ $generalData ? $generalData->email : '' }}
                                </a>
                            </span>
                        </div>




                        <div class="flex gap-[16px] mt-4">
                            <a href="{{ $generalData ? $generalData->facebook_url : '' }}" target="_blank"
                                class="transform opacity-100 transition duration-300 ease-in-out hover:scale-150 hover:opacity-100">
                                <img src="{{ bagisto_asset('images/facebook-gray.svg') }}">
                            </a>
                            <a href="{{ $generalData ? $generalData->instagram_url : '' }}" target="_blank"
                                class="transform opacity-100 transition duration-300 ease-in-out hover:scale-150 hover:opacity-100">
                                <img src="{{ bagisto_asset('images/instagram-gray.svg') }}">
                            </a>
                            {{-- <a href="{{ $generalData ? $generalData->twitter_url : '' }}" target="_blank"
                                class="transform opacity-100 transition duration-300 ease-in-out hover:scale-150 hover:opacity-100">
                                <img src="{{ bagisto_asset('images/x-gray.svg') }}">
                            </a> --}}
                            <a href="{{ $generalData ? $generalData->youtube_url : '' }}" target="_blank"
                                class="transform opacity-100 transition duration-300 ease-in-out hover:scale-150 hover:opacity-100">
                                <img src="{{ bagisto_asset('images/youtube-gray.svg') }}">
                            </a>
                        </div>


                    </div>

                </div>
                <!-- Form Container -->
                <div
                    class="max-w-[50%] max-h-[auto] sm:max-h-[auto] md:max-h-[470px] lg:max-h-[470px]  w-full h-full contact_us_form bg-white p-[32px] backdrop-blur-md border border-zinc-200 ">
                    <h1 class=" text-[28px] leading-[33px] font-stritch font-[600] text-[#1D1D1D]">
                        <!-- @lang('shop::app.home.contact.title') -->
                        Send Us Message
                    </h1>

                    <!-- <p class="mt-2 text-xl text-zinc-500 max-sm:mt-1 max-sm:text-sm">
                @lang('shop::app.home.contact.about')
            </p> -->

                    <div class="mt-2 rounded max-sm:mt-8">
                        <!-- Contact Form -->
                        <x-shop::form :action="route('shop.home.contact_us.send_mail')">
                            <!-- Name -->
                            <x-shop::form.control-group>
                                <!-- <x-shop::form.control-group.label class="required text-[18px] leading-[33px]  font-[400]">
                            @lang('shop::app.home.contact.name')
                        </x-shop::form.control-group.label> -->

                                <x-shop::form.control-group.control type="text"
                                    class="max-md:py-3 max-sm:py-3.5 max-w-[546px] max-h-[43px] h-full w-full text-[18px] leading-[27px] font-[400]"
                                    style="padding-left:5px; " name="name" rules="required" :value="old('name')"
                                    :label="trans('shop::app.home.contact.name')" :placeholder="trans('shop::app.home.contact.name')" :aria-label="trans('shop::app.home.contact.name')" aria-required="true" />

                                <x-shop::form.control-group.error control-name="name" />
                            </x-shop::form.control-group>

                            <!-- Email -->
                            <x-shop::form.control-group>
                                <!-- <x-shop::form.control-group.label class="required text-[18px] leading-[33px]  font-[400]">
                            @lang('shop::app.home.contact.email')
                        </x-shop::form.control-group.label> -->

                                <x-shop::form.control-group.control type="email"
                                    class="max-md:py-3 max-sm:py-3.5 max-w-[546px] max-h-[43px] h-full w-full text-[18px] leading-[27px] font-[400]"
                                    style="padding-left:5px; " name="email" rules="required|email" :value="old('email')"
                                    :label="trans('shop::app.home.contact.email')" :placeholder="trans('shop::app.home.contact.email')" :aria-label="trans('shop::app.home.contact.email')" aria-required="true" />

                                <x-shop::form.control-group.error control-name="email" />
                            </x-shop::form.control-group>

                            <!-- Contact -->
                            <x-shop::form.control-group>
                                <!-- <x-shop::form.control-group.label class="text-[18px] leading-[33px]  font-[400]">
                            @lang('shop::app.home.contact.phone-number')
                        </x-shop::form.control-group.label> -->

                                <x-shop::form.control-group.control type="text"
                                    class=" max-w-[546px] max-h-[43px] h-full w-full text-[18px] leading-[27px] font-[400]"
                                    style="padding-left:5px; " name="contact" rules="phone" :value="old('contact')"
                                    :label="trans('shop::app.home.contact.phone-number')" :placeholder="trans('shop::app.home.contact.phone-number')" :aria-label="trans('shop::app.home.contact.phone-number')" />

                                <x-shop::form.control-group.error control-name="contact" />
                            </x-shop::form.control-group>

                            <!-- Message -->
                            <x-shop::form.control-group>
                                <!-- <x-shop::form.control-group.label class="required">
                            @lang('shop::app.home.contact.desc')
                        </x-shop::form.control-group.label> -->

                                <x-shop::form.control-group.control type="textarea"
                                    class="focus:border-0 max-w-[546px] border-t-0 border-l-0 border-r-0 max-h-[75px] h-full w-full text-[18px] focus:outline-0 leading-[27px] font-[400]"
                                    name="message" rules="required" :label="trans('shop::app.home.contact.message')" placeholder="Message"
                                    style="padding-left:5px; " :aria-label="trans('shop::app.home.contact.message')" aria-required="true"
                                    rows="4" />

                                <x-shop::form.control-group.error control-name="message" />
                            </x-shop::form.control-group>

                            <!-- Recaptcha -->
                            @if (core()->getConfigData('google.recaptcha.settings.status'))
                                <div class="mb-3 flex">
                                    {!! Captcha::render() !!}
                                </div>
                            @endif

                            <!-- Submit Button -->
                            <div
                                class="mt-2 flex flex-wrap items-center gap-9 max-sm:justify-center max-sm:text-center">
                                <button
                                    class="primary-button m-0 mx-auto block w-full max-w-[121px] max-h-[47px]  rounded-full px-4 py-2 text-center text-base max-md:max-w-full max-md:rounded-lg max-md:py-3 max-sm:py-1.5 ltr:ml-0 rtl:mr-0"
                                    type="submit">
                                    @lang('shop::app.home.contact.submit')
                                </button>
                            </div>
                        </x-shop::form>
                    </div>
                </div>


            </div>


        </div>

    </div>
    <div class="relative w-full h-full bg-gray-200 rounded-lg " style="height:608px; width:100%">
        <v-google-map>

        </v-google-map>
    </div>




    @push('scripts')
        {!! Captcha::renderJS() !!}



        <script type="text/x-template" id="v-google-map">
            <div id="map" style="width: 100%; height: 608px;"></div>

    </script>
        <script type="module">
            app.component('v-google-map', {
                template: '#v-google-map',
                data() {
                    return {
                        markersData: [{
                                position: {
                                    lat: 40.7128,
                                    lng: -73.9352
                                },
                                info: "Marker 1 Info"
                            },
                            {
                                position: {
                                    lat: 40.7306,
                                    lng: -73.9866
                                },
                                info: "Marker 2 Info"
                            },
                            {
                                position: {
                                    lat: 40.7061,
                                    lng: -74.0092
                                },
                                info: "Marker 3 Info"
                            },
                            {
                                position: {
                                    lat: 40.7488,
                                    lng: -73.9854
                                },
                                info: "Marker 4 Info"
                            }
                        ]
                    };
                },

                mounted() {
                    this.loadGoogleMap();
                },

                methods: {


                    loadGoogleMap() {
                        const customMapStyle = [{
                                "featureType": "administrative.country",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "on"
                                }]
                            },
                            {
                                "featureType": "administrative.province",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "on"
                                }]
                            },
                            {
                                "featureType": "administrative.locality",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "on"
                                }]
                            },

                            {
                                "featureType": "administrative.neighborhood",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "poi",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "road",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "transit",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "water",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "landscape",
                                "elementType": "labels",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "administrative.locality",
                                "elementType": "labels.text",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "landscape",
                                "elementType": "geometry.fill",
                                "stylers": [{
                                    "color": "#2c5a71",
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "poi",
                                "elementType": "all",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "road",
                                "elementType": "geometry.fill",
                                "stylers": [{
                                    "color": "#2c5a71",

                                }]
                            },
                            {
                                "featureType": "road",
                                "elementType": "geometry.stroke",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "road.highway",
                                "elementType": "geometry.fill",
                                "stylers": [{
                                    "color": "#1f2835"
                                }]
                            },
                            {
                                "featureType": "road.highway",
                                "elementType": "geometry.stroke",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "road.highway",
                                "elementType": "labels.icon",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "road.arterial",
                                "elementType": "labels.icon",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "road.local",
                                "elementType": "labels.icon",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "transit",
                                "elementType": "all",
                                "stylers": [{
                                    "visibility": "off"
                                }]
                            },
                            {
                                "featureType": "water",
                                "elementType": "geometry.fill",
                                "stylers": [{
                                    "color": "#17263c"
                                }]
                            },
                            {
                                "featureType": "water",
                                "elementType": "geometry.fill",
                                "stylers": [{
                                    "color": "#17263c"
                                }]
                            }
                        ]

                        const mapOptions = {
                            center: {
                                lat: 25.1237334,
                                lng: 55.2440896
                            },
                            zoom: 12,
                            styles: customMapStyle,
                        };

                        const map = new google.maps.Map(document.getElementById("map"), mapOptions);




                        const getstores_url = "{{ route('shop.api.stores.list') }}";
                        this.$axios.get(getstores_url).then(response => {

                            console.log("Reading All stores on map for contact us page,", response.data.data
                                ?.stores);
                            this.markersData = response.data.data?.stores;



                            this.markersData.forEach((markerInfo) => {
                                const marker = new google.maps.Marker({
                                    position: {
                                        lat: parseFloat(markerInfo.lat),
                                        lng: parseFloat(markerInfo.long)
                                    },
                                    map: map,
                                    icon: {
                                        url: "{{ bagisto_asset('images/record-circle.svg') }}",
                                        scaledSize: new google.maps.Size(30, 30)
                                    },
                                });


                                //  <div class="contact-us-widow-info_grid">
                                //     <span class="contact-us-widow-info_icon">
                                //         <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                //             <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7773 8.44645C13.7773 11.392 11.3895 13.7798 8.44401 13.7798C5.49849 13.7798 3.11068 11.392 3.11068 8.44645C3.11068 5.50093 5.49849 3.11312 8.44401 3.11312C11.3895 3.11312 13.7773 5.50093 13.7773 8.44645ZM15.1107 8.44645C15.1107 12.1284 12.1259 15.1131 8.44401 15.1131C4.76211 15.1131 1.77734 12.1284 1.77734 8.44645C1.77734 4.76455 4.76211 1.77979 8.44401 1.77979C12.1259 1.77979 15.1107 4.76455 15.1107 8.44645ZM7.33333 4.94427V8.83316V9.13568L7.561 9.33488L10.2277 11.6682L11.1057 10.6648L8.66667 8.53065V4.94427H7.33333Z" fill="black" fill-opacity="0.5"/>
                                //         </svg>
                                //     </span>
                                //     <span class="contact-us-widow-info_icon_title">Monday To Friday:  09:00 - 21:00</span>

                                // </div>

                                const infoWindow = new google.maps.InfoWindow({
                                    content: `<div class="contact-us-widow-info" style="color: #2c5a71;">
                                <span class="contact-us-widow-info_title">${markerInfo.name}</span>

                                <div class="contact-us-widow-info_grid">
                                    <span class="contact-us-widow-info_icon">
                                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_4001_5168)">
                                            <path d="M9.49404 4.61003C10.1452 4.73707 10.7436 5.05553 11.2128 5.52465C11.6819 5.99377 12.0003 6.5922 12.1274 7.24336M9.49404 1.94336C10.8469 2.09365 12.1084 2.69948 13.0715 3.66136C14.0346 4.62325 14.6421 5.88403 14.794 7.23669M6.94536 9.85207C6.14431 9.05102 5.51179 8.14526 5.04779 7.17884C5.00788 7.09572 4.98792 7.05416 4.97259 7.00156C4.91811 6.81466 4.95724 6.58515 5.07058 6.42687C5.10248 6.38232 5.14058 6.34422 5.21679 6.26801C5.44986 6.03494 5.5664 5.91841 5.64259 5.80122C5.92992 5.35929 5.92992 4.78957 5.64259 4.34765C5.5664 4.23046 5.44986 4.11393 5.21679 3.88086L5.08688 3.75094C4.73258 3.39665 4.55543 3.2195 4.36518 3.12327C3.98681 2.93189 3.53996 2.93189 3.16159 3.12327C2.97133 3.2195 2.79419 3.39665 2.43989 3.75094L2.3348 3.85603C1.98172 4.20911 1.80518 4.38566 1.67035 4.62568C1.52073 4.89201 1.41316 5.30567 1.41407 5.61116C1.41489 5.88645 1.46829 6.0746 1.57509 6.4509C2.14907 8.47316 3.23206 10.3814 4.82404 11.9734C6.41603 13.5654 8.32427 14.6484 10.3465 15.2223C10.7228 15.3291 10.911 15.3825 11.1863 15.3834C11.4918 15.3843 11.9054 15.2767 12.1718 15.1271C12.4118 14.9923 12.5883 14.8157 12.9414 14.4626L13.0465 14.3575C13.4008 14.0032 13.5779 13.8261 13.6742 13.6358C13.8655 13.2575 13.8655 12.8106 13.6742 12.4323C13.5779 12.242 13.4008 12.0649 13.0465 11.7106L12.9166 11.5806C12.6835 11.3476 12.567 11.231 12.4498 11.1548C12.0079 10.8675 11.4381 10.8675 10.9962 11.1548C10.879 11.231 10.7625 11.3476 10.5294 11.5806C10.4532 11.6569 10.4151 11.695 10.3706 11.7269C10.2123 11.8402 9.98278 11.8793 9.79588 11.8248C9.74328 11.8095 9.70172 11.7896 9.61859 11.7496C8.65218 11.2856 7.74642 10.6531 6.94536 9.85207Z" stroke="black" stroke-opacity="0.5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            </g>
                                            <defs>
                                            <clipPath id="clip0_4001_5168">
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
                                            </clipPath>
                                            </defs>
                                        </svg>
                                    </span>
                                    <span class="contact-us-widow-info_icon_title">${markerInfo.phone}</span>
                                
                                </div>

                                 <div class="contact-us-widow-info_grid">
                                    <span class="contact-us-widow-info_icon">
                                       <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1.46484 3.27783L6.90812 7.08813C7.3489 7.39667 7.56929 7.55095 7.80902 7.6107C8.02077 7.66349 8.24225 7.66349 8.454 7.6107C8.69373 7.55095 8.91412 7.39667 9.3549 7.08813L14.7982 3.27783M4.66484 11.9445H11.5982C12.7183 11.9445 13.2783 11.9445 13.7062 11.7265C14.0825 11.5348 14.3884 11.2288 14.5802 10.8525C14.7982 10.4247 14.7982 9.8646 14.7982 8.7445V4.47783C14.7982 3.35773 14.7982 2.79767 14.5802 2.36985C14.3884 1.99353 14.0825 1.68757 13.7062 1.49582C13.2783 1.27783 12.7183 1.27783 11.5982 1.27783H4.66484C3.54474 1.27783 2.98469 1.27783 2.55686 1.49582C2.18054 1.68757 1.87458 1.99353 1.68283 2.36985C1.46484 2.79767 1.46484 3.35773 1.46484 4.47783V8.7445C1.46484 9.8646 1.46484 10.4247 1.68283 10.8525C1.87458 11.2288 2.18054 11.5348 2.55686 11.7265C2.98469 11.9445 3.54474 11.9445 4.66484 11.9445Z" stroke="black" stroke-opacity="0.5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                    <span class="contact-us-widow-info_icon_title">${markerInfo.email}</span>
                                
                                </div>

                                 <div class="contact-us-widow-info_grid">
                                    <span class="contact-us-widow-info_icon">
                                       <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8.1263 9.27669C9.23087 9.27669 10.1263 8.38126 10.1263 7.27669C10.1263 6.17212 9.23087 5.27669 8.1263 5.27669C7.02173 5.27669 6.1263 6.17212 6.1263 7.27669C6.1263 8.38126 7.02173 9.27669 8.1263 9.27669Z" stroke="black" stroke-opacity="0.5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M8.1263 15.2767C10.793 12.61 13.4596 10.2222 13.4596 7.27669C13.4596 4.33117 11.0718 1.94336 8.1263 1.94336C5.18078 1.94336 2.79297 4.33117 2.79297 7.27669C2.79297 10.2222 5.45964 12.61 8.1263 15.2767Z" stroke="black" stroke-opacity="0.5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>

                                    </span>
                                    <span class="contact-us-widow-info_icon_title">${markerInfo.address}</span>
                                
                                </div>


                                

                                <button class="contact-us-widow-info_get_direction_btn" onclick="window.open('https://www.google.com/maps/dir/?api=1&destination=${parseFloat(markerInfo.lat)},${ parseFloat(markerInfo.long)}', '_blank')" >

                                    <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.3125 0.376997L2.81913 0.00240186C1.54575 -0.0494251 0.457129 0.741713 0.107957 1.96564C-0.238876 3.1834 0.268051 4.42141 1.36909 5.04529L4.27713 6.6928L4.08923 10.0298C4.01755 11.2937 4.78442 12.3898 5.99682 12.7567C6.72154 12.976 7.45831 12.8923 8.07323 12.5568C8.49111 12.3287 8.85341 11.9836 9.11477 11.5389L13.9362 3.35241C14.2932 2.74717 14.3051 2.01841 13.9695 1.4035C13.6339 0.788587 13.0147 0.404238 12.3125 0.376997ZM13.013 2.80821L8.19155 10.9947C7.70971 11.8113 6.87576 11.9024 6.30787 11.7303C5.7458 11.5598 5.10722 11.028 5.15958 10.0898L5.34932 6.7176L8.73571 4.8696C8.99547 4.72784 9.09125 4.40196 8.94949 4.14219C8.80773 3.88242 8.48185 3.78665 8.22208 3.92841L4.8357 5.77641L1.89704 4.1114C1.07973 3.64782 0.977372 2.8234 1.13876 2.25814C1.24331 1.89164 1.49796 1.49129 1.91835 1.26187C2.1524 1.13415 2.43737 1.05924 2.77692 1.07263L12.2703 1.44725C12.5916 1.46002 12.8746 1.63539 13.028 1.91649C13.1814 2.19759 13.1761 2.5311 13.013 2.80821Z" fill="#121F2C"/>
                                    </svg>
                                    Get Direction
                                  
                                </button>
                    
                    </div>`
                                });

                                marker.addListener("click", () => {
                                    if (marker.isInfoWindowOpen) {
                                        infoWindow.close();
                                        marker.isInfoWindowOpen = false;
                                    } else {
                                        infoWindow.open(map, marker);
                                        marker.isInfoWindowOpen = true;
                                    }
                                });
                            });





                        }).catch(error => {
                            console.log("Error while reading stores --", error);
                        })







                    }
                }
            });
        </script>

        <script>
            window.addEventListener('scroll', () => {
                const overlay = document.getElementById('header_overlay');

                if (overlay) {
                    window.addEventListener('scroll', function() {
                        const scrollPosition = window.scrollY || document.documentElement.scrollTop;

                        if (scrollPosition >= 5) {
                            overlay.classList.add('header-onscroll');
                        } else {
                            overlay.classList.remove('header-onscroll');
                        }
                    });
                } else {}
            });
        </script>
    @endpush

</x-shop::layouts>