@extends('front.layouts.app')

@section('content')

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg"
             style="background-image: url({{asset('front/assets/images/backgrounds/page-header-bg.jpg')}})">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="index.html">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Shop</li>
                </ul>
                <h2>Products</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Product Start-->
    <section class="product">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-3">
                    <div class="product__sidebar">
                        <div class="shop-search product__sidebar-single">
                            <form action="{{route('arabiaMobiles.shop')}}">
                                <input type="text" name="q"
                                       value="{{request()->has('q')?request()->get('q'):""}}"
                                       placeholder="Search">
                                <input type="hidden" value="{{request()->has('page')?request()->get('page'):1}}"
                                       name="page">
                                @if(request()->has('cat'))
                                    <input type="hidden" value="{{request()->get('cat')}}"
                                           name="cat">
                                @endif

                                @if(request()->has('brand_id'))
                                    <input type="hidden" value="{{request()->get('brand_id')}}"
                                           name="brand_id">
                                @endif
                                <input type="hidden" readonly name="max"
                                       value="{{request()->has('max')?request()->get('max'):2000}}" class="max">
                                <input type="hidden" readonly name="min"
                                       value="{{request()->has('min')?request()->get('min'):0}}" class="min">
                            </form>
                        </div>
                        <div class="product__price-ranger product__sidebar-single">
                            <h3 class="product__sidebar-title">Price</h3>
                            <div class="price-ranger">
                                <div id="slider-range"></div>
                                <div class="ranger-min-max-block">
                                    <form action="{{route('arabiaMobiles.shop')}}">
                                        <input type="text" readonly name="min"
                                               value="{{request()->has('min')?request()->get('min'):0}}" class="min">
                                        <span>-</span>
                                        <input type="text" readonly name="max"
                                               value="{{request()->has('max')?request()->get('max'):2000}}" class="max">
                                        <input type="submit" value="Filter">
                                        @if(request()->has('cat'))
                                            <input type="hidden" value="{{request()->get('cat')}}"
                                                   name="cat">
                                        @endif

                                        @if(request()->has('brand_id'))
                                            <input type="hidden" value="{{request()->get('brand_id')}}"
                                                   name="brand_id">
                                        @endif
                                        <input type="hidden" name="q"
                                               value="{{request()->has('q')?request()->get('q'):""}}"
                                               placeholder="Search">
                                        <input type="hidden" value="{{request()->has('page')?request()->get('page'):1}}"
                                               name="page">
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="shop-category product__sidebar-single">
                            <h3 class="product__sidebar-title">Categories</h3>
                            <ul class="list-unstyled">
                                @foreach($categories as $category)
                                    <li>
                                        <a href="#">{{ $category->name }}</a>
                                        @if($category->SubCategories->count() > 0)
                                            <ul class="subcategories list-unstyled">
                                                @foreach($category->SubCategories as $subcategory)
                                                    <li>
                                                        <a href="{{ url()->current() . '?' . http_build_query(request()->except('cat')) }}&cat={{$subcategory->id}}">{{ $subcategory->name }}</a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="shop-brand product__sidebar-single">
                            <h3 class="product__sidebar-title">Brands</h3>
                            <div class="brand-buttons">
                                @foreach($brands as $brand)
                                    <a href="{{ url()->current() . '?' . http_build_query(request()->except('brand_id')) }}&brand_id={{$brand->id}}"
                                       class="brand-button">{{ $brand->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-9 col-lg-9">
                    <div class="product__items">

                        @if(sizeof($products)>0)
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="product__showing-result">
                                        <div class="product__showing-text-box">
                                            <p class="product__showing-text">Showing {{ $products->firstItem() }}
                                                –{{ $products->lastItem() }} of {{ $products->total() }} results</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="product__all">
                            <div class="row">
                                @if(sizeof($products)==0)
                                    <div class="col-xl-12">
                                        <div class="alert alert-warning text-center">
                                            No Products!
                                        </div>
                                    </div>
                                @endif
                                @foreach($products as $product)
                                    <!--Product All Single Start-->
                                    <div class="col-xl-4 col-lg-4 col-md-6">
                                        <div class="product__all-single">
                                            <div class="product__all-img">
                                                <img src="{{asset($product->product_photo)}}" alt="">
                                            </div>
                                            <div class="product__all-content">
                                                <h4 class="product__all-title"><a
                                                        href="{{route('arabiaMobiles.product-details',['id'=>$product->id])}}">{{$product->product_name}}</a>
                                                </h4>
                                                <p class="product__all-price">${{$product->price}}</p>
                                                <div class="product__all-btn-box">
                                                    <a
                                                        href="{{route('arabiaMobiles.product-details',['id'=>$product->id])}}"
                                                        class="thm-btn product__all-btn">Details</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--Product All Single End-->
                                @endforeach

                                {!! view('front.pages.paging',['items'=>$products])->render() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .custom-select {
            display: inline-block;
            width: 100%;
            max-width: 250px;
            padding: 8px 16px;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            background-color: #f8f8f8;
            border: 1px solid #ccc;
            border-radius: 4px;
            appearance: none;
            cursor: pointer;
        }

        .custom-select:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

        .shop-category .subcategories {
            display: none; /* Hide subcategories by default */
            padding-left: 15px; /* Indent subcategories slightly */
            margin-top: 5px;
        }

        .shop-category li:hover .subcategories,
        .shop-category li:focus-within .subcategories {
            display: block; /* Show subcategories on hover */
        }

        .shop-category .subcategories li {
            padding: 5px 0;
        }

        .shop-category ul li a {
            color: #0b4f74; /* Set category name color */
            text-decoration: none; /* Remove underline for a cleaner look */
            font-weight: bold; /* Optional: Make the font bold */
        }

        .shop-category ul li a:hover {
            color: #085066; /* Slightly darker color on hover for better UX */
        }

        /* Brands Section */
        .brand-buttons {
            display: flex;
            flex-direction: column;
        }

        .brand-button {
            background-color: #f0f0f0;
            color: #333;
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            margin-bottom: 10px;
            transition: background-color 0.3s, color 0.3s;
        }

        .brand-button:hover {
            background-color: #0b4f74;
            color: #fff;
        }
    </style>

    <!--Product End-->
@endsection


@push('js')
    <script>
        $(document).ready(() => {
            @if (request()->has('min') && \request()->has('max'))
            setTimeout(() => {
                $(".price-ranger #slider-range").slider({
                    range: true,
                    min: 0,
                    max: 2000,
                    values: [{{str_replace('$','',request()->get('min'))}}, {{str_replace('$','',request()->get('max'))}}],
                    slide: function (event, ui) {
                        $(".price-ranger .ranger-min-max-block .min").val(
                            "$" + ui.values[0]
                        );
                        $(".price-ranger .ranger-min-max-block .max").val(
                            "$" + ui.values[1]
                        );
                    },
                });
                $(".price-ranger .ranger-min-max-block .min").val(
                    `{{request()->get('min')}}`
                );
                $(".price-ranger .ranger-min-max-block .max").val(
                    `{{request()->get('max')}}`
                );
            }, 1000);
            @endif
        });

@endpush