@extends('frontend.layouts.app')
@section('title', $title)
@section('meta')
    <meta property="og:title" content="{{ $og_title ?? '' }}" />
    <meta property="og:description" content="{{ $og_description ?? '' }}" />
    <meta property="og:image" content="{{ getSeoImage($og_image) }}" />
    <meta name="description" content="{{ $meta_description ?? '' }}">
    <meta name="keywords" content="{{ $meta_keyword }}">
@endsection
@section('content')
    <!-- ======================= Banner Start  ============================ -->
    <div class="banner_sec mb-5">
        <div class="container">
            <div class="text-center mb-4">
                <div class="location_modal_btn">
                    <button type="button" class="rounded-pill py-2 px-4 border-0 text-white" data-bs-toggle="modal"
                        data-bs-target="#locationModal">
                        <img src="{{ asset('assets/images/icons/location.svg') }}" class="img-fluid" alt="Locations">
                        All of Kenya
                    </button>
                </div>
            </div>
            <div class="row d-flex align-items-center justify-content-center">
                <div class="col-lg-8 col-xl-7">
                    <div class="banner_search shadow-sm rounded-pill">
                        <form action="{{ route('ads', ['location' => 'kenya']) }}" method="get">
                            <div class="input-group">
                                <input type="text" name="search" id="search"
                                    class="form-control shadow-none border-0 py-3 px-3 rounded-pill rounded-end-0" required
                                    placeholder="What are you looking for?">
                                <button type="submit" class="input-group-text bg-light rounded-pill rounded-start-0 px-3">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= Banner End  ============================ -->

    <!-- ======================= Local Ad Banner Start  ============================ -->
    <div class="container mb-5">
        <div class="mx-auto text-center">
            {{-- Ad Image Size > 728*90px --}}
            {{-- <a href="{{ route('user.banner.click') }}" target="_blank">
                <img class="img-fluid" src="{{ asset('uploads/banner/' . $banners->image) }}" alt="Banner Ad">
            </a> --}}
            @forelse ($banners as $banner)
            <a href="{{ route('user.banner.click',$banner->id) }}" target="_blank">
                <img class="img-fluid" src="{{ asset($banner->image) }}" alt="Banner Ad" />
            </a>
            @empty
            <a href="#" target="_blank">
                <img class="img-fluid" src="{{ asset('assets/images/banner-ad.png') }}" alt="Banner Ad" />
            </a>
            @endforelse
        </div>
    </div>
    <!-- ======================== Local Ad Banner End  ============================= -->

    @if (isset($categories) && count($categories) > 0)

        <!-- ======================= Category Start  ============================ -->
        <div class="category_section mb-5">
            <div class="container">
                <div class="section_heading mb-4 d-flex justify-content-between align-items-center">
                    <h2 class="title">Browse items by category</h2>
                    <a href="{{route('frontend.allCategories')}}" class="btn btn-default btn-sm" ><p class="p-0 m-0">All Category <i class="fa-solid fa-caret-right"></i></p></a>
                </div>
                <div
                    class="row g-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 border rounded overflow-hidden">
                    @forelse($categories as $category)
                        <!-- category -->
                        <div class="col">
                            <div class="category_item d-flex align-items-center position-relative p-3 p-lg-4 h-100 border-end border-bottom">
                                <div class="category_icon bg-light rounded p-2 shadow-sm me-2">
                                    {{-- <a @if ($category->activeAds->count()) href="{{ route('ads', ['location' => request()->route()->parameter('location', 'kenya'), 'category' => $category->slug]) }}" @endif class="stretched-link">
                                        <img src="{{ getIcon($category->image) }}" width="40" class="img-fluid" alt="{{ $category->slug }}">
                                    </a> --}}
                                    <a @if ($category->activeAds->count()) href="{{ route('frontend.allSubCategories', $category->slug) }}" @endif class="stretched-link">
                                        <img src="{{ getIcon($category->image) }}" width="40" class="img-fluid" alt="{{ $category->slug }}">
                                    </a>
                                </div>
                                <div class="category_content">
                                    <div class="category_name mb-1 @if ($category->activeAds->count()==0) no-ads @endif"><strong>{{ $category->name }}</strong></div>
                                    <div class="count_items @if ($category->activeAds->count()==0) no-ads @endif">{{ $category->activeAds->count() ?? 0 }} ads</div>
                                </div>
                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
        <!-- ======================= Category End  ============================ -->
    @endif


    @if (count($ads) > 0)

        <!-- ======================= latest ads Start  ============================ -->
        <div class="latestads_section mb-5">
            <div class="container">
                <div class="section_heading mb-4 d-flex justify-content-between align-items-center">
                    <h2 class="title">Latest Ads</h2>
                    <a href="{{route('ads',['location'=>'kenya'])}}" class="btn btn-default btn-sm" ><p class="p-0 m-0">All Ads <i class="fa-solid fa-caret-right"></i></p></a>
                </div>
                <div class="row listings_wrap">
                    @forelse($ads as $ad)
                        <div class="col-lg-6 mt-2">
                            @include('frontend.ads.list-item')
                        </div>
                    @empty
                    @endforelse

                </div>
            </div>
        </div>
        <!-- ======================= latest ads End  ============================ -->
    @endif
    @guest
    <!-- ======================= Be a Member Start  ========================== -->
    <div class="member_shop mb-5">
        <div class="container">
            <div class="row d-flex align-items-center justify-content-center">
                <div class="col-md-8 col-lg-8 col-xl-6">
                    <div class="member_user text-center">
                        <img src="{{ asset('assets/images/member.jpg') }}" class="img-fluid mb-3" alt="Be a Member">
                        <h5>Be a Member</h5>
                        <p>Welcome to our community! By joining us, you'll gain access to exclusive content, updates,
                            and special offers. Connect with like-minded individuals and be a part of something special.
                        </p>
                        <a href="{{ route('register') }}" class="btn btn-sm btn-primary">Sign up</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= Be a Member End  ============================ -->

    <!-- ======================= Local Ad Banner Start  ============================ -->
    <div class="container mb-5">
        <div class="mx-auto text-center">
            {{-- Ad Image Size > 728*90px --}}
            <a href="#" target="_blank">
                <img class="img-fluid" src="{{ asset('assets/images/banner-ad.png') }}" alt="Banner Ad">
            </a>
        </div>
    </div>
    <!-- ======================== Local Ad Banner End  ============================= -->

    @endguest
    @include('frontend.layouts.includes.location_modal')
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            function toggleCityDivision() {
                if (window.innerWidth <= 991) {
                    $('.cities_wrapper').on('click', function() {
                        $('.location_city').hide();
                        $('.LocalArea').show();
                    });

                    $('.backCityDivision').on('click', function() {
                        $('.location_city').show();
                        $('.LocalArea').hide();
                    });
                } else {
                    $('.cities_wrapper').off('click');
                    $('.backCityDivision').off('click');
                }
            }

            toggleCityDivision();
            $(window).resize(function() {
                toggleCityDivision();
            });
        });
    </script>
@endpush