@extends('frontEnd.layouts.master')
@section('title', $category->name)
@push('css')
    <link rel="stylesheet" href="{{ asset('frontEnd/css/jquery-ui.css') }}" />
@endpush
@section('content')
    <section class="product-section py-5">
        <div class="container">
            <div class="sorting-section mb-4">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="category-breadcrumb">
                            <a href="{{ route('home') }}" class="text-muted">Home</a>
                            <span class="mx-2">/</span>
                            <strong>{{ $category->name }}</strong>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="d-flex align-items-center justify-content-md-end gap-3 mt-3 mt-md-0">
                            <div class="showing-data d-none d-md-block">
                                <span class="text-muted small">Showing {{ $products->firstItem() }}-{{ $products->lastItem() }} of {{ $products->total() }}</span>
                            </div>
                            <div class="page-sort">
                                <form action="" class="sort-form">
                                    <select name="sort" class="form-control form-select sort" style="min-width: 180px;">
                                        <option value="1" @if(request()->get('sort')==1)selected @endif>Latest</option>
                                        <option value="2" @if(request()->get('sort')==2)selected @endif>Oldest</option>
                                        <option value="3" @if(request()->get('sort')==3)selected @endif>Price: High To Low</option>
                                        <option value="4" @if(request()->get('sort')==4)selected @endif>Price: Low To High</option>
                                        <option value="5" @if(request()->get('sort')==5)selected @endif>Name: A-Z</option>
                                        <option value="6" @if(request()->get('sort')==6)selected @endif>Name: Z-A</option>
                                    </select>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <!-- Sidebar Filter -->
                <div class="col-lg-3 filter-sidebar-column">
                    <div class="mobile-filter-header d-lg-none">
                        <h5 class="m-0 fw-bold">Filters</h5>
                        <button type="button" class="btn-close filter-close-btn"></button>
                    </div>
                    @include('frontEnd.layouts.partials.sidebar_filter', ['brands' => $brands, 'custom_offers' => $custom_offers])
                </div>

                <!-- Product Grid -->
                <div class="col-lg-9">
                    <div class="d-flex justify-content-between align-items-center mb-4 bg-white p-2 rounded-3 shadow-sm d-lg-none">
                         <button type="button" class="btn btn-dark w-100 mobile-filter-open-btn py-2 fw-bold">
                            <i class="fa-solid fa-filter me-2"></i> OPEN FILTERS
                        </button>
                    </div>
                    <style>
                        .cat-pro-grid {
                            display: grid;
                            grid-template-columns: repeat(4, 1fr);
                            gap: 15px;
                        }
                        @media (max-width: 1200px) { .cat-pro-grid { grid-template-columns: repeat(3, 1fr); } }
                        @media (max-width: 991px) { .cat-pro-grid { grid-template-columns: repeat(2, 1fr); } }
                        @media (max-width: 576px) { .cat-pro-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
                    </style>
                    <div class="cat-pro-grid" id="category_product_container">
                        @foreach ($products as $key => $value)
                            @include('frontEnd.layouts.partials.product_card', ['product' => $value])
                        @endforeach
                    </div>

                    <div class="text-center mt-5">
                        @if($products->hasMorePages())
                            <button class="btn btn-primary px-4 py-2 rounded-pill fw-bold" id="load_more_cat_btn" 
                                    data-page="2" data-slug="{{ $category->slug }}" 
                                    style="background: #111; border: none; font-size: 14px;">
                                LOAD MORE PRODUCTS
                                <div class="spinner-border spinner-border-sm ms-2 d-none" role="status"></div>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
<script>
    $(".sort").change(function(){
       $(".filter-form").submit();
    });

    $(document).on('click', '#load_more_cat_btn', function(e) {
        e.preventDefault();
        var btn = $(this);
        var page = btn.data('page');
        var slug = btn.data('slug');
        var spinner = btn.find('.spinner-border');

        btn.prop('disabled', true);
        spinner.removeClass('d-none');

        var sort = $(".sort").val();
        var min_price = $('#min_price').val();
        var max_price = $('#max_price').val();
        var keyword = $('input[name="keyword"]').val();
        var stock = $('input[name="stock"]:checked').val();

        var brands = [];
        $('input[name="brand[]"]:checked').each(function() {
            brands.push("brand[]=" + $(this).val());
        });
        var brandParam = brands.length > 0 ? "&" + brands.join('&') : "";

        $.ajax({
            url: "{{ route('load_more_category_products', [], false) }}?page=" + page + "&slug=" + slug + "&sort=" + sort + "&min_price=" + min_price + "&max_price=" + max_price + "&keyword=" + keyword + "&stock=" + stock + brandParam,
            type: "get",
            dataType: "json"
        })
        .done(function(data) {
            spinner.addClass('d-none');
            if (!data.html || data.html.trim() == "") {
                btn.hide();
                return;
            }
            $("#category_product_container").append(data.html);
            
            if (data.next_page) {
                btn.data('page', page + 1);
                btn.prop('disabled', false);
            } else {
                btn.hide();
            }
        })
        .fail(function() {
            btn.prop('disabled', false);
            spinner.addClass('d-none');
        });
    });
    $(document).ready(function() {
        $(".mobile-filter-open-btn").on("click", function() {
            $(".filter-sidebar-column").addClass("active");
            $("#page-overlay").fadeIn();
            $("body").css("overflow", "hidden");
        });

        $(document).on("click", ".filter-close-btn, #page-overlay", function() {
            $(".filter-sidebar-column").removeClass("active");
            $("#page-overlay").fadeOut();
            $("body").css("overflow", "auto");
        });
    });
</script>
@endpush
