<x-layouts.app-layout :page="$page">




    <!-- Carousel Start -->
    <div class="container-fluid p-0 wow fadeIn contaner-hero-slider" data-wow-delay="0.1s">
        <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">

                <!-- Slide 1 -->
                @foreach ($sliders as $index => $slider)
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                        <img class="w-100 img-fluid" src="{{ asset('storage/' . $slider->image) }}" alt="School Image">
                        <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8 col-md-10 text-center">
                                        <h1
                                            class="display-4 display-md-3 display-sm-5 text-light fw-bold mb-4 animated slideInDown">
                                            {{ $slider->title }}
                                        </h1>
                                        <a href="{{ route('about') }}"
                                            class="btn btn-light py-sm-2 px-sm-4">@lang('Read More')</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>

            <!-- Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
                <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>

            <!-- Indicators -->
            <div class="carousel-indicators">
                @foreach ($sliders as $index => $slider)
                    <button type="button" data-bs-target="#header-carousel" data-bs-slide-to="{{ $index }}"
                        class="{{ $index == 0 ? 'active' : '' }}"></button>
                @endforeach

            </div>
        </div>
    </div>
    <!-- Carousel End -->



    <!-- Facts Start -->
    <div class="container-fluid facts py-5 pt-lg-0">
        <div class="container py-5 pt-lg-0">
            <div class="row g-4 justify-content-center">

                @foreach ($schools as $school)
                    <div class="col-lg-4 col-md-6 col-sm-12 wow fadeIn" data-wow-delay="0.1s">
                        <a href="{{ route('school', $school->slug) }}">
                            <div class="bg-white shadow d-flex align-items-center h-100 p-3 inner-container-school rounded"
                                style="min-height: 150px;">
                                <!-- Logo -->
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('storage/' . $school->logo) }}" alt="Logo" width="80"
                                        class="rounded-circle border">
                                </div>

                                <!-- Text -->
                                <div class="ps-3">
                                    <h5 class="mb-1 fw-bold text-primary">{{ $school->name }}</h5>
                                    <span class="text-muted small">{{ $school->short_description }}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
    <!-- Facts End -->



    <!-- About Start -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5 align-items-center">

                <!-- Left: Images -->
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative overflow-hidden ps-lg-5 pt-lg-5 h-100" style="min-height: 400px;">
                        @if ($home_content->about_image1)
                            <img class="position-absolute w-100 h-100 rounded shadow"
                                src="{{ asset('storage/' . $home_content->about_image1) }}" alt="About Image"
                                style="object-fit: cover;">
                        @endif

                        @if ($home_content->about_image2)
                            <img class="position-absolute top-0 start-0 bg-white p-2 rounded shadow d-none d-sm-block"
                                src="{{ asset('storage/' . $home_content->about_image2) }}" alt="Overlay Image"
                                style="width: 180px; height: 180px; object-fit: cover;">
                        @endif

                        <!-- Overlay smaller image -->

                    </div>
                </div>

                <!-- Right: Content -->
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="h-100">
                        <h6 class="text-primary text-uppercase mb-2">@lang('About Us')</h6>
                        <h1 class="fw-bold mb-4">{{ $home_content->about_title }}</h1>
                        <p class="mb-4">
                            {{ $home_content->about_description }}
                        </p>

                        <!-- Buttons -->
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <a class="btn btn-primary w-100 py-3 px-4"
                                    href="{{ route('about') }}">@lang('Read More')</a>
                            </div>
                            <div class="col-sm-6">
                                <a class="d-flex align-items-center btn btn-outline-primary border-2 w-100 p-2"
                                    href="tel:{{ $contact->phone }}">
                                    <span
                                        class="flex-shrink-0 btn-square bg-primary d-flex align-items-center justify-content-center me-2"
                                        style="width: 40px; height: 40px;">
                                        <i class="fa fa-phone-alt text-white"></i>
                                    </span>
                                    <span class="fw-semibold">{{ $contact->phone }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- About End -->




    <!--Start Slider Facility -->
    <div class="container py-5">
        <h2 class="text-center mb-4 fw-bold">@lang('Our Facilities')</h2>

        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <!-- Facility Item -->
                @foreach ($facilities as $facility)
                    <div class="swiper-slide d-flex flex-column align-items-center p-4 shadow-sm rounded-4 bg-white">
                        <img src="{{ asset('storage/' . $facility->image) }}" alt="Facility 1"
                            class="mb-3 image-facility" width="100">
                        <h6 class="fw-semibold">{{ $facility->title }}</h6>
                    </div>
                @endforeach




            </div>

            <!-- Pagination & Navigation -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

        <a href="{{ route('fasilities') }}">
            <button class="btn btn-primary d-block mx-auto mt-5">@lang('Read More')</button>

        </a>
    </div>
    <!--End Slider Facility -->






    <!-- Latest News Start -->
    <div class="container-xxl my-6 py-6 pb-0"
        style="background:
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url('{{ asset('storage/' . $home_content->news_image) }}') center center no-repeat;
        background-size: cover;">

        <div class="container">
            <div class="container">

                <!-- Section Title -->
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                    <h6 class="text-primary text-uppercase mb-2">@lang('Latest News')</h6>
                    <h2 class="fw-bold mb-4">
                        {{ $home_content->news_description }}
                    </h2>
                </div>

                <!-- News Grid -->
                <div class="row g-4 justify-content-center">
                    @foreach ($news as $index => $item)
                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="{{ 0.1 + (int) $index * 0.2 }}s">
                            <div class="bg-white shadow-sm rounded d-flex flex-column overflow-hidden h-100">
                                <div class="position-relative">
                                    <img class="img-fluid w-100 image-news"
                                        src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}"
                                        style="object-fit: cover; height: 220px;">
                                    <div
                                        class="position-absolute top-0 start-0 bg-primary text-white small px-3 py-1 rounded-end">
                                        <i
                                            class="fa fa-calendar me-1"></i>{{ $item->created_at->format('d / m / Y') }}
                                    </div>
                                </div>
                                <div class="p-4 text-center flex-grow-1">
                                    <h5 class="fw-bold mb-3">{{ $item->title }}</h5>
                                    <p class="text-muted small">{{ Str::limit($item->description, 120) }}</p>
                                </div>
                                <div class="text-center pb-3">
                                    <a class="btn btn-outline-primary border-2 px-4"
                                        href="{{ route('new', $item->id) }}">
                                        @lang('Read More')
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
        <!-- Latest News End -->
    </div>





    <!-- Contact Section -->
    <div class="container-fluid py-5 bg-light" id="contact">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">@lang('Contact Us')</h2>
                <p class="text-muted">{{ $home_content->contact_description }}</p>
            </div>

            <div class="row g-4">
                <!-- Map -->
                <div class="col-lg-6">
                    <div class="rounded-3 shadow-sm overflow-hidden" style="height: 100%;">
                        @if ($contact->maps)
                            <iframe src="{{ $contact->maps }}" width="100%" height="400" style="border:0;"
                                allowfullscreen="" loading="lazy">
                            </iframe>
                        @endif

                    </div>
                </div>
                <!-- Contact Info & Form -->
                <div class="col-lg-6">
                    <div class="bg-white p-4 rounded-3 shadow-sm h-100">
                        <!-- Contact Info -->
                        <div class="mb-4">
                            <p><i class="fa fa-map-marker-alt text-primary me-2"></i> {{ $contact->address }}</p>
                            <p><i class="fa fa-phone text-primary me-2"></i> {{ $contact->phone }}</p>
                            <p><i class="fa fa-envelope text-primary me-2"></i> {{ $contact->email }}</p>
                        </div>

                        <!-- Contact Form -->
                        <form action="{{ route('contact.submit') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <input type="text" name="name" class="form-control"
                                    placeholder="@lang('Your Name')" required>
                                @error('name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <input type="email" name="email" class="form-control"
                                    placeholder="@lang('Your Email')">
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <input type="text" name="phone" class="form-control"
                                    placeholder="@lang('Your Phone Number')" required>
                                @error('phone')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <input type="text" name="subject" class="form-control"
                                    placeholder="@lang('Subject')" required>
                                @error('subject')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <textarea name="message" class="form-control" rows="4" placeholder="@lang('Your Message')" required></textarea>
                                @error('message')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-primary w-100 rounded-pill">
                                @lang('Send Message')
                            </button>
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Section -->








    <!-- Features Start -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5">
                <!-- Text Content -->
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <h6 class="text-primary text-uppercase mb-2">@lang('Why Choose Us!')</h6>
                    <h3 class=" mb-2">{{ $home_content->why_choose_us_title }}</h3>
                    <p class="mb-2">
                        {{ $home_content->why_choose_us_description }}
                    </p>
                    <div class="row gy-3 gx-4">
                        @foreach ($home_content->why_choose_us_items as $index => $item)
                            <div class="col-sm-6 wow fadeIn" data-wow-delay="{{ 0.1 + $index * 0.1 }}s">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="flex-shrink-0 btn-square bg-primary me-3">
                                        <i class="fa fa-check text-white"></i>
                                    </div>
                                    <h5 class="mb-0">{{ $item['title'] }}</h5>
                                </div>
                                <span>{{ $item['description'] }}</span>
                            </div>
                        @endforeach

                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="position-relative overflow-hidden pe-5 pt-5 h-100" style="min-height: 400px;">
                        @if ($home_content->why_choose_us_image1)
                            <img class="position-absolute w-100 h-100"
                                src="{{ asset('storage/' . $home_content->why_choose_us_image1) }}" alt=""
                                style="object-fit: cover;">
                        @endif

                        @if ($home_content->why_choose_us_image2)
                            <img class="position-absolute top-0 end-0 bg-white ps-3 pb-3"
                                src="{{ asset('storage/' . $home_content->why_choose_us_image2) }}" alt=""
                                style="width: 200px; height: 200px">
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Features End -->


</x-layouts.app-layout>
