@if ($loca_check == 1)
    <div>
        <a href="{{ route('search_kitchens') }}">
            <div class="col-11 mobile_search ms-3 ">
                <input type="text" id="search" placeholder="What are you looking for?" value="" />
                <button type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="18.653" height="18.654"
                        viewBox="0 0 18.653 18.654">
                        <g id="search" transform="translate(-0.021 0)">
                            <path id="Path_1" data-name="Path 1"
                                d="M18.334,16.669l-3.611-3.612A8.164,8.164,0,1,0,13.078,14.7l3.612,3.612a1.162,1.162,0,1,0,1.644-1.644ZM8.216,14a5.81,5.81,0,1,1,5.81-5.81A5.81,5.81,0,0,1,8.216,14Z"
                                transform="translate(0)" fill="#434250" />
                        </g>
                    </svg></button>
            </div>
        </a>
        <section class="welcome_banner mt-3" wire:ignore>
            <div class="container">
                <div class="row">
                    <div class="welcome_banner_slider">
                        @foreach ($banner as $key => $list)
                            @php
                                $kitchen_detail_id_check = \App\Models\KitchenDetail::where(
                                    'id',
                                    $list->kitchen_detail_id,
                                )->first();
                            @endphp
                            <a href="{{ route('banner_restaurant_list') }}">
                                <div class="welcomr_slider_items"> <img src="{{ $list->web_image }}" alt="" />
                                </div>
                            </a>
                        @endforeach

                    </div>
                </div>
            </div>
        </section>
        <section class="welcome_section" wire:ignore>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section_h_tl">
                            <h3>Brands. Home-Made!</h3>
                        </div>
                        <div class="welcome_food_slider">
                            @foreach ($services as $key => $service)
                                @foreach ($service as $ser)
                                    <div class="food_item  ">
                                        @php
                                            $encodedData = base64_encode(json_encode($ser['service_id']));
                                        @endphp
                                        <a href="{{ route('service_restaurant_list', [$encodedData]) }}">

                                            <div class="food_img_home my-3 ">
                                                <img src="{{ $ser['service_image'] }}">
                                            </div>
                                            <div class="food_text_home py-2">
                                                <h6 class="">{{ $ser['service_name'] }}</h6>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="welcome_section" wire:ignore>
            <div class="container mt-2 mt-lg-1 mb-2">
                <div class="row ">
                    <div class="col-md-12">
                        <div class="section_h_tl">
                            <h3>Cuisines to suit your taste</h3>
                        </div>
                        <div class="welcome_food_slider_1 ">
                            @foreach ($brands as $brand)
                                @foreach ($brand as $br)
                                    @php
                                        $encodedBrandData = base64_encode(json_encode($br['brand_id']));
                                    @endphp
                                    <div class="food_item_1 mt-2">
                                        <a href="{{ route('brand_restaurant_list', [$encodedBrandData]) }}">

                                            <img src="{{ $br['web_image'] }}" alt="" />
                                        </a>
                                    </div>
                                @endforeach
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="offer_banner" wire:ignore>
            <div class="container mt-2 mt-lg-3">
                <div class="row">
                    @foreach ($bottom_banner as $banner)
                        @php
                            $kitchen_detail_id_check = \App\Models\KitchenDetail::where(
                                'id',
                                $banner->kitchen_detail_id,
                            )->first();
                        @endphp


                        <div class="col-md-12">
                            <a href="{{ route('banner_restaurant_list') }}"><img src="{{ $banner->web_image }}"
                                    alt="" class="bottom_banner" /></a>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
        <section class="curations_food_cate" wire:ignore>
            <div class="container mt-1 mt-lg-3">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section_h_tl">
                            <h3>Dishes on your mind</h3>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="food_cate_slider d-none d-lg-flex d-md-flex">
                            @foreach ($cuisines as $cuisine)
                                @php
                                    $encodedCuisineData = base64_encode(json_encode($cuisine->id));
                                @endphp
                                <div class="food_item itemss">
                                    <a href="{{ route('cuisine_restaurant_list', [$encodedCuisineData]) }}">
                                        <img src="{{ $cuisine->image }}" alt="" class="pb-3" />
                                        <div class="food_desc">
                                            <h4>{{ $cuisine->name }}</h4>
                                        </div>
                                    </a>
                                </div>
                            @endforeach

                        </div>
                        <div class="food_cate_slider d-flex d-lg-none d-md-none">
                            @foreach ($cuisines->chunk(3) as $cuisinePair)
                                <div class="row">
                                    @foreach ($cuisinePair as $index => $cuisine)
                                        <div class="col-6 ms-3 food_item itemss px-0 p-0 " >
                                            @if ($index == 0)
                                                <a href="{{ route('cuisine_restaurant_list', [$cuisine->id]) }}" >

                                                    <img src="{{ $cuisine->image }}" alt="" class="pb-3" />
                                                    <div class="food_desc">
                                                        <h4>{{ $cuisine->name }}</h4>
                                                    </div>
                                                </a>
                                            @else
                                                <a href="{{ route('cuisine_restaurant_list', [$cuisine->id]) }}" >
                                                    <img src="{{ $cuisine->image }}" alt="" class="pb-3" />
                                                    <div class="food_desc">
                                                        <h4>{{ $cuisine->name }}</h4>
                                                    </div>
                                                </a>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        </section>


        <section class="welcome_section">
            <div class="container mt-2 mt-lg-3 mb-2">
                <div class="row">
                    <div class="col-md-12">
                        <div class="all_res">
                            <div class="section_h_tl">
                                <h3>Our Home Kitchens</h3>
                            </div>
                            <div class="section_right ">
                               
                                {{-- <div class="dropdown">
                                    <span class="px-2">
                                        <img src="{{ asset('images/settings-sliders.png') }}">
                                    </span> --}}
                                    {{-- <select wire:model="brand_name" class="p-1 mx-lg-3 dropdown-toggle filter" 
                                     wire:change="filter()">
                                    <option class="dropdown-item" value="">Filter</option>
                                    <option class="dropdown-item" value="all">All</option>
                                    @foreach ($brands as $brand)
                                    @foreach ($brand as $br)
                                   
                                        <option class="dropdown-item" value="{{ $br['brand_id'] }}">
                                            {{ $br['brand_name'] }}
                                        </option>
                                    @endforeach
                                    @endforeach
                                </select> --}}

                                <div class="custom-select">
                                    <img src="{{ asset('images/settings-sliders.png') }}"> <span class="select-btn">@if($filter_name == null)Filter @else {{ $filter_name }} @endif</span>
                                    <div class="select-options">
                                        <div class="option" data-value="all" wire:click="nofilter()">All</div>
                                        @foreach ($brands as $brand)
                                            @foreach ($brand as $br)
                                                <div class="option" data-value="{{ $br['brand_id'] }}" wire:click="filter({{ $br['brand_id'] }})">{{ $br['brand_name'] }}</div>
                                            @endforeach
                                        @endforeach
                                    </div>
                                </div> &nbsp;
                                
                                {{-- </div> --}}
                                
                                <div class="toggle-container " wire:ignore>
                                    <span id="vegLabel">Veg</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="NonvegvegToggle" onchange="test(this)">
                                        <span class="slider"></span>
                                    </label>
                                    <span id="nonvegLabel">NonVeg</span>
                                </div>
                            </div>
                        </div>

                        @if (count($shop_list) > 0 || count($closed_shop_list) > 0)
                            <div class="all_res_body mt-lg-1 mt-3">
                                <div class="container-fluid p-0 m-0">
                                    <div class="row" id="shop-list">

                                        @php $renderedShopIds = []; @endphp

@foreach ($shop_list as $shop)
    @if (in_array($shop['shop_id'], $renderedShopIds))
        @continue
    @endif
    @php
        $renderedShopIds[] = $shop['shop_id'];
        $admin = App\Models\AdminUser::where('id', $shop['shop_id'])->first();
    @endphp

    <div class="col-lg-4 col-md-12 col-12 mt-1 card_res_overall">
        <div class="all_res_inner">
            <div class="card filter_card">
                <div class="res_img">
                    <a href="{{ route('restaurant', [$admin->kitchen_detail_id, $shop['shop_name']]) }}">
                        <img src="{{ $shop['shop_image'] }}" class="card-img-top" alt="...">
                    </a>
                    <div class="res_share_like">
                        @if (Auth::guard('web_user')->check())
                            @if ($shop['is_fav'] == 0)
                                <img src="{{ asset('images/unlike_heart_kit.png') }}" class="mx-3 mt-2" style="cursor: pointer;"
                                    wire:click='add_fav({{ $shop['shop_id'] }},1)'>
                            @else
                                <img src="{{ asset('images/like_heart_kit.png') }}" class="mx-3 mt-2" style="cursor: pointer;"
                                    wire:click='add_fav({{ $shop['shop_id'] }},0)'>
                            @endif
                        @endif
                    </div>
                </div>

                <a href="{{ route('restaurant', [$admin->kitchen_detail_id, $shop['shop_name']]) }}">
                    <div class="card-body p-2">
                        <div class="start_home">
                            <span class="mx-lg-2 mx-1">
                                <img src="{{ $shop['chef_image'] }}" class="thumb">
                            </span>
                            <h6 class="mb-0 pb-0 pt-1">{{ $shop['shop_name'] }}</h6>
                        </div>

                        <div class="add_res">
                            <img src="{{ asset('images/Group 1226.png') }}" class="mx-lg-2 mx-1 mt-3 mt-lg-0 add_img">
                            <p class="mt-3 mt-lg-0 pb-0 mb-0">{{ $shop['shop_address'] }}</p>
                            <span class="ro_ci mx-lg-2 mx-1">.</span>
                            <p class="mt-3 mt-lg-0 mb-0 pb-0">{{ $shop['distance'] }} km</p>
                        </div>

                        <div class="res_free">
                            <p class="mt-1 mx-lg-2 mx-1">{{ $shop['brand_name'] }} food</p>

                            @php $hasFreeDelivery = false; @endphp
                            @if (!empty($shop['shop_coupon']))
                                @foreach ($shop['shop_coupon'] as $coupon)
                                    @if ($coupon['delivery_charge'] == 1)
                                        @php $hasFreeDelivery = true; break; @endphp
                                    @endif
                                @endforeach
                            @endif

                            @if ($hasFreeDelivery)
                                <div class="item_free_delivery item_free_delivery_1">
                                    <img src="{{ asset('images/free_delivery.png') }}" alt="" /> FREE DELIVERY
                                </div>
                            @endif
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
@endforeach
                                    @foreach ($closed_shop_list as $shop)
                                         @php

                                            $admin = App\Models\AdminUser::Where('id', $shop['shop_id'])->first();
                                        @endphp

                                        <!--<div class="col-lg-4  col-md-12 col-12 mt-1 card_res_overall">
                                            <div class="all_res_inner">

                                                <div class="card filter_card">
                                                    <div class="res_img">
                                                        <a
                                                            href="{{ route('restaurant', [$admin->kitchen_detail_id, $shop['shop_name']]) }}">
                                                            <img src="{{ asset('images/closed-kitchen.png') }}"
                                                                class="card-img-top" alt="..."></a>
                                                        <div class="res_share_like">
                                                            @if (Auth::guard('web_user')->check())
                                                                @if ($shop['is_fav'] == 0)
                                                                    <img src="{{ asset('images/unlike_heart_kit.png') }}"
                                                                        class="mx-3 mt-2" style="cursor: pointer;"
                                                                        wire:click='add_fav({{ $shop['shop_id'] }},1)'>
                                                                @else
                                                                    <img src="{{ asset('images/like_heart_kit.png') }}"
                                                                        class="mx-3 mt-2" style="cursor: pointer;"
                                                                        wire:click='add_fav({{ $shop['shop_id'] }},0)'>
                                                                @endif
                                                            @endif

                                                        </div>
                                                    </div>
                                                    <a
                                                        href="{{ route('restaurant', [$admin->kitchen_detail_id, $shop['shop_name']]) }}">
                                                        <div class="card-body p-2">
                                                            <div class="start_home">
                                                                <span
                                                                        class="mx-lg-2 mx-1"><img
                                                                            src="{{ $shop['chef_image'] }}"
                                                                            class="thumb"></span>
                                                                <h6 class="mb-0 pb-0 pt-1">{{ $shop['shop_name'] }}
                                                                </h6>
                                                                <p class="mb-0 pb-0">
                                                                    {{-- @if ($shop['shop_rating'] != 0)
                                                                    <span class="mx-lg-1 mx-1">
                                                                    <img
                                                                    src="{{ asset('images/star1.png') }}"></span>
                                                                    <span class="mt-1 rating_index"> {{ $shop['shop_rating'] }}({{ $shop['rating_count'] }}+)</span>
                                                                    @endif --}}
                                                                </p>
                                                            </div>
                                                            <div class="add_res ">
                                                                <img src="{{ asset('images/Group 1226.png') }}"
                                                                    class="mx-lg-2 mx-1 mt-3 mt-lg-0 add_img">
                                                                <p class="mt-3 mt-lg-0  pb-0 mb-0">
                                                                    {{ $shop['shop_address'] }}</p>
                                                                <span class="ro_ci  mx-lg-2 mx-1">.</span>
                                                                <p class="mt-3 mt-lg-0  mb-0 pb-0">
                                                                    {{ $shop['distance'] }} km</p>
                                                            </div>
                                                            <div class="res_free">
                                                                <p class="mt-1 mx-lg-2 mx-1">
                                                                    {{ $shop['brand_name'] }} food</p>
                                                                @if (!empty($shop['shop_coupon']))
                                                                    @foreach ($shop['shop_coupon'] as $coupon)
                                                                    @php
  									if ($coupon['delivery_charge'] == 1) {
      										$st[] = $coupon;
  											} else {
     											 $st = [];
 										 }
									@endphp
                                                                    @endforeach
                                                                    @if (count($st) > 0)
                                                                        <div
                                                                            class="item_free_delivery item_free_delivery_1">
                                                                            <img src="{{ asset('images/free_delivery.png') }}"
                                                                                alt="" /> FREE DELIVERY
                                                                        </div>
                                                                    @endif
                                                                @endif
                                                            </div>

                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>-->
                                    @endforeach


                                    </div>
                                </div>
                            </div>
                            @else
                            <div class="container p-lg-0">
                                <div class="over-kitchen_1  px-2 mt-3">
                                    <div class="row">
                                        <div class="col-lg-12 col-lg-12 col-12">
                                            <div class="no_kitchen ">
                                                <div class="kitchen_not_found">
                                                    <img src="{{ asset('images/search_kitchen (2).png') }}">
                                                </div>
                                                <div class="kitchen_not_text my-3">
                                                    <h5>No Kitchen Found</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
            
                        @endif
                    
                        

                    </div>
                </div>
            </div>
        </section>
    </div>
@else
    <section class="location_unservicable">
        <div class="container-fluid">
            <div class="unservice">
                <div class=" overall_service my-5 py-5">
                    <div class="service_image mt-5 pt-5">
                        <img src="{{ asset('images/Group 651.png') }}">
                    </div>
                    <div class="service_text text-center pb-lg-5 mb-lg-5 ">
                        <h6 class="pt-5">We're Not in Your Area Yet!

                            </h6>
                        <p class="col-lg-8 col-12">Thank you for your interest in Shero. We're working hard to bring our home-cooked goodness to more regions. Stay tuned—we'll be in your area soon!</p>
                    </div>
                </div>
            </div>
        </div>

    </section>

@endif

<script>
	

    document.addEventListener('livewire:load', function() {

        @this.on('AddFav', () => {
            toastr.success('Kitchen Added to favourites');
        });
    });
</script>


<script>
    $(document).ready(function(){
        $('.welcome_food_slider').slick({
            dots: true,            // Enable dots navigation
            infinite: true,        // Infinite scroll
            speed: 200,            // Transition speed
            slidesToShow: 4,       // Number of slides visible
            slidesToScroll: 1,     // Number of slides to scroll at a time
            arrows: false,         // Hide previous/next arrows
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        });
    });
</script>



<script>
    document.addEventListener('livewire:load', function() {
        @this.on('RemoveFav', () => {
            toastr.success('Kitchen Removed from  favourites');
        });
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        let options = {
            root: null,
            rootMargin: '0px',
            threshold: 1.0
        }

        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    @this.call('loadMore');
                }
            });
        }, options);

        observer.observe(document.querySelector('#shop-list div:last-child'));
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let options = {
            root: null,
            rootMargin: '0px',
            threshold: 1.0
        }

        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    @this.call('loadMore');
                }
            });
        }, options);

        observer.observe(document.querySelector('#closed-shop-list div:last-child'));
    });
</script>


<script>
    function test(element) {
        const value = element.checked ? '0' : '1';
        Livewire.emit('toggle', value);

    }
</script>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selectBtn = document.querySelector('.select-btn');
    const selectOptions = document.querySelector('.select-options');

    selectBtn.addEventListener('click', function () {
        selectOptions.style.display = selectOptions.style.display === 'block' ? 'none' : 'block';
    });

    document.querySelectorAll('.option').forEach(option => {
        option.addEventListener('click', function () {
            const value = this.getAttribute('data-value');
            selectBtn.textContent = this.textContent;
            selectOptions.style.display = 'none';
            
            // Trigger filter action here, e.g., wire:click or AJAX call
            // Example: wire:click="filter(${value})"
        });
    });

    document.addEventListener('click', function (event) {
        if (!selectBtn.contains(event.target) && !selectOptions.contains(event.target)) {
            selectOptions.style.display = 'none';
        }
    });
});


    </script>
@endpush