@extends('layouts.default')
@section('content')
<div class="modal" id="loadPagePopup" tabindex="-1" aria-labelledby="loadPagePopupLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content text-center p-lg-5 p-4">
      <div class="modal-body">
        <h3 class="modalTitle mb-4">Welcome,</h3>
        <p class="">To help us provide you with the most relevant information about our services,
        please select your preferred location from the options available</p>
        <div class="selectCity mt-5 px-md-4">
            <form action="">
                <select class="form-select" aria-label="city-make" required>
                        <option selected>Select Your Location</option>
                        <option value="1">All Country</option>
                        @if (!empty($locations))
                            @foreach ($locations as $location)
                                <option value="{{$location['name']}}">{{$location['name']}}</option>
                            @endforeach
                        @endif
                </select>
                <div class="mt-5 px-md-2 d-flex-align-items-center justify-content-center">
                    <button type="submit" class="btnMain welcomeBtnLcl mx-2 mb-3" data-bs-dismiss="modal">Get Started</button>
                    <button type="button" class="btnMain welcomeBtnLcl mx-2 mb-3" data-bs-dismiss="modal">skip</button>
                </div>
            </form>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="homeHero">
    <div id="heroSection" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ asset('assets/images/slidehero.png') }}" class="d-block w-100" alt="slide">
                <div class="carousel-caption">
                    <h5>We Give You,</h5>
                    <h2>Quality Auto Repaire</h2>
                    <p>Auto Painting & Collision Repair Shop. We help you turn the car you drive back into the car you love!</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{{ asset('assets/images/slidehero2.png') }}" class="d-block w-100" alt="slide">
                <div class="carousel-caption">
                    <h5>Best Repairing</h5>
                    <h2>Fully Satisfaction</h2>
                    <p>Auto Painting & Collision Repair Shop. We help you turn the car you drive back into the car you love!</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{{ asset('assets/images/slidehero3.png') }}" class="d-block w-100" alt="slide">
                <div class="carousel-caption">
                    <h5>Power Sound Looks</h5>
                    <h2>can I have it all with back</h2>
                    <p>Cat back exhausts start behind the catalytic converter. We explain the  performance benefits, and important factors to know when making a final product decision.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroSection" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroSection" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>
<section class="HeroSearch">
    <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="categoriesHome sectionSpac">
    <div class="container">
        <h3 class="sectionTitle text-center">Categories</h3>
        <ul class="nav nav-pills my-md-5 my-3 justify-content-center" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-Items-tab" data-bs-toggle="pill" data-bs-target="#pills-Items" type="button" role="tab" aria-controls="pills-Items" aria-selected="true">Items</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-Services-tab" data-bs-toggle="pill" data-bs-target="#pills-Services" type="button" role="tab" aria-controls="pills-Services" aria-selected="false">Services</button>
            </li>
        </ul>
        <div class="row">
            <div class="col-md-3 mb-4">
                <div class="cateOffers p-4 d-flex flex-column justify-content-center">
                    <h5 class="discountText fw-bold text-white">15%<br>Discount</h5>
                    <h2 class="text-uppercase text-white fw-bold">offer</h2>
                    <h5 class="discountText text-white">Mechanic Services</h5>
                    <a href="#" class="btnMain">Order Now</a>
                </div>
            </div>
            <div class="col-md-9">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-Items" role="tabpanel" aria-labelledby="pills-Items-tab">
                        <div class="row">
                            @if (!empty($categories))
                                @foreach ($categories as $category)
                                    <div class="col-lg-4 col-sm-6 mb-4">
                                        <div class="catWrapItem text-center position-relative">
                                            <a href="products" target="_blank" class="stretched-link"></a>
                                            <img src="{{ url('/').Storage::url($category['image_path']) }}" alt="item" class="itemcat">
                                            <p>{{$category['name']}}</p>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <div class="col-lg-4 col-sm-6 mb-4">
                                <div class="browseMore p-4 text-center d-flex align-items-center justify-content-center">
                                    <a href="categories" target="_blank" class="d-block text-white mb-0">Browse<br>More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-Services" role="tabpanel" aria-labelledby="pills-Services-tab">
                        <div class="row">
                            @if(!empty($services))
                                @foreach ($services as $service)
                                    <div class="col-lg-4 col-sm-6 mb-4">
                                        <div class="catWrapItem text-center position-relative">
                                            <a href="products" target="_blank" class="stretched-link"></a>
                                            @if ($service->images->count() > 0)
                                                <img src="{{ asset('images/' . $service->images[0]['file_name']) }}" alt="item" class="itemcat">
                                            @endif
                                            <p>{{$service['service_title']}}</p>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <div class="col-lg-4 col-sm-6 mb-4">
                                <div class="browseMore p-4 text-center d-flex align-items-center justify-content-center">
                                <a href="categories" target="_blank" class="d-block text-white mb-0">Browse<br>More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="saleBanners sectionSpac">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="row">
                    <div class="col-lg-12 col-md-6 mb-4">
                        <div class="saleBanner saleBanner1">
                            <h5 class="discountText fw-bold text-white">Flat</h5>
                            <h2 class="text-uppercase fw-bold text-white">Sale</h2>
                            <h5 class="discountText">Wheel Balancing</h5>
                            <a href="#" target="_blank" class="btnMain">Order Now</a>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-6 mb-4 mb-md-0">
                        <div class="saleBanner saleBanner2">
                            <h5 class="discountText fw-bold text-white">Top</h5>
                            <h2 class="text-uppercase text-white fw-bold">Ranking</h2>
                            <h5 class="discountText">Exhaust Repairs</h5>
                            <a href="#" target="_blank" class="btnMain">Order Now</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4 mb-md-0">
                <div class="saleBanner saleBanner3 mb-4 mb-md-0">
                    <h5 class="discountText fw-bold text-white">Super</h5>
                    <h2 class="text-uppercase text-white fw-bold">Sale</h2>
                    <h5 class="discountText">Headlight Repairing</h5>
                    <a href="#" target="_blank" class="btnMain">Order Now</a>
                </div>
            </div>
            <div class="col-lg-3 mb-4 mb-md-0">
                <div class="row">
                    <div class="col-lg-12 col-md-6 mb-4">
                        <div class="saleBanner saleBanner4">
                            <h5 class="discountText fw-bold text-white">HOT</h5>
                            <h2 class="text-uppercase text-white fw-bold">Deals</h2>
                            <h5 class="discountText">Suspension Repairs</h5>
                            <a href="#" target="_blank" class="btnMain">Order Now</a>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-6">
                        <div class="saleBanner saleBanner5">
                            <h5 class="discountText fw-bold text-white">21% Off</h5>
                            <h2 class="text-uppercase text-white fw-bold">Discount</h2>
                            <h5 class="discountText">Floor Mat Changing</h5>
                            <a href="#" target="_blank" class="btnMain">Order Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="BestSeller sectionSpac">
    <div class="container">
        <h3 class="sectionTitle text-center mb-4"><span class="me-2">Best</span>Sellers</h3>
        <div class="homeProducts">
            @if (!empty($items))
                @foreach ($items as $item)
                    <div class="homePrdWrap">
                        <a href="singleproduct" target="_blank" class="overflow-hidden d-block">
                            @if(!empty($item['images']))
                                <img src="{{ asset('images/' . $item['images'][0]['file_name']) }}" alt="item" class="producths">
                            @endif
                        </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="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>
                @endforeach
            @endif
        </div>
    </div>
</section>
<section class="justlanuched sectionSpac">
    <div class="container">
        <h3 class="sectionTitle text-center mb-4"><span class="me-2">Just</span>Launched</h3>
        <div class="homeProducts">
            @if (!empty($items))
                @foreach ($items as $item)
                    <div class="homePrdWrap">
                        <a href="singleproduct" target="_blank" class="overflow-hidden d-block">
                            @if (!empty($item['images']))
                                <img src="{{ asset('images/' . $item['images'][0]['file_name']) }}" alt="item" class="producths">
                            @endif
                        </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="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>
                @endforeach
            @endif
        </div>
    </div>
</section>
<section class="BestSeller sectionSpac">
    <div class="container">
        <h3 class="sectionTitle text-center mb-4"><span class="me-2">Most</span>Trending</h3>
        <div class="homeProducts">
            @if (!empty($items))
                @foreach ($items as $item)
                    <div class="homePrdWrap">
                        <a href="singleproduct" target="_blank" class="overflow-hidden d-block">
                            @if (!empty($item['images']))
                                <img src="{{ asset('images/' . $item['images'][0]['file_name']) }}" alt="item" class="producths">
                            @endif
                        </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="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>
                @endforeach
            @endif
        </div>
    </div>
</section>
<section class="partsSvs text-center sectionSpac">
    <div class="container">
        <h3 class="sectionTitle text-center mb-5"><span class="me-2">YOUR SERVICES AND</span>PARTS IN ONE WALLET</h3>
        <div class="brandautoplays text-center">
            @if(!empty($brands))
                @foreach ($brands as $brand)
                    @if($brand['status'] == true)
                        <a class="brandSlide" href="categories">
                            <div class="brandImg"><img src="{{ url('/').Storage::url($brand['image_path']) }}" alt="Tesla" class="brandimage"></div>
                            <p class="mb-0 brandName">{{$brand['name']}}</p>
                        </a>
                    @endif
                @endforeach
            @endif
        </div>
        <a href="vehical-brands" target="_blank" class="btnMain mt-5">View All Vehicle Brands</a>
    </div>
</section>
<section class="bottomBannerSlider sectionSpac pb-5">
    <div class="container">
        <div class="btmSliderHome">
            <div class="btmSlideh btmSlideh1 p-3 p-lg-5">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                         <h5 class="headingh5">Exclusive Variety of</h5>
                         <h2 class="headingName">Auto Car<br> Spare Parts</h2>
                         <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Quis est duis sit non eleifenc. Vestibulm feugiat diam auctor
                            vitae dictum id sed dui</p>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{ asset('assets/images/btmslide1.png') }}" alt="Chevorlet" class="btmslideimg">
                    </div>
                </div>
            </div>
            <!-- end slide -->
            <div class="btmSlideh btmSlideh2 p-3 p-lg-5">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                         <h5 class="headingh5">Exclusive variety of</h5>
                         <h2 class="headingName">Auto Car<br> Spare Parts</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Quis est duis sit non eleifenc. Vestibulm feugiat diam auctor
                            vitae dictum id sed dui</p>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{ asset('assets/images/btmslide2.png') }}" alt="Chevorlet" class="btmslideimg">
                    </div>
                </div>
            </div>
            <!-- end slide -->
            <div class="btmSlideh btmSlideh3 p-3 p-lg-5">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                         <h5 class="headingh5">Exclusive Variety Of</h5>
                         <h2 class="headingName">Auto Car<br> Spare Parts</h2>
                         <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Quis est duis sit non eleifenc. Vestibulm feugiat diam auctor
                            vitae dictum id sed dui</p>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{ asset('assets/images/btmslide3.png') }}" alt="Chevorlet" class="btmslideimg">
                    </div>
                </div>
            </div>
            <!-- end slide -->
        </div>
    </div>
</section>
@endsection
@push('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

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

        function homePageItems(){
            $(document).on('click', '.addToCart', function(e){
                e.preventDefault();
                let itemId = $(this).data('id');
                // let price = $(this)[0]?.previousElementSibling.children[0].nextSibling.textContent;
                $.ajax({
                    type:'POST',
                    url: "{{route('add-to-cart.store')}}",
                    data:{
                        itemId: itemId,
                        // price: price
                    },
                    success:function(data) {
                        if(data.success === true){
                            $('.cartCount').text(data.qty_count);
                        }
                    }
                });
            });
        }

    </script>
@endpush