@extends('frontend.layouts.app')

@section('title', $title)

@section('meta')
    <meta property="og:title" content=""/>
    <meta property="og:description" content=""/>
    <meta property="og:image" content=""/>
    <meta name="description" content="">
    <meta name="keywords" content="">
@endsection

@push('style')
    <style>
        li a.active{
            font-weight: bolder !important;
        }
    </style>

@endpush





@section('content')

    @include('frontend.layouts.includes.breadcrumb',['links'=>[[$title=>route('ads')]]])

    <!-- ======================= Local Ad Banner Start  ============================ -->
    <div class="container mt-3 mb-3">
        <div class="mx-auto text-center">
            {{-- Ad Image Size > 730*90px --}}

            @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  ============================= -->

    <!-- ======================= Ads Listings Start  ============================ -->
    <div class="listings_section pt-2 pb-3">
        <div class="container">
            <div class="bg-light rounded-1 shadow-sm">
                <div class="listing_heading p-3 border-bottom">
                    <div class="d-flex align-items-center justify-content-between">
                        <!-- location -->
                        <div>
                            <div class="select_location">
                                <button type="button" class="border-0 bg-transparent" data-bs-toggle="modal"
                                        data-bs-target="#locationModal">
                                    <i class="fa fa-location-dot me-2"></i>
                                    {{ $location->name ?? 'Kenya' }}
                                </button>
                            </div>
                        </div>
                        <!-- category -->
                        <div class="select_category">
                            <button type="button" class="border-0 bg-transparent" data-bs-toggle="modal"
                                    data-bs-target="#categoryModal">
                                <i class="fa fa-tag me-2"></i>
                                @if(!empty($scategory))

                                        {{ $scategory->name }}
                                    @elseif(!empty($category))
                                        {{ $category->name }}
                                    @else
                                        All Category
                                    @endif
                                </button>
                            </div>
                            <!-- search -->
                            <div class="d-block d-lg-none">
                                <button type="button" class="btn btn-light" data-bs-toggle="offcanvas"
                                        data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
                                    <img src="{{asset('assets/images/icons/filter.svg')}}" alt="Filter">
                                </button>
                            </div>

                            <div class="d-none d-lg-block w-50">
                                <div class="listing_search">
                                    <form action="{{ request()->fullUrl() }}" method="get">

                                        @if(!empty(request('sort_by')))
                                            <input type="hidden" name="sort_by" value="{{ request('sort_by') }}">
                                        @endif

                                        @if(!empty(request('filter_by')))
                                            @foreach(request('filter_by') as $filter_by)
                                                <input type="hidden" name="filter_by[]" value="{{ $filter_by }}" >
                                            @endforeach
                                        @endif

                                        <div class="input-group">
                                            <input type="text" name="search" id="search"
                                                   class="form-control shadow-none rounded-pill rounded-end-0" required
                                                   placeholder="What are you looking for?"
                                                   value="{{ request()->get('search') ?? '' }}">
                                            <button type="submit" class="btn btn-primary rounded-pill rounded-start-0">
                                                <i class="fa fa-search text-white"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="px-3">
                        <div class="row">
                            <!-- listings sidebar -->
                            <div class="col-lg-3 filter_offcanvas">
                                <div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas"
                                     aria-labelledby="filterOffcanvasLabel">
                                    <div class="d-block d-lg-none">
                                        <div class="offcanvas-header bg-light">
                                            <h5 class="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
                                            <button type="button"
                                                    class="btn-close border-0 bg-transparent shadow-none opacity-100"
                                                    data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                        </div>
                                    </div>
                                    <div class="offcanvas-body p-4 p-lg-0">
                                        <div class="listing_sidebar border-end pe-0 pe-lg-3">
                                            <form action="{{ url()->current() }}" method="get">
                                                <!-- sort result by -->
                                                <div class="pt-0 pt-lg-4 pb-4">
                                                    <label for="sort_by" class="form-label">Sort results by</label>
                                                    <select name="sort_by" id="sort_by"
                                                            class="form-control shadow-none form-select filterInput">
                                                        <option value="" class="d-none">Select</option>
                                                        <option value="newest" {{ request('sort_by') == 'newest' ? 'selected' : '' }} >Date: Newest on top</option>
                                                        <option value="oldest" {{ request('sort_by') == 'oldest' ? 'selected' : '' }} >Date: Oldest on top</option>
                                                        <option value="high_low" {{ request('sort_by') == 'high_low' ? 'selected' : '' }} >Price: High to low</option>
                                                        <option value="low_high" {{ request('sort_by') == 'low_high' ? 'selected' : '' }} >Price: Low to high</option>
                                                    </select>
                                                </div>
                                                <!-- filter ads by -->
                                                <div class="pb-4">
                                                    <label class="form-label">Filter ads by</label>
                                                    <div class="form-check">
                                                        <input class="form-check-input filterInput" type="checkbox"
                                                               name="filter_by[]"
                                                               value="regular" id="regular" {{ !empty(request('filter_by')) && in_array('regular', request('filter_by')) ? 'checked' : '' }} >
                                                        <label class="form-check-label" for="regular">
                                                            Regular
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input filterInput" type="checkbox"
                                                               name="filter_by[]"
                                                               value="featured" id="featured" {{ !empty(request('filter_by')) && in_array('featured', request('filter_by')) ? 'checked' : '' }} >
                                                        <label class="form-check-label" for="featured">
                                                            Featured
                                                        </label>
                                                    </div>
                                                </div>
                                                @if(!empty(request('search')))
                                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                                @endif

                                                <div class="accordion d-none d-lg-block"
                                                     id="accordionPanelsStayOpenExample">
                                                    <!-- categories -->
                                                    <div
                                                        class="accordion-item bg-transparent border-0 border-bottom border-top rounded-0">
                                                        <h2 class="accordion-header">
                                                            <button
                                                                class="accordion-button bg-transparent p-0 py-3 shadow-none"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#panelsStayOpen-collapseOne"
                                                                aria-expanded="true"
                                                                aria-controls="panelsStayOpen-collapseOne">
                                                                Category
                                                            </button>
                                                        </h2>
                                                        <div id="panelsStayOpen-collapseOne"
                                                             class="accordion-collapse collapse show">
                                                            <div class="accordion-body p-0 pb-3">
                                                                <h6 class="mb-3">All Categories</h6>
                                                                <div class="category_list">
                                                                    <ul>
                                                                        @foreach($categories as $category)
                                                                            <li class="mb-2">
                                                                                <a href="{{route('ads',['location'=>request()->route()->parameter('location','kenya'), 'category'=>$category->slug])}}"
                                                                                   class="category_name {{ request('category') == $category->slug ? 'active' : '' }} ">
                                                                                    <img
                                                                                        src="{{getIcon($category?->image)}}"
                                                                                        width="25" class="img-fluid me-2"
                                                                                        alt="{{$category?->slug}}">
                                                                                    {{$category?->name}} <span>({{$category?->activeAds?->count()}})</span>
                                                                                </a>
                                                                            </li>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- location -->
                                                    <div class="accordion-item bg-transparent border-0">
                                                        <h2 class="accordion-header">
                                                            <button
                                                                class="accordion-button bg-transparent p-0 py-3 shadow-none"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#panelsStayOpen-collapseTwo"
                                                                aria-expanded="false"
                                                                aria-controls="panelsStayOpen-collapseTwo">
                                                                Location
                                                            </button>
                                                        </h2>
                                                        <div id="panelsStayOpen-collapseTwo"
                                                             class="accordion-collapse collapse show">
                                                            <div class="accordion-body p-0 pb-3">
                                                                <h6 class="mb-3">All of Kenya</h6>
                                                                <div class="location_list">
                                                                    <ul>
                                                                        @foreach($regions as $region)

                                                                            <li class="mb-2">
                                                                                <a href="{{route('ads',['location'=>$region->slug])}}" class=" {{ request('location') == $region->slug ? 'active' : '' }} ">{{$region->name}}
                                                                                    <span>({{$region->activeAds->count()}})</span>
                                                                                </a>
                                                                            </li>
                                                                        @endforeach

                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- listings ads -->
                            <div class="col-lg-9">
                                <div class="listings_wrap mt-4">
                                    <div class="listing_header mb-4">
                                        <h1>Buy, Sell, Rent or Find Anything in {{$location->name ?? "Kenya"}}</h1>
                                        <p class="m-0">Showing total {{$total_ads}} ads</p>
                                    </div>

                                    @forelse($ads as $ad)

                                        <!-- list item -->
                                        @include('frontend.ads.list-item')
                                    @empty
                                        <h4 class="text-center text-danger mt-5">No Ads Found</h4>
                                    @endforelse

                                <!-- pagination -->
                                @if (!$ads->isEmpty())
                                <div class="listing_pagination mb-4 mt-4 d-flex justify-content-center">
                                    {{$ads->onEachSide(5)->links()}}
                                </div>
                                @endif
                            </div>
                            <!-- ads -->
                            {{--<div class="d-none d-lg-block col-lg-2">
                                <div class="text-center mt-4 mb-4 position-sticky" style="top:6rem;">
                                    <a href="#" target="_blank">
                                        <img src="assets/images/1.png" class="img-fluid" alt="Image">
                                    </a>
                                </div>--}}
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= Ads Listings End  ============================ -->

    @include('frontend.layouts.includes.category_modal')
    @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();
            });
        });

        $(document).ready(function () {
            $('.filterInput').on('change', function () {
                $(this).closest('form').submit();
            });
        });
    </script>

@endpush