@section('title', 'Home')
@include('componen_public.header')
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">


<!-- Carousel Start -->
<div class="header-carousel owl-carousel">
    @foreach ($album as $galeri)
        <div class="header-carousel-item">
            <img src="{{ asset($galeri->foto_album) }}" class="img-fluid w-100" alt="Image">
            <div class="carousel-caption">
                <div class="container">
                    <div class="row g-5">
                        <div class="col-12 animated fadeInUp">
                            <div class="text-center">
                                <h4 class="text-primary text-uppercase fw-bold mb-4">{{ $galeri->nama_album }}</h4>
                                <h2 class="display-4  text-white">{{ $galeri->caption_top }}</h2>
                                <h4 class="display text-white mb-5">{{ $galeri->caption_center }}</h4>
                                {{-- <p class="mb-5 fs-5">{{ $galeri->caption_bottom }}</p> --}}

                                                                    
                                    <div class="d-flex flex-column flex-md-row justify-content-center flex-shrink-0 mb-4 gap-2">
                                        @if($daftar->status == 'aktif')
                                            <a href="{{ route('daftar_sekarang') }}"
                                                class="btn btn-light btn-lg rounded-pill py-3 px-4 px-md-5">
                                                <i class="bi bi-book-half"></i> Daftar Sekarang
                                            </a>
                                        @endif
                                        <a href="{{ route('donasi') }}"
                                            class="btn btn-success btn-lg rounded-pill py-3 px-4 px-md-5">
                                            <i class="bi bi-heart-half"></i> Donasi
                                        </a>
                                    </div>

                                    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center gap-3">
                                            <h2 class="text-white mb-2 mb-md-0">Support Us:</h2>
                                            <div class="d-flex gap-2">
                                                <a class="btn btn-md-square btn-light rounded-circle" href="https://www.facebook.com/{{ $pengaturan->facebook }}" target="_blank">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                                <a class="btn btn-md-square btn-light rounded-circle" href="https://www.instagram.com/{{ $pengaturan->instagram }}" target="_blank">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                                <a class="btn btn-md-square btn-light rounded-circle" href="https://www.youtube.com/{{ $pengaturan->youtube }}" target="_blank">
                                                    <i class="fab fa-youtube"></i>
                                                </a>
                                            </div>
                                        </div>

                                
                                           
                                           

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach


</div>
<!-- Navbar & Hero End -->

<!-- Services Start -->
<div class="container-fluid service pb-5">
    <div class="container pb-5">
        <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
            <!-- <h4 class="text-primary">Our Services</h4>
                    <h1 class="display-5 mb-4">We Services provided best offer</h1>
                    <p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur adipisci facilis cupiditate recusandae aperiam temporibus corporis itaque quis facere, numquam, ad culpa deserunt sint dolorem autem obcaecati, ipsam mollitia hic.
                    </p> -->
        </div>
        <div class="row g-4">
            <!-- Penghafal Qur'an -->
            <div class="col-12 col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.2s">
                <div class="service-item text-center">
                    <div class="service-icon mb-3">
                        <i class="fas fa-book fa-3x text-success mt-3"></i> <!-- Icon for Penghafal Qur'an -->
                    </div>
                    <div class="rounded-bottom p-4">
                        <a href="#" class="h4 d-inline-block mb-4">Penghafal Qur'an</a>
                        <p class="mb-4">Membina generasi penghafal Al-Qur'an dengan program tahfidz yang
                            berkualitas dan pengajaran yang sistematis.</p>
                    </div>
                </div>
            </div>

            <!-- Pesantren Modern -->
            <div class="col-12 col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.4s">
                <div class="service-item text-center">
                    <div class="service-icon mb-3">
                        <i class="fas fa-book-open fa-3x text-success mt-3"></i> <!-- Icon for Pesantren Modern -->
                    </div>
                    <div class="rounded-bottom p-4">
                        <a href="#" class="h4 d-inline-block mb-4">Pesantren Modern</a>
                        <p class="mb-4">Menggabungkan pendidikan agama dan ilmu modern untuk mencetak santri yang
                            siap menghadapi tantangan zaman.</p>
                    </div>
                </div>
            </div>

            <!-- Mengenal Teknologi -->
            <div class="col-12 col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.6s">
                <div class="service-item text-center">
                    <div class="service-icon mb-3">
                        <i class="fas fa-laptop-code fa-3x text-success mt-3"></i>
                        <!-- Icon for Mengenal Teknologi -->
                    </div>
                    <div class="rounded-bottom p-4">
                        <a href="#" class="h4 d-inline-block mb-4">Mengenal Teknologi</a>
                        <p class="mb-4">Program untuk mengenalkan teknologi informasi kepada santri agar melek
                            digital dan siap bersaing di era global.</p>
                    </div>
                </div>
            </div>

            <!-- Kegiatan Sosial -->
            <div class="col-12 col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.8s">
                <div class="service-item text-center">
                    <div class="service-icon mb-3">
                        <i class="fas fa-users fa-3x text-success mt-3"></i> <!-- Icon for Kegiatan Sosial -->
                    </div>
                    <div class="rounded-bottom p-4">
                        <a href="#" class="h4 d-inline-block mb-4">Kegiatan Sosial</a>
                        <p class="mb-4">Melibatkan santri dalam kegiatan sosial untuk membangun karakter peduli
                            terhadap lingkungan masyarakat dan sesama.</p>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
{{-- team --}}

<div class="container-fluid team pb-5">
    <div class="container pb-5">
        <div class="text-center mx-auto wow fadeInUp mb-0" data-wow-delay="0.2s" style="max-width: 800px;">
            <h2 class="fw-bold" style="font-size: ; color:  #01601c; letter-spacing: 2px;">
                Pengelola Pesantren
            </h2>
            <div style="width: 100px; height: 4px; background-color:  #01601c;; margin: 15px auto;"></div>
        </div>
        <div class="owl-carousel blog-carousel wow fadeInUp" data-wow-delay="0.2s" >
            @foreach ($pengurus as $pegawai)
                <div class="team-item p-4">
                    <div class="team-img">
                        <img src="{{ asset( $pegawai->foto_pegawai) }}" class="img-fluid"
                            alt="Foto {{ $pegawai->nama_lengkap }}" >
                    </div>
                    <div class="team-title">
               <h6 class="mb-0" style="font-size: clamp(14px, 2vw, 18px); 
                    text-align: center; 
                    white-space: nowrap; 
                    overflow: hidden; 
                    text-overflow: ellipsis; 
                    max-width: 100%;">
                    {{ $pegawai->nama_lengkap }}
                </h6>

<p class="mb-0" style="font-size: clamp(12px, 1.5vw, 16px); 
    text-align: center; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    max-width: 100%;">
    {{ $pegawai->jabatan }}
</p>

                    </div>
                    <div class="team-icon">
                        <a class="btn btn-primary btn-sm-square rounded-circle me-3" href="https://www.facebook.com/{{ $pegawai->facebook }}" target="_blank"><i
                                class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-primary btn-sm-square rounded-circle me-3" href="https://wa.me/{{ $pegawai->wa }}"><i
                                class="fab fa-whatsapp"></i></a>
                        <a class="btn btn-primary btn-sm-square rounded-circle me-0" href="https://www.instagram.com/{{ $pegawai->ig }}"><i
                                class="fab fa-instagram"></i></a>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</div>
{{-- end team --}}



<!-- Blog Start -->
<div class="container-fluid mb-5 mt-3">
    <div class="container">
        <h2 class="fw-bold text-center" style="font-size: ; color:  #01601c; letter-spacing: 2px;">
                Program Terbaru
        </h2>
         <div style="width: 100px; height: 4px; background-color:  #01601c;; margin: 15px auto;"></div>
        <div class="row g-4">
            @foreach ($programs as $program)
                <div class="col-md-4">
                    <div class="position-relative border rounded shadow-sm overflow-hidden" style="height: 500px;">
                        <!-- Gambar Program -->
                        <img src="{{ asset( $program->thumbnail) }}"
                            class="img-fluid w-100 h-50 object-fit-cover" alt="Program Thumbnail">

                        <!-- Tanggal Program -->
                        <div class="position-absolute top-0 end-0 bg-primary text-white px-3 py-1 rounded-start">
                            {{ \Carbon\Carbon::parse($program->tanggal_publikasi)->format('d-m-Y') }}
                        </div>

                        <!-- Deskripsi Program -->
                        <div class="position-absolute bottom-0 start-0 w-100 bg-white bg-opacity-75 p-3">
                            <a href="#" class="h4 text-center d-inline-block mb-2 text-success text-uppercase">
                                {{ $program->nama_program }}
                            </a>
                            <p class="mb-3 text-muted">Assalamu'alaikum Sahabat PONPES PHIN NUR ALMADANY! Semoga sehat
                                selalu. Kami ingin berbagi program terbaru. Mari bersama menjalani aktivitas yang
                                bermanfaat untuk kemajuan dan ukhuwah kita.. <a
                                    href="{{ route('detail-program', ['id' => $program->id, 'slug' => Str::slug($program->nama_program)]) }}"
                                    class="btn btn-primary btn-sm mt-2">
                                    Baca Selengkapnya
                                </a>
                            </p>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>


<div class="container mb-5">
    <div class="row mb-5">
        <div class="col-md-12">
        <h2 class="fw-bold text-center" style="font-size: ; color:  #01601c; letter-spacing: 2px;">Video</h2>
         <div style="width: 100px; height: 4px; background-color:  #01601c;; margin: 15px auto;"></div>
<div class="row">
@foreach ($video as $video)
    <div class="col-md-3 mb-4">
        <div class="card" style="height: 100%; display: flex; flex-direction: column;">
            <div class="ratio ratio-16x9" style="flex-grow: 1; position: relative;">
                <iframe src="{{ $video->link }}" 
                        title="{{ $video->judul_video }}" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen
                        style="width: 100%; height: 100%; border: none;">
                </iframe>
            </div>
            <div class="card-body" style="height: 150px; overflow: hidden;">
                 <small class="text-muted" style="display: block; margin-bottom: 5px;">
                    {{ $video->created_at->format('d M Y') }}
                </small>
                <h5 class="card-title" style="font-size: 1.1rem; margin-bottom: 10px;">{{ $video->judul_video }}</h5>
                <p class="card-text" style="font-size: 0.9rem;">
                    {{ strlen($video->deskripsi) > 50 ? substr($video->deskripsi, 0, 50) . '...' : $video->deskripsi }}
                </p>
            </div>
        </div>
    </div>
@endforeach

</div>

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



<section id="clients" class="clients mb-5">
    <div class="container">

        <div class="section-title mb-4">
            <h2 class="fw-bold text-center" style="color: #01601c; letter-spacing: 2px;">Mitra Kami</h2>
            <div style="width: 100px; height: 4px; background-color: #01601c; margin: 15px auto;"></div>
        </div>

        <div class="clients-slider swiper mt-4">
            <div class="swiper-wrapper align-items-center">
            @foreach($mitras as $mitra)
                <div class="swiper-slide">
                    <a href="{{ $mitra->link_web }}" target="_blank" style="text-decoration: none;">
                        <img src="{{ asset($mitra->logo) }}" 
                             class="img-fluid" 
                             alt="Mitra Logo" 
                             style="max-width: 120px; max-height: 120px; margin: 10px 20px; transition: transform 0.3s ease;">
                    </a>
                </div>
            @endforeach

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

    </div>
</section>




@include('componen_public/slogan')

<!-- Blog End -->

{{-- <div class="container-fluid">

    <div class="col-12 mt-0">
        <div class="text-center mx-auto  mt-2" data-wow-delay="0.2s" style="max-width: 1000px;">
            <h3 class="text-primary">Lokasi Kami</h3>
        </div>
        <div style=" height: 300px;">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.182852624826!2d108.49427197480905!3d-6.868680293129973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6f19e2642d81f7%3A0x28823bd2175ebe84!2sPPA%20AlMadany!5e0!3m2!1sen!2sid!4v1733795160584!5m2!1sen!2sid"
                style="border: 0; width: 100%; height: 100%;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>


    </div>
</div> --}}

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const swiper = new Swiper('.swiper', {
            slidesPerView: 5, // Default menampilkan 5 gambar
            spaceBetween: 20, // Default jarak antar gambar
            loop: true, // Slider akan terus berputar
            autoplay: {
                delay: 2000, // Auto geser setiap 2 detik
                disableOnInteraction: false, // Tetap autoplay walau pengguna berinteraksi
            },
            speed: 800, // Membuat transisi smooth
            breakpoints: {
                // Atur konfigurasi berdasarkan lebar layar
                320: {
                    slidesPerView: 2, // 2 gambar untuk layar kecil
                    spaceBetween: 10, // Jarak antar gambar lebih kecil
                },
                576: {
                    slidesPerView: 3, // 3 gambar untuk layar sedang
                    spaceBetween: 15,
                },
                768: {
                    slidesPerView: 4, // 4 gambar untuk layar medium
                    spaceBetween: 20,
                },
                992: {
                    slidesPerView: 5, // 5 gambar untuk layar besar
                    spaceBetween: 25,
                },
            },
        });
    });
</script>


@include('componen_public/footer')