@extends('website.includes.master')

@section('title')
    Shop
@endsection

@section('content')

    <!-- Start Product Grid -->
    <section class="htc__product__grid bg__white ptb--100 pt-1">
        <div class="container">
            <div class="row">
                <!-- Toggle Button for Mobile View -->
                <div class="col-12 d-lg-none mb-3">
                    <button class="btn btn-dark w-100" onclick="toggleFilter()" id="filterToggleBtn"
                            data-visible="false" style="background-color:black !important">
                        SHOW FILTERS
                    </button>
                </div>
                <div class="col-lg-3 col-md-12 d-none d-lg-block" id="fiterPart">
                    <form action="" method="get" class="MyForm">
                        <div class="htc__product__leftsidebar">
                            <h2><b>Filter Products</b></h2>

                            <br>

                            <div class="row">
                                <div class="col-lg-12">
                                    <input type="text" placeholder=" Search Product" name="name"
                                           class="form-control mb-3"
                                           value="{{ ($request->name) ? $request->name : '' }}"
                                           style="height:60px">
                                </div>
                            </div>

                            <div class="row">
                                {{--                                <div class="col-lg-6">--}}
                                {{--                                    <input type="text" placeholder="Minimum" name="minimum"--}}
                                {{--                                           class="form-control mb-3"--}}
                                {{--                                           value="{{ ($request->minimum) ? $request->minimum : '' }}"--}}
                                {{--                                           style="height:60px">--}}
                                {{--                                </div>--}}
                                {{--                                <div class="col-lg-6">--}}
                                {{--                                    <input type="text" placeholder="Maximum" name="maximum"--}}
                                {{--                                           class="form-control mb-3"--}}
                                {{--                                           value="{{ ($request->maximum) ? $request->maximum : '' }}"--}}
                                {{--                                           style="height:60px">--}}
                                {{--                                </div>--}}

                                <!-- Start Prize Range -->
                                <div class="htc-grid-range mb-2">
                                    <h4 class="title__line--4">Price</h4>
                                    <div class="content-shopby">
                                        <div class="price_filter s-filter clear">
                                            <div id="slider-range"></div>
                                            <div class="slider__range--output">
                                                <div class="price__output--wrap">
                                                    <div class="price--output">
                                                        <span>Price :</span><input type="text" name="amount" id="amount" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Prize Range -->

                            </div>

                            <div class="row">
                                <div class="col-lg-12" style="margin-top:-30px">
                                    <div class="htc__category">
                                        <h4 class="title__line--4">categories</h4>
                                        <ul class="ht__cat__list">
                                            @forelse($categories as $cc=>$category)
                                                <li>
                                                    <h3>
                                                        @if(isset($request->categories) && !empty($request->categories) && in_array($category->id,$request->categories))
                                                            <input checked type="checkbox" value="{{ $category->id }}"
                                                                   name="categories[]" id="c{{ $cc }}">
                                                        @else
                                                            <input type="checkbox" value="{{ $category->id }}"
                                                                   name="categories[]" id="c{{ $cc }}">
                                                        @endif
                                                        <label for="c{{ $cc }}"> {{ $category->name }}</label>
                                                    </h3>
                                                </li>
                                            @empty
                                            @endforelse
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-2">

                                <div class="col-lg-12">
                                    <button class="btn btn-dark w-100 MyHover My30Radius MyButton"
                                            style="height:60px;background-color: black">
                                        FILTER
                                    </button>
                                    <br>
                                    <a href="{{ route('shop') }}" class="btn btn-dark w-100 MyHover My30Radius"
                                       style="height:60px;background-color: black;padding-top:15px;margin-top:10px">
                                        RESET
                                    </a>
                                </div>
                            </div>


                        </div>
                    </form>
                </div>
                <div class="col-lg-9 order-lg-last col-md-12 order-md-first">
                    <div class="htc__product__rightidebar">
                        <!-- Start Product View -->
                        <div class="shop__grid__view__wrap">
                            <div role="tabpanel" id="grid-view"
                                 class="single-grid-view tab-pane fade show active clearfix">
                                <div class="row">
                                    @forelse($allproducts as $allproduct)
                                        <div class="col-md-3 col-6" style="margin-top:-30px !important">
                                            <div class="category">
                                                <div class="ht__cat__thumb">
                                                    @if(!empty($allproduct->discount))
                                                        <div class="sale-tag MyHover">{{ $allproduct->discount }}%</div>
                                                    @endif
                                                    <a href="{{ route('product_detail',[$allproduct->slug]) }}">
                                                        <img
                                                            src="{{ URL::asset('admin/assets/uploads/'.$allproduct->image) }}"
                                                            style="width:100%;height:auto;min-height:260px;max-height:260px"
                                                            alt="product images">
                                                    </a>
                                                </div>
                                                <div class="fr__hover__info">
                                                    <ul class="product__action">
                                                        @if($allproduct->stock=="in stock")
                                                            <li><a onclick="ShowLoader()" href="{{ route('user.add_to_cart_single',[$allproduct->id]) }}"><i
                                                                        class="icon-handbag icons" style="color:#000000"></i></a>
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                                <div class="fr__product__inner">
                                                    <h4><a href="">{{ $allproduct->name }}</a></h4>
                                                    <ul class="fr__pro__prize">
                                                        @if(!empty($allproduct->cut_price))
                                                            <li class="old__prize">
                                                                <del>{{ $setting->currency_symbol }}{{ $allproduct->cut_price }}</del>
                                                            </li>
                                                        @endif
                                                        <li>{{ $setting->currency_symbol }}{{ $allproduct->price }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <center>
                                            <h2>No products available</h2>
                                        </center>
                                    @endforelse
                                </div>
                            </div>

                        </div>
                        <!-- End Product View -->
                    </div>
                    <!-- Start Pagenation -->
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="htc__pagenation">
                                @if ($allproducts->lastPage() > 1)
                                    @if($allproducts->currentPage() == 1)
                                        <li><a disabled="" style="border-radius: 1px !important;cursor: not-allowed"><i
                                                    class="zmdi zmdi-chevron-left"></i></a></li>
                                    @else
                                        <li><a href="{{ $allproducts->url(1) }}" style="border-radius: 1px !important;"><i
                                                    class="zmdi zmdi-chevron-left"></i></a></li>
                                    @endif

                                    @for ($i = 1; $i <= $allproducts->lastPage(); $i++)
                                        @if($allproducts->currentPage() == $i)
                                            <li class="active"><a style="border-radius: 1px !important;">{{ $i }}</a>
                                            </li>
                                        @else
                                            <li><a href="{{ $allproducts->url($i) }}"
                                                   style="border-radius: 1px !important;">{{ $i }}</a></li>
                                        @endif
                                    @endfor

                                    @if($allproducts->currentPage() == $allproducts->lastPage())

                                        <li><a disabled="" style="border-radius: 1px !important;cursor: not-allowed"><i
                                                    class="zmdi zmdi-chevron-right"></i></a></li>
                                    @else
                                        <li><a href="{{ $allproducts->url($allproducts->currentPage()+1) }}"
                                               style="border-radius: 1px !important;"><i
                                                    class="zmdi zmdi-chevron-right"></i></a></li>
                                    @endif

                                @endif
                            </ul>
                        </div>
                    </div>
                    <!-- End Pagenation -->
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Grid -->

@endsection
@section('script')

    <!-- JavaScript to toggle the filter visibility -->
    <script>
        function toggleFilter() {
            const filterPart = document.getElementById("fiterPart");
            const filterToggleBtn = document.getElementById("filterToggleBtn");

            // Toggle visibility of the filter part
            filterPart.classList.toggle("d-none");

            // Update button text based on current visibility
            if (filterPart.classList.contains("d-none")) {
                filterToggleBtn.textContent = "SHOW FILTERS";
            } else {
                filterToggleBtn.textContent = "HIDE FILTERS";
            }
        }
    </script>

    <script>
        $("#slider-range").slider({
            range: true,
            min: 10,
            max: 2000,
            values: [0, 2000],
            slide: function(event, ui) {
                $("#amount").val("{{ $setting->currency_symbol }}" + ui.values[0] + " - {{ $setting->currency_symbol }}" + ui.values[1]);
            }
        });
        $("#amount").val("{{ $setting->currency_symbol }}" + $("#slider-range").slider("values", 0) +
            " - {{ $setting->currency_symbol }}" + $("#slider-range").slider("values", 1));
    </script>
@endsection