@extends('web.layouts.app')

@section('title', 'المنتجات')

@section('content')
    <div class="content">
        <div class="index-header index-page-layout" style="background-image: url(../assets/images/page-layout-img.jpg);">
            <div class="container">
                <div class="index-header-content">
                    <div class="index-header-content-details">
                        <h1>المنتجات</h1>
                        <span class="pretitle">احصل على أفضل قطعة غيار لسيارتك من هنا</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="products-list-page">
            <div class="container">
                <div class="products-container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="products-list-header">
                                <div class="row align-items-center">
                                    <div class="col-lg-3">
                                        <div class="header-info header-info-filter">
                                            <h3 class="h3-filter">تصفية النتائج</h3>
                                            {{--  Toggle Filter Button  --}}
                                            <button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#filterSidebar" aria-expanded="false" aria-controls="filterSidebar">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                                    <path d="M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="header-info">
                                            <h3>جميع المنتجات</h3>
                                            <form action="{{ route('products.list') }}" method="GET">
                                                <div class="form-group">
                                                    <select name="sort" id="sort" class="form-control">
                                                        <option value="">ترتيب</option>
                                                        <option value="name" @if(request('sort') == 'name') selected @endif>حسب الاسم</option>
                                                        <option value="price" @if(request('sort') == 'price') selected @endif>حسب السعر</option>
                                                        <option value="created_at" @if(request('sort') == 'created_at') selected @endif>حسب تاريخ الإضافة</option>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @include('web.partials.products-sidebar', compact('categories', 'brands'))

                        <div class="col-lg-9">
                            <div class="products-container-list">
                                <div class="row" id="product-list">
                                    @foreach ($products as $product)
                                        @include('web.partials.products-list-product-card', ['product' => $product, 'cardsPerRow' => 3])
                                    @endforeach
                                </div>
                                <div class="d-flex justify-content-center mt-4">
                                    {{ $products->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {

        // --- Helper Functions ---

        // Function to reload products after applying filters.
        function reloadProducts() {
            if (typeof loadMoreProducts === 'function') {
                loadMoreProducts('{{ route("products.list") }}' + '?' + $('#filter-form').serialize());
            } else {
                console.error("Error: loadMoreProducts function is not defined!");
            }
        }

        // Function to toggle visibility of filter items and button text.  Takes the *container* as a parameter.
        function toggleFilterItems(containerSelector) {
            const container = $(containerSelector); // Use the selector directly
            const hiddenItems = container.find('.hidden-filter-item');
            const button = container.find('.show-more-filters');

            hiddenItems.slice(0, 5).slideToggle(200); // Show/hide 5 at a time

            // Update button text and visibility.  Check if ANY are still hidden.
            if (container.find('.hidden-filter-item:hidden').length > 0) {
                button.text('عرض المزيد').show();
            } else {
                button.text('عرض عناصر أقل').show();
            }
            //If all item is less then 5, then hide the button
             if (hiddenItems.length <= 5) {
                button.hide();
            }
        }

        // --- Event Handlers ---

        // Toggle sidebar sections and rotate arrow icon
        $('.sidebar-section-header').click(function() {
            $(this).next('.sidebar-section-content').slideToggle();
            $(this).find('.toggle-icon').toggleClass('rotated');
        });

        // Show More/Less button click.  Use event delegation!
        $(document).on('click', '.show-more-filters', function() {
            const containerSelector = '#' + $(this).closest('.sidebar-section-content').attr('id'); // Get parent container ID
            toggleFilterItems(containerSelector);
        });


        // Clear all filters
        window.clearFilters = function() {
            $('#filter-form input[type="number"]').val('');
            $('#filter-form input[type="text"]').val('');
            $('#filter-form input[type="checkbox"]').prop('checked', false);
            $('#filter-form select').prop('selectedIndex', 0);

            // Reset price range slider
            rangeSlider(0, 10000);

            // Reset subcategories, car models, and engines.  This will re-fetch and re-render.
            updateSubcategories();
            updateCarModels();
            updateEngines();

            // Reset main categories visibility.
            const $categorySection = $('.sidebar-section:first'); // More reliable selection
            $categorySection.find('.hidden-filter-item').hide();
            $categorySection.find('.filter-line').slice(0, 5).show();
            if ($categorySection.find('.filter-line').length > 5) {
                $categorySection.find('.show-more-filters').show();
            } else {
                $categorySection.find('.show-more-filters').hide(); // Hide if not needed
            }

            // Reset brands visibility - Use :eq(2) ONLY if Brands is always the third section.
            const $brandSection = $('.sidebar-section:has(.sidebar-section-content:has(input[name="brand[]"]))');
            $brandSection.find('.hidden-filter-item').hide();
            $brandSection.find('.filter-line').slice(0, 5).show();
            if ($brandSection.find('.filter-line').length > 5) {
               $brandSection.find('.show-more-filters').show();
            } else {
                $brandSection.find('.show-more-filters').hide(); // Hide if not needed
            }

            reloadProducts(); // Reload products after clearing
        };



        // --- Dynamic Filter Updates (AJAX) ---
        // All AJAX calls now *only* update the content and counts.  Show/hide logic is separate.

        // 1. Update Subcategories
        function updateSubcategories() {
            let selectedCategories = $('input[name="category[]"]:checked').map(function() {
                return this.value;
            }).get();

            $.ajax({
                url: '{{ route("get.subcategories") }}',
                method: 'GET',
                data: { categories: selectedCategories },
                success: function(response) {
                    let subcategoriesHtml = '';
                    let totalSubcategories = response.length;

                    if (totalSubcategories > 0) {
                        $.each(response, function(index, subcategory) {
                            let hiddenClass = index >= 5 ? 'hidden-filter-item' : '';
                            //  NO style="display: none;" here!  Controlled by toggleFilterItems
                            let displayStyle = '';

                            subcategoriesHtml += `
                                <div class="filter-line ${hiddenClass}" ${displayStyle}>
                                    <div class="checkbox-wrapper-43">
                                        <input type="checkbox" name="subcategory[]" id="subcategory-${subcategory.id}" value="${subcategory.id}" ${selectedCategories.includes(String(subcategory.id)) ? 'checked' : ''}>
                                        <label for="subcategory-${subcategory.id}" class="check">
                                            <svg width="18px" height="18px" viewBox="0 0 18 18">
                                                <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
                                                <polyline points="1 9 7 14 15 4"></polyline>
                                            </svg>
                                        </label>
                                    </div>
                                    <p>${subcategory.name}</p>
                                </div>
                            `;
                        });

                        if (totalSubcategories > 5) {
                            subcategoriesHtml += `<button type="button" class="btn btn-link show-more-filters" data-section="subcategory">عرض المزيد</button>`;
                        }
                    } else {
                        subcategoriesHtml = '<p>لا توجد أقسام فرعية</p>';
                    }

                    $('#subcategories-count').text('(' + totalSubcategories + ')');
                    $('#subcategories-content').html(subcategoriesHtml);

                    // Re-attach event listeners.  CRITICAL for dynamically added elements.
                    $('input[name="subcategory[]"]').on('change', reloadProducts);
                     // No need to re-attach .show-more-filters click here; we use event delegation.

                    // Call toggleFilterItems to ensure correct initial visibility.
                    toggleFilterItems('#subcategories-content');
                }
            });
        }

        $('input[name="category[]"]').change(function() {
            updateSubcategories();
            reloadProducts();  // Reload products when categories change
        });
        updateSubcategories(); // Initial load


        // 2. Update Car Models
        function updateCarModels() {
            let selectedBrands = $('input[name="brand[]"]:checked').map(function() {
                return this.value;
            }).get();

            $.ajax({
                url: '{{ route("get.car.models") }}',
                method: 'GET',
                data: { brands: selectedBrands },
                success: function(response) {
                    let carModelsHtml = '';
                    let totalCarModels = response.length;

                    if (totalCarModels > 0) {
                        $.each(response, function(index, carModel) {
                            let hiddenClass = index >= 5 ? 'hidden-filter-item' : '';
                            let displayStyle = ''; // NO display: none here!

                            carModelsHtml += `
                                <div class="filter-line ${hiddenClass}" ${displayStyle}>
                                    <div class="checkbox-wrapper-43">
                                        <input type="checkbox" name="car_model[]" id="car-model-${carModel.id}" value="${carModel.id}">
                                        <label for="car-model-${carModel.id}" class="check">
                                            <svg width="18px" height="18px" viewBox="0 0 18 18">
                                                <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
                                                <polyline points="1 9 7 14 15 4"></polyline>
                                            </svg>
                                        </label>
                                    </div>
                                    <p>${carModel.name}</p>
                                </div>
                            `;
                        });

                        if (totalCarModels > 5) {
                            carModelsHtml += `<button type="button" class="btn btn-link show-more-filters" data-section="car-model">عرض المزيد</button>`;
                        }
                    } else {
                        carModelsHtml = '<p>لا توجد موديلات سيارات</p>';
                    }

                     // Update count and content
                    $('#car-models-count').text('(' + totalCarModels + ')');
                    $('#car-models-content').html(carModelsHtml);

                    // Re-attach event listeners
                    $('input[name="car_model[]"]').on('change', function() {
                        updateEngines();
                        reloadProducts();
                    });
                    // NO .show-more-filters re-attachment here; we use event delegation!

                    // Ensure correct initial visibility
                    toggleFilterItems('#car-models-content');

                }
            });
        }

        $('input[name="brand[]"]').change(function() {
            updateCarModels();
            reloadProducts(); // Reload products when brands change
        });
        updateCarModels(); // Initial load


        // 3. Update Engines
        function updateEngines() {
            let selectedCarModels = $('input[name="car_model[]"]:checked').map(function() {
                return this.value;
            }).get();

            $.ajax({
                url: '{{ route("get.engines") }}',
                method: 'GET',
                data: { carModels: selectedCarModels },
                success: function(response) {
                    let enginesHtml = '';
                    let totalEngines = response.length;

                    if (totalEngines > 0) {
                        $.each(response, function(index, engine) {
                            let hiddenClass = index >= 5 ? 'hidden-filter-item' : '';
                            let displayStyle = ''; // NO display: none here!

                            enginesHtml += `
                                <div class="filter-line ${hiddenClass}" ${displayStyle}>
                                    <div class="checkbox-wrapper-43">
                                        <input type="checkbox" name="car_model_engine[]" id="engine-${engine.id}" value="${engine.id}">
                                        <label for="engine-${engine.id}" class="check">
                                            <svg width="18px" height="18px" viewBox="0 0 18 18">
                                                <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
                                                <polyline points="1 9 7 14 15 4"></polyline>
                                            </svg>
                                        </label>
                                    </div>
                                    <p>${engine.name}</p>
                                </div>
                            `;
                        });

                        if (totalEngines > 5) {
                            enginesHtml += `<button type="button" class="btn btn-link show-more-filters" data-section="engine">عرض المزيد</button>`;
                        }
                    } else {
                        enginesHtml = '<p>لا توجد محركات</p>';
                    }

                    $('#engines-count').text('(' + totalEngines + ')');
                    $('#engines-content').html(enginesHtml);

                    // Re-attach event listeners
                    $('input[name="car_model_engine[]"]').on('change', reloadProducts);
                    // NO .show-more-filters re-attachment; event delegation

                    // Ensure correct initial visibility
                    toggleFilterItems('#engines-content');
                }
            });
        }

        // No initial call to updateEngines.

        // Update products when *any* filter changes (including price)
        $('#filter-form input, #filter-form select').on('change', reloadProducts);


        // Favorite Button (corrected, with event delegation)
        $(document).on('click', '.toggle-favorite', function(e) {
            e.preventDefault();

            @auth
            const productId = $(this).data('product-id');
            const button = $(this);
            const icon = button.find('i');

            const isCurrentlyFavorite = icon.hasClass('bi-heart-fill');
            const url = isCurrentlyFavorite
                ? "{{ route('favorites.remove', ['productId' => ':productId']) }}".replace(':productId', productId)
                : "{{ route('favorites.add', ['productId' => ':productId']) }}".replace(':productId', productId);
            const method = isCurrentlyFavorite ? 'DELETE' : 'POST';

            $.ajax({
                url: url,
                type: method,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        icon.toggleClass('bi-heart bi-heart-fill');
                        icon.css('color', !isCurrentlyFavorite ? 'red' : '');
                        if (!isCurrentlyFavorite) {
                            toastr.success('تمت إضافة المنتج إلى المفضلة.');
                        }
                    } else {
                        toastr.warning(response.message || 'حدث خطأ غير متوقع.');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        toastr.error('يجب تسجيل الدخول لإضافة منتجات إلى المفضلة.');
                    } else if (xhr.status === 404) {
                        toastr.error('المنتج غير موجود.');
                    } else {
                        toastr.error(xhr.responseJSON?.message || 'حدث خطأ أثناء معالجة طلبك.');
                    }
                }
            });
            @else
            toastr.warning('الرجاء تسجيل الدخول لإضافة المنتجات إلى المفضلة.');
            @endauth
        });

        // CSS for rotating the arrow
        $('.sidebar-section-header svg.toggle-icon').css({
            'transition': 'transform 0.2s ease-out',
            'display': 'inline-block'
        });

        $('.rotated').css('transform', 'rotate(180deg)');

        //Update products when any filter change.
        $('#filter-form input, #filter-form select').on('change', reloadProducts);
    });
</script>
@endsection