@extends('layouts.landing-page.index', ['title' => 'Suzuki UMC Jember'])

@section('main')

    <!-- Hero Section -->
    <section id="hero" class="hero-section dark-background p-0 fade-up">

        <div class="swiper heroSwiper">
            <div class="swiper-wrapper">

                <!-- @foreach ($sliders as $slider)
                    <div class="swiper-slide hero-slide">
                        <video class="hero-video" autoplay muted loop playsinline>
                            <source src="{{ asset('storage/' . $slider->media_path) }}" type="video/mp4">
                        </video>

                        <div class="hero-content"></div>
                    </div>
                @endforeach -->

                @foreach ($sliders as $slider)
                    <div class="swiper-slide hero-slide">
                        <img src="{{ asset('storage/' . $slider->media_path) }}" 
                            class="hero-image w-100" 
                            alt="Slider Image">

                        <div class="hero-content"></div>
                    </div>
                @endforeach



            </div>

            <div class="swiper-pagination"></div>
        </div>

    </section>


    <!-- ======= About Section ======= -->
    <section id="about" class="about">
        <div class="container">

            <div class="row content">
                <div class="col-lg-6">
                    {{-- <h2><b>Temukan mobil yang tepat untuk anda di Suzuki UMC Jember!</b></h2> --}}
                    <h3 style="font-size: 40px"><b>Temukan Mobil Suzuki Pilihan Anda</b></h3>
                    <label for="">Wujudkan pengalaman berkendara Anda dengan mobil yang nyaman dan ciptakan perjalanan yang penuh cerita bersama orang tercinta</label>
                </div>
                <div class="col-lg-6 pt-4 pt-lg-0">
                    <p>
                        Dealer Suzuki Jember, melalui website ini, kami hadir menawarkan sistem kepemilikan kendaraan dengan beragam mobil pilihan dengan cara yang menyenangkan dan juga mudah.
                    </p>
                    <ul>
                        <li><i class="bi bi-check-all"></i> Garansi 3 tahun bagi anda pemilik mobil Suzuki baru</li>
                        <li><i class="bi bi-check-all"></i> Layanan purnajual (servis) yang terpercaya.</li>
                        <li><i class="bi bi-check-all"></i> Promo dan penawaran menarik setiap bulan.</li>
                    </ul>
                    <p class="fst-italic">
                        Kami akan selalu berkomitmen memberikan pelayanan terbaik untuk anda, baik before maupun after sales.
                    </p>
                </div>
            </div>
        </div>
    </section><!-- End About Section -->

    <!-- ======= Product Section ======= -->
    <section id="product" class="product">
        <div class="container">
            <div class="text-center mb-5">
                <h2><b> Temukan Mobil Suzuki yang tepat untuk anda! </b></h2>
                <label for="">Temukan berbagai mobil pilihan Suzuki yang dirancang khusus dengan presisi melalui teknologi modern dan desain stylish sesuai gaya Anda.</label>
            </div>
            <div class="row">
                {{-- @if (count($catalogs) > 0)
                    @foreach ($catalogs as $catalog)
                        <div class="col-md-4 mb-3">
                            <div class="card border-0 shadow">
                                <div class="card-body card-product text-center">
                                    <div class="img-product mb-3">
                                        <img src="{{ asset('storage') }}/{{ $catalog->thumbnail }}" alt="">
                                    </div>
                                    <h4>{{ $catalog->name }}</h4>
                                    <small>{{ $catalog->category_name }}</small>
                                    <small> Mulai Dari</small>
                                    <h4 class="text-danger"><b> {{ format_rupiah((int) $catalog->price) }} </b></h4>
                                    <h6><b><i>Harga belum termasuk diskon</i></b></small>
                                </div>
                                <div class="card-footer p-0">
                                    <a href="{{ route('product.detail', ['slug' => $catalog->slug]) }}" class="btn btn-primary w-100">Lihat Selengkapnya <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                    @endforeach
                @else
                    <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                        Belum ada data
                    </div>
                @endisset --}}
                @if (count($catalogs) > 0)
                    @foreach ($catalogs as $catalog)
                        <div class="col-xl-4 col-sm-6 mb-3">
                            <a href="{{ route('product.detail', ['slug' => $catalog->slug]) }}"
                                class="product-link">
                                <div class="product-card shadow position-relative">
                                    <span
                                        class="badge badge-voucher text-white">{{ $catalog->category_name }}</span>
                                    <img src="{{ asset('storage') }}/{{ $catalog->thumbnail }}"
                                        alt="Cerutu Don Juan">
                                    <div class="product-body">
                                        <div class="product-title">
                                            <h5>{{ $catalog->name }}</h5>
                                            {{-- {!! $catalog->description !!} --}}
                                        </div>
                                        <small>Mulai Dari </small>
                                        <h4 class="product-price">{{ format_rupiah((int) $catalog->price) }}</h4>
                                        <h6><b><i>Harga belum termasuk diskon</i></b></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @else
                    <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                        Belum ada data
                    </div>
                @endisset
                <div class="col-md-12 mt-3">
                    <div class="text-center">
                        <a href="{{ url('product') }}" class="btn btn-danger">Lihat Semua Produk &emsp;<i class="bi bi-send"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Section -->

    <!-- Services Section -->
    <section id="services" class="services section">

        <!-- Section Title -->
        <div class="container section-title pb-0" data-aos="fade-up">
            <h2>Produk</h2>
            <p>Kategori Produk</p>
        </div><!-- End Section Title -->

        <div class="container">

            <div class="row gy-4">

                @if (count($categories) > 0)
                    <div class="swiper categori-catalog-Swiper">
                        <div class="swiper-wrapper">
                            @foreach ($categories ?? [] as $category)
                                <div class="col-lg-4 col-md-6 swiper-slide p-3" data-aos="fade-up" data-aos-delay="100">
                                    <div class="service-item position-relative service-bg shadow"
                                        style="background-size: cover !important; background: url('{{ asset('storage') }}/{{ $category->image_path }}')">
                                        <div class="text-category-catalog w-100 text-center">
                                            <div class="mb-3">
                                                <a href="service-details.html" class="stretched-link">
                                                    <h2 class="text-white"><b>{{ $category->name }}</b></h2>
                                                </a>
                                                {{-- <p>{{ $category->name }}</p> --}}
                                            </div>
                                            <div class="mb-3">
                                                <form action="{{ route('product.search') }}" method="GET">
                                                    <input type="hidden" value="{{ $category->name }}"
                                                        name="categories[]">
                                                    <button type="submit" class="btn btn-outline-light">Beli
                                                        Sekarang</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>

                        <div class="swiper-pagination"></div>

                    </div>
                @else
                    <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                        Belum ada data
                    </div>
                @endisset

            </div>

        </div>
    </section><!-- /Services Section -->

    <!-- About Section -->
    <section id="about" class="about section">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-4">
                <div class="col-lg-6 order-1 order-lg-2">
                    <div class="img-about">
                        <img src="{{ asset('storage') }}/{{ $profile->office_photo ?? '' }}" class="img-fluid"
                            alt="">
                    </div>
                </div>
                <div class="col-lg-6 order-2 order-lg-1 content">
                    <h4><b>Hubungi sales kami untuk memperoleh layanan instan dalam membeli kendaraan anda</b></h4>
                    <hr>
                    <h3 class="notranslate">{{ $profile->company_name ?? 'Nama Perusahaan' }}</h3>
                    <p class="fst-italic">
                        {!! $profile->short_description ?? 'Deskripsi Perusahaan' !!}
                    </p>
                </div>
            </div>

        </div>

    </section><!-- /About Section -->
    
    <!-- Call To Action Section -->
    <section id="call-to-action" class="call-to-action section dark-background">

        <img src="{{ asset('assets-landing-page/img/dealer.webp') }}" alt="">

        <div class="container">
            <div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
                <div class="col-xl-10">
                    <div class="text-center">
                        <h3>Temukan Mobil Suzuki Pilihan Anda di Dealer Suzuki Jember</h3>
                        <p>Nikmati berbagai pilihan mobil Suzuki dengan desain modern, performa handal, dan efisiensi bahan bakar yang optimal. Dipercaya oleh banyak pelanggan di seluruh Indonesia untuk mendukung kebutuhan mobilitas sehari-hari..</p>
                        <a class="cta-btn" href="{{ route('contact') }}">Hubungi Kami</a>
                    </div>
                </div>
            </div>
        </div>

    </section><!-- /Call To Action Section -->

    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
            <h2>Kontak</h2>
            <p>Hubungi Kami</p>
        </div><!-- End Section Title -->

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-4">

                <div class="col-lg-4">
                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                        <i class="bi bi-geo-alt flex-shrink-0"></i>
                        <div>
                            <h3>Alamat</h3>
                            <p class="notranslate">{{ $profile->address ?? 'Alamat Perusahaan' }}</p>
                        </div>
                    </div><!-- End Info Item -->
                </div>

                <div class="col-lg-4">
                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                        <i class="bi bi-telephone flex-shrink-0"></i>
                        <div>
                            <h3>No. Telepon</h3>
                            <p>{{ $profile->phone ?? 'Telepon Perusahaan' }}</p>
                        </div>
                    </div><!-- End Info Item -->
                </div>

                <div class="col-lg-4">
                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="500">
                        <i class="bi bi-envelope flex-shrink-0"></i>
                        <div>
                            <h3>Email</h3>
                            <p class="notranslate">{{ $profile->email ?? 'Email Perusahaan' }}</p>
                        </div>
                    </div><!-- End Info Item -->

                </div>
            </div>

        </div>

    </section><!-- /Contact Section -->
@endsection

@push('styles')
<style>
     /* Produk Card */
    .product-card {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        transition: 0.2s;
        height: 100%;
    }

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    .product-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .product-body {
        padding: 12px;
    }
    
    .product-body h6{
        font-size: 12px;
    }

    .product-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* Batasi teks menjadi 2 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 40px
    }

    .product-price {
        color: #dc3545;
        font-weight: 700;
    }

    .product-meta {
        font-size: 12px;
        color: #777;
    }

    .badge-voucher {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #dc3545;
        font-size: 11px;
    }

    .product-link {
        text-decoration: none;
        color: inherit;
        display: block;
        height: 100%;
    }

    .product-link:hover {
        color: inherit;
    }

    .product-link:focus {
        outline: none;
    }


    /* Mobile */
    @media (max-width: 768px) {
        .product-card img {
            height: 300px;
        }
    }

    .hero-slide {
        position: relative;
        width: 100%;
        height: 100vh;
        /* full screen */
        overflow: hidden;
    }

    .hero-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* height: 100%; */
        object-fit: cover;
        /* IMPORTANT */
    }

    .hero-section {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    /* mobile */
    @media (max-width: 576px) {
        .hero-section {
            width: 100%;
            height: 20vh;
            position: relative;
            overflow: hidden;
            margin-top: 60px;
        }
    }

    .hero-section:before {
        content: "";
        /* background: color-mix(in srgb, var(--background-color), transparent 70%); */
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    /* default desktop */
    .hero-slide {
        width: 100%;
        height: 100vh; /* full height desktop */
        position: relative;
        overflow: hidden;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* tablet */
    @media (max-width: 992px) {
        .hero-slide {
            height: 40vh; /* setengah layar tablet */
        }
    }

    /* mobile */
    @media (max-width: 576px) {
        .hero-slide {
            height: 20vh; /* lebih kecil lagi untuk HP */
        }
    }

    .hero-content {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 10;
    }

    .hero-content h1 {
        font-size: 3rem;
        color: #fff;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    }

    /* SWIPPER */
    .swiper-pagination-bullet {
        background: #d7d7d7;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        background: #a1a1a1;
        opacity: 1;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        color: #fff;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 18px;
        font-weight: bold;
    }

    /* posisi agak ke tengah vertikal */
    .swiper-button-next,
    .swiper-button-prev {
        top: 50%;
        transform: translateY(-50%);
    }

    /* END SWIPPER  */

    .categori-catalog-Swiper {
        width: 100%;
        /* padding: 60px 0; */
    }

    .categori-catalog-Swiper .swiper-slide {
        width: 420px;
        transition: all 0.4s ease;
    }

    .service-item {
        height: 260px;
        background-size: cover;
        background-position: center;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
    }

    /* overlay gelap */
    .service-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
    }

    /* konten tengah */
    .overlay-content {
        position: absolute;
        z-index: 2;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
    }

    .overlay-content h3 {
        font-size: 22px;
        font-weight: 600;
    }

    .overlay-content p {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 12px;
    }

    /* slide aktif lebih terang & besar */
    .swiper-slide-active .service-item::before {
        background: rgba(0, 0, 0, 0.2);
    }

    .swiper-slide-active {
        transform: scale(1.05);
    }

    .text-category-catalog {
        position: absolute !important;
        bottom: 20px;
        left: 0;
    }

    /* END SWIPPER */

    .img-about {
        width: 100%;
        height: 350px;
        /* atau bebas sesuai kebutuhan */
        overflow: hidden;
    }

    .img-about img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* bikin foto cover rapih */
        object-position: center;
        /* posisi tengah */
        display: block;
    }

    .img-about video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* bikin foto cover rapih */
        object-position: center;
        /* posisi tengah */
        display: block;
    }

    @media (max-width: 576px) {
        .img-about {
            height: 300px !important;
        }
    }

    .img-stars {
        width: 100%;
        height: 100%;
        /* atau bebas sesuai kebutuhan */
        overflow: hidden;
    }

    .img-stars img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* bikin foto cover rapih */
        object-position: center;
        /* posisi tengah */
        display: block;
    }

    @media (max-width: 576px) {
        .img-stars {
            height: 300px !important;
        }
    }

    .service-bg {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 30px;
        border-radius: 12px;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    /* Tambahkan overlay agar teks tetap terbaca */
    .service-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        /* bisa digelapkan lagi */
        border-radius: 12px;
    }

    .service-bg * {
        position: relative;
        z-index: 2;
    }
</style>
@endpush

@push('scripts')
{{-- <script>
        const swiper = new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
        });
    </script> --}}
<!-- Swiper Init -->
<script>
    var swiper = new Swiper(".heroSwiper", {
        loop: true,
        grabCursor: true,
        autoplay: false,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: "bullets",
        },
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        effect: "fade",
        speed: 800
    });

    var swiper = new Swiper(".categori-catalog-Swiper", {
        effect: "",
        grabCursor: true,
        centeredSlides: false,
        slidesPerView: 2,
        loop: true,
        coverflowEffect: {
            rotate: 0,
            stretch: 80,
            depth: 200,
            modifier: 1,
            slideShadows: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            320: {
                slidesPerView: 1, // HP 1 kotak
            },
            768: {
                slidesPerView: 2, // Tablet 2 kotak
            },
        }
    });
</script>
@endpush