@extends('frontend.layouts.app')

@section('title', $title)

@section('meta')
    <meta property="og:title" content="{{ $og_title ?? $title ?? config('app.name') }}" />
    <meta property="og:description" content="{{ $og_description ?? '' }}" />
    <meta property="og:image" content="{{ asset($og_image ?? 'default-og-image.jpg') }}" />
    <meta name="description" content="{{ $meta_description ?? '' }}">
    <meta name="keywords" content="{{ $meta_keyword ?? '' }}">
@endsection

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

@section('content')

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

    <!-- ======================= 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 ?? 'Ghana' }}
                                </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">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="lucide lucide-sliders-horizontal-icon lucide-sliders-horizontal">
                                    <line x1="21" x2="14" y1="4" y2="4" />
                                    <line x1="10" x2="3" y1="4" y2="4" />
                                    <line x1="21" x2="12" y1="12" y2="12" />
                                    <line x1="8" x2="3" y1="12" y2="12" />
                                    <line x1="21" x2="16" y1="20" y2="20" />
                                    <line x1="12" x2="3" y1="20" y2="20" />
                                    <line x1="14" x2="14" y1="2" y2="6" />
                                    <line x1="8" x2="8" y1="10" y2="14" />
                                    <line x1="16" x2="16" y1="18" y2="22" />
                                </svg>
                            </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" id="accordionPanelsStayOpenExample">
                                                <!-- Price -->
                                                <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-collapsePrice"
                                                            aria-expanded="true"
                                                            aria-controls="panelsStayOpen-collapsePrice">
                                                            Price, GH₵
                                                        </button>
                                                    </h2>
                                                    <div id="panelsStayOpen-collapsePrice"
                                                        class="accordion-collapse collapse show">
                                                        <div class="accordion-body p-0 pb-3">
                                                            <!-- Price Filter -->
                                                            <div class="filter-card">
                                                                {{-- <div class="filter-title"></div> --}}
                                                                <div class="price-range d-flex gap-2 mb-3">
                                                                    <div class="form-floating">
                                                                        <input type="number" class="form-control priceInput"
                                                                            id="min" name="min" placeholder="Minimum price"
                                                                            value="{{ request('min') }}">
                                                                        <label for="min">Min</label>
                                                                    </div>
                                                                    <div class="form-floating">
                                                                        <input type="number" class="form-control priceInput"
                                                                            id="max" name="max" placeholder="Maximum price"
                                                                            value="{{ request('max') }}">
                                                                        <label for="max">Max</label>
                                                                    </div>
                                                                </div>
                                                                <!-- Price Filter -->
                                                                <div class="form-check">
                                                                    <input class="form-check-input priceInput" type="radio"
                                                                        name="price" id="price1" value="0-22000" {{ request('price') == '0-22000' ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="price1">Under 22 K
                                                                        <span class="text-muted">•
                                                                            {{$priceCounts['0-22000']}} ads</span></label>
                                                                </div>

                                                                <div class="form-check">
                                                                    <input class="form-check-input priceInput" type="radio"
                                                                        name="price" id="price2" value="22000-120000" {{ request('price') == '22000-120000' ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="price2">22 - 120 K
                                                                        <span class="text-muted">•
                                                                            {{$priceCounts['22000-120000']}}
                                                                            ads</span></label>
                                                                </div>

                                                                <div class="form-check">
                                                                    <input class="form-check-input priceInput" type="radio"
                                                                        name="price" id="price3" value="120000-12000000" {{ request('price') == '120000-12000000' ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="price3">120 K - 12
                                                                        M <span class="text-muted">•
                                                                            {{$priceCounts['120000-12000000']}}
                                                                            ads</span></label>
                                                                </div>

                                                                <div class="form-check">
                                                                    <input class="form-check-input priceInput" type="radio"
                                                                        name="price" id="price4" value="12000000-55000000"
                                                                        {{ request('price') == '12000000-55000000' ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="price4">12 - 55 M
                                                                        <span class="text-muted">•
                                                                            {{$priceCounts['12000000-55000000']}}
                                                                            ads</span></label>
                                                                </div>

                                                                <div class="form-check">
                                                                    <input class="form-check-input priceInput" type="radio"
                                                                        name="price" id="price5" value="55000000-" {{ request('price') == '55000000-' ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="price5">More than
                                                                        55 M <span class="text-muted">•
                                                                            {{ $priceCounts['55000000-'] }}
                                                                            ads</span></label>
                                                                </div>


                                                                <!-- <div class="filter-actions">
                                                                                <button id="clearPrice"
                                                                                    class="btn btn-link text-secondary">CLEAR</button>
                                                                                <button class="btn btn-link">SAVE</button>
                                                                            </div> -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Verified sellers -->
                                                <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-collapseSeller"
                                                            aria-expanded="true"
                                                            aria-controls="panelsStayOpen-collapseSeller">
                                                            Verified sellers
                                                        </button>
                                                    </h2>
                                                    <div id="panelsStayOpen-collapseSeller"
                                                        class="accordion-collapse collapse show">
                                                        <div class="accordion-body p-0 pb-3">
                                                            <!-- Price Filter -->
                                           
                                                                <div class="form-check">
                                                                    <input class="form-check-input filterInput" type="radio"
                                                                        name="seller" id="seller_all" value="all" {{ request('seller') == 'all' ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="seller_all">Show
                                                                        all</label>
                                                                </div>

                                                                <div class="form-check">
                                                                    <input class="form-check-input filterInput" type="radio"
                                                                        name="seller" id="seller_verified" value="verified"
                                                                        {{ request('seller') == 'verified' ? 'checked' : '' }}>
                                                                    <label class="form-check-label"
                                                                        for="seller_verified">Verified sellers <span
                                                                            class="text-muted">• {{ $sellerCounts['verified'] }} ads</span></label>
                                                                </div>

                                                                <div class="form-check">
                                                                    <input class="form-check-input filterInput" type="radio"
                                                                        name="seller" id="seller_unverified"
                                                                        value="unverified" {{ request('seller') == 'unverified' ? 'checked' : '' }}>
                                                                    <label class="form-check-label"
                                                                        for="seller_unverified">Unverified sellers <span
                                                                            class="text-muted">• {{ $sellerCounts['unverified'] }}ads</span></label>
                                                                </div>

                                                         

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

                                            <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', 'Ghana'), 'category' => $category->slug])}}"
                                                                                class="category_name {{ request('category') == $category->slug ? 'active' : '' }} ">
                                                                                @if (!empty($category?->image))
                                                                                    <img src="{{getIcon($category?->image)}}"
                                                                                        width="25" class="img-fluid me-2"
                                                                                        alt="{{$category?->slug}}">
                                                                                @endif

                                                                                {{$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 Ghana</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 ?? "Ghana"}}</h1>
                                    <p class="m-0">Showing total {{$total_ads}} ads</p>
                                </div>

                                @forelse($ads as $ad)

                                    <!-- list item -->
                                    @include('frontend.ads.list-item', ['search' => 'true'])
                                @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>
        <!-- ======================= 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();
                });
            });

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


        </script>
        <script>
            $(document).ready(function () {
                // Auto-submit on change
                $('.priceInput').on('change', function () {
                    // If user types min/max, clear radios
                    if ($(this).attr('type') === 'number') {
                        $('input[name="price_range"]').prop('checked', false);
                    }
                    $(this).closest('form').submit();
                });

                // Clear all filters
                $('#clearPrice').on('click', function () {
                    $('#priceFilterForm')[0].reset(); // reset all fields
                    $(this).closest('form').submit();
                });
            });
        </script>

    @endpush