@extends('frontend.app')
@section('content')

    <style>
        main {
            background: var(--bg-color);
        }

        .shop-topbar {
            background: #fff;
            border-bottom: 2px solid #f0f0f5;
            padding: 14px 0;
            position: sticky;
            top: 0;
            z-index: 99;
            box-shadow: 0 2px 12px rgba(80, 40, 120, 0.07);
        }

        .shop-topbar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .result-info {
            font-size: 13.5px;
            color: #777;
            font-weight: 500;
            white-space: nowrap;
        }

        .result-info span {
            font-weight: 700;
        }

        .filter-pill-group {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .filter-pill-label {
            font-size: 12px;
            font-weight: 700;
            color: #aaa;
            text-transform: uppercase;
            letter-spacing: .06em;
            margin-right: 2px;
        }

        .filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 13px;
            border-radius: 50px;
            border: 1.5px solid #e2e2ee;
            background: #fafafa;
            font-size: 13px;
            color: #444;
            font-weight: 500;
            cursor: pointer;
            transition: all .18s ease;
            user-select: none;
        }

        .filter-pill:hover {
            border-color: #5c2d91;
            color: #5c2d91;
            background: #f5eeff;
        }

        .filter-pill.active {
            background: #5c2d91;
            border-color: #5c2d91;
            color: #fff;
        }

        .filter-pill.active .pill-x {
            display: inline-flex;
        }

        .pill-x {
            display: none;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            font-size: 10px;
            line-height: 1;
        }

        .sort-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sort-label {
            font-size: 12px;
            font-weight: 700;
            color: #aaa;
            text-transform: uppercase;
            letter-spacing: .06em;
            white-space: nowrap;
        }

        .sort-select {
            appearance: none;
            -webkit-appearance: none;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c2d91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
            border: 1.5px solid #e2e2ee;
            border-radius: 8px;
            padding: 7px 34px 7px 13px;
            font-size: 13px;
            color: #333;
            font-weight: 600;
            cursor: pointer;
            transition: border-color .18s;
            min-width: 165px;
        }

        .sort-select:focus {
            outline: none;
            border-color: #5c2d91;
            box-shadow: 0 0 0 3px rgba(92, 45, 145, 0.10);
        }

        .reset-all-btn {
            font-size: 12px;
            color: #e74c3c;
            font-weight: 600;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1.5px solid #ffd5d0;
            background: #fff8f7;
            transition: all .15s;
            white-space: nowrap;
        }

        .reset-all-btn:hover {
            background: #e74c3c;
            color: #fff;
            border-color: #e74c3c;
        }

        .active-filters-bar {
            display: none;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            padding: 8px 0 4px;
            border-top: 1px dashed #eee;
            margin-top: 10px;
        }

        .active-filters-bar.has-filters {
            display: flex;
        }

        .active-filter-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f0e6ff;
            color: #5c2d91;
            border: 1px solid #d4b8f5;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            padding: 3px 10px;
        }

        .active-filter-tag .remove-tag {
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            color: #9b59b6;
            font-weight: 700;
        }

        .active-filter-tag .remove-tag:hover {
            color: #e74c3c;
        }

        .active-filters-label {
            font-size: 12px;
            font-weight: 700;
            color: #aaa;
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .product-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
            color: #999;
            gap: 14px;
            width: 100%;
        }

        .spinner-ring {
            width: 40px;
            height: 40px;
            border: 3px solid #f0e6ff;
            border-top-color: #5c2d91;
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 767px) {
            .shop-topbar {
                padding: 10px 0;
            }

            .sort-select {
                min-width: 130px;
            }

            .filter-pill-group {
                gap: 5px;
            }

            .axil-shop-area.axil-section-gap.bg-color-white {
                padding: 10px 0;
            }
        }
    </style>

    <main class="main-wrapper">

        <!-- Breadcrumb -->
        <div class="axil-breadcrumb-area">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-8">
                        <div class="inner">
                            <ul class="axil-breadcrumb">
                                <li class="axil-breadcrumb-item text-primary"><a href="./">Home</a></li>
                                <li class="separator"></li>
                                <li class="axil-breadcrumb-item active" aria-current="page">Shop</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shop Area -->
        <div class="axil-shop-area axil-section-gap ">
            <div class="container-fluid">

                <!-- TOP FILTER BAR -->
                <div class="shop-topbar">
                    <div class="px-3">
                        <div class="shop-topbar-inner">

                            <!-- Result Count -->
                            <div class="result-info ">
                                Found: <span id="result-count" class="text-primary">...</span> Product
                            </div>

                            <!-- Category Pills -->
                            @if (isset($cats) && $cats->count())
                                <div class="filter-pill-group">
                                    <span class="filter-pill-label">Category:</span>
                                    @foreach ($cats as $cat)
                                        <div class="filter-pill category-pill" data-value="{{ $cat->id }}"
                                            data-name="{{ $cat->name }}">
                                            {{ $cat->name }}
                                            <span class="pill-x">✕</span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            <!-- Brand Pills -->
                            @if (isset($types) && $types->count())
                                <div class="filter-pill-group">
                                    <span class="filter-pill-label">ব্র্যান্ড:</span>
                                    @foreach ($types as $type)
                                        <div class="filter-pill brand-pill" data-value="{{ $type->id }}"
                                            data-name="{{ $type->name }}">
                                            {{ $type->name }}
                                            <span class="pill-x">✕</span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            <!-- Sort -->
                            <div class="sort-wrapper">
                                <span class="sort-label">Sort By:</span>
                                <select class="sort-select" id="sort-select">
                                    <option value="default">All</option>
                                    <option value="price_low">Price: Low → High</option>
                                    <option value="price_high">Price: High → Low</option>
                                    <option value="name">Name: A → Z</option>
                                    <option value="desc">Newest First</option>
                                    <option value="asc">Oldest First</option>
                                </select>
                            </div>

                            <!-- Reset -->
                            <a href="#" class="reset-all-btn" id="reset-all">✕ Reset</a>

                        </div>

                        <!-- Active Filter Tags -->
                        <div class="active-filters-bar" id="active-filters-bar">
                            <span class="active-filters-label">ফিল্টার:</span>
                            <div id="active-tags"></div>
                        </div>
                    </div>
                </div>
                <!-- END TOP FILTER BAR -->

                <div class="row p-2 mt-3">
                    <div class="row row--15 w-100" id="product_data">
                        <div class="product-loading">
                            <div class="spinner-ring"></div>
                            <span>পণ্য লোড হচ্ছে...</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </main>

@endsection

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

            // ── Page load এ একবারই call ──────────────────────────────
            fetchData(1);

            // ── Category pill ─────────────────────────────────────────
            $(document).on('click', '.category-pill', function() {
                $(this).toggleClass('active');
                updateActiveTags();
                fetchData(1);
            });

            // ── Brand pill ────────────────────────────────────────────
            $(document).on('click', '.brand-pill', function() {
                $(this).toggleClass('active');
                updateActiveTags();
                fetchData(1);
            });

            // ── Sort change ✅ ─────────────────────────────────────────
            $('#sort-select').on('change', function() {
                fetchData(1);
            });

            // ── Pagination ─────────────────────────────────────────────
            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();
                var href = $(this).attr('href');
                var page = href ? href.split('page=')[1] : 1;
                fetchData(page);
                $('html, body').animate({
                    scrollTop: $('.shop-topbar').offset().top - 10
                }, 300);
            });

            // ── Reset all ──────────────────────────────────────────────
            $('#reset-all').on('click', function(e) {
                e.preventDefault();
                $('.category-pill, .brand-pill').removeClass('active');
                $('#sort-select').val('default');
                updateActiveTags();
                fetchData(1);
            });

            // ── Tag remove ─────────────────────────────────────────────
            $(document).on('click', '.remove-tag', function() {
                var type = $(this).data('type');
                var value = $(this).data('value');
                $('.' + type + '-pill[data-value="' + value + '"]').removeClass('active');
                updateActiveTags();
                fetchData(1);
            });

        });

        // ── Active tags bar update ─────────────────────────────────────
        function updateActiveTags() {
            var tags = '';

            $('.category-pill.active').each(function() {
                tags += '<span class="active-filter-tag">' + $(this).data('name') +
                    ' <span class="remove-tag" data-type="category" data-value="' + $(this).data('value') +
                    '">×</span></span>';
            });

            $('.brand-pill.active').each(function() {
                tags += '<span class="active-filter-tag">' + $(this).data('name') +
                    ' <span class="remove-tag" data-type="brand" data-value="' + $(this).data('value') +
                    '">×</span></span>';
            });

            $('#active-tags').html(tags);
            $('#active-filters-bar').toggleClass('has-filters', tags !== '');
        }

        // ── Main AJAX fetch ────────────────────────────────────────────
        function fetchData(page) {
            page = page || 1;

            var cat_id = $('.category-pill.active').map(function() {
                return $(this).data('value');
            }).get();
            var brand_id = $('.brand-pill.active').map(function() {
                return $(this).data('value');
            }).get();
            var q = $('input#search2').val() || '';
            var shorting = $('#sort-select').val(); // ✅ সঠিক ID

            $('div#product_data').html(
                '<div class="product-loading"><div class="spinner-ring"></div><span>পণ্য লোড হচ্ছে...</span></div>'
            );

            $.ajax({
                type: 'GET',
                url: '{{ route('front.products.index') }}',
                data: {
                    page: page,
                    cat_id: cat_id,
                    brand_id: brand_id,
                    q: q,
                    shorting: shorting // ✅ Controller এ $request->input('shorting') দিয়ে পাবে
                },
                success: function(res) {
                    $('div#product_data').html(res);

                    // Result count (index_data view এ data-total থাকলে)
                    var total = $('div#product_data').find('[data-total]').data('total');
                    if (total !== undefined) {
                        $('#result-count').text(total);
                    }
                },
                error: function(xhr) {
                    $('div#product_data').html(
                        '<div class="product-loading"><span style="color:#e74c3c;">⚠ কিছু একটা সমস্যা হয়েছে। আবার চেষ্টা করুন।</span></div>'
                    );
                }
            });
        }
    </script>
@endpush