@extends('front.layouts.master')

@section('content')

<main class="main">
    <div class="site-breadcrumb">
        <div class="container">
            <h2 class="breadcrumb-title">{{TranslationHelper::translate( 'Ads By City'  ,'site' )}} : {{ $ads_category->name }}</h2>
            <ul class="breadcrumb-menu">
                <li class="nav-item"><a class="nav-link" href="{{ route('site.index') }}">{{
                        TranslationHelper::translate('home', 'site') }}</a>
                <li>
            </ul>
        </div>
    </div>
    <!-- car area -->
    <div class="car-area grid bg py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="car-sidebar">
                        <div class="car-widget">
                            <div class="car-search-form">

                                @if(app()->getLocale() == 'ar') <h4 class="car-widget-title">بحث</h4> @endif

                                @if(app()->getLocale() == 'en') <h4 class="car-widget-title">Search</h4> @endif
                                <form action="#">
                                    <div class="form-group">
                                        <input type="text" class="search_key form-control"
                                            name="search_key" id="search_key">
                                        <button type="search"><i class="far fa-search"></i></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="car-widget">
                            <div class=" without_border w-100 ">
                                @foreach ($categories as $cat)
                                <ul>
                                    <li class="cats_list">
                                        <a href="{{ route('site.ad.show', ['id' => $cat->id]) }}" class="filter_selected_item without_border">
                                            <span class="selected_option  clr_secondary">{{ $cat->name }}</span>


                                        </a>
                                            {{-- @php
                                            $subCategories = App\Models\CarModel::with('brand')->where('brand_id',
                                            $cat->id)->get();
                                            @endphp
                                            <ul class="filter_options">
                                                @foreach ($subCategories as $index => $subCat)
                                                <li class="single_filter_option clr_secondary">

                                                    <div class="form-check">

                                                        <input class="form-check-input subcategory-checkbox" type="checkbox"
                                                            id="subcategory_{{ $subCat->id }}" value="{{ $subCat->id }}">
                                                        <label class="form-check-label"
                                                            for="subcategory_{{ $subCat->id }}">{{ $subCat->name }}</label>
                                                    </div>
                                                </li>
                                                @endforeach
                                            </ul> --}}

                                    </li>
                                </ul>
                                @endforeach
                            </div>

                        </div>
                    </div>
                    <div class="filter-box-container price">
                        <div class="text-center">
                            <h4 class="text-center"> {{ TranslationHelper::translate('price_range', 'site') }} </h4>
                        </div>
                        <hr />
                        <div class="car-widget">
                        <div>
                            <input type="number" id="min-price"
                                placeholder="{{ TranslationHelper::translate('from', 'site') }}" class="form-control">
                        </div>
                        <div class="mt-2">
                            <input type="number" id="max-price"
                                placeholder="{{ TranslationHelper::translate('to', 'site') }}" class="form-control">
                        </div>
                    </div>

                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="col-md-12">
                        <div class="car-sort">

                            @if(app()->getLocale() == 'ar') <h6>عرض 1-10 من 50 نتيجة</h6> @endif

                            @if(app()->getLocale() == 'en') <h6>Showing 1-10 of 50 Results</h6> @endif


                            @if(app()->getLocale() == 'ar') <div class="col-md-3 car-sort-box">
                                <select class="form-control" id="sort-select">
                                    <option value="low" style=""> ترتيب السعر الادنى</option>
                                    <option value="high">ترتيب السعر الاعلى</option>
                                </select>
                            </div> @endif

                            @if(app()->getLocale() == 'en') <div class="col-md-3 car-sort-box">
                                <select class="form-control" id="sort-select">
                                    <option value="low">Sort By Low Price</option>
                                    <option value="high">Sort By High Price</option>
                                </select>
                            </div>@endif
                        </div>
                    </div>
                    @php
                    use Illuminate\Support\Carbon;
                    $ads = \App\Models\Ads::
                    with('city','category')
                    ->where('city_id', $ads_category->id)
                    ->where('is_approved', 1)
                    ->where('is_pause', 0)
                    ->whereHas('city', function ($query)  {
                    $query->where('country_id', session('user_country', 1));
                })
                    ->where('expired_at', '>=', Carbon::now())
                    ->paginate(30);

                    @endphp
                    <div class="row" id="cars-list">
                        @if ($ads->count() > 0)
                        @foreach ($ads as $ad )

                        <div class="col-md-6 col-lg-4">

                            <div class="car-item">
                                <div class="car-img">
                                    <span class="car-status status-2"> {{TranslationHelper::translate( $ad->AdType,'site' )}}</span>
                                    <a href="{{ route('site.show_detiles_ad', ['id' => $ad->id]) }}" style="display: block">
                                        @if ($ad->getFirstMediaUrl('ads') != null)

                                        <img src="{{ $ad->getFirstMediaUrl('ads') }}" alt="ads">

                                        @else

                                        <img src="https://images.bkamthis.com/{{ $ad->images->first()->filename }}" alt="ads">

                                        @endif
                                    </a>
                                    <div class="car-btns">
                                        <a href="#" class="add-to-favorites" data-ad-id="{{ $ad->id }}"><i
                                                class="far fa-heart"></i></a>

                                    </div>
                                </div>
                                <div class="car-content">
                                    <div class="car-top">

                                        <span class="car-price">{{ number_format($ad->price,0,'.',',') }} {{ $currency }}</span>

                                        <h4><a href="{{ route('site.show_detiles_ad', ['id' => $ad->id]) }}">{{ $ad->title }}</a>
                                        </h4>

                                    </div>
                                    <ul class="car-list">
                                        <li> <i class="far fa-tag"> </i> {{ $ad->category->name }} </li>

                                        <li> <i class="far fa-location-dot"> </i> {{ $ad->city->name }} </li>
                                    </ul>
                                    <div class="car-footer">

                                        @guest('end-user')
                                        @if ($ad->phone)
                                        <a href="#" class="theme-btn theme-btn2 call_btn " target="_blank"><span
                                                class="far fa-phone"></span>
                                        </a>
                                        @endif

                                        @if ($ad->whatsapp)
                                        <a href="#" class="theme-btn chat_btn " target="_blank"><span
                                                class="fa-brands fa-whatsapp"></span>
                                        </a>
                                        @endif
                                        @if ($ad->email)
                                        <a href="#" class="theme-btn chat_btn " target="_blank"><span
                                                class="fa-solid fa-envelope"></span>
                                        </a>
                                        @endif
                                        @endguest
                                        @auth('end-user')
                                        @if ($ad->phone)
                                        <a href="tel:{{ $ad->phone }}" class="theme-btn theme-btn2 call_btn "
                                            target="_blank"><span class="far fa-phone"></span>
                                        </a>
                                        @endif

                                        @if ($ad->whatsapp)
                                        <a href="https://wa.me/{{ $ad->whatsapp }} " class="theme-btn chat_btn "
                                            target="_blank"><span class="fa-brands fa-whatsapp"></span>
                                        </a>
                                        @endif
                                        @if ($ad->email)
                                        <a href="mailto:{{ $ad->email }}" class="theme-btn chat_btn "
                                            target="_blank"><span class="fa-solid fa-envelope"></span>
                                        </a>
                                        @endif

                                        @endauth


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

                        </div>
                        @endforeach
                        @isset($filteredCars)
                        @include('front.pages.filtered_ads', ['ads' => $filteredCars])
                        <!-- Handle the case where $filteredCars is not set -->
                        @endisset
                        @else
                        <div class="alert alert-danger">

                            <h3 class="text-center"> {{ TranslationHelper::translate('No Ads Found', 'site') }}</h3>

                        </div>
                    </div>
                    @endif
                    <!-- pagination -->
                    {{ $ads->links() }}
                    <!-- pagination end -->
                </div>
            </div>
        </div>
    </div>
    <!-- car area end -->

</main>



@endsection

@push('js')
<script>
    $(document).ready(function () {

            $('.categories_list').owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                dots: false,
                items: 2,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 2
                    },
                }
            });


            let filter_selected_item = $('.filter_selected_item');
            filter_selected_item.on('click', function () {
                let filter_options = $(this).parent().find('.filter_options');
                filter_options.slideToggle('fast');
            });


            let single_filter_option = $('.single_filter_option');
            single_filter_option.on('click', function () {
                let new_val = $(this).attr('data-val');
                $(this).parent().parent().find('.selected_option').text(new_val);
            });

            let section_title = $('.section-title');
            section_title.on('click', function () {
                let sorting = $(this).parent().find('.sorting');
                sorting.slideToggle('fast');
            });
            let cats_list_filter = $('.cats_list_filter');
            cats_list_filter.on('click', function () {
                let cats_list = $(this).parent().find('.real_cat_list');
                cats_list.slideToggle('fast');
            });
        });
</script>
<script>
    $(document).ready(function () {

        function filterCars() {
            var subcategoryIds = [];
            var attrsvalue = [];

        // Loop through each checked checkbox and get its value
        $('.subcategory-checkbox:checked').each(function () {
            subcategoryIds.push($(this).val());
        });
        $('.attr-checkbox:checked').each(function () {
            attrsvalue.push($(this).val());
        });

            var minPrice = $('#min-price').val();
            var maxPrice = $('#max-price').val();
            var sortOption = $('#sort-select').val();
            var searchKey = $('#search_key').val(); // Add this line to get the search key

            $.ajax({
                url: '{{ route('site.ads.filterWithoutCategory') }}',
                method: 'GET',
                data: {
                    subcategory: subcategoryIds,
                    min_price: minPrice,
                    max_price: maxPrice,
                    sort_option: sortOption,
                    search_key: searchKey,
                    attrs: attrsvalue

                },
                success: function (data) {
                    $('#cars-list').html(data);
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        }

        // Trigger the filtering when category, price range, sort option, or search key changes
        $('.subcategory-checkbox, #min-price, #max-price, #sort-select, #search_key, .attr-checkbox').on('change keyup', filterCars);

    });
</script>
@endpush