@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>
    <!-- Page Title -->
    <x-slot:title>
        {{ $bannerData['meta_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-sm:px-0 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"
                    alt="the chef its you" width="400" />
            </div>
            <h1 class="tracking-[0.36em] 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>


    <v-store-list>

    </v-store-list>


    <!-- Tabbed Store List Section -->
    {{--   <div class="container mb-4 font-['Acumin Variable Concept'] max-lg:px-8 max-md:px-4 pt-10 mt-5">

        <!-- Tabs -->
        <div class="flex items-center gap-[40px]  justify-between text-left w-full h-full mb-6 tab_content_and_search ">
            <div class="flex font-stritch gap-[40px]max-w-[853px] max-h-[46px] w-full h-full gap-[40px] border-b border-gray-200 ">
            </div>
            <!-- <div class="relative flex  justify-end max-w-[406px] items-center max-lg:w-[406px] w-full h-full border-b border-gray-200  search_width_half">
                <input 
                    type="text" 
                    class="block w-full rounded-lg max-w-[406px] max-h-[41px] w-full h-full px-2 py-1.5 text-[16px] leading-[19px] font-[400]  text-gray-600 transition-all hover:border-gray-400"
                    placeholder="Search for store" 
                >
                <i class="icon-search absolute top-1.5 flex items-center text-black text-[16px] ltr:right-3"></i>
            </div> -->

            <div class="relative flex justify-end max-w-[406px] items-center max-lg:w-[406px] w-full h-full border-b border-gray-200 search_width_half">
                <input 
                    type="text" 
                    id="searchInput"
                    class="block w-full rounded-lg max-w-[406px] max-h-[41px] placeholder:text-[#30303080]  h-full px-2 py-1.5 text-[16px] leading-[19px] font-[400] text-gray-600 transition-all hover:border-gray-400"
                    placeholder="Search for store" 
                    oninput="performSearch(this.value)"
                >
                <i class="icon-search absolute top-1.5 flex items-center text-black text-[16px] ltr:right-3"></i>
            </div>

    
            <div id="searchResults" class="absolute w-full flex flex-col max-w-[400px]  max-h-[fit-content]  justify-right  ml-[700px] mt-[240px]  bg-white  rounded-lg "></div>

        </div>

        <div id="tabContent" class="tab-content bg-gray-200" style="height: 768px;">
        <div class="w-[867px] h-[768px] ml-6">
           
        </div>
        </div>

    </div>
--}}
    <!-- <script>
        let currentChannel = null;

        function performSearch(query) {
            const resultsContainer = document.getElementById('tabContent');

            resultsContainer.innerHTML = '';

            if (!query) {
                if (currentChannel) {
                    switchTab(currentChannel);
                }
                return;
            }

            const form_data = new FormData();
            form_data.append('keyword', query);

            fetch("{{ route('shop.api.stores.search') }}", {
                    method: 'POST',
                    body: form_data
                })
                .then(response => response.json())
                .then(data => {
                    let storeDiv = document.createElement('div');
                    storeDiv.className = 'flex-1 max-w-[417px] max-h-[768px] w-full h-full bg-[#F3F4F4] p-4';

                    if (data.data.stores && data.data.stores.length > 0) {
                        data.data.stores.forEach(store => {
                            let storeElement = `
                        <div class="flex flex-col gap-4 border-b border-gray-300 p-4">
                            <h2 class="font-bold text-[24px] leading-[37px] font-[500] text-[#031627]">${store.name}</h2>
                            <p class="text-[16px] leading-[19px] font-[400] text-black">${store.address}</p>
                        </div>
                    `;
                            storeDiv.innerHTML += storeElement;
                        });

                    } else {
                        storeDiv.innerHTML = '<p>No stores found for your search query.</p>';
                    }

                    resultsContainer.appendChild(storeDiv);
                })
                .catch(error => {
                    console.error('Error fetching search results:', error);
                    resultsContainer.innerHTML =
                        '<div class="p-2 text-red-500">An error occurred while fetching search results.</div>';
                });
        }

        function switchTab(channel) {
            currentChannel = channel;
            const resultsContainer = document.getElementById('tabContent');
            resultsContainer.innerHTML = '';

            fetch(`{{ route('shop.api.stores.channel.list', '') }}/${channel.id}`)
                .then(response => response.json())
                .then(data => {
                    let storeDiv = document.createElement('div');
                    storeDiv.className = 'flex-1 max-w-[417px] max-h-[768px] w-full h-full bg-[#F3F4F4] p-4';

                    if (data.data.stores && data.data.stores.length > 0) {
                        data.data.stores.forEach(store => {
                            let storeElement = `
                        <div class="flex flex-col gap-4 border-b border-gray-300 p-4">
                            <h2 class="font-bold text-[24px] leading-[37px] font-[500] text-[#031627]">${store.name}</h2>
                            <p class="text-[16px] leading-[19px] font-[400] text-black">${store.address}</p>
                        </div>
                    `;
                            storeDiv.innerHTML += storeElement;
                        });
                    } else {
                        storeDiv.innerHTML = '<p>No stores available.</p>';
                    }

                    resultsContainer.appendChild(storeDiv);
                })
                .catch(error => console.error(`Error fetching store data for channel ${channel.name}:`, error));
        }

        function generateChannelTabs(channels) {
            const tabContainer = document.querySelector('.flex.font-stritch');
            tabContainer.innerHTML = '';

            channels.forEach((channel, index) => {
                const tabElement = document.createElement('span');
                tabElement.id = `channelTab${index}`;
                tabElement.className =
                    'text-[28px] leading-[33px] uppercase font-[700] text-[#121F2C] border-b-2 border-transparent cursor-pointer';
                tabElement.innerText = channel.name;

                tabElement.onclick = () => switchTab({
                    id: channel.id,
                    name: channel.name
                });

                tabContainer.appendChild(tabElement);
            });
        }



        // Load channels on page load
        fetch("{{ route('shop.api.channel.list') }}")
            .then(response => response.json())
            .then(data => {
                let channels = data.data.channels;
                generateChannelTabs(channels);
                if (channels.length > 0) {
                    switchTab({
                        id: channels[0].id,
                        name: channels[0].name
                    });
                }
            })
            .catch(error => console.error('Error fetching channel data:', error));





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

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

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





    @push('scripts')
        <script type="text/x-template" id="v-store-list">
<div class="container store_list_grid font-['Acumin Variable Concept'] min-h-[500px] max-md:px-4 pt-[70px] pb-[100px] remove_store_bottom_padding set_padding_bottom" >
        

        <div class="flex items-center gap-[40px] justify-between text-left w-full h-full mb-[64px] tab_content_and_search  store_bottom_padding">
            <div class="flex font-stritch  max-w-[853px] max-h-[46px] w-full h-full gap-[40px] border-b border-gray-200">
                <span 
                    v-for="(channel, index) in channels" 
                    :key="channel.id" 
                    @click="switchTab(channel)"
                    class="text-[28px] leading-[33px] uppercase font-[700] cursor-pointer"
                    :class="channel.id === currentChannel.id ? 'text-[#121F2C] border-b-[2px] border-b-[#031627]' : 'text-[#1C2D3D66]'"
                >
                    @{{ channel.name }}
                </span>
            </div>
            
            <div class="relative flex justify-end max-w-[406px] items-center max-lg:w-[406px] w-full h-full border-b border-gray-200 search_width_half">
                <input 
                    type="text" 
                    v-model="searchQuery"
                    @input="performSearch"
                    class="block w-full rounded-lg max-w-[406px] max-h-[41px] h-full  placeholder:text-[#30303080]  py-1.5 text-[16px] leading-[19px] font-[400] text-[#30303080] transition-all hover:border-gray-400"
                    placeholder="Search for store" 
                />
                <i class="icon-search absolute top-1.5 flex items-center text-black text-[16px] ltr:right-1"></i>
            </div>
            
            <div id="searchResults" class="absolute w-full flex flex-col max-w-[400px] max-h-[fit-content] justify-right ml-[700px] mt-[240px] bg-white rounded-lg"></div>
        </div>
        
        <div id="tabContent" class="w-full store_list_grid_content flex justify-start gap-4 max-h-[768px] min-h-[768px] items-start ">
            <div class="flex justify-center store_list_grid_content_left w-full max-w-[417px] max-h-[768px] min-h-[768px] bg-[#F3F4F4]">
                <div v-if="stores_loader" class="flex justify-center h-[400px] self-start w-full items-start my-5 py-5">
                    <div v-if="stores_loader" role="status">
                        <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-[#031627]" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
                        </svg>
                        <span class="sr-only">Loading...</span>
                    </div>
                    </div>

                    <div class="overflow-y-auto store_list_grid_content_left_content w-full" v-if="!stores_loader && stores.length">
                        <div v-for="store in stores" 
                            :key="store.id" 
                            @click="openStoreInfo(store)" 
                             class="flex flex-col cursor-pointer gap-2 pb-3 border-b border-gray-300 px-[24px] sm:mt-3  lg:mt-0  md:mt-0  sm:py-[0px] md:py-[24px] lg:py-[24px]"
                            :class="currentStore !== null && currentStore.id === store.id ? 'bg-[#031627]' : 'bg-[#F3F4F4]'"

                        >
                            <h2 class=" text-[24px] font_condensed leading-[37px] font-[500]"
                            :class="currentStore !== null && currentStore.id === store.id ? 'text-white' : 'text-[#031627]'"
                            >@{{ store.name }}</h2>
                            <p class="text-[16px] leading-[19px] font-[400] "
                            :class="currentStore !== null && currentStore.id === store.id ? 'text-[#FFFFFF99]' : 'text-[#00000099]'"
                            >@{{ store.address }}</p>
                        </div>
                    </div>
                    <p v-if="!stores_loader && stores.length == 0" class="p-4 self-start mt-5">No stores available.</p>
                



                    
                </div>

                <div class="w-full h-full">

                <div id="map" style="width: 100%; height: 768px;"></div>

            </div>

            </div>


            


    </div>

</script>
        <script type="module">
            app.component('v-store-list', {
                template: '#v-store-list',
                data() {
                    return {
                        channels: [],
                        currentChannel: null,
                        stores: [],
                        searchQuery: '',
                        stores_loader: false,
                        map: null, // For storing the Google Map instance
                        markers: [],
                        currentStore: null,
                    };
                },

                mounted() {

                    this.fetchChannels();
                    this.initGoogleMap();
                    window.addEventListener('scroll', this.handleScroll);
                },
                beforeDestroy() {
                    // Clean up event listeners
                    window.removeEventListener('scroll', this.handleScroll);
                },
                watch: {
                    stores() {
                        this.currentStore = null;
                    }
                },

                methods: {
                    openStoreInfo(markerInfo) {

                        this.initGoogleMap(markerInfo);
                        let checkStatus = false

                        if(this.currentStore !== null && this.currentStore.id === markerInfo.id){
                            this.currentStore = null;
                            this.updateMarkers();
                            checkStatus = true
                        }else {
                        this.currentStore = markerInfo;
                        checkStatus = false
                        }
                        const marker = new google.maps.Marker({
                            position: {
                                lat: parseFloat(markerInfo.lat),
                                lng: parseFloat(markerInfo.long)
                            },
                            map: this.map,
                            icon: {
                                url: "{{ bagisto_asset('images/record-circle.svg') }}",
                                scaledSize: new google.maps.Size(30, 30)
                            },
                        });

                        this.markers.push(marker);

                        const infoWindow = new google.maps.InfoWindow({
                            content: `<div class="contact-us-widow-info px-[8px]" style="color: #2c5a71;">
                                <img class="w-[268px] h-[138px] object-cover" src="${markerInfo.logo.original_image_url}" />
                                <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">
                                     <a href="tel:${ markerInfo.phone ? markerInfo.phone : '' }" class="hover:text-[#915C44]">
                           ${markerInfo.phone}
                            </a>
                                    
                                    </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">
                                    <a href="mailto:${ markerInfo.email ? markerInfo.email : '' }" class="hover:text-[#915C44]">
                           ${markerInfo.email}
                            </a></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">
                                     <a target="_blank" class="hover:text-[#915C44]" href="http://maps.google.com/?q=${ markerInfo.address}">${markerInfo.address}</a></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>`
                            });
                            infoWindow.open(this.map, marker);

                            marker.addListener("click", () => {
                                infoWindow.close();
                                console.log("marker.isInfoWindowOpen click on marker ---->",    );
                                this.currentStore = null;
                                this.updateMarkers();
                        
                            });
                            if(checkStatus){
                                infoWindow.close();
                                
                            }
                    },

                    async fetchChannels() {
                        try {
                            const response = await this.$axios.get("{{ route('shop.api.channel.list') }}");
                            this.channels = response.data.data.channels;
                            if (this.channels.length > 0) {
                                this.switchTab(this.channels[0]);
                            }
                        } catch (error) {
                            console.error('Error fetching channel data:', error);
                        }
                    },

                    async switchTab(channel) {
                        this.currentChannel = channel;
                        this.searchQuery = '';
                        try {
                            this.stores_loader = true;
                            const response = await this.$axios.get(
                                `{{ route('shop.api.stores.channel.list', '') }}/${channel.id}`);
                            this.stores = response.data.data.stores || [];
                            this.stores_loader = false;
                            this.updateMarkers();
                        } catch (error) {
                            console.error(`Error fetching store data for channel ${channel.name}:`, error);
                            this.stores = [];
                            this.updateMarkers();

                            this.stores_loader = false;
                        }
                    },

                    async performSearch() {
                        if (!this.searchQuery) {
                            this.switchTab(this.currentChannel);
                            return;
                        }

                        const formData = new FormData();
                        formData.append('keyword', this.searchQuery);
                        formData.append('channel_id', this.currentChannel.id);


                    try {
                        this.stores_loader = true;

                        const response = await this.$axios.post("{{ route('shop.api.stores.search') }}", formData);
                        this.stores = response.data.data.stores;
                        this.updateMarkers();
                        this.stores_loader = false;
                    } catch (error) {
                        console.error('Error fetching search results:', error);
                        this.stores = [];
                        this.stores_loader = false;
                        this.updateMarkers();


                    }
                },
                handleScroll() {
                    const overlay = document.getElementById('header_overlay');
                    if (overlay) {
                        overlay.classList.toggle('header-onscroll', window.scrollY >= 398);
                    }

                },
                // Method to clear markers from the map
                // Clear markers from the map
                clearMarkers() {

                    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": "on"
                            }]
                        },
                        {
                            "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": "on"
                            }]
                        },
                        {
                            "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": "on"
                            }]
                        },
                        {
                            "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: 40.7094,
                            lng: -73.9442
                        },
                        zoom: 6.5,
                        styles: customMapStyle,
                        markers: []
                    };

                    if(this.currentChannel != null) {
                        if(this.currentChannel.code == 'default'){
                            mapOptions.center = {
                                lat: 25.13442,
                                lng: 55.24526
                            };

                        } else {
                            mapOptions.center = {
                                lat: 35.75942,
                                lng: -5.35051
                            };

                        }
                    }

                    if (!this.map) {
                        this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
                    } else {
                        this.map = new google.maps.Map(document.getElementById("map"), mapOptions);


                    }


                },


                initGoogleMap(markerInfo) {
                    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": "on"
                            }]
                        },
                        {
                            "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": "on"
                            }]
                        },
                        {
                            "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": "on"
                            }]
                        },
                        {
                            "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"
                            }]
                        }
                    ]
                    console.log("this.currentChannel ---->", this.currentChannel);



                    const mapOptions = {
                        center: {
                            lat: 35.75942,
                                lng: -5.35051
                        },
                        zoom: 12,
                        styles: customMapStyle,
                        markers: []
                    };

                    if(markerInfo){
                        mapOptions.center = {
                            lat: parseFloat(markerInfo.lat),
                                lng: parseFloat(markerInfo.long)
                        }
                    }

                    

                    if (!this.map) {
                        this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
                    } else {
                        this.map = new google.maps.Map(document.getElementById("map"), mapOptions);

                    }

                },

                


                    updateMarkers() {
                            this.clearMarkers();
                            const infoWindows = []; // Track all open info windows
                            this.stores.forEach((markerInfo) => {
                            const marker = new google.maps.Marker({
                                position: {
                                    lat: parseFloat(markerInfo.lat),
                                    lng: parseFloat(markerInfo.long)
                                },
                                map: this.map,
                                icon: {
                                    url: "{{ bagisto_asset('images/record-circle.svg') }}",
                                    scaledSize: new google.maps.Size(30, 30)
                                },
                            });

                            this.markers.push(marker);

                            const infoWindow = new google.maps.InfoWindow({
                                content: `<div class="contact-us-widow-info px-[8px]" style="color: #2c5a71;">
                                <img class="w-[268px] h-[138px] object-cover" src="${markerInfo.logo.original_image_url}" />

                                <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}dummyemail</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>`
                            });

                        infoWindows.push(infoWindow);

                            

                        marker.addListener("click", () => {
                            infoWindows.forEach(infoWi => {
                                infoWi.close();
                            })
                            
                            if (marker.isInfoWindowOpen) {
                                infoWindow.close();
                                marker.isInfoWindowOpen = false;
                                this.currentStore = null;

                            } else {
                                this.markers.forEach(m => {
                                    if (m !== marker) {
                                        m.isInfoWindowOpen = false; // Reset the state for all other markers
                                    }
                                });
                                infoWindow.open(map, marker);
                                marker.isInfoWindowOpen = true;
                                this.currentStore = markerInfo;
                            }
                        });

                        // Store marker in the markers array for later clearing


                    });












                }

            },


            });
        </script>
    @endpush


</x-shop::layouts>