@extends('layouts.app')

@section('title', 'Products')
@section('meta_description', 'Browse all products')
@section('meta_keywords', 'products, ecommerce, shop')

@section('content')

    <div class="container py-4">

        <div class="row mb-3">

            <div class="col-md-6">
                <input type="text" id="search" class="form-control" placeholder="Search products...">
            </div>

            <div class="col-md-4">
                <select id="category" class="form-select">
                    <option value="">All Categories</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

        </div>

        <div id="loader" class="text-center my-3" style="display:none;">
            <div class="spinner-border text-primary"></div>
        </div>

        <div id="product-list" class="row g-4">
            @include('products.partials.list', ['products' => $products])
        </div>

    </div>

@section('scripts')
    <script>
        $(document).ready(function() {
            const filter = () => {
                $('#loader').show();
                const url = `/products?search=${$('#search').val()}&category=${$('#category').val()}`;

                fetch(url, {
                        headers: {
                            "X-Requested-With": "XMLHttpRequest"
                        }
                    })
                    .then(r => r.text())
                    .then(html => {
                        $('#product-list').html(html);
                        $('#loader').hide();
                    });
            };

            $('#search').on('keyup', debounce(filter, 500));
            $('#category').on('change', filter);

            function debounce(func, wait) {
                let timeout;
                return (...args) => {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(this, args), wait);
                };
            }
        });
    </script>
@endsection

@endsection