@extends('layouts.default')
@section('content')
<section class="HeroSearch notAbshearch">
    <div class="container">
        <form class="row">
            <div class="col-md-3 col-6 mb-3">
                <select class="form-select" aria-label="loc-make">
                    <option selected>Make</option>
                    <option value="1">Audi</option>
                    <option value="2">Toyota</option>
                    <option value="3">Honda</option>
                    <option value="3">Mercedes</option>
                    <option value="3">Nissan</option>
                    <option value="3">Chevrolet</option>
                    <option value="3">Ford</option>
                    <option value="3">Kia</option>
                </select>
            </div>
            <div class="col-md-3 col-6 mb-3">
                <select class="form-select" aria-label="loc-year">
                    <option selected>Model</option>
                    <option value="1">2023</option>
                    <option value="2">2022</option>
                    <option value="3">2021</option>
                    <option value="3">2020</option>
                    <option value="3">2019</option>
                    <option value="3">2018</option>
                    <option value="3">2017</option>
                    <option value="3">2016</option>
                </select>
            </div>
            <div class="col-md-3 col-6 mb-3">
                <select class="form-select" aria-label="loc-year">
                    <option selected>Year</option>
                    <option value="1">2023</option>
                    <option value="2">2022</option>
                    <option value="3">2021</option>
                    <option value="3">2020</option>
                    <option value="3">2019</option>
                    <option value="3">2018</option>
                    <option value="3">2017</option>
                    <option value="3">2016</option>
                </select>
            </div>
            <div class="col-md-3 col-6 mb-3">
                <button type="submit" class="btnMain w-100">Search</button>
            </div>
        </form>
    </div>
</section>
{{-- <button class="test"> test</button> --}}
<section class="productsWrap mt-4 py-4">
    <div class="container">
        <div class="productListGrid mb-4 text-end">
            <div class="listGridWrap d-flex align-items-center justify-content-end">
                <div class="listGrid girdclk active me-2"><i class="fa-solid fa-grip-vertical"></i><i class="fa-solid fa-grip-vertical"></i></div>
                <div class="listGrid listclk"><i class="fa-solid fa-list"></i></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <section class="filtersProducts">
                    <div class="openFilter align-items-center justify-content-center text-white">Filters<i class="fa-solid fa-angle-up ms-3"></i></div>
                    <div class="filtersList cstScroll">
                        <!-- <div class="filterWraps mb-5">
                            <div class="filterTitle d-flex justify-content-between align-items-center mb-3 pb-4">Brand
                                <span class="closeFilter"><i class="fa-solid fa-xmark"></i></span>
                            </div>
                            <div class="checklist">
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Honda">
                                    <label class="form-check-label d-flex position-relative" for="Honda">Honda</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Toyota">
                                    <label class="form-check-label d-flex position-relative" for="Toyota">Toyota</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Hyundai">
                                    <label class="form-check-label d-flex position-relative" for="Hyundai">Hyundai</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Chevrolet">
                                    <label class="form-check-label d-flex position-relative" for="Chevrolet">Chevrolet</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Mercedes">
                                    <label class="form-check-label d-flex position-relative" for="Mercedes">Mercedes</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Nissan">
                                    <label class="form-check-label d-flex position-relative" for="Nissan">Nissan</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Audi">
                                    <label class="form-check-label d-flex position-relative" for="Audi">Audi</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="BMW">
                                    <label class="form-check-label d-flex position-relative" for="BMW">BMW</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Ford">
                                    <label class="form-check-label d-flex position-relative" for="Ford">Ford</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Bentley">
                                    <label class="form-check-label d-flex position-relative" for="Bentley">Bentley</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Dodge">
                                    <label class="form-check-label d-flex position-relative" for="Dodge">Dodge</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Lamborghini">
                                    <label class="form-check-label d-flex position-relative" for="Lamborghini">Lamborghini</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Jaguar">
                                    <label class="form-check-label d-flex position-relative" for="Jaguar">Jaguar</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Jeep">
                                    <label class="form-check-label d-flex position-relative" for="Jeep">Jeep</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Range Rover">
                                    <label class="form-check-label d-flex position-relative" for="Range Rover">Range Rover</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Land Rover">
                                    <label class="form-check-label d-flex position-relative" for="Land Rover">Land Rover</label>
                                </div>
                                <div class="moreOptionsOpen"></div>
                                <div class="viewMore mt-4">View More</div>
                            </div>
                        </div> -->
                        <!-- end of brands -->
                        <div class="filterWraps mb-5">
                            <div class="filterTitle d-flex justify-content-between align-items-center mb-3 pb-4">Price
                                <span class="toggleFilter"><i class="fa-solid fa-angle-up"></i></span>
                            </div>
                            <form class="filterBody range">
                                <div class="range-price">
                                    <div class="rangeInput me-1"> <label for="min">$ Min</label>
                                    <input type="number" name="min" value="300"></div>
                                    <div class="rangeInput ms-1"><label for="max">$ Max</label>
                                    <input type="number" name="max" value="700"></div>
                                </div>
                                <div class="range-slider">
                                    <span class="range-selected"></span>
                                </div>
                                <div class="range-input">
                                    <input type="range" class="min" min="0" max="1000" value="300" step="10">
                                    <input type="range" class="max" min="0" max="1000" value="700" step="10">
                                </div>
                                <button class="mainBtn w-100 text-uppercase">Go</button>
                            </form>
                        </div>
                        <!-- end of price -->
                        <div class="filterWraps mb-5">
                            <div class="filterTitle d-flex justify-content-between align-items-center mb-3 pb-4">Categories
                                <span class="toggleFilter"><i class="fa-solid fa-angle-down"></i></span>
                            </div>
                            <div class="filterBody checklist">
                                @if (!empty($categories))
                                    @foreach ($categories as $category)
                                        <div class="form-check mb-2 ps-0">
                                            <input class="form-check-input d-none" type="checkbox" value="" id="{{trim($category, ' ')}}">
                                            <label class="form-check-label d-flex position-relative" for="{{trim($category, ' ')}}">{{ucfirst($category['name'])}}</label>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <!-- categories -->
                        <div class="filterWraps mb-5">
                            <div class="filterTitle d-flex justify-content-between align-items-center mb-3 pb-4">Services
                                <span class="toggleFilter"><i class="fa-solid fa-angle-down"></i></span>
                            </div>
                            <div class="filterBody checklist">
                                @if (!empty($services))
                                    @foreach ($services as $service)
                                        <div class="form-check mb-2 ps-0">
                                            <input class="form-check-input d-none" type="checkbox" value="" id="{{trim($service['id'], ' ')}}">
                                            <label class="form-check-label d-flex position-relative" for="{{trim($service['service_title'], ' ')}}">{{ucfirst($service['service_title'])}}</label>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <!-- services -->
                        <div class="filterWraps mb-5">
                            <div class="filterTitle d-flex justify-content-between align-items-center mb-3 pb-4">Rating
                                <span class="toggleFilter"><i class="fa-solid fa-angle-down"></i></span>
                            </div>
                            <div class="filterBody checklist ratingchklist">
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="4andup">
                                    <label class="form-check-label d-flex position-relative" for="4andup">
                                        <span class="ratingStars me-3">
                                            <i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star"></i>
                                        </span>
                                        4 and Up
                                    </label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="3andup">
                                    <label class="form-check-label d-flex position-relative" for="3andup">
                                        <span class="ratingStars me-3">
                                            <i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star"></i>
                                        </span>
                                        3 and Up
                                    </label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="2andup">
                                    <label class="form-check-label d-flex position-relative" for="2andup">
                                        <span class="ratingStars me-3">
                                            <i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                        </span>
                                        2 and Up
                                    </label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="notrated">
                                    <label class="form-check-label d-flex position-relative" for="notrated">Not Yet Rated</label>
                                </div>
                            </div>
                        </div>
                        <!-- Rating -->
                    </div>
                </section>
            </div>
            <div class="col-lg-9">
                <div class="row productList">
                    @if (!empty($items))
                        @foreach ($items as $item)
                            <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                                <div class="homePrdWrap">
                                    <a href="{{route('singleproduct', $item->id)}}" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                        <img src="{{ asset('images/' . $item->images[0]->file_name) }}" alt="item" class="producths">
                                    </a>

                                    <div class="productDet p-4">
                                        <span class="prodCat mb-1">{{ucfirst($item->categories)}}</span>
                                        <p class="mb-2 prodName">{{$item->item_title}}</p>
                                        <div class="prodRating mb-3">
                                            <div class="ratingStars">
                                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                            </div>
                                            <div class="ratingReviews">
                                                (3 Reviews)
                                            </div>
                                        </div>
                                        <p class="listText d-none">{{$item->description}}</p>
                                    <p class="productPrice mb-3">
                                            <span class="d-inline-block me-2">Price:</span>${{$item->price}}
                                        </p>
                                        <button data-bs-toggle="modal" data-bs-target="#cartModal" data-id="{{$item['id']}}" class="addToCart btnMain w-100">Add To Cart</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                    <!-- end of product div -->
                </div>
                <section class="pagination mt-4">
                    <div class="container text-end">
                        <div class="paginatinoWrap d-inline-flex justify-content-center align-items-center">
                            <div class="selectPage d-flex me-4 align-items-center">
                                <p class="mb-0 me-4">Rows per page:</p>
                                <select id="pageSelect" class="form-select" aria-label="pagin">
                                    <option selected>1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <div class="pageNums me-4">
                                <span class="me-1">1-5</span>of<span  class="ms-1">12</span>
                            </div>
                            <div class="pagiArrows">
                                <a><i class="fa-solid fa-angle-left arrowbackward me-4"></i></a>
                                <a><i class="fa-solid fa-angle-left me-4"></i></a>
                                <a><i class="fa-solid fa-angle-right me-4"></i></a>
                                <a><i class="fa-solid fa-angle-right arrowForward"></i></a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>


@endsection
@push('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function(){
            productPageItems()
        });

        function productPageItems(){
            $(document).on('click', '.addToCart', function(e){
                // alert('Add to cart');
                let itemId = $(this).attr('data-id');
                // console.log(itemId);
                // let price = $(this)[0]?.previousElementSibling.children[0].nextSibling.textContent;
                $.ajax({
                    type:'POST',
                    url: "{{route('add-to-cart.store')}}",
                    data:{
                        itemId: itemId,
                    },
                    success:function(data) {
                        console.log(data);
                            var cartData = data.cartData;

                            // Select the miniCart div
                            // var miniCart = $('#miniCart');

                            // miniCart.find('.cardItems').html('');

                            // let price = 0;
                            // cartData.forEach(function(item) {

                            //     price += parseFloat(item.price);

                            //     // var firstImage = item.images[0]

                            //     var itemHtml = `
                            //         <ul class="m-0 p-0 cardItems">
                            //             <li class="cartItem py-4 d-flex align-items-center">
                            //                 <img src="{{ asset('images') }}/" alt="product" class="productImg me-3">
                            //                 <div class="productMeta">
                            //                     <h5 class="productTitle mb-1">${item.item_title}</h5>
                            //                     <p class="productPrice mb-0"><span class="fw-bold me-2">Price: </span>$${item.price}</p>
                            //                 </div>
                            //                 <div class="removeItem ms-4">
                            //                     <i data-id="${item.id}" class="removeCart fa-regular fa-circle-xmark"></i>
                            //                 </div>
                            //             </li>
                            //         </ul>
                            //     `;
                            //     miniCart.prepend(itemHtml);
                            // });

                            // // Update the subtotal
                            // const total = price.toFixed(2);
                            // // console.log(total);
                            // // minicart.find('#subtotalprice').text('$' + total);
                            // miniCart.find('.subTotalCart .price').text('$' + total);

                            // miniCart.find('.Subtotalprice').find('subTotalCart').text('price');
                            // miniCart.find('.Subtotalprice').text('$' + data.cartInfo.cartSubtotal);}
                    }
                });
            });
        }

        $('.test').click(function() {
            // alert("click");
        let itemId = 1;

            $.ajax({
                    type:'get',
                    url: '/testItem',

                    // data:{
                    //     itemId: itemId,
                    //     // price: price
                    // },
                    success:function(data) {
                        // if(data.success === true){
                            console.log(data);
                        // }
                    }
                });
        });


    </script>
@endpush