@extends('front.layouts.master')

@section('content')

<main class="main">
    <!-- 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">
                                <input type="hidden" id="categoryDropdown" value="{{ $ads_sub_category->id }}">
                                @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="car-search-form">

                                <h4 class="car-widget-title">{{ TranslationHelper::translate('sub-categories', 'site')
                                    }}</h4>
                                <div class="select-container">
                                    {{-- <select name="subcategory[]" id="my2Select" multiple class="form-control">
                                        @foreach ($subcategories as $subcategory)
                                        <option value="{{ $subcategory->id }}">{{ $subcategory->name }}</option>
                                        @endforeach
                                    </select>
                                    <i class="fas fa-chevron-down"></i> --}}

                                    <div class="search-subcategory-container">
                                        <input type="text" id="search-subcategory" class="form-control" placeholder="Search subcategories...">
                                    </div>

                                    <ul class="filter_options">
                                        <li>
                                            <div class="form-check checklists-container" id="subcategory-list">
                                                @foreach ($sub_sub_categories as $subcategory)
                                                <div class="checklist-inp">
                                                    <input class="mySelect-checkbox" type="checkbox" id="mySelect_{{ $subcategory->id }}" value="{{ $subcategory->id }}">
                                                    <label for="mySelect_{{ $subcategory->id }}">{{ $subcategory->name }}</label>
                                                </div>
                                                @endforeach
                                                <div class="more">
                                                    <button type="button" class="more-btn">
                                                        <span>See More</span>
                                                        <span>See Less</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>

<!-- أيقونة السهم -->
                                </div>


                            </div>
                        </div>
                        <div class="car-widget">
                            <div class=" without_border w-100 ">
                                <div class="filter-box-container price">
                                    <div class="text-center">
                                        <h4 class="text-center"> {{ TranslationHelper::translate('attributes', 'site')
                                            }} </h4>
                                    </div>
                                    <hr />
                                    <div class="car-widget car-search-form">
                                        @foreach ($attrs as $attr)
                                            @if ($attr->options && count($attr->options) > 0)
                                                <ul>
                                                    <li class="cats_list">
                                                        <a href="javascript:void(0);" class="filter_selected_item without_border active" onclick="showSearchAndButton(this)">
                                                            <span class="selected_option clr_secondary">{{ $attr->name }}</span>
                                                            @if(app()->getLocale() == 'ar')
                                                                <span class="fa fa-chevron-left chevron_icon"></span>
                                                            @endif
                                                            @if(app()->getLocale() == 'en')
                                                                <span class="fa fa-chevron-right chevron_icon"></span>
                                                            @endif
                                                        </a>

                                                        <div class="hidden-elements">
                                                            <ul class="filter_options">
                                                                <li>
                                                                    <div class="form-check checklists-container">
                                                                        @foreach ($attr->options as $index => $op)
                                                                            <div class="checklist-inp">
                                                                                <input class="attr-checkbox" type="checkbox" id="attr_{{ $op->id }}" value="{{ $op->options }}">
                                                                                <label for="attr_{{ $op->id }}">{{ $op->options }}</label>
                                                                            </div>
                                                                        @endforeach

                                                                        @if (count($attr->options) > 4)
                                                                        <div class="more">
                                                                            <button type="button" class="more-btn">
                                                                                <span>
                                                                                    <i class="fa-solid fa-plus"></i> See More
                                                                                </span>
                                                                                <span style="display:none;">
                                                                                    <i class="fa-solid fa-minus"></i> See Less
                                                                                </span>
                                                                            </button>
                                                                        </div>
                                                                        @endif
                                                                    </div>
                                                                </li>
                                                            </ul>

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





                                </div>


                            </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 d-flex align-items-baseline gap-3">
                            <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-30 نتيجة</h6>
                            @endif

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

                            <div class="col-md-3 car-sort-box">
                                <div class="input-group">
                                    <select class="form-control" id="sort-select">

                                        @if(app()->getLocale() == 'ar')
                                        <option value="">ترتيب .....</option>
                                        <option value="low"> ترتيب السعر الادنى</option>
                                        <option value="high">ترتيب السعر الاعلى</option>
                                        @else
                                        <option value="">Sort By ....</option>
                                        <option value="low">Sort By Low Price</option>
                                        <option value="high">Sort By High Price</option>
                                        @endif
                                    </select>
                                    <span class="input-group-addon">
                                        <i class="fa fa-filter"></i> <!-- أيقونة الفلتر -->
                                    </span>
                                </div>
                            </div>
                        </div>


                    </div>


                    <div class="col-lg-12 col-12">
                        <div class="row py-4">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-6 text-left">
                                <h2 class="site-title site-title_custom">
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-6 text-right position-relative">
                                <div class="see_all_div see_all_div_custom">
                                </div>
                            </div>
                        </div>
                    </div>

                    @php
                    use Illuminate\Support\Carbon;
                    $ads = \App\Models\Ads::with('city', 'category','media','adAttributes')
                    ->where('car_model_id', $ads_sub_category->id)
                    ->where('is_approved', 1)
                    ->where('is_pause', 0)
                    ->whereHas('city', function ($query)  {
                    $query->where('country_id', session('user_country', 1));
                })
                    ->latest()
                    ->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>
                        @endif
                    </div>



                    <!-- 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 = [];

    var categoryId = $('#categoryDropdown').val();


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


    // Loop through each checked attribute checkbox and get its value
    $('.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(); // Get the search key

    $.ajax({
        url: '{{ route('site.ads.sub_filter') }}',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            categoryId: categoryId,

            sub_category: 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 filterCars function on checkbox change or input events
$('.mySelect-checkbox, .attr-checkbox, #min-price, #max-price, #sort-select, #search_key').on('change keyup', filterCars);
});

</script>

<script>
    $(document).ready(function () {
        $('.checklists-container').each(function () {
            const maxView = 4;  // Maximum number of visible options
            const $this = $(this);
            const $moreBTN = $this.find('.more-btn');
            const $checks = $this.find('.checklist-inp');
            let show = false;  // Variable to track if the "See More" is clicked

            // Initially hide options beyond the maxView
            toggle_view();

            // Click event for the "See More / See Less" button
            $moreBTN.click(function () {
                show = !show;  // Toggle the show state
                toggle_view();  // Update the view based on the show state

                // Toggle the button text and icons
                $(this).find('span:first').toggle(!show);  // "See More" text
                $(this).find('span:last').toggle(show);    // "See Less" text
            });

            // Function to toggle visibility of checklist items
            function toggle_view() {
                $checks.each(function (index) {
                    if (index >= maxView) {
                        $(this).toggleClass('d-none', !show);  // Show/Hide based on the 'show' state
                    }
                });
            }
        });
    });
</script>

<script>
  $(document).ready(function() {
    // Search Subcategories
    $('#search-subcategory').on('keyup', function() {
        var searchValue = $(this).val().toLowerCase();

        // Loop through each subcategory label and check if it matches the search query
        $('#subcategory-list .checklist-inp').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(searchValue) > -1);
        });
    });
});
</script>

@endpush