@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>       
<section class="productsWrap servicewrap mt-5 py-4">
    <div class="container">
        <h3 class="sectionTitle mb-5 text-center"><span class="me-1">Popular</span>Services</h3>
        <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">
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="oil">
                                    <label class="form-check-label d-flex position-relative" for="oil">Oil, Fluids Lubricant</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="engine">
                                    <label class="form-check-label d-flex position-relative" for="engine">Car Engine Ignition</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="transmission">
                                    <label class="form-check-label d-flex position-relative" for="transmission">Transmission System</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Subwoofer">
                                    <label class="form-check-label d-flex position-relative" for="Subwoofer">Hi Bass Subwoofer</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="hitech">
                                    <label class="form-check-label d-flex position-relative" for="hitech">Hi Tech Horns System</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="carglass">
                                    <label class="form-check-label d-flex position-relative" for="carglass">Car Glass Wiper</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="door">
                                    <label class="form-check-label d-flex position-relative" for="door">Vertical Door System</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="startingsys">
                                    <label class="form-check-label d-flex position-relative" for="startingsys">Engine Starting System</label>
                                </div>
                            </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">
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="alloyrim">
                                    <label class="form-check-label d-flex position-relative" for="alloyrim">Customized Alloy Rim</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="repairs">
                                    <label class="form-check-label d-flex position-relative" for="repairs">Headlights Repairs</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="tire">
                                    <label class="form-check-label d-flex position-relative" for="tire">Tire Replacement</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Exhaust">
                                    <label class="form-check-label d-flex position-relative" for="Exhaust">Exhaust System Repairing</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Suspension">
                                    <label class="form-check-label d-flex position-relative" for="Suspension">Suspension System Repai...</label>
                                </div>
                                <div class="form-check mb-2 ps-0">
                                    <input class="form-check-input d-none" type="checkbox" value="" id="Floor">
                                    <label class="form-check-label d-flex position-relative" for="Floor">Floor Mats Changing</label>
                                </div>
                            </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 serviceList">
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product4.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product1.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product2.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product3.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product4.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product1.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product2.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product3.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product4.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product1.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product2.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- end of product div -->
                    <div class="singlePrdList col-lg-4 col-md-6 mb-4">
                        <div class="homePrdWrap">
                            <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                                <img src="{{ asset('assets/images/product3.jpg') }}" alt="item" class="producths">
                            </a>
                            <div class="productDet p-4">
                                <span class="prodCat mb-1">Wheels & Rims</span>
                                <p class="mb-2 prodTitle fw-bold">Customized Alloy Rim </p>
                                <p class="listText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                                <a href="singleservice" class="btnMain ">Details</a>
                            </div>
                        </div>
                    </div>
                    <!-- 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