@extends('layouts.default')
@section('content')
<section class="headerPage">
        <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>Explore All Categories</h2>
                    <p class="mb-0">Enjoy an entirely new level of driving experience with our in-depth selection of superior car bulbs, brake pads, spark plugs, and other automotive parts and accessories designed to keep your car running at its absolute best.</p>
                </div>
            </div>
        </div>
</section>
<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="categoriesHome pt-md-5 pt-4">
    <div class="container">
        <h3 class="sectionTitle text-center">Categories</h3>
        <ul class="nav nav-pills mb-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="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($data['categories']))
                        @foreach ($data['categories'] as $category)
                            @if ($category['status'] == true)
                                <div class="col-lg-3 col-sm-6 mb-4">
                                    <div class="catWrapItem text-center position-relative">
                                        <a href="sub-categories" target="_blank" class="stretched-link"></a>
                                        <img src="{{ url('/').Storage::url($category['image_path']) }}" alt="item" class="itemcat">
                                        <p>{{$category['name']}}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endif
                    <div class="col-lg-3 col-sm-6 mb-4">
                        <div class="browseMore p-4 text-center d-flex align-items-center justify-content-center">
                            <p class="d-block text-white mb-0">Browse<br>More</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-Services" role="tabpanel" aria-labelledby="pills-Services-tab">
                <div class="row">

                    @if (!empty($data['services']))
                        @foreach ($data['services'] as $service)
                            <div class="col-lg-3 col-sm-6 mb-4">
                                <div class="catWrapItem text-center position-relative">
                                    <a href="sub-categories" target="_blank" class="stretched-link"></a>
                                    @foreach (json_decode($service['image']) as $image)
                                        <img src="{{ asset('images/' . $image) }}" alt="Service">
                                    @endforeach
                                    <p>{{$service['service_title']}}</p>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    <div class="col-lg-3 col-sm-6 mb-4">
                        <div class="browseMore p-4 text-center d-flex align-items-center justify-content-center">
                            <p class="text-white mb-0">Browse<br>More</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection