@extends('front.layouts.master')

@section('content')
    <main class="main">
        <div class="site-breadcrumb">
            <div class="container">
                <h2 class="breadcrumb-title">{{ TranslationHelper::translate('search', 'site') }}</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>


                                            </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>
                        <div class="row" id="cars-list">
                            @php
                                    $lang =app()->getLocale();
                                     $tanslate =new GoogleTranslate($lang);
                                @endphp
                            @if ($filteredResults->count() > 0)
                                @foreach ($filteredResults as $ad)
                                    <div class="col-md-6 col-lg-4">
                                        <div class="car-item wow fadeInUp" data-wow-delay=".25s">
                                            <div class="car-img">
                                                <span
                                                    class="car-status status-2">{{ TranslationHelper::translate($ad->AdType, 'site') }}</span>
                                                <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>
                                                </span>
                                                <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
                                                    @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
                                                    @endauth


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="alert alert-danger">

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

                                </div>
                            @endif
                            <!-- pagination -->

                            <!-- pagination end -->
                        </div>
                        {{ $filteredResults->links() }}
                    </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