@extends('user.master')

@section('title', 'Home')

@section('content')
    <!-- Banner Section Start -->
    <div class="container-fluid p-0">
        <div class="impl_banner_section">
            <div class="impl_banner_wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="impl_banner_text">
                                <h6>Find Cars For Sale And For Rent Near You</h6>
                                <h1>Find Your Dream Car</h1>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="impl_banner_pane" id="tab-1" style="display:block;">
                                <form class="impl_banner_form" id="homeSearchForm">
                                    <div class="impl_banner_dropdown">
                                        <span>
                                            <select name="brand" id="makes-tab1">
                                                <option value="">All Makes</option>
                                                @if (isset($brands) && $brands->count() > 0)
                                                    @foreach ($brands as $brand)
                                                        <option value="{{ $brand->id }}">{{ $brand->brand_name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </span>
                                        <span>
                                            <select name="car_model_id" id="models-tab1">
                                                <option value="">All Models</option>
                                                @if (isset($carModels) && $carModels->count() > 0)
                                                    @foreach ($carModels as $carModel)
                                                        <option value="{{ $carModel->id }}">{{ $carModel->model_name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </span>
                                        <span>
                                            <select name="body_type" id="body_type_home">
                                                <option value="">Body Type</option>
                                                @if (isset($allBodyTypes) && $allBodyTypes->count() > 0)
                                                    @foreach ($allBodyTypes as $bodyType)
                                                        <option value="{{ $bodyType->id }}">{{ $bodyType->body_type_name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </span>
                                    </div>
                                    <div class="impl_banner_btn">
                                        <button type="submit" class="impl_btn">Search Cars</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="impl_banner_slider">
                                <div class="swiper" dir="rtl">
                                    <div class="swiper-wrapper">
                                        @if (isset($sliders) && $sliders->count() > 0)
                                            @foreach ($sliders as $slider)
                                                <div class="swiper-slide">
                                                    <div class="impl_banner_img">
                                                        <img src="{{ $slider->image_url }}" alt="{{ $slider->title }}"
                                                            class="img-fluid">
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            {{-- Fallback placeholder if no sliders --}}
                                            <div class="swiper-slide">
                                                <div class="impl_banner_img">
                                                    <img src="https://via.placeholder.com/967x321" class="img-fluid"
                                                        loading="lazy">
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Section End -->
    <!-- Browse By Type Section Start -->
    <div class="impl_section_wrapper impl_type_wrapper">
        <div class="container">
            <div class="row" data-aos="zoom-in">
                <div class="col-12">
                    <div class="impl_section_heading">
                        <h3>Browse By Brand</h3>
                    </div>
                </div>
                <div class="col-12">
                    <div class="impl_type_slider">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($brands as $brand)
                                    <div class="swiper-slide">
                                        <a href="{{ route('user.listing', ['brand' => $brand->id]) }}" class="impl_type_box">
                                            <div class="impl_type_img">
                                                <img src="{{ $brand->logo_url }}" alt="{{ $brand->brand_name }}"
                                                    class="img-fluid" loading="lazy">
                                            </div>
                                            <div class="impl_type_text">
                                                <p>{{ $brand->brand_name }}</p>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Browse By Type Section End -->
    <!-- Ad Section Start -->
    @if ($bannerBR1 || $bannerBR2)
        <div class="impl_section_wrapper impl_ad_wrapper">
            <div class="container">
                <div class="row">
                    @if ($bannerBR1)
                        <div class="col-md-6" data-aos="fade-right">
                            <div class="impl_ad_box box-1"
                                style="min-height: 350px; display: flex; align-items: center; justify-content: center;">
                                <div class="impl_ad_text">

                                </div>
                                {{-- Image removed as per requirement --}}
                            </div>
                        </div>
                    @endif
                    @if ($bannerBR2)
                        <div class="col-md-6" data-aos="fade-left">
                            <div class="impl_ad_box box-2"
                                style="min-height: 350px; display: flex; align-items: center; justify-content: center;">
                                <div class="impl_ad_text">

                                </div>
                                {{-- Image removed as per requirement --}}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
    <!-- Ad Section End -->
    <!-- About Section Start -->
    <div class="container-fluid impl_bg_container">
        <div class="impl_section_wrapper impl_about_wrapper">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-7" data-aos="zoom-in-right">
                        <div class="impl_about_img">
                            <img src="{{ asset('theme/assets/images/about_img.png') }}" class="img-fluid"
                                loading="lazy">
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-5" data-aos="zoom-in-left">
                        <div class="impl_about_heading">
                            <p>About Patel Brothers Car Dealers</p>
                            <h3>Trusted Car Dealers & Reliable Car Rental Services in Your City</h3>
                        </div>

                        <div class="impl_about_text">
                            <p>
                                Patel Brothers Car Dealers is a trusted name in car rental and vehicle dealing, offering
                                well-maintained
                                cars at affordable prices. We are committed to providing a smooth, transparent, and
                                hassle-free car
                                rental experience for individuals, families, and business customers.
                            </p>
                            <p>
                                Whether you need a car for daily use, travel, events, or long-term rental, Patel Brothers
                                Car Dealers
                                ensures quality vehicles, honest pricing, and customer-focused service.
                            </p>
                        </div>

                        <ul class="impl_about_list">
                            <li>Affordable car rental services with well-maintained vehicles</li>
                            <li>Transparent pricing with no hidden charges</li>
                            <li>Trusted local car dealer with customer satisfaction focus</li>
                        </ul>

                        <div class="impl_about_btn">
                            <a href="{{ route('user.about') }}" class="impl_btn">Read More</a>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- About Section End -->
    <!-- Explore Section Start -->
    <div class="impl_section_wrapper impl_explore_wrapper">
        <div class="container">
            <div class="row" data-aos="fade-up">
                <div class="col-12">
                    <div class="impl_section_heading">
                        <h3>Explore All Vehicles</h3>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="impl_fiter_tab">
                        @foreach ($allBodyTypes as $index => $bodyType)
                            <li>
                                <a href="javascript:void(0);" class="impl_btn {{ $index === 0 ? 'active' : '' }}"
                                    id="{{ $bodyType->slug ?? strtolower(str_replace(' ', '-', $bodyType->body_type_name)) }}">{{ $bodyType->body_type_name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-12">
                    <div class="impl_fiter_pane">
                        <div class="row">
                            <!-- Empty state message (hidden by default) -->
                            <div class="col-12 impl_empty_state" style="display: none;">
                                <div class="text-center py-5">
                                    <div class="mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round" style="color: #ccc;">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                            <circle cx="12" cy="10" r="3"></circle>
                                        </svg>
                                    </div>
                                    <h4 class="mb-3" style="color: #666; font-weight: 600;">No vehicles found</h4>
                                    <p class="mb-0" style="color: #999;">We don't have any vehicles in this category at
                                        the moment. Please check back later or browse other categories.</p>
                                </div>
                            </div>
                            @forelse($exploreCars as $car)
                                @php
                                    $bodyTypeSlug =
                                        $car->bodyType->slug ??
                                        strtolower(str_replace(' ', '-', $car->bodyType->body_type_name ?? ''));
                                @endphp
                                <div class="col-xl-4 col-md-6 {{ $bodyTypeSlug }}">
                                    <div class="impl_explore_card">
                                        <div class="impl_explore_box">
                                            <div class="impl_explore_img">
                                                <img src="{{ $car->main_image_url ?? 'https://via.placeholder.com/370x250' }}"
                                                    class="img-fluid"
                                                    alt="{{ $car->brand->brand_name ?? '' }} {{ $car->carModel->model_name ?? '' }}"
                                                    loading="lazy">
                                                <div class="impl_veh_price">
                                                    <h5>₹{{ number_format($car->price, 0) }}</h5>
                                                </div>
                                                <ul class="impl_explore_links">
                                                    <li>
                                                        <a href="{{ route('user.listing.show', $car->slug) }}" title="View Details">
                                                            <img src="{{ asset('theme/assets/images/eye.png') }}"
                                                                class="img-fluid">
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="impl_explore_detail">
                                                <div class="impl_explore_text">
                                                    <a href="{{ route('user.listing.show', $car->slug) }}">
                                                        <h6>{{ $car->brand->brand_name ?? '' }}
                                                            {{ $car->carModel->model_name ?? '' }} {{ $car->year ?? '' }}
                                                        </h6>
                                                    </a>
                                                    <p>{{ Str::limit(strip_tags($car->description ?? 'Premium quality vehicle'), 50) }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="impl_explore_bottom">
                                            <div class="impl_explore_info">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 30"
                                                    width="36" height="30" xmlns:v="https://vecta.io/nano">
                                                    <path
                                                        d="M5.67 6.329a.69.69 0 0 0 .486-.198l.007-.007a.69.69 0 0 0 .152-.222.68.68 0 0 0 .054-.263c0-.09-.017-.18-.051-.264a.69.69 0 0 0-.637-.429c-.091 0-.181.017-.265.051a.69.69 0 0 0-.226.148l-.007.007c-.097.096-.164.218-.191.352s-.014.272.038.398a.69.69 0 0 0 .254.31c.114.076.248.116.385.116v.002zm29.58 8.981a17.54 17.54 0 0 0-3.402-8.284 17.69 17.69 0 0 0-7.059-5.551A17.79 17.79 0 0 0 15.896.091a17.76 17.76 0 0 0-8.427 3.143c-.15.105-.251.266-.282.445s.012.364.118.513a.69.69 0 0 0 .448.28c.181.031.366-.012.516-.117l.679-.454 1.72 2.961c-1.503.976-2.784 2.253-3.764 3.748L3.924 8.9a16.07 16.07 0 0 1 1.01-1.411c.114-.143.167-.324.146-.506s-.113-.347-.256-.46-.326-.166-.509-.145a.69.69 0 0 0-.463.255 17.54 17.54 0 0 0-3.804 9.654c-.264 3.525.546 7.047 2.324 10.108a3.08 3.08 0 0 0 .788.925 3.1 3.1 0 0 0 1.086.55 3.11 3.11 0 0 0 1.216.09c.407-.051.8-.182 1.156-.385a3.08 3.08 0 0 0 .916-.799c.249-.324.431-.695.534-1.09s.127-.806.069-1.21a3.06 3.06 0 0 0-.407-1.142c-1.009-1.74-1.541-3.714-1.54-5.722a11.41 11.41 0 0 1 1.543-5.722 11.48 11.48 0 0 1 4.213-4.189c1.75-1.005 3.734-1.534 5.755-1.535a11.68 11.68 0 0 1 2.087.188l-2.696 7.092a4.24 4.24 0 0 0-2.463 1.275c-.653.688-1.053 1.576-1.136 2.519s.157 1.886.68 2.676 1.3 1.383 2.203 1.68a4.25 4.25 0 0 0 2.776-.041 4.22 4.22 0 0 0 2.152-1.744c.499-.806.711-1.755.6-2.695a4.19 4.19 0 0 0-1.211-2.484 4.4 4.4 0 0 0-.369-.327l1.23-7.486c1.592.562 3.04 1.466 4.241 2.646a11.44 11.44 0 0 1 2.71 4.186 11.37 11.37 0 0 1 .667 4.934 11.4 11.4 0 0 1-1.502 4.749 3.06 3.06 0 0 0-.282 2.318 3.07 3.07 0 0 0 1.439 1.846c.706.403 1.541.514 2.328.308a3.09 3.09 0 0 0 1.873-1.408 17.47 17.47 0 0 0 2.219-11.087zM6.533 24.019a1.69 1.69 0 0 1-.122 1.888 1.72 1.72 0 0 1-.503.438 1.71 1.71 0 0 1-.634.212 1.72 1.72 0 0 1-.667-.046 1.71 1.71 0 0 1-.598-.298 1.7 1.7 0 0 1-.437-.503 16 16 0 0 1-2.175-7.419h3.428a12.84 12.84 0 0 0 1.708 5.728zm-1.617-8.091c-.044.329-.074.659-.091.989H1.399a16.66 16.66 0 0 1 .125-1.428 16.25 16.25 0 0 1 1.711-5.396l2.976 1.708a12.72 12.72 0 0 0-1.296 4.126zm13.973-1.419l-.549 3.335a.47.47 0 0 1-.078.182c-.039.055-.088.1-.146.135a.74.74 0 0 1-.861-.044.73.73 0 0 1-.193-.235.47.47 0 0 1-.035-.386l1.2-3.154.005-.012 1.207-3.172-.55 3.351zm.826 5.097a2.85 2.85 0 0 1-1.037.657c-.39.141-.806.196-1.219.161a2.86 2.86 0 0 1-1.174-.365 2.84 2.84 0 0 1-.909-.823 2.82 2.82 0 0 1-.475-1.128 2.8 2.8 0 0 1 .048-1.222c.106-.399.297-.77.561-1.088a2.84 2.84 0 0 1 .97-.751l-.746 1.959a1.82 1.82 0 0 0 .098 1.499 2.14 2.14 0 0 0 .556.675 2.16 2.16 0 0 0 .781.398 2.11 2.11 0 0 0 .539.07 2.16 2.16 0 0 0 1.158-.335c.221-.137.41-.319.555-.534a1.83 1.83 0 0 0 .286-.713l.34-2.068a2.82 2.82 0 0 1 .488 1.863 2.83 2.83 0 0 1-.821 1.744zM10.143 3.21a16.27 16.27 0 0 1 6.868-1.822v3.42a12.85 12.85 0 0 0-5.148 1.365l-1.72-2.963zm11.271.619c-.166-.044-.342-.025-.495.053a.69.69 0 0 0-.331.37l-.303.795c-.624-.126-1.256-.205-1.892-.238v-3.42a16.29 16.29 0 0 1 6.868 1.822L23.54 6.173a12.62 12.62 0 0 0-1.763-.732l.137-.836a.68.68 0 0 0-.101-.483.69.69 0 0 0-.4-.292v-.002zm3.323 3.034l1.721-2.965a16.46 16.46 0 0 1 5.026 5.001l-2.983 1.712a12.82 12.82 0 0 0-1.685-2.068 13 13 0 0 0-2.079-1.679zm4.456 4.938l2.982-1.712a16.14 16.14 0 0 1 1.704 5.399 16.22 16.22 0 0 1 .126 1.428h-3.426a12.64 12.64 0 0 0-.091-.989 12.73 12.73 0 0 0-1.295-4.126h0zm2.639 13.909a1.71 1.71 0 0 1-1.035.794c-.437.118-.903.058-1.296-.166a1.7 1.7 0 0 1-.798-1.029 1.69 1.69 0 0 1 .167-1.289 12.86 12.86 0 0 0 1.708-5.729h3.43a16.01 16.01 0 0 1-2.175 7.42h0zm-9.982-1.345h-8.297a.69.69 0 0 0-.488.201c-.129.129-.203.303-.203.485v2.202a.69.69 0 0 0 .202.486c.129.129.306.201.489.201h8.297c.091 0 .181-.018.265-.052a.69.69 0 0 0 .224-.149.7.7 0 0 0 .15-.223.68.68 0 0 0 .053-.263V25.05a.69.69 0 0 0-.203-.485c-.129-.129-.305-.201-.488-.2zm-.691 2.198h-6.914v-.825h6.914v.825zM7.483 16.916c-.18.005-.351.079-.477.208s-.196.3-.196.48.07.351.196.48.297.203.477.208H7.5c.18-.005.351-.079.477-.208s.196-.301.196-.48-.07-.351-.196-.48-.297-.203-.477-.208h-.017zm5.718-8.44l-.008-.014a.69.69 0 0 0-.419-.321c-.177-.048-.366-.023-.525.068a.69.69 0 0 0-.323.417c-.048.176-.023.364.068.522l.008.014a.69.69 0 0 0 .419.321.7.7 0 0 0 .269.018c.09-.012.177-.041.255-.086a.69.69 0 0 0 .203-.177c.055-.072.096-.153.12-.24a.68.68 0 0 0 .018-.268.69.69 0 0 0-.086-.254zm9.958-.264a.7.7 0 0 0-.255-.087c-.09-.012-.181-.006-.269.017a.68.68 0 0 0-.242.118c-.072.055-.133.123-.178.202l-.008.014c-.092.158-.117.345-.07.521a.69.69 0 0 0 .322.418c.159.091.347.116.525.069a.69.69 0 0 0 .42-.32l.008-.014a.68.68 0 0 0 .069-.522.69.69 0 0 0-.322-.418zm4.746 10.081h.016c.183 0 .359-.072.489-.201s.202-.304.202-.486a.69.69 0 0 0-.691-.687h-.016c-.183 0-.359.072-.489.201s-.203.304-.203.486.073.357.203.486.305.201.489.201zm-7.783 10.332h-2.837c-.092-.003-.184.013-.27.047a.69.69 0 0 0-.386.373c-.036.085-.054.176-.054.268s.018.183.054.268a.69.69 0 0 0 .155.225c.066.064.145.114.231.148s.178.049.27.047h2.837c.18-.005.351-.079.477-.208s.196-.3.196-.48-.07-.351-.196-.48-.297-.203-.477-.208zm-4.823 0h-.016c-.183 0-.359.072-.489.201s-.202.304-.202.486a.69.69 0 0 0 .202.486c.129.129.306.201.489.201h.016c.183 0 .359-.072.489-.201s.202-.304.202-.486a.69.69 0 0 0-.202-.486c-.129-.129-.306-.201-.489-.201z" />
                                                </svg>
                                                <h6>{{ $car->km_driven ?? '0' }} Km</h6>
                                            </div>
                                            <div class="impl_explore_info">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                                    xmlns:v="https://vecta.io/nano">
                                                    <path
                                                        d="M16.892 3.547H5.424a.75.75 0 0 0-.533.221c-.141.142-.221.333-.221.533v6.089a.75.75 0 0 0 .221.533c.142.141.333.221.533.221h11.468a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533V4.301a.75.75 0 0 0-.221-.533c-.142-.141-.333-.221-.533-.221zm-.754 6.089H6.177V5.054h9.961v4.581zm-4.636 3.63c-.106-.055-.224-.083-.344-.083s-.238.028-.344.083c-1.515.779-2.419 2.126-2.419 3.607 0 1.342.743 2.575 2.01 3.374v1.906a.75.75 0 0 0 .221.533c.142.141.333.221.533.221a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533v-1.906c1.267-.798 2.01-2.032 2.01-3.373 0-1.48-.904-2.828-2.419-3.607zm-.344 5.672c-.795-.52-1.256-1.27-1.256-2.066s.463-1.546 1.256-2.066c.794.52 1.256 1.271 1.256 2.066s-.463 1.546-1.256 2.066zM30 13.168V9.621a.75.75 0 0 0-.222-.532l-3.547-3.547-.003-.003-1.654-1.654a.74.74 0 0 0-.244-.182.76.76 0 0 0-.297-.07.75.75 0 0 0-.3.053.76.76 0 0 0-.255.168.75.75 0 0 0-.221.555.76.76 0 0 0 .07.297.74.74 0 0 0 .182.244l1.434 1.434v3.591a3.95 3.95 0 0 0 3.547 3.926v6.139h-3.753v-1.02a.75.75 0 0 0-.221-.533c-.142-.141-.333-.221-.533-.221H21.19V2.527a2.53 2.53 0 0 0-.741-1.786A2.53 2.53 0 0 0 18.665 0H3.65a2.53 2.53 0 0 0-2.527 2.527v22.419H.754a.75.75 0 0 0-.533.221C.08 25.309 0 25.5 0 25.7v3.547a.75.75 0 0 0 .221.533c.142.141.333.22.533.22h20.808a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533V25.7a.75.75 0 0 0-.221-.533c-.142-.141-.333-.221-.533-.221h-.369V23.32h2.793a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533v-1.02h4.507a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533v-7.626zm-9.192 15.325h-19.3v-2.039h19.301v2.039zM2.63 24.946V2.527a1.02 1.02 0 0 1 1.02-1.02h15.015a1.02 1.02 0 0 1 1.02 1.02v22.419H2.63zm20.601-3.133h-2.04v-2.039h2.04v2.039zm3.221-11.838V7.892l2.039 2.039v2.448a2.44 2.44 0 0 1-2.039-2.403z" />
                                                </svg>
                                                <h6>{{ $car->fuelType->fuel_type_name ?? 'N/A' }}</h6>
                                            </div>
                                            <div class="impl_explore_info">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                                    xmlns:v="https://vecta.io/nano">
                                                    <path
                                                        d="M3.516 22.969A3.52 3.52 0 0 0 0 26.484 3.52 3.52 0 0 0 3.516 30a3.52 3.52 0 0 0 3.516-3.515 3.52 3.52 0 0 0-3.515-3.515zm0 4.687c-.311 0-.608-.124-.828-.343s-.343-.517-.344-.828.124-.609.343-.828a1.17 1.17 0 0 1 1.656-.001 1.18 1.18 0 0 1 .344.829c.001.311-.124.608-.344.828a1.17 1.17 0 0 1-.828.343zm24.139-4.486V6.83c.782-.276 1.441-.82 1.86-1.536a3.52 3.52 0 0 0 .433-2.373c-.14-.817-.565-1.559-1.199-2.093S27.313 0 26.483 0a3.51 3.51 0 0 0-2.266.828c-.634.535-1.059 1.276-1.199 2.093s.013 1.658.433 2.373 1.079 1.259 1.86 1.536v6.999h-9.14V6.83a3.52 3.52 0 0 0 2.344-3.314A3.52 3.52 0 0 0 15 .001a3.52 3.52 0 0 0-3.516 3.515 3.52 3.52 0 0 0 2.344 3.314v6.999H5.859a1.17 1.17 0 0 1-.828-.344 1.18 1.18 0 0 1-.344-.828V6.83a3.52 3.52 0 0 0 2.344-3.314A3.52 3.52 0 0 0 3.516.001a3.52 3.52 0 0 0-2.485 1.031A3.52 3.52 0 0 0 0 3.516 3.52 3.52 0 0 0 2.344 6.83v5.827a3.52 3.52 0 0 0 3.516 3.516h7.968v6.998A3.52 3.52 0 0 0 15 30a3.52 3.52 0 0 0 1.171-6.829v-6.998h9.14v6.998c-.782.276-1.441.82-1.86 1.536a3.52 3.52 0 0 0-.433 2.373c.14.817.565 1.559 1.199 2.093a3.52 3.52 0 0 0 2.266.828c.829 0 1.632-.293 2.266-.828s1.059-1.276 1.199-2.093-.013-1.658-.433-2.373-1.079-1.259-1.86-1.536zM14.999 2.344a1.17 1.17 0 0 1 .828.344 1.18 1.18 0 0 1 .344.828 1.17 1.17 0 0 1-.343.828 1.18 1.18 0 0 1-.828.344 1.17 1.17 0 0 1-.828-.344 1.17 1.17 0 0 1 .001-1.656c.22-.22.517-.343.828-.344zm-11.484 0a1.17 1.17 0 0 1 .828.344 1.18 1.18 0 0 1 .344.828c.001.31-.124.609-.344.828a1.18 1.18 0 0 1-.828.344c-.31.001-.609-.124-.828-.344s-.343-.518-.343-.828.124-.608.343-.828.517-.343.828-.344zm11.484 25.312c-.311 0-.608-.124-.828-.343s-.343-.517-.344-.828a1.17 1.17 0 0 1 1.172-1.172c.311 0 .609.124.829.343a1.17 1.17 0 0 1-.829 2zM26.484 2.344a1.17 1.17 0 0 1 1.15 1.4 1.17 1.17 0 0 1-1.598.854 1.17 1.17 0 0 1-.38-1.911 1.18 1.18 0 0 1 .828-.344zm0 25.312a1.17 1.17 0 0 1-.829-2 1.17 1.17 0 0 1 1.277-.254 1.17 1.17 0 0 1 .379 1.911 1.17 1.17 0 0 1-.828.343z" />
                                                </svg>
                                                <h6>{{ $car->transmission->transmission_name ?? 'N/A' }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="alert alert-info text-center">
                                        <h5>No cars found</h5>
                                        <p>Please check back later for available vehicles.</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Explore Section End -->
    <!-- We offer Section Star -->

    <!-- Explore Section End -->
    <!-- We offer Section Star -->
    <div class="container-fluid impl_bg_container">
        <div class="impl_offer_wrapper">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="impl_offer_box">
                            <div class="impl_offer_icon">
                                <img src="{{ asset('theme/assets/images/offer-1.png') }}" class="img-fluid">
                            </div>
                            <div class="impl_offer_text">
                                <h4><span class="counter"
                                        data-speed="1000">{{ $websiteSetting->cars_for_sale_count ?? 356 }}</span> M</h4>
                                <p>Cars For Sale</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="impl_offer_box">
                            <div class="impl_offer_icon">
                                <img src="{{ asset('theme/assets/images/offer-2.png') }}" class="img-fluid">
                            </div>
                            <div class="impl_offer_text">
                                <h4><span class="counter"
                                        data-speed="1000">{{ $websiteSetting->dealer_reviews_count ?? 546 }}</span> M</h4>
                                <p>Dealer Reviews</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="impl_offer_box">
                            <div class="impl_offer_icon">
                                <img src="{{ asset('theme/assets/images/offer-3.png') }}" class="img-fluid">
                            </div>
                            <div class="impl_offer_text">
                                <h4><span class="counter"
                                        data-speed="1000">{{ $websiteSetting->visitors_per_day_count ?? 956 }}</span> M
                                </h4>
                                <p>Visitors Per Day</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="impl_offer_box">
                            <div class="impl_offer_icon">
                                <img src="{{ asset('theme/assets/images/offer-4.png') }}" class="img-fluid">
                            </div>
                            <div class="impl_offer_text">
                                <h4><span class="counter"
                                        data-speed="1000">{{ $websiteSetting->verified_dealers_count ?? 856 }}</span> M
                                </h4>
                                <p>Verified Dealers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- We offer Section End -->
    <!-- Popular Makes Section Start -->
    <div class="impl_section_wrapper impl_makes_wrapper">
        <div class="container">
            <div class="row justify-content-center" data-aos="fade-down">
                <div class="col-12">
                    <div class="impl_section_heading">
                        <h3>Latest Cars</h3>
                    </div>
                </div>
                @forelse($latestCars as $car)
                    <div class="col-xl-4 col-md-6 ">
                        <div class="impl_explore_card">
                            <div class="impl_explore_box">
                                <div class="impl_explore_img">
                                    <img src="{{ $car->main_image_url ?? 'https://via.placeholder.com/370x250' }}"
                                        class="img-fluid"
                                        alt="{{ $car->brand->brand_name ?? '' }} {{ $car->carModel->model_name ?? '' }}"
                                        loading="lazy">
                                    <div class="impl_veh_price">
                                        <h5>₹{{ number_format($car->price, 0) }}</h5>
                                    </div>
                                    <ul class="impl_explore_links">
                                        <li>
                                            <a href="{{ route('user.listing.show', $car->slug) }}" title="View Details">
                                                <img src="{{ asset('theme/assets/images/eye.png') }}" class="img-fluid">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="impl_explore_detail">
                                    <div class="impl_explore_text">
                                        <a href="{{ route('user.listing.show', $car->slug) }}">
                                            <h6>{{ $car->brand->brand_name ?? '' }}
                                                {{ $car->carModel->model_name ?? '' }} {{ $car->year ?? '' }}
                                            </h6>
                                        </a>
                                        <p>{{ Str::limit(strip_tags($car->description ?? 'Premium quality vehicle'), 50) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="impl_explore_bottom">
                                <div class="impl_explore_info">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 30" width="36"
                                        height="30" xmlns:v="https://vecta.io/nano">
                                        <path
                                            d="M5.67 6.329a.69.69 0 0 0 .486-.198l.007-.007a.69.69 0 0 0 .152-.222.68.68 0 0 0 .054-.263c0-.09-.017-.18-.051-.264a.69.69 0 0 0-.637-.429c-.091 0-.181.017-.265.051a.69.69 0 0 0-.226.148l-.007.007c-.097.096-.164.218-.191.352s-.014.272.038.398a.69.69 0 0 0 .254.31c.114.076.248.116.385.116v.002zm29.58 8.981a17.54 17.54 0 0 0-3.402-8.284 17.69 17.69 0 0 0-7.059-5.551A17.79 17.79 0 0 0 15.896.091a17.76 17.76 0 0 0-8.427 3.143c-.15.105-.251.266-.282.445s.012.364.118.513a.69.69 0 0 0 .448.28c.181.031.366-.012.516-.117l.679-.454 1.72 2.961c-1.503.976-2.784 2.253-3.764 3.748L3.924 8.9a16.07 16.07 0 0 1 1.01-1.411c.114-.143.167-.324.146-.506s-.113-.347-.256-.46-.326-.166-.509-.145a.69.69 0 0 0-.463.255 17.54 17.54 0 0 0-3.804 9.654c-.264 3.525.546 7.047 2.324 10.108a3.08 3.08 0 0 0 .788.925 3.1 3.1 0 0 0 1.086.55 3.11 3.11 0 0 0 1.216.09c.407-.051.8-.182 1.156-.385a3.08 3.08 0 0 0 .916-.799c.249-.324.431-.695.534-1.09s.127-.806.069-1.21a3.06 3.06 0 0 0-.407-1.142c-1.009-1.74-1.541-3.714-1.54-5.722a11.41 11.41 0 0 1 1.543-5.722 11.48 11.48 0 0 1 4.213-4.189c1.75-1.005 3.734-1.534 5.755-1.535a11.68 11.68 0 0 1 2.087.188l-2.696 7.092a4.24 4.24 0 0 0-2.463 1.275c-.653.688-1.053 1.576-1.136 2.519s.157 1.886.68 2.676 1.3 1.383 2.203 1.68a4.25 4.25 0 0 0 2.776-.041 4.22 4.22 0 0 0 2.152-1.744c.499-.806.711-1.755.6-2.695a4.19 4.19 0 0 0-1.211-2.484 4.4 4.4 0 0 0-.369-.327l1.23-7.486c1.592.562 3.04 1.466 4.241 2.646a11.44 11.44 0 0 1 2.71 4.186 11.37 11.37 0 0 1 .667 4.934 11.4 11.4 0 0 1-1.502 4.749 3.06 3.06 0 0 0-.282 2.318 3.07 3.07 0 0 0 1.439 1.846c.706.403 1.541.514 2.328.308a3.09 3.09 0 0 0 1.873-1.408 17.47 17.47 0 0 0 2.219-11.087zM6.533 24.019a1.69 1.69 0 0 1-.122 1.888 1.72 1.72 0 0 1-.503.438 1.71 1.71 0 0 1-.634.212 1.72 1.72 0 0 1-.667-.046 1.71 1.71 0 0 1-.598-.298 1.7 1.7 0 0 1-.437-.503 16 16 0 0 1-2.175-7.419h3.428a12.84 12.84 0 0 0 1.708 5.728zm-1.617-8.091c-.044.329-.074.659-.091.989H1.399a16.66 16.66 0 0 1 .125-1.428 16.25 16.25 0 0 1 1.711-5.396l2.976 1.708a12.72 12.72 0 0 0-1.296 4.126zm13.973-1.419l-.549 3.335a.47.47 0 0 1-.078.182c-.039.055-.088.1-.146.135a.74.74 0 0 1-.861-.044.73.73 0 0 1-.193-.235.47.47 0 0 1-.035-.386l1.2-3.154.005-.012 1.207-3.172-.55 3.351zm.826 5.097a2.85 2.85 0 0 1-1.037.657c-.39.141-.806.196-1.219.161a2.86 2.86 0 0 1-1.174-.365 2.84 2.84 0 0 1-.909-.823 2.82 2.82 0 0 1-.475-1.128 2.8 2.8 0 0 1 .048-1.222c.106-.399.297-.77.561-1.088a2.84 2.84 0 0 1 .97-.751l-.746 1.959a1.82 1.82 0 0 0 .098 1.499 2.14 2.14 0 0 0 .556.675 2.16 2.16 0 0 0 .781.398 2.11 2.11 0 0 0 .539.07 2.16 2.16 0 0 0 1.158-.335c.221-.137.41-.319.555-.534a1.83 1.83 0 0 0 .286-.713l.34-2.068a2.82 2.82 0 0 1 .488 1.863 2.83 2.83 0 0 1-.821 1.744zM10.143 3.21a16.27 16.27 0 0 1 6.868-1.822v3.42a12.85 12.85 0 0 0-5.148 1.365l-1.72-2.963zm11.271.619c-.166-.044-.342-.025-.495.053a.69.69 0 0 0-.331.37l-.303.795c-.624-.126-1.256-.205-1.892-.238v-3.42a16.29 16.29 0 0 1 6.868 1.822L23.54 6.173a12.62 12.62 0 0 0-1.763-.732l.137-.836a.68.68 0 0 0-.101-.483.69.69 0 0 0-.4-.292v-.002zm3.323 3.034l1.721-2.965a16.46 16.46 0 0 1 5.026 5.001l-2.983 1.712a12.82 12.82 0 0 0-1.685-2.068 13 13 0 0 0-2.079-1.679zm4.456 4.938l2.982-1.712a16.14 16.14 0 0 1 1.704 5.399 16.22 16.22 0 0 1 .126 1.428h-3.426a12.64 12.64 0 0 0-.091-.989 12.73 12.73 0 0 0-1.295-4.126h0zm2.639 13.909a1.71 1.71 0 0 1-1.035.794c-.437.118-.903.058-1.296-.166a1.7 1.7 0 0 1-.798-1.029 1.69 1.69 0 0 1 .167-1.289 12.86 12.86 0 0 0 1.708-5.729h3.43a16.01 16.01 0 0 1-2.175 7.42h0zm-9.982-1.345h-8.297a.69.69 0 0 0-.488.201c-.129.129-.203.303-.203.485v2.202a.69.69 0 0 0 .202.486c.129.129.306.201.489.201h8.297c.091 0 .181-.018.265-.052a.69.69 0 0 0 .224-.149.7.7 0 0 0 .15-.223.68.68 0 0 0 .053-.263V25.05a.69.69 0 0 0-.203-.485c-.129-.129-.305-.201-.488-.2zm-.691 2.198h-6.914v-.825h6.914v.825zM7.483 16.916c-.18.005-.351.079-.477.208s-.196.3-.196.48.07.351.196.48.297.203.477.208H7.5c.18-.005.351-.079.477-.208s.196-.301.196-.48-.07-.351-.196-.48-.297-.203-.477-.208h-.017zm5.718-8.44l-.008-.014a.69.69 0 0 0-.419-.321c-.177-.048-.366-.023-.525.068a.69.69 0 0 0-.323.417c-.048.176-.023.364.068.522l.008.014a.69.69 0 0 0 .419.321.7.7 0 0 0 .269.018c.09-.012.177-.041.255-.086a.69.69 0 0 0 .203-.177c.055-.072.096-.153.12-.24a.68.68 0 0 0 .018-.268.69.69 0 0 0-.086-.254zm9.958-.264a.7.7 0 0 0-.255-.087c-.09-.012-.181-.006-.269.017a.68.68 0 0 0-.242.118c-.072.055-.133.123-.178.202l-.008.014c-.092.158-.117.345-.07.521a.69.69 0 0 0 .322.418c.159.091.347.116.525.069a.69.69 0 0 0 .42-.32l.008-.014a.68.68 0 0 0 .069-.522.69.69 0 0 0-.322-.418zm4.746 10.081h.016c.183 0 .359-.072.489-.201s.202-.304.202-.486a.69.69 0 0 0-.691-.687h-.016c-.183 0-.359.072-.489.201s-.203.304-.203.486.073.357.203.486.305.201.489.201zm-7.783 10.332h-2.837c-.092-.003-.184.013-.27.047a.69.69 0 0 0-.386.373c-.036.085-.054.176-.054.268s.018.183.054.268a.69.69 0 0 0 .155.225c.066.064.145.114.231.148s.178.049.27.047h2.837c.18-.005.351-.079.477-.208s.196-.3.196-.48-.07-.351-.196-.48-.297-.203-.477-.208zm-4.823 0h-.016c-.183 0-.359.072-.489.201s-.202.304-.202.486a.69.69 0 0 0 .202.486c.129.129.306.201.489.201h.016c.183 0 .359-.072.489-.201s.202-.304.202-.486a.69.69 0 0 0-.202-.486c-.129-.129-.306-.201-.489-.201z" />
                                    </svg>
                                    <h6>{{ $car->km_driven ?? '0' }} Km</h6>
                                </div>
                                <div class="impl_explore_info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                        xmlns:v="https://vecta.io/nano">
                                        <path
                                            d="M16.892 3.547H5.424a.75.75 0 0 0-.533.221c-.141.142-.221.333-.221.533v6.089a.75.75 0 0 0 .221.533c.142.141.333.221.533.221h11.468a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533V4.301a.75.75 0 0 0-.221-.533c-.142-.141-.333-.221-.533-.221zm-.754 6.089H6.177V5.054h9.961v4.581zm-4.636 3.63c-.106-.055-.224-.083-.344-.083s-.238.028-.344.083c-1.515.779-2.419 2.126-2.419 3.607 0 1.342.743 2.575 2.01 3.374v1.906a.75.75 0 0 0 .221.533c.142.141.333.221.533.221a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533v-1.906c1.267-.798 2.01-2.032 2.01-3.373 0-1.48-.904-2.828-2.419-3.607zm-.344 5.672c-.795-.52-1.256-1.27-1.256-2.066s.463-1.546 1.256-2.066c.794.52 1.256 1.271 1.256 2.066s-.463 1.546-1.256 2.066zM30 13.168V9.621a.75.75 0 0 0-.222-.532l-3.547-3.547-.003-.003-1.654-1.654a.74.74 0 0 0-.244-.182.76.76 0 0 0-.297-.07.75.75 0 0 0-.3.053.76.76 0 0 0-.255.168.75.75 0 0 0-.221.555.76.76 0 0 0 .07.297.74.74 0 0 0 .182.244l1.434 1.434v3.591a3.95 3.95 0 0 0 3.547 3.926v6.139h-3.753v-1.02a.75.75 0 0 0-.221-.533c-.142-.141-.333-.221-.533-.221H21.19V2.527a2.53 2.53 0 0 0-.741-1.786A2.53 2.53 0 0 0 18.665 0H3.65a2.53 2.53 0 0 0-2.527 2.527v22.419H.754a.75.75 0 0 0-.533.221C.08 25.309 0 25.5 0 25.7v3.547a.75.75 0 0 0 .221.533c.142.141.333.22.533.22h20.808a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533V25.7a.75.75 0 0 0-.221-.533c-.142-.141-.333-.221-.533-.221h-.369V23.32h2.793a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533v-1.02h4.507a.75.75 0 0 0 .533-.221c.141-.142.221-.333.221-.533v-7.626zm-9.192 15.325h-19.3v-2.039h19.301v2.039zM2.63 24.946V2.527a1.02 1.02 0 0 1 1.02-1.02h15.015a1.02 1.02 0 0 1 1.02 1.02v22.419H2.63zm20.601-3.133h-2.04v-2.039h2.04v2.039zm3.221-11.838V7.892l2.039 2.039v2.448a2.44 2.44 0 0 1-2.039-2.403z" />
                                    </svg>
                                    <h6>{{ $car->fuelType->fuel_type_name ?? 'N/A' }}</h6>
                                </div>
                                <div class="impl_explore_info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                        xmlns:v="https://vecta.io/nano">
                                        <path
                                            d="M3.516 22.969A3.52 3.52 0 0 0 0 26.484 3.52 3.52 0 0 0 3.516 30a3.52 3.52 0 0 0 3.516-3.515 3.52 3.52 0 0 0-3.515-3.515zm0 4.687c-.311 0-.608-.124-.828-.343s-.343-.517-.344-.828.124-.609.343-.828a1.17 1.17 0 0 1 1.656-.001 1.18 1.18 0 0 1 .344.829c.001.311-.124.608-.344.828a1.17 1.17 0 0 1-.828.343zm24.139-4.486V6.83c.782-.276 1.441-.82 1.86-1.536a3.52 3.52 0 0 0 .433-2.373c-.14-.817-.565-1.559-1.199-2.093S27.313 0 26.483 0a3.51 3.51 0 0 0-2.266.828c-.634.535-1.059 1.276-1.199 2.093s.013 1.658.433 2.373 1.079 1.259 1.86 1.536v6.999h-9.14V6.83a3.52 3.52 0 0 0 2.344-3.314A3.52 3.52 0 0 0 15 .001a3.52 3.52 0 0 0-3.516 3.515 3.52 3.52 0 0 0 2.344 3.314v6.999H5.859a1.17 1.17 0 0 1-.828-.344 1.18 1.18 0 0 1-.344-.828V6.83a3.52 3.52 0 0 0 2.344-3.314A3.52 3.52 0 0 0 3.516.001a3.52 3.52 0 0 0-2.485 1.031A3.52 3.52 0 0 0 0 3.516 3.52 3.52 0 0 0 2.344 6.83v5.827a3.52 3.52 0 0 0 3.516 3.516h7.968v6.998A3.52 3.52 0 0 0 15 30a3.52 3.52 0 0 0 1.171-6.829v-6.998h9.14v6.998c-.782.276-1.441.82-1.86 1.536a3.52 3.52 0 0 0-.433 2.373c.14.817.565 1.559 1.199 2.093a3.52 3.52 0 0 0 2.266.828c.829 0 1.632-.293 2.266-.828s1.059-1.276 1.199-2.093-.013-1.658-.433-2.373-1.079-1.259-1.86-1.536zM14.999 2.344a1.17 1.17 0 0 1 .828.344 1.18 1.18 0 0 1 .344.828 1.17 1.17 0 0 1-.343.828 1.18 1.18 0 0 1-.828.344 1.17 1.17 0 0 1-.828-.344 1.17 1.17 0 0 1 .001-1.656c.22-.22.517-.343.828-.344zm-11.484 0a1.17 1.17 0 0 1 .828.344 1.18 1.18 0 0 1 .344.828c.001.31-.124.609-.344.828a1.18 1.18 0 0 1-.828.344c-.31.001-.609-.124-.828-.344s-.343-.518-.343-.828.124-.608.343-.828.517-.343.828-.344zm11.484 25.312c-.311 0-.608-.124-.828-.343s-.343-.517-.344-.828a1.17 1.17 0 0 1 1.172-1.172c.311 0 .609.124.829.343a1.17 1.17 0 0 1-.829 2zM26.484 2.344a1.17 1.17 0 0 1 1.15 1.4 1.17 1.17 0 0 1-1.598.854 1.17 1.17 0 0 1-.38-1.911 1.18 1.18 0 0 1 .828-.344zm0 25.312a1.17 1.17 0 0 1-.829-2 1.17 1.17 0 0 1 1.277-.254 1.17 1.17 0 0 1 .379 1.911 1.17 1.17 0 0 1-.828.343z" />
                                    </svg>
                                    <h6>{{ $car->transmission->transmission_name ?? 'N/A' }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <h5>No cars found</h5>
                            <p>Please check back later for available vehicles.</p>
                        </div>
                    </div>
                @endforelse

            </div>
        </div>
    </div>
    <!-- Popular Makes Section End -->
    <!-- Why Choose Us Section Start -->
    <div class="container-fluid impl_bg_container">
        <div class="impl_section_wrapper impl_choose_wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="impl_choose_heading" data-aos="fade-down">
                            <h3>Why Choose Patel Brothers Car Dealers?</h3>
                        </div>
                        <div class="impl_choose_text" data-aos="fade-down">
                            <p>
                                Patel Brothers Car Dealers is a trusted car rental and vehicle dealership known for
                                quality service, reliable cars, and customer satisfaction. We focus on delivering
                                well-maintained vehicles with transparent pricing and a smooth booking experience.
                            </p>
                            <p>
                                Whether you need a car for daily travel, family trips, business use, or special occasions,
                                we ensure comfort, safety, and value for money with every rental.
                            </p>
                        </div>
                        <div class="impl_choose_img" data-aos="zoom-in-right">
                            <img src="{{ asset('theme/assets/images/choose_img.png') }}" class="img-fluid"
                                loading="lazy" alt="Patel Brothers Car Dealers - Trusted Car Rental Service">
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="row">
                            <div class="col-sm-6" data-aos="flip-left">
                                <div class="impl_choose_box">
                                    <div class="impl_choose_icon icon_1">
                                        <img src="{{ asset('theme/assets/images/choose-1.png') }}" class="img-fluid"
                                            alt="Wide Range of Cars">
                                    </div>
                                    <div class="impl_choose_info">
                                        <h6>Wide Range of Vehicles</h6>
                                        <p>
                                            Choose from a variety of well-maintained cars including sedan, SUV,
                                            luxury, and family vehicles to suit every travel need.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6" data-aos="flip-right">
                                <div class="impl_choose_box">
                                    <div class="impl_choose_icon icon_2">
                                        <img src="{{ asset('theme/assets/images/choose-2.png') }}" class="img-fluid"
                                            alt="Transparent Pricing">
                                    </div>
                                    <div class="impl_choose_info">
                                        <h6>Transparent & Affordable Pricing</h6>
                                        <p>
                                            No hidden charges. Clear rental terms and fair pricing ensure complete
                                            peace of mind for our customers.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6" data-aos="flip-up">
                                <div class="impl_choose_box">
                                    <div class="impl_choose_icon icon_3">
                                        <img src="{{ asset('theme/assets/images/choose-3.png') }}" class="img-fluid"
                                            alt="Trusted Car Dealer">
                                    </div>
                                    <div class="impl_choose_info">
                                        <h6>Trusted by Customers</h6>
                                        <p>
                                            We are trusted by many happy customers for our honest service,
                                            reliable vehicles, and customer-first approach.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6" data-aos="flip-down">
                                <div class="impl_choose_box">
                                    <div class="impl_choose_icon icon_4">
                                        <img src="{{ asset('theme/assets/images/choose-4.png') }}" class="img-fluid"
                                            alt="Well Maintained Cars">
                                    </div>
                                    <div class="impl_choose_info">
                                        <h6>Well-Maintained & Safe Cars</h6>
                                        <p>
                                            All vehicles are regularly serviced and safety-checked to ensure
                                            a smooth, comfortable, and secure driving experience.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Why Choose Us Section End -->
    <!-- Testimonial Section Start -->

    <div class="impl_section_wrapper impl_testimonial_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-12" data-aos="flip-up">
                    <div class="impl_section_heading">
                        <h3>What Our Customers Say</h3>
                    </div>
                </div>
                @if (isset($testimonials) && $testimonials->count() > 0)
                    @foreach ($testimonials as $index => $testimonial)
                        <div class="col-md-6" data-aos="{{ $index % 2 == 0 ? 'flip-left' : 'flip-right' }}">
                            <div class="impl_testimonial_box">
                                <div class="impl_testimonial_head">
                                    <div class="impl_testi_client">
                                        @php
                                            $genderImage = 'male.avif';
                                            if (!empty($testimonial->gender)) {
                                                if (strtolower($testimonial->gender) === 'female') {
                                                    $genderImage = 'female.avif';
                                                } else {
                                                    $genderImage = 'male.avif';
                                                }
                                            }
                                        @endphp
                                        <img src="{{ asset('theme/assets/images/' . $genderImage) }}" class="img-fluid"
                                            alt="{{ $testimonial->customer_name }}">
                                        <div class="impl_client_info">
                                            <p>{{ $testimonial->customer_name }}</p>
                                            <div class="impl_testi_rating">
                                                @for ($i = 1; $i <= 5; $i++)
                                                    @if ($i <= $testimonial->star_rating)
                                                        <img src="{{ asset('theme/assets/images/star.png') }}"
                                                            class="img-fluid" alt="Star">
                                                    @else
                                                        <img src="{{ asset('theme/assets/images/star1.png') }}"
                                                            class="img-fluid" alt="Empty Star">
                                                    @endif
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="impl_testimonial_text">
                                    <p>{{ $testimonial->remark ?? 'No comment provided.' }}</p>
                                </div>
                                <div class="impl_testi_quote">
                                    <img src="{{ asset('theme/assets/images/quote.png') }}" class="img-fluid">
                                </div>
                                <img src="{{ asset('theme/assets/images/testi_shape.png') }}"
                                    class=" impl_testi_shape img-fluid">
                            </div>
                        </div>
                    @endforeach
                @else
                    <!-- Default testimonials if no data in database -->
                    <div class="col-md-6" data-aos="flip-left">
                        <div class="impl_testimonial_box">
                            <div class="impl_testimonial_head">
                                <div class="impl_testi_client">
                                    <img src="https://via.placeholder.com/60x60" class="img-fluid">
                                    <div class="impl_client_info">
                                        <p>Customer</p>
                                        <div class="impl_testi_rating">
                                            <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                                            <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                                            <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                                            <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                                            <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="impl_testimonial_text">
                                <p>No testimonials available yet. Check back soon!</p>
                            </div>
                            <div class="impl_testi_quote">
                                <img src="{{ asset('theme/assets/images/quote.png') }}" class="img-fluid">
                            </div>
                            <img src="{{ asset('theme/assets/images/testi_shape.png') }}"
                                class=" impl_testi_shape img-fluid">
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <!-- Testimonial Section End -->
    <!-- Video Section Start -->
    @if(isset($websiteSetting) && !empty($websiteSetting->youtube_video_url))
        @php
            // Convert YouTube URL to embed format
            $youtubeUrl = $websiteSetting->youtube_video_url;
            $embedUrl = '';

            // Extract video ID from different YouTube URL formats
            if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/', $youtubeUrl, $matches)) {
                $videoId = $matches[1];
                $embedUrl = 'https://www.youtube.com/embed/' . $videoId;
            } elseif (strpos($youtubeUrl, 'youtube.com/embed/') !== false) {
                // Already in embed format
                $embedUrl = $youtubeUrl;
            }
        @endphp
        @if(!empty($embedUrl))
            <div class="impl_section_wrapper impl_video_wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-12" data-aos="zoom-in">
                            <div class="impl_video_content">
                                <h3>Want To Know More About Us? Play Our Promotional Video Now!</h3>
                                <a href="{{ $embedUrl }}" rel="external" class="video_play video_popup" title="Watch Our Video">
                                    <img src="{{ asset('theme/assets/images/play.png') }}" class="img-fluid">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endif
    <!-- Video Section End -->
    <!-- News Section Start -->
    <!-- <div class="container-fluid impl_bg_container">
                <div class="impl_section_wrapper impl_news_wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="col-12" data-aos="flip-up">
                                <div class="impl_section_heading">
                                    <h3>Our Recent News & Articles</h3>
                                </div>
                            </div>
                            <div class="col-lg-8" data-aos="fade-right">
                                <a href="javascript:void(0);">
                                    <div class="impl_news_card">
                                        <div class="impl_news_img">
                                            <img src="https://via.placeholder.com/370x250" class="img-fluid" loading="lazy">
                                        </div>
                                        <div class="impl_news_full">
                                            <div class="impl_news_text">
                                                <h6>Choosing The Right Car For Your Lifestyle</h6>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscin that a elit, Ut enim ad minim
                                                    veniam, quis nostrud exercitatio a ullamco laboris nisi ut aliquip that ex ea
                                                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
                                                    esse cillum dolore.</p>
                                            </div>
                                            <div class="impl_writer_info">
                                                <img src="https://via.placeholder.com/50x50">
                                                <div class="impl_writer_text">
                                                    <p>Leslie Alexander</p>
                                                    <span>Founder, xyz company</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-6" data-aos="fade-left">
                                <a href="javascript:void(0);">
                                    <div class="impl_news_box">
                                        <div class="impl_news_img">
                                            <img src="https://via.placeholder.com/370x250" class="img-fluid" loading="lazy">
                                        </div>
                                        <div class="impl_news_text">
                                            <h6>Tips for Keeping Your Car in Top Shape</h6>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-6" data-aos="fade-up">
                                <a href="javascript:void(0);">
                                    <div class="impl_news_box">
                                        <div class="impl_news_img">
                                            <img src="https://via.placeholder.com/370x250" class="img-fluid" loading="lazy">
                                        </div>
                                        <div class="impl_news_text">
                                            <h6>Tips for Keeping Your Car in Top Shape</h6>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-6" data-aos="fade-up">
                                <a href="javascript:void(0);">
                                    <div class="impl_news_box">
                                        <div class="impl_news_img">
                                            <img src="https://via.placeholder.com/370x250" class="img-fluid" loading="lazy">
                                        </div>
                                        <div class="impl_news_text">
                                            <h6>Tips for Keeping Your Car in Top Shape</h6>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-6" data-aos="fade-up">
                                <a href="javascript:void(0);">
                                    <div class="impl_news_box">
                                        <div class="impl_news_img">
                                            <img src="https://via.placeholder.com/370x250" class="img-fluid" loading="lazy">
                                        </div>
                                        <div class="impl_news_text">
                                            <h6>Tips for Keeping Your Car in Top Shape</h6>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
    <!-- News Section End -->
    <!-- Newsletter Section Start -->
    <div class="container-fluid p-0">
                <div class="impl_section_wrapper impl_newsletter_wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="col-12" data-aos="flip-up">
                                <div class="impl_newsletter_text">
                                    <h3>Newsletter</h3>
                                    <p>Subscribe to our newsletter and stay updated with our offer</p>
                                </div>
                            </div>
                            <div class="col-12" data-aos="zoom-in">
                                <form class="impl_newsletter_form" id="newsletterForm">
                                    @csrf
                                    <input type="email" name="email" id="newsletter_email" placeholder="Your Email.." required>
                                    <button type="submit" class="impl_btn">Subscribe</button>
                                    <div class="newsletter-response" style="margin-top: 10px;"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="impl_newsletter_img">
                        <img src="{{ asset('theme/assets/images/newsltr_img.png') }}" class="img-fluid" loading="lazy">
                    </div>
                </div>
            </div>
    <!-- Newsletter Section End -->

    <!-- Banner Section End -->
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            // Handle home search form submission
            $('#homeSearchForm').on('submit', function(e) {
                e.preventDefault();
                
                var form = $(this);
                var brand = $('#makes-tab1').val();
                var carModelId = $('#models-tab1').val();
                var bodyType = $('#body_type_home').val();
                
                // Build query parameters
                var params = [];
                if (brand) params.push('brand=' + encodeURIComponent(brand));
                if (carModelId) params.push('car_model_id=' + encodeURIComponent(carModelId));
                if (bodyType) params.push('body_type=' + encodeURIComponent(bodyType));
                
                // Redirect to listing page with parameters
                var listingUrl = "{{ route('user.listing') }}";
                if (params.length > 0) {
                    listingUrl += '?' + params.join('&');
                }
                
                window.location.href = listingUrl;
            });
            
            // Newsletter form submission
            $('#newsletterForm').on('submit', function(e) {
                e.preventDefault();
                
                var form = $(this);
                var email = $('#newsletter_email').val();
                var responseDiv = form.find('.newsletter-response');
                var submitBtn = form.find('button[type="submit"]');
                
                // Clear previous messages
                responseDiv.html('');
                
                // Basic email validation
                if (!email || !email.includes('@')) {
                    responseDiv.html('<p style="color: red; margin: 0;">Please enter a valid email address.</p>');
                    return;
                }
                
                // Disable submit button
                submitBtn.prop('disabled', true).text('Subscribing...');
                
                // Submit via AJAX
                $.ajax({
                    url: "{{ route('user.newsletter.store') }}",
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        email: email
                    },
                    success: function(response) {
                        if (response.success) {
                            responseDiv.html('<p style="color: green; margin: 0;">' + response.message + '</p>');
                            form[0].reset();
                        } else {
                            responseDiv.html('<p style="color: red; margin: 0;">' + (response.message || 'Something went wrong. Please try again.') + '</p>');
                        }
                    },
                    error: function(xhr) {
                        var message = 'Something went wrong. Please try again later.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        } else if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.email) {
                            message = xhr.responseJSON.errors.email[0];
                        }
                        responseDiv.html('<p style="color: red; margin: 0;">' + message + '</p>');
                    },
                    complete: function() {
                        // Re-enable submit button
                        submitBtn.prop('disabled', false).text('Subscribe');
                    }
                });
            });
        });
    </script>
@endsection