{{-- resources/views/livewire/categories-page.blade.php --}}
<div>

    <section class="banner">
        <img src="{{ asset('assets/welcome/img/banner.jpg') }}" alt="" class="img-fluid">
    </section>

    <section class="cart">
        <div class="container">
            <div id="page-content-wrapper">
                <div class="row">

                    {{-- Main content --}}
                    <div class="col-xs-12 col-md-12 bg-white">
                        <div class="row mb-3 justify-content-end">
                            {{-- Category dropdown --}}
                            <div class="col-lg-3 col-md-12 col-xs-12 text-right">
                                <form class="form-inline category" onsubmit="return false;">
                                    <div class="form-group">
                                        <div class="input-group" style="margin-bottom:0;">
                                            <select class="form-control" wire:model.live="selected_category">
                                                <option value="">--Category--</option>
                                                @foreach($allCategories as $cat)
                                                    <option value="{{ $cat->id }}">{{ $cat->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            {{-- Sort --}}
                            <div class="col-lg-3 col-md-12 col-xs-12 text-right">
                                <form class="form-inline category" onsubmit="return false;">
                                    <div class="form-group">
                                        <div class="input-group" style="margin-bottom:0;">
                                            <select id="list_sort_by" class="form-control" wire:model.live="sort">
                                                <option value="">--select--</option>
                                                <option value="popularity">Popularity</option>
                                                <option value="desc">high to low</option>
                                                <option value="asc">low to high</option>
                                                <option value="latest">Latest</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- Product Grid (your variant-card) --}}
                        <div class="row">
                            @forelse($products as $product)
                                <div class="col-xl-2 col-lg-3 col-md-4 col-6">
                                    @livewire('partials.variant-card', ['variant' => $product], key($product->id))
                                </div>
                            @empty
                                <div class="col-12 py-5 text-center">
                                    <em>No products found.</em>
                                </div>
                            @endforelse
                        </div>

                        {{-- Pagination --}}
                        <div class="row">
                            <div class="col-12 d-flex justify-content-center">
                                {{ $products->links() }}
                            </div>
                        </div>
                    </div> {{-- /.bg-white --}}

                </div> {{-- /.row --}}
            </div> {{-- /#page-content-wrapper --}}
        </div> {{-- /.container --}}
    </section>

    {{-- Modal unchanged --}}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div id="service_request-modal-body" class="modal-body">
                    <iframe width="420" height="315"
                            src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
                </div>
            </div>
        </div>
    </div>

</div>