@extends('frontend.master')

@section('title')
    Products
@endsection

@section('content')
    <main class="main">
        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav">
            <div class="container">
                <ul class="breadcrumb bb-no">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li><a href="">Products</a></li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of Page Content -->
        <div class="page-content">
            <div class="container">
                <!-- Start of Shop Banner -->
                <div class="shop-default-banner banner d-flex align-items-center mb-5 br-xs"
                    style="background-image: url('{{ asset('/uploads/banner/' . @$banner['product_page_banner']) }}'); height: 280px;">
                </div>
                <!-- End of Shop Banner -->


                <!-- End of Shop Brands-->

                <!-- Start of Shop Category -->


                <!-- Start of Shop Content -->
                <div class="shop-content row gutter-lg mb-10">
                    <!-- Start of Sidebar, Shop Sidebar -->
                    <aside class="sidebar shop-sidebar sticky-sidebar-wrapper sidebar-fixed">
                        <!-- Start of Sidebar Overlay -->
                        <div class="sidebar-overlay"></div>
                        <a class="sidebar-close" href="#"><i class="close-icon"></i></a>


                        <!-- Start of Sidebar Content -->
                        <div class="sidebar-content scrollable">
                            <!-- Start of Sticky Sidebar -->
                            <div class="sticky-sidebar">
                                <div class="filter-actions">
                                    <label>Filter :</label>
                                    {{-- <a href="#" class="btn btn-dark btn-link filter-clean">Clean All</a> --}}
                                </div>
                                <!-- Start of Collapsible widget -->
                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title"><span>All Categories</span></h3>
                                    <ul class="widget-body filter-items search-ul">
                                        @foreach ($categories as $category)
                                            <div class="my-5">
                                                <input class="category_id" type="radio" name="category"
                                                    {{ $category->id == @$_GET['category_id'] ? 'checked' : '' }}
                                                    id="flexRadioDefault{{ $category->id }}" value="{{ $category->id }}">

                                                <label class="form-check-label" for="flexRadioDefault{{ $category->id }}">
                                                    {{ $category->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </ul>
                                </div>
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title"><span>Price</span></h3>
                                    <div class="widget-body">
                                        <div class="price-range">
                                            <input type="number" name="min" value="{{ @$_GET['min'] }}"
                                                class="min_price text-center" placeholder="0" id="min">

                                            <span class="delimiter">-</span>

                                            <input type="number" name="max" value="{{ @$_GET['max'] }}"
                                                class="max_price text-center" placeholder="25000" id="max">

                                            <button class="btn btn-primary priceRangeBtn">Filter</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title"><span>Brand</span></h3>
                                    <ul class="widget-body filter-items item-check mt-1">
                                        @foreach ($brands as $brand)
                                            <div class="single_filter_card">
                                                <div class="form-check">
                                                    <input class="brand_id" type="radio" name="brand"
                                                        {{ $brand->id == @$_GET['brand_id'] ? 'checked' : '' }}
                                                        id="flexRadioDefault2{{ $brand->id }}"
                                                        value="{{ $brand->id }}">

                                                    <label class="form-check-label"
                                                        for="flexRadioDefault2{{ $brand->id }}">
                                                        {{ $brand->name }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </ul>
                                </div>
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                {{-- <div class="widget widget-collapsible">
                                    <h3 class="widget-title"><span>Color</span></h3>
                                    <ul class="widget-body filter-items item-check mt-1">
                                        @foreach ($colors as $color)
                                            <div class="single_filter_card">

                                                <div class="form-check">
                                                    <input class="color_id" type="radio" name="color"
                                                        {{ $color->id == @$_GET['color_id'] ? 'checked' : '' }}
                                                        id="flexRadioDefault3{{ $color->id }}"
                                                        value="{{ $color->id }}">

                                                    <label class="form-check-label"
                                                        for="flexRadioDefault3{{ $color->id }}">
                                                        {{ $color->name }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </ul>
                                </div> --}}
                                <!-- End of Collapsible Widget -->
                            </div>
                            <!-- End of Sidebar Content -->
                        </div>
                        <!-- End of Sidebar Content -->
                    </aside>
                    <!-- End of Shop Sidebar -->

                    <!-- Start of Shop Main Content -->
                    <div class="main-content">
                        <nav class="toolbox sticky-toolbox sticky-content fix-top sidebar-fixed">
                            <div class="toolbox-left">
                                <a href="#"
                                    class="btn btn-primary btn-outline btn-rounded left-sidebar-toggle
                                btn-icon-left d-block d-lg-none"><i
                                        class="w-icon-category"></i><span>Filters</span></a>

                            </div>

                            {{-- <div class="toolbox-right">
                                <div class="toolbox-item toolbox-sort select-box text-dark">
                                    <label>Sort By :</label>
                                    <select class="sort">
                                        <option selected="">Default Sorting</option>
                                        <option value="1" selected>A to Z </option>
                                        <option value="2" @selected(@$_GET['sort'] == 2)>Z to A
                                        </option>
                                        <option value="3" @selected(@$_GET['sort'] == 3)>Low to High
                                        </option>
                                        <option value="4" @selected(@$_GET['sort'] == 4)>High to Low
                                        </option>
                                    </select>

                                </div>
                            </div> --}}
                        </nav>

                        <div class="row cols-xl-5 cols-md-4 cols-sm-3 cols-2">
                            @foreach ($products as $product)
                                <x-product :product="$product" />
                            @endforeach
                        </div>

                        <div class="toolbox toolbox-pagination justify-content-between">
                            {{-- <p class="showing-info mb-2 mb-sm-0">
                                Showing<span>1-12 of 60</span>Products
                            </p> --}}

                            <p class="showing-info mb-2 mb-sm-0">
                                Showing
                                <span>{{ $products->firstItem() }} - {{ $products->lastItem() }}</span>
                                of
                                <span>{{ $products->total() }}</span>
                                results
                            </p>

                            <ul class="pagination">
                                {{ $products->links() }}
                            </ul>
                        </div>
                    </div>
                    <!-- End of Shop Main Content -->
                </div>
                <!-- End of Shop Content -->
            </div>
        </div>
        <!-- End of Page Content -->
    </main>
@endsection


@push('scripts')
    <script>
        // category search
        $('.category_id').on('click', function() {
            let categoryId = $(this).val();
            let min = $('#min').val();
            let max = $('#max').val();
            // let sort = $('.sort').val();
            let brandId = $('input[class="brand_id"]:checked').attr('value');
            let sizeId = $('input[class="size_id"]:checked').attr('value');
            let colorId = $('input[class="color_id"]:checked').attr('value');

            const searchParams = new URLSearchParams(window.location.search);
            const search = $('#search').val();

            let link = '{{ route('product-search') }}' + "?q=" + search + "&category_id=" + categoryId +
                "&brand_id=" + brandId + "&min=" + min + "&max=" + max;

            location.href = link;
        });

        // brand search
        $('.brand_id').on('click', function() {
            let brandId = $(this).val();
            let min = $('#min').val();
            let max = $('#max').val();
            let categoryId = $('input[class="category_id"]:checked').attr('value');
            // let sort = $('.sort').val();

            let sizeId = $('input[class="size_id"]:checked').attr('value');
            let colorId = $('input[class="color_id"]:checked').attr('value');

            const searchParams = new URLSearchParams(window.location.search);
            const search = $('#search').val();

            let link = '{{ route('product-search') }}' + "?q=" + search + "&category_id=" + categoryId +
                "&brand_id=" + brandId + "&min=" + min + "&max=" + max;

            location.href = link;
        });

        $('.priceRangeBtn').on('click', function() {
            let brandId = $('input[class="brand_id"]:checked').attr('value');
            let min = $('#min').val();
            let max = $('#max').val();
            let categoryId = $('input[class="category_id"]:checked').attr('value');
            // let sort = $('.sort').val();

            let sizeId = $('input[class="size_id"]:checked').attr('value');
            let colorId = $('input[class="color_id"]:checked').attr('value');

            const searchParams = new URLSearchParams(window.location.search);
            const search = $('#search').val();

            let link = '{{ route('product-search') }}' + "?q=" + search + "&category_id=" + categoryId +
                "&brand_id=" + brandId + "&min=" + min + "&max=" + max;

            location.href = link;
        });

        // sortby search
        $('.sort').on('change', function() {
            let min = $('#min').val();
            let max = $('#max').val();
            let categoryId = $('input[class="category_id"]:checked').attr('value');
            let brandId = $('input[class="brand_id"]:checked').attr('value');
            // let sort = $(this).val();

            var sizeId = $('input[class="size_id"]:checked').attr('value');
            var colorId = $('input[class="color_id"]:checked').attr('value');

            const searchParams = new URLSearchParams(window.location.search);
            const search = $('#search').val();


            let link = '{{ route('product-search') }}' + "?q=" + search + "&category_id=" + categoryId +
                "&brand_id=" + brandId + "&min=" + min + "&max=" + max;

            location.href = link;
        });
    </script>
@endpush