@extends('layouts.app')

@section('title', 'Home')

@section('content')

<!-- =========================================================
     HERO SLIDER
========================================================= -->

<section
    id="hero-slider"
    class="relative w-full overflow-hidden bg-primary"
>

    @php

        $slides = collect($heroSlides ?? []);

        if ($slides->isEmpty()) {

            $slides = collect([
                [
                    'image' => $settings->hero_image ?? null,

                    'title' =>
                        'Building Excellence. Shaping Future Leaders.',

                    'description' =>
                        $settings->about_summary ??
                        'We nurture young minds through quality education, character development and a safe, inspiring learning environment.',

                    'button_text' =>
                        'Apply Now',

                    'button_url' =>
                        '/admissions',

                    'secondary_text' =>
                        'Learn More',

                    'secondary_url' =>
                        '/about',
                ]
            ]);

        }

    @endphp


    <div
        id="hero-slides"
        class="relative w-full"
    >

        @foreach($slides as $index => $slide)

            @php

                $slideImage = is_array($slide)
                    ? ($slide['image'] ?? null)
                    : ($slide->image ?? null);

                $slideTitle = is_array($slide)
                    ? (
                        $slide['title']
                        ?? 'Building Excellence. Shaping Future Leaders.'
                    )
                    : (
                        $slide->title
                        ?? 'Building Excellence. Shaping Future Leaders.'
                    );

                $slideDescription = is_array($slide)
                    ? ($slide['description'] ?? '')
                    : ($slide->description ?? '');

                $buttonText = is_array($slide)
                    ? ($slide['button_text'] ?? 'Apply Now')
                    : ($slide->button_text ?? 'Apply Now');

                $buttonUrl = is_array($slide)
                    ? ($slide['button_url'] ?? '/admissions')
                    : ($slide->button_url ?? '/admissions');

                $secondaryText = is_array($slide)
                    ? ($slide['secondary_text'] ?? 'Learn More')
                    : ($slide->secondary_text ?? 'Learn More');

                $secondaryUrl = is_array($slide)
                    ? ($slide['secondary_url'] ?? '/about')
                    : ($slide->secondary_url ?? '/about');

                $imageUrl = $slideImage
                    ? asset('storage/' . $slideImage)
                    : 'https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1920';

            @endphp


            <div
                class="hero-slide {{ $index === 0 ? '' : 'hidden' }} relative w-full"
                data-slide="{{ $index }}"
            >

                <img
                    src="{{ $imageUrl }}"
                    alt="{{ $slideTitle }}"
                    class="w-full h-[500px] md:h-[600px] lg:h-[650px] object-cover"
                >


                <div
                    class="absolute inset-0 flex items-center"
                >

                    <div
                        class="container mx-auto px-6 md:px-10 lg:px-16"
                    >

                        <div
                            class="max-w-2xl"
                        >

                            <div
                                class="inline-block bg-primary px-4 py-2 rounded-md text-white font-bold uppercase tracking-widest text-xs md:text-sm mb-5 shadow-md"
                            >

                                Welcome to
                                {{ $settings->school_name ?? 'Pearl School' }}

                            </div>


                            <h1
                                class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight text-white drop-shadow-lg"
                            >

                                {{ $slideTitle }}

                            </h1>


                            @if($slideDescription)

                                <p
                                    class="mt-6 text-lg md:text-xl leading-relaxed text-white max-w-xl drop-shadow-md"
                                >

                                    {{ $slideDescription }}

                                </p>

                            @endif


                            <div
                                class="mt-8 flex flex-wrap gap-4"
                            >

                                <a
                                    href="{{ $buttonUrl }}"
                                    class="inline-flex items-center gap-3 bg-secondary text-white font-bold px-7 py-4 rounded-lg hover:opacity-90 transition shadow-lg"
                                >

                                    {{ $buttonText }}

                                    <span class="text-xl">
                                        →
                                    </span>

                                </a>


                                <a
                                    href="{{ $secondaryUrl }}"
                                    class="inline-flex items-center gap-3 bg-white text-primary font-bold px-7 py-4 rounded-lg hover:bg-gray-100 transition shadow-lg"
                                >

                                    {{ $secondaryText }}

                                    <span>
                                        →
                                    </span>

                                </a>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        @endforeach


        @if($slides->count() > 1)

            <button
                type="button"
                id="hero-prev"
                class="absolute left-5 md:left-8 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center hover:bg-primary transition z-20 shadow-lg"
                aria-label="Previous slide"
            >

                <span class="text-3xl leading-none">
                    ‹
                </span>

            </button>


            <button
                type="button"
                id="hero-next"
                class="absolute right-5 md:right-8 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center hover:bg-primary transition z-20 shadow-lg"
                aria-label="Next slide"
            >

                <span class="text-3xl leading-none">
                    ›
                </span>

            </button>


            <div
                id="hero-dots"
                class="absolute bottom-7 left-1/2 -translate-x-1/2 flex gap-3 z-20"
            >

                @foreach($slides as $index => $slide)

                    <button
                        type="button"
                        data-dot="{{ $index }}"
                        class="hero-dot w-3 h-3 rounded-full border-2 border-white transition {{ $index === 0 ? 'bg-secondary' : 'bg-white/50' }}"
                        aria-label="Go to slide {{ $index + 1 }}"
                    ></button>

                @endforeach

            </div>

        @endif

    </div>

</section>


<!-- =========================================================
     STATISTICS
========================================================= -->

<section
    class="w-full bg-primary text-white"
>

    <div
        class="container mx-auto px-6 py-10 md:py-12"
    >

        <div
            class="grid grid-cols-2 md:grid-cols-4"
        >

            <div
                class="flex items-center justify-center gap-4 py-5 md:py-2 border-r border-white/20"
            >

                <div
                    class="w-14 h-14 md:w-16 md:h-16 rounded-full border-2 border-secondary flex items-center justify-center text-2xl"
                >
                    👥
                </div>

                <div>

                    <div
                        class="text-3xl md:text-4xl font-extrabold"
                    >
                        {{ $settings->total_students ?? 500 }}+
                    </div>

                    <div
                        class="text-sm md:text-base text-white/90"
                    >
                        Students
                    </div>

                </div>

            </div>


            <div
                class="flex items-center justify-center gap-4 py-5 md:py-2 md:border-r border-white/20"
            >

                <div
                    class="w-14 h-14 md:w-16 md:h-16 rounded-full border-2 border-secondary flex items-center justify-center text-2xl"
                >
                    🎓
                </div>

                <div>

                    <div
                        class="text-3xl md:text-4xl font-extrabold"
                    >
                        {{ $settings->total_teachers ?? 30 }}+
                    </div>

                    <div
                        class="text-sm md:text-base text-white/90"
                    >
                        Teachers
                    </div>

                </div>

            </div>


            <div
                class="flex items-center justify-center gap-4 py-5 md:py-2 border-r border-white/20"
            >

                <div
                    class="w-14 h-14 md:w-16 md:h-16 rounded-full border-2 border-secondary flex items-center justify-center text-2xl"
                >
                    🏫
                </div>

                <div>

                    <div
                        class="text-3xl md:text-4xl font-extrabold"
                    >
                        {{ $settings->total_classes ?? 15 }}+
                    </div>

                    <div
                        class="text-sm md:text-base text-white/90"
                    >
                        Classes
                    </div>

                </div>

            </div>


            <div
                class="flex items-center justify-center gap-4 py-5 md:py-2"
            >

                <div
                    class="w-14 h-14 md:w-16 md:h-16 rounded-full border-2 border-secondary flex items-center justify-center text-2xl"
                >
                    🏅
                </div>

                <div>

                    <div
                        class="text-3xl md:text-4xl font-extrabold"
                    >
                        {{ $settings->total_years ?? 10 }}+
                    </div>

                    <div
                        class="text-sm md:text-base text-white/90"
                    >
                        Years of Excellence
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     WELCOME ADDRESS
========================================================= -->

<section
    class="bg-white py-16 md:py-20"
>

    <div
        class="container mx-auto px-6"
    >

        <div
            class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center"
        >

            <!-- WELCOME TEXT -->

            <div>

                <div
                    class="text-secondary font-bold uppercase tracking-wider text-sm"
                >

                    Welcome to
                    {{ $settings->school_name ?? 'Pearl School' }}

                </div>


                <div
                    class="w-12 h-1 bg-secondary mt-3 mb-5"
                ></div>


                <h2
                    class="text-3xl md:text-4xl font-extrabold text-primary"
                >
                    Welcome Address
                </h2>


                <p
                    class="mt-6 text-gray-600 leading-8 text-base md:text-lg"
                >

                    {{ $settings->about_summary ??
                        'Welcome to Pearl Schools, a place where young minds are fostered and encouraged to become leaders of tomorrow. We provide a safe and exciting learning environment where every child has the opportunity to study, grow and reach their full potential.' }}

                </p>


                <a
                    href="/about"
                    class="inline-flex items-center gap-3 mt-8 bg-secondary text-white font-bold px-6 py-3 rounded-lg hover:opacity-90 transition shadow-md"
                >

                    Read More

                    <span>
                        →
                    </span>

                </a>

            </div>


            <!-- =====================================================
                 OWNER / WELCOME ADDRESS IMAGE
            ====================================================== -->

            <div>

                <div
                    class="rounded-2xl overflow-hidden shadow-xl"
                >

                    @if($settings->school_image)

                        <img
                            src="{{ asset('storage/' . $settings->school_image) }}"
                            alt="{{ $settings->school_name ?? 'Pearl School' }}"
                            class="w-full h-[360px] md:h-[420px] object-cover object-top"
                        >

                    @else

                        <div
                            class="w-full h-[360px] md:h-[420px] bg-gray-200 flex items-center justify-center text-gray-500"
                        >

                            Welcome Address Image

                        </div>

                    @endif

                </div>

            </div>

        </div>


        <!-- =====================================================
             PHOTO GALLERY
        ====================================================== -->

        @if($gallery->count())

            <div
                class="mt-20"
            >

                <div
                    class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8"
                >

                    <div>

                        <div
                            class="text-secondary font-bold uppercase tracking-wider text-sm"
                        >
                            School Life
                        </div>

                        <div
                            class="w-12 h-1 bg-secondary mt-3 mb-4"
                        ></div>

                        <h2
                            class="text-3xl md:text-4xl font-extrabold text-primary"
                        >
                            Photo Gallery
                        </h2>

                    </div>


                    <a
                        href="/gallery"
                        class="text-secondary font-bold hover:underline inline-flex items-center gap-2"
                    >

                        View Gallery

                        <span>
                            →
                        </span>

                    </a>

                </div>


                <div
                    class="grid grid-cols-2 md:grid-cols-4 gap-4"
                >

                    @foreach($gallery->take(4) as $item)

                        <a
                            href="/gallery"
                            class="group block overflow-hidden rounded-xl"
                        >

                            <img
                                src="{{ asset('storage/' . $item->image) }}"
                                alt="{{ $item->title ?? 'Pearl School Gallery' }}"
                                class="w-full h-48 md:h-56 object-cover group-hover:scale-105 transition duration-500"
                            >

                        </a>

                    @endforeach

                </div>

            </div>

        @endif

    </div>

</section>


<!-- =========================================================
     SCHOOL NEWS
========================================================= -->

@if($posts->count())

<section
    class="bg-gray-50 border-y border-gray-200"
>

    <div
        class="container mx-auto px-6 py-5"
    >

        <div
            class="flex flex-col md:flex-row md:items-center gap-4"
        >

            <div
                class="flex-shrink-0 bg-secondary text-white font-bold px-5 py-3 rounded-lg"
            >
                School News
            </div>


            <div
                class="overflow-hidden flex-1"
            >

                <div
                    class="flex gap-12 whitespace-nowrap"
                >

                    @foreach($posts as $post)

                        <a
                            href="{{ route('news.show', $post->slug) }}"
                            class="text-gray-700 hover:text-secondary transition"
                        >

                            {{ $post->title }}

                        </a>

                    @endforeach

                </div>

            </div>

        </div>

    </div>

</section>

@endif


<!-- =========================================================
     TESTIMONIALS MARQUEE
========================================================= -->

@if($testimonials->count())

<section class="bg-gray-50 py-16 md:py-20 overflow-hidden">

    <div class="container mx-auto px-6">

        <!-- SECTION HEADING -->

        <div class="text-center mb-12">

            <div
                class="text-secondary font-bold uppercase tracking-wider text-sm"
            >
                Testimonials
            </div>

            <div
                class="w-12 h-1 bg-secondary mx-auto mt-3 mb-5"
            ></div>

            <h2
                class="text-3xl md:text-4xl font-extrabold text-primary"
            >
                What Parents Say
            </h2>

            <p
                class="mt-4 text-gray-600 max-w-2xl mx-auto"
            >
                Hear from parents who trust Pearl Schools with their
                children's education, growth and future.
            </p>

        </div>


        <!-- =====================================================
             SINGLE TESTIMONIAL MARQUEE
        ====================================================== -->

        <div class="testimonial-marquee">

            <div class="testimonial-track">

                {{-- FIRST SET OF TESTIMONIALS --}}

                @foreach($testimonials as $testimonial)

                    <div class="testimonial-card">

                        <!-- STARS -->

                        <div class="flex items-center gap-1 mb-4">

                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>

                        </div>


                        <!-- TESTIMONIAL -->

                        <p
                            class="text-gray-600 leading-7 italic"
                        >
                            "{{ $testimonial->content }}"
                        </p>


                        <!-- PARENT -->

                        <div
                            class="mt-6 flex items-center gap-3"
                        >

                            <div
                                class="w-11 h-11 rounded-full bg-primary text-white flex items-center justify-center font-bold flex-shrink-0"
                            >

                                {{ strtoupper(substr($testimonial->name, 0, 1)) }}

                            </div>


                            <div>

                                <div
                                    class="font-bold text-primary"
                                >

                                    {{ $testimonial->name }}

                                </div>


                                <div
                                    class="text-sm text-gray-500"
                                >

                                    {{ $testimonial->role ?? 'Parent' }}

                                </div>

                            </div>

                        </div>

                    </div>

                @endforeach


                {{-- DUPLICATE SET FOR SEAMLESS CONTINUOUS LOOP --}}

                @foreach($testimonials as $testimonial)

                    <div class="testimonial-card">

                        <!-- STARS -->

                        <div class="flex items-center gap-1 mb-4">

                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>
                            <span class="text-secondary text-lg">★</span>

                        </div>


                        <!-- TESTIMONIAL -->

                        <p
                            class="text-gray-600 leading-7 italic"
                        >
                            "{{ $testimonial->content }}"
                        </p>


                        <!-- PARENT -->

                        <div
                            class="mt-6 flex items-center gap-3"
                        >

                            <div
                                class="w-11 h-11 rounded-full bg-primary text-white flex items-center justify-center font-bold flex-shrink-0"
                            >

                                {{ strtoupper(substr($testimonial->name, 0, 1)) }}

                            </div>


                            <div>

                                <div
                                    class="font-bold text-primary"
                                >

                                    {{ $testimonial->name }}

                                </div>


                                <div
                                    class="text-sm text-gray-500"
                                >

                                    {{ $testimonial->role ?? 'Parent' }}

                                </div>

                            </div>

                        </div>

                    </div>

                @endforeach

            </div>

        </div>

    </div>


    <!-- =====================================================
         TESTIMONIAL MARQUEE CSS
    ====================================================== -->

    <style>

        .testimonial-marquee {
            width: 100%;
            overflow: hidden;
            position: relative;
        }


        .testimonial-track {
            display: flex;
            width: max-content;
            gap: 24px;

            /*
             * One direction only.
             * The duplicated testimonials allow
             * the animation to loop seamlessly.
             */
            animation: testimonialScroll 45s linear infinite;
        }


        .testimonial-card {
            width: 360px;
            min-height: 245px;

            background: white;

            border: 1px solid #e5e7eb;

            border-radius: 18px;

            padding: 28px;

            box-shadow:
                0 4px 15px rgba(0, 0, 0, 0.05);

            flex-shrink: 0;
        }


        /*
         * SINGLE DIRECTION
         */

        @keyframes testimonialScroll {

            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }

        }


        /*
         * PAUSE WHEN MOUSE IS OVER
         */

        .testimonial-marquee:hover
        .testimonial-track {

            animation-play-state: paused;

        }


        /*
         * MOBILE
         */

        @media (max-width: 640px) {

            .testimonial-card {

                width: 300px;

                min-height: 250px;

                padding: 22px;

            }


            .testimonial-track {

                gap: 16px;

            }

        }

    </style>

</section>

@endif

<!-- =========================================================
     CO-CURRICULAR ACTIVITIES
========================================================= -->

<section class="bg-white py-14 md:py-16">

    <div class="container mx-auto px-6">

        <!-- HEADING -->

        <div class="text-center mb-10">

            <div
                class="text-secondary font-bold uppercase tracking-wider text-sm"
            >
                Beyond the Classroom
            </div>

            <div
                class="w-12 h-1 bg-secondary mx-auto mt-3 mb-4"
            ></div>

            <h2
                class="text-3xl md:text-4xl font-extrabold text-primary"
            >
                Co-curricular Activities
            </h2>

            <p
                class="mt-3 text-gray-600 max-w-2xl mx-auto"
            >
                Helping our students discover their talents, build confidence
                and grow beyond the classroom.
            </p>

        </div>


        <!-- ACTIVITIES ROW -->

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">


            <!-- ATHLETICS -->

            <div class="text-center">

                <div
                    class="w-24 h-24 md:w-28 md:h-28 mx-auto rounded-full overflow-hidden border-4 border-secondary shadow-lg"
                >

                    <img
                        src="https://images.unsplash.com/photo-1461896836934-ffe607ba8211?w=500"
                        alt="Athletics"
                        class="w-full h-full object-cover"
                    >

                </div>


                <h3
                    class="mt-5 text-xl font-extrabold text-primary"
                >
                    Athletics
                </h3>


                <p
                    class="mt-2 text-gray-600 text-sm leading-6 max-w-sm mx-auto"
                >
                    Our students are passionate about sports and athletics and have the freedom to choose the one they like and wish to take up. We also participate in inter-house school sports competitions.
                </p>

            </div>


            <!-- IN-HOUSE PUBLICATIONS -->

            <div class="text-center">

                <div
                    class="w-24 h-24 md:w-28 md:h-28 mx-auto rounded-full overflow-hidden border-4 border-secondary shadow-lg"
                >

                    <img
                        src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=500"
                        alt="In-house Publications"
                        class="w-full h-full object-cover"
                    >

                </div>


                <h3
                    class="mt-5 text-xl font-extrabold text-primary"
                >
                    In-house Publications
                </h3>


                <p
                    class="mt-2 text-gray-600 text-sm leading-6 max-w-sm mx-auto"
                >
                    We have several writers who are encouraged to come up with creations that are regularly published in our in-house magazines. We host events to promote our writers and their work.
                </p>

            </div>


            <!-- PERFORMING ARTS & MUSIC -->

            <div class="text-center">

                <div
                    class="w-24 h-24 md:w-28 md:h-28 mx-auto rounded-full overflow-hidden border-4 border-secondary shadow-lg"
                >

                    <img
                        src="https://images.unsplash.com/photo-1503095396549-807759245b35?w=500"
                        alt="Performing Arts and Music"
                        class="w-full h-full object-cover"
                    >

                </div>


                <h3
                    class="mt-5 text-xl font-extrabold text-primary"
                >
                    Performing Arts & Music
                </h3>


                <p
                    class="mt-2 text-gray-600 text-sm leading-6 max-w-sm mx-auto"
                >
                    With professionals on board, we take pride in training our students in art forms like dance, drama, music and more. We organize exhibitions, concerts and musical events to encourage our students to own their talent and flourish in those fields.
                </p>

            </div>

        </div>


        <!-- VIEW ALL ACTIVITIES -->

        <div class="text-center mt-8">

            <a
                href="/activities"
                class="inline-flex items-center gap-2 text-secondary font-bold hover:underline"
            >
                Explore Activities
                <span>→</span>
            </a>

        </div>

    </div>

</section>
<!-- =========================================================
     NEWSLETTER
========================================================= -->

<section
    class="bg-primary py-14"
>

    <div
        class="container mx-auto px-6"
    >

        <div
            class="max-w-3xl mx-auto text-center text-white"
        >

            <h2
                class="text-3xl font-extrabold"
            >

                Stay Connected With
                {{ $settings->school_name ?? 'Pearl School' }}

            </h2>


            <p
                class="mt-3 text-white/80"
            >

                Subscribe to receive school news, events and important announcements.

            </p>


            <form
                action="{{ route('newsletter.subscribe') }}"
                method="POST"
                class="mt-7 flex flex-col sm:flex-row gap-3 max-w-xl mx-auto"
            >

                @csrf

                <input
                    type="email"
                    name="email"
                    required
                    placeholder="Enter your email address"
                    class="flex-1 px-5 py-4 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-secondary"
                >


                <button
                    type="submit"
                    class="bg-secondary text-white font-bold px-7 py-4 rounded-lg hover:opacity-90 transition"
                >
                    Subscribe
                </button>

            </form>

        </div>

    </div>

</section>


<!-- =========================================================
     CALL TO ACTION
========================================================= -->

<section
    class="bg-white py-16"
>

    <div
        class="container mx-auto px-6"
    >

        <div
            class="bg-secondary rounded-2xl px-6 py-14 md:px-12 text-center text-white shadow-lg"
        >

            <h2
                class="text-3xl md:text-4xl font-extrabold"
            >
                Ready to Enroll Your Child?
            </h2>


            <p
                class="mt-4 text-lg text-white/90"
            >
                Give your child the best education in a nurturing environment.
            </p>


            <a
                href="/admissions"
                class="inline-flex items-center gap-3 mt-7 bg-primary text-white font-bold px-8 py-4 rounded-lg hover:opacity-90 transition shadow-lg"
            >

                Apply Now

                <span>
                    →
                </span>

            </a>

        </div>

    </div>

</section>


<!-- =========================================================
     HERO SLIDER JAVASCRIPT
========================================================= -->

@push('scripts')

<script>

document.addEventListener('DOMContentLoaded', function () {

    const slides =
        document.querySelectorAll('.hero-slide');

    const dots =
        document.querySelectorAll('.hero-dot');

    const previousButton =
        document.getElementById('hero-prev');

    const nextButton =
        document.getElementById('hero-next');

    if (!slides.length || slides.length <= 1) {
        return;
    }

    let currentSlide = 0;

    let autoSlide;


    function showSlide(index) {

        if (index < 0) {
            index = slides.length - 1;
        }

        if (index >= slides.length) {
            index = 0;
        }

        slides.forEach(function (slide, slideIndex) {

            if (slideIndex === index) {
                slide.classList.remove('hidden');
            } else {
                slide.classList.add('hidden');
            }

        });


        dots.forEach(function (dot, dotIndex) {

            if (dotIndex === index) {

                dot.classList.remove('bg-white/50');

                dot.classList.add('bg-secondary');

            } else {

                dot.classList.remove('bg-secondary');

                dot.classList.add('bg-white/50');

            }

        });


        currentSlide = index;

    }


    function nextSlide() {
        showSlide(currentSlide + 1);
    }


    function previousSlide() {
        showSlide(currentSlide - 1);
    }


    function startAutoSlide() {

        clearInterval(autoSlide);

        autoSlide = setInterval(
            nextSlide,
            6000
        );

    }


    if (nextButton) {

        nextButton.addEventListener(
            'click',
            function () {

                nextSlide();

                startAutoSlide();

            }
        );

    }


    if (previousButton) {

        previousButton.addEventListener(
            'click',
            function () {

                previousSlide();

                startAutoSlide();

            }
        );

    }


    dots.forEach(function (dot, index) {

        dot.addEventListener(
            'click',
            function () {

                showSlide(index);

                startAutoSlide();

            }
        );

    });


    showSlide(0);

    startAutoSlide();

});

</script>

@endpush


@endsection