@extends('frontend.layout.applayout')
@section('title', 'Products')
@section('main-content')
    <div class="content mt-4 list_page ">
        <div class="container mt-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">All Products</li>
                </ol>
            </nav>

        </div>
        <div class="container sec_padding pb-lg-5 healthy category bg-transparent">
            <h2 class="sec_title pb-0" style="border-bottom: none">Shop by category</h2>
            <div id="catList" class="owl-carousel owl-theme">

                @foreach ($top_categories as $category)
                    <div class="item">
                        <a href="{{ route('productByCategory', $category->slug) }}">
                            <div class="prd_box">
                                <img src="{{ asset($category->icon) }}" alt="Versova" class="img-fluid">
                                <h3>{{ $category->name }}</h3>
                            </div>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>

        <div class="container listing_wrapper mt-5">
            <div class="col-12 d-flex">
                <a href="" class="btn w-100 filter-btn shadow-none border mb-2 d-md-none d-block">
                    Product Filters
                    <i class="bx bx-filter"></i>
                </a>
                <div class="sidebar">
                    <a href=""
                        class="btn w-100 filter-btn shadow-none border d-flex justify-content-between align-itmes-center mb-2 d-md-none d-block bg-danger text-white">Close
                        Filter Categories <i class='bx bx-x fs-4'></i></a>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a class="btn btn-category" data-bs-toggle="collapse" href="#collapseExample" role="button"
                                aria-expanded="true" aria-controls="collapseExample"> Category <i
                                    class='bx bx-chevron-down pt-1 float-end'></i>
                            </a>
                            <div class="collapse show" id="collapseExample">
                                <div class="card card-body bg-white">
                                    @foreach ($top_categories as $category)
                                        <div class="form-check">

                                            <label class="form-check-label" for="category_{{ $category->id }}">
                                                <a
                                                    href="{{ route('productByCategory', $category->slug) }}">{{ $category->name }}</a>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a class="btn btn-category" data-bs-toggle="collapse" href="#collapseExample1" role="button"
                                aria-expanded="false" aria-controls="collapseExample1">
                                Brands <i class='bx bx-chevron-down pt-1 float-end'></i>
                            </a>
                            <div class="collapse {{ request()->brand != '' ? 'show' : '' }}" id="collapseExample1">
                                <div class="card card-body bg-white text-capitalize">
                                    @foreach ($brands as $brand)
                                        <div class="form-check">
                                            <input class="form-check-input brand" name="brand" type="checkbox"
                                                value="{{ $brand->id }}" id="flexCheckDefault5{{ $loop->iteration }}">
                                            <label class="form-check-label" for="flexCheckDefault5{{ $loop->iteration }}">
                                                {{ $brand->name }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a class="btn btn-category" data-bs-toggle="collapse" href="#collapseExample3" role="button"
                                aria-expanded="false" aria-controls="collapseExample3"> On Sale <i
                                    class='bx bx-chevron-down pt-1 float-end'></i> </a>
                            <div class="collapse {{ request()->sale != '' ? 'show' : '' }}" id="collapseExample3">
                                <div class="card card-body bg-white">
                                    <div class="form-check">
                                        <input class="form-check-input" id="sale" type="checkbox" name="sale"
                                            value="1">
                                        <label class="form-check-label" for="sale">
                                            On Sale
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <a class="btn btn-category" data-bs-toggle="collapse" href="#collapseExample4" role="button"
                                aria-expanded="false" aria-controls="collapseExample4"> Price <i
                                    class='bx bx-chevron-down pt-1 float-end'></i> </a>
                            <div class="collapse {{ request()->form != '' ? 'price' : '' }}" id="collapseExample4">
                                <div class="card card-body bg-white">
                                    <div class="form-check">
                                        <input class="form-check-input price" id="price1" type="radio" value="0-50"
                                            name="price_limit">
                                        <label class="form-check-label" for="price1">
                                            $0.00 - $50.00
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input price" id="price2" type="radio"
                                            value="50-100" name="price_limit">
                                        <label class="form-check-label" for="price2">
                                            $50.00 - $100.00
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input price" id="price3" type="radio"
                                            value="100-200" name="price_limit">
                                        <label class="form-check-label" for="price3">
                                            $100.00 - $200.00
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input price" id="price4" type="radio"
                                            value="200-300" name="price_limit">
                                        <label class="form-check-label" for="price4">
                                            $200.00 - $300.00
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="products_list_box">
                    @if ($products->isEmpty())
                        <div class="alert alert-warning w-100 text-center">
                            No products available.
                        </div>
                    @else
                        @foreach ($products as $product)
                            <div class="item">
                                <div class="prd-box">
                                    @if (count($product->images))
                                        <a
                                            href="{{ route('productByCategory', $product->id) . '?sku=' . $product->sku }}">
                                            <img src="{{ asset($product->images[0]->image_url) }}" class="img-fluid">
                                        </a>
                                    @else
                                        <a
                                            href="{{ route('productByCategory', $product->id) . '?sku=' . $product->sku }}">
                                            <img src="{{ asset('frontend/assets/images/cash-carry.png') }}"
                                                class="img-fluid product-thumb"> </a>
                                    @endif
                                    <div class="prd-desc">
                                        <span class="brand_name"> <b>Brand:</b> {{ $product->brand_name->name ?? 'N/A' }}
                                        </span>
                                        <span class="d-block prd-name">
                                            <a
                                                href="{{ route('productByCategory', $product->id) . '?sku=' . $product->sku }}">
                                                {{ $product->name }} </a>
                                        </span>
                                    </div>
                                    @if (Auth::guard('customer')->check())
                                        <div class="product_grid_pricing d-flex">
                                            <p class="pe-2 mb-1" style="color: rgb(79, 71, 173)">Price</p>

                                            <span class="price">${{ number_format($product->price ?? 0, 2) }}</span>
                                        </div>
                                    @endif
                                    <div class="detail-addtocart">
                                        <div class="number">
                                            <div class="input-group">
                                                <a data-id="{{ $product->id }}" type="button"
                                                    class="d-flex justify-content-center align-items-center button-plus qtyDecrement">-</a>
                                                <input type="text" step="1" max="" value="1"
                                                    name="quantity" id="quantity-{{ $product->id }}"
                                                    class="quantity-field quantity-{{ $product->id }}">
                                                <a data-id="{{ $product->id }}" type="button"
                                                    class="d-flex justify-content-center align-items-center button-minus qtyIncrement">+</a>
                                            </div>
                                            <a class="add_to_cart addToCart" data-id="{{ $product->id }}">
                                                <i class='bx bx-cart-add'></i> Add
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="pagination-container" style="text-align: right;">
                {{ $products->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            var table = {
                is_new: '',
                is_best_seller: '',
                brand: '',
                price: '',
                sale: '',
            }

            $(document).ready(function() {
                let brands = new URLSearchParams(window.location.search).get("brand");
                let price = new URLSearchParams(window.location.search).get("price");
                let sale = new URLSearchParams(window.location.search).get("sale");

                if (brands) {
                    $('.brand').each(function() {
                        var arr = brands.split(',');
                        if (arr.indexOf($(this).val()) !== -1) {
                            $(this).prop('checked', true);
                        }
                    });
                }
                if (price) {
                    $('.price').each(function() {
                        if ($(this).val() == price) {
                            $(this).prop('checked', true);
                        }
                    });
                }
                if (sale) {
                    if ($('#sale').val() == sale) {
                        $('#sale').prop('checked', true);
                    }
                }

                $('.brand').on('change', function() {
                    var selectedBrands = [];
                    $('.brand:checked').each(function() {
                        selectedBrands.push($(this).val());
                    });
                    table.brand = selectedBrands;
                    filter('brand', selectedBrands.toString());
                });

                $('.price').on('change', function() {
                    var selectedPrice = $(this).val();
                    table.price = selectedPrice;
                    filter('price', selectedPrice);
                });

                $('#sale').on('change', function() {
                    var saleValue = $(this).is(':checked') ? $(this).val() : '';
                    table.sale = saleValue;
                    filter('sale', saleValue);
                });




                $(document).on('click', '.sorting', function() {
                    var column = $(this).data('column');
                    var sort = $(this).data('sort');
                    table.sortBy = column;
                    table.sortOrder = sort;
                    applyFilters();
                });

                $(".filter-btn").click(function(e) {
                    e.preventDefault();
                    $(".sidebar").toggleClass("open");
                });

            });

            function filter(key, value) {
                let uri = window.location.href;
                let url = '';
                var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
                var separator = uri.indexOf('?') !== -1 ? "&" : "?";
                if (uri.match(re)) {
                    if (value) {
                        url = uri.replace(re, '$1' + key + "=" + value + '$2');
                    } else {
                        url = uri.replace(re, '$1$2').replace(/(&|\?)$/, '');
                    }
                } else if (value) {
                    url = uri + separator + key + "=" + value;
                } else {
                    url = uri;
                }
                window.location.href = url;
            }

            function applyFilters() {
                let uri = window.location.href;
                let params = new URLSearchParams(window.location.search);
                if (table.brand) params.set("brand", table.brand);
                if (table.price) params.set("price", table.price);
                if (table.sale) params.set("sale", table.sale);
                if (table.sortOrder !== '') params.set("order", table.sortOrder);
                if (table.sortBy !== '') params.set("sort", table.sortBy);
                window.location.href = uri.split('?')[0] + '?' + params.toString();
            }
        </script>
        <script>
            $('#catList').owlCarousel({
                loop: true,
                margin: 20,
                nav: true,
                dots: false,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    700: {
                        items: 4
                    },
                    1000: {
                        items: 5
                    },
                    1600: {
                        items: 6
                    },
                    1700: {
                        items: 7
                    }
                }
            });
        </script>
    @endpush
@endsection