@extends('layouts.frontend')

@section('content')
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Paud Al-Mubarok</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="keywords">
        <meta content="" name="description">

        <!-- Google Web Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Montserrat:wght@200;400;600&display=swap" rel="stylesheet"> 

        <!-- Icon Font Stylesheet -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

        <!-- Libraries Stylesheet -->
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

        <!-- Customized Bootstrap Stylesheet -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="css/style.css" rel="stylesheet">

        

    </head>

    <body>

        <!-- Spinner Start -->
        <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50  d-flex align-items-center justify-content-center">
            <div class="spinner-grow text-primary" role="status"></div>
        </div>
        <!-- Spinner End -->


        <!-- Navbar start -->
        <div class="container-fluid border-bottom bg-light wow fadeIn" data-wow-delay="0.1s">
            <div class="container topbar bg-primary d-none d-lg-block py-2" style="border-radius: 0 40px">
                <div class="d-flex justify-content-between">
                    <div class="top-info ps-2">
                        <small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">Jatiwaringin,Mauk</a></small>
                        <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">paudalmubarok@gmail.com</a></small>
                    </div>
                    <div class="top-link pe-2">
                        <a href="" class="btn btn-light btn-sm-square rounded-circle"><i class="fab fa-facebook-f text-secondary"></i></a>
                        <a href="" class="btn btn-light btn-sm-square rounded-circle"><i class="fab fa-twitter text-secondary"></i></a>
                        <a href="" class="btn btn-light btn-sm-square rounded-circle"><i class="fab fa-instagram text-secondary"></i></a>
                        <a href="" class="btn btn-light btn-sm-square rounded-circle me-0"><i class="fab fa-linkedin-in text-secondary"></i></a>
                    </div>
                </div>
            </div>
            <div class="container px-0">
                <nav class="navbar navbar-light navbar-expand-xl py-3">
                    <a href="index.php" class="navbar-brand"><h1 class="text-primary display-6">Mub<span class="text-secondary">arok</span></h1></a>
                    <button class="navbar-toggler py-2 px-3 ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                        <span class="fa fa-bars text-primary"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <div class="navbar-nav mx-auto">
                            <a href="index.php" class="nav-item nav-link active">Beranda</a>
                            <a href="tentang" class="nav-item nav-link">Tentang kami</a>
                            <a href="kegiatan" class="nav-item nav-link">Kegiatan</a>
                            <a href="layanan" class="nav-item nav-link">Layanan</a>
                            <a href="program" class="nav-item nav-link">Programs</a>
                            <div class="nav-item dropdown">
                            </div>
                            <a href="kontak" class="nav-item nav-link">Hubungi kami</a>
                            <a href="#" class="admin-btn ms-3" data-bs-toggle="modal" data-bs-target="#adminLoginModal">
    <i class="fas fa-user-shield"></i>Admin
</a>
                        </a>
                        </div>
                        <div class="d-flex me-4">
                            <div id="phone-tada" class="d-flex align-items-center justify-content-center">
                                <a href="" class="position-relative wow tada" data-wow-delay=".9s" >
                                    <i class="fab fa-whatsapp fa-2x text-success me-4"></i>
                                    <div class="position-absolute" style="top: -7px; left: 20px;">
                                        <span><i class="fa fa-comment-dots text-secondary"></i></span>
                                    </div>
                                </a>
                            </div>
                            <div class="d-flex flex-column pe-3 border-end border-primary">
                                <span class="text-primary">Punya Pertanyaan?</span>
                                <a href="https://wa.me/6289668378755" target="_blank" class="text-success text-decoration-none">
                                WhatsApp
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <div class="container-fluid py-5 hero-header wow fadeIn" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="row g-5">
                    <div class="col-lg-7 col-md-12">
                        <h1 class="mb-3 text-primary">Selamat Datang Di</h1>
                        <h1 class="mb-5 display-1 text-white">PAUD Al Mubarok</h1>
                        <a href="" class="btn btn-primary px-4 py-3 px-md-5  me-4 btn-border-radius">Get Started</a>
                        <a href="" class="btn btn-primary px-4 py-3 px-md-5 btn-border-radius">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Hero End -->

<!-- Modal Login Admin -->
<div class="modal fade" id="adminLoginModal" tabindex="-1" aria-labelledby="adminLoginModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="adminLoginModalLabel">Login Admin</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{{ route('admin.login') }}">
          @csrf

          @if (session('loginError'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Swal.fire({
                icon: 'error',
                title: 'Login Gagal',
                text: '{{ session("loginError") }}',
                confirmButtonColor: '#d33',
                confirmButtonText: 'Coba Lagi'
            }).then(() => {
                var myModal = new bootstrap.Modal(document.getElementById('myModal2'));
                myModal.show();
            });
        });
    </script>
@endif

          <div class="mb-3">
            <label for="adminEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="adminEmail" name="email" required>
          </div>
          <div class="mb-3">
            <label for="adminPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="adminPassword" name="password" required>
          </div>
          <button type="submit" class="btn btn-primary w-100">Login</button>
        </form>
      </div>
    </div>
  </div>
</div>

        <!-- About Start -->
        <div class="container-fluid py-5 about bg-light">
            <div class="container py-5">
                <div class="row g-5 align-items-center">
                    <div class="col-lg-5 wow fadeIn" data-wow-delay="0.1s">
                        <div class="video border">
                            <button type="button" class="btn btn-play" data-bs-toggle="modal" data-src="https://www.youtube.com/embed/DWRcNpR6Kdc" data-bs-target="#videoModal">
                                <span></span>
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-7 wow fadeIn" data-wow-delay="0.3s">
                        <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">Tentang Kami</h4>
                        <h1 class="text-dark mb-4 display-5">Kami Belajar dengan Cara Menyenangkan untuk Membangun Masa Depan Cerah Anak Anda</h1>
                        <p class="text-dark mb-4">PAUD Al Mubarok adalah tempat terbaik untuk anak Anda tumbuh dan berkembang. Dengan metode belajar yang menyenangkan dan lingkungan yang penuh kasih sayang, kami membantu anak usia dini mengenal dunia dengan cara yang ceria dan aman.
                        </p>
                        <div class="row mb-4">
                            <div class="col-lg-6">
                                <h6 class="mb-3"><i class="fas fa-check-circle me-2"></i>Kegiatan Fisik & Motorik Anak</h6>
                                <h6 class="mb-3"><i class="fas fa-check-circle me-2 text-primary"></i>Permainan Edukatif di Luar Ruangan</h6>
                                <h6 class="mb-3"><i class="fas fa-check-circle me-2 text-secondary"></i>Pengenalan Pola Makan Sehat</h6>
                            </div>
                            <div class="col-lg-6">
                                <h6 class="mb-3"><i class="fas fa-check-circle me-2"></i>Lingkungan Aman dan Terjaga</h6>
                                <h6 class="mb-3"><i class="fas fa-check-circle me-2 text-primary"></i>Suasana Ceria dan Penuh Kasih</h6>
                                <h6><i class="fas fa-check-circle me-2 text-secondary"></i>	Guru Berpengalaman & Peduli Anak</h6>
                            </div>
                        </div>
                        <a href="tentang" class="btn btn-primary px-5 py-3 btn-border-radius">More Details</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Video -->
        <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Youtube Video</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 16:9 aspect ratio -->
                        <div class="ratio ratio-16x9">
                            <iframe class="embed-responsive-item" src="" id="video" allowfullscreen allowscriptaccess="always"
                                allow="autoplay"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- About End -->
        
        <!-- Service Start -->
        <div class="container-fluid service py-5">
            <div class="container py-5">
                <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 700px;">
                    <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">Apa yang Kami Tawarkan</h4>
                    <h1 class="mb-5 display-3">Terima Kasih Telah Mempercayakan Anak Anda di PAUD Al Mubarok</h1>
                </div>
                <div class="row g-5">
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.1s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-gamepad fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Belajar & Bermain</a>
                                    <p class="my-3">Anak belajar sambil bermain dalam suasana menyenangkan yang membantu perkembangan motorik, sosial, dan emosional secara alami.</p>
                                    <a href="layanan" class="btn btn-primary text-white px-4 py-2 my-2 btn-border-radius">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.3s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-sort-alpha-down fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Program A sampai Z</a>
                                    <p class="my-3">Kami menyediakan berbagai kegiatan edukatif seperti seni, hafalan, membaca dini, olahraga, hingga keterampilan dasar yang dirancang untuk anak usia dini.

.</p>
                                    <a href="layanan" class="btn btn-primary text-white px-4 py-2 my-2 btn-border-radius">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.5s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-users fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Guru Profesional</a>
                                    <p class="my-3">Anak didampingi oleh guru berpengalaman yang peduli, sabar, dan memahami kebutuhan perkembangan anak usia dini.</p>
                                    <a href="layanan" class="btn btn-primary text-white px-4 py-2 my-2 btn-border-radius">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.7s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-user-nurse fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Kesehatan Mental Anak</a>
                                    <p class="my-3">Kami menciptakan lingkungan positif dan penuh kasih agar anak merasa nyaman, percaya diri, dan tumbuh dengan kesehatan mental yang baik sejak dini.</p>
                                    <a href="layanan" class="btn btn-primary text-white px-4 py-2 my-2 btn-border-radius">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Service End -->


        <!-- Programs Start -->
<div class="container-fluid programs py-5 bg-light">
    <div class="container py-5">
        <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 700px;">
            <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">Program PAUD</h4>
            <h1 class="mb-5 display-3">Berbagai Kegiatan Belajar yang Menyenangkan</h1>
        </div>

        <div class="row g-5 justify-content-center">
            @forelse($programs as $program)
                <div class="col-md-6 col-lg-6 col-xl-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="program-item rounded">
                        <div class="program-img position-relative">
                            <div class="overflow-hidden img-border-radius">
                                <img src="{{ asset('img/' . $program->gambar) }}" class="img-fluid w-100" alt="{{ $program->judul }}">
                            </div>
                            <div class="px-4 py-2 bg-primary text-white program-rate"></div>
                        </div>
                        <div class="program-text bg-white px-4 pb-3">
                            <div class="program-text-inner">
                                <a href="#" class="h4">{{ $program->judul }}</a>
                                <p class="mt-3 mb-0">{{ $program->deskripsi }}</p>
                            </div>
                        </div>
                        <div class="program-teacher d-flex align-items-center border-top border-primary bg-white px-4 py-3">
                            <div class="ms-3">
                                <h6 class="mb-0 text-primary"></h6>
                                <small></small>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between px-4 py-2 bg-primary rounded-bottom">
                            <small class="text-white"><i class="fas fa-wheelchair me-1"></i></small>
                            <small class="text-white"><i class="fas fa-book me-1"></i></small>
                            <small class="text-white"><i class="fas fa-clock me-1"></i></small>
                        </div>
                    </div>
                </div>
            @empty
                <p class="text-center">Belum ada program.</p>
            @endforelse
        </div>
    </div>
</div>
<!-- Programs End -->

         
        <!-- Events Start -->
<div class="container-fluid events py-5 bg-light">
    <div class="container py-5">
        <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 700px;">
            <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">Kegiatan Kami</h4>
            <h1 class="mb-5 display-3">Dokumentasi Kegiatan</h1>
        </div>

        <div class="row g-5 justify-content-center">
            @forelse($kegiatans as $kegiatan)
                <div class="col-md-6 col-lg-6 col-xl-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="events-item bg-primary rounded">
                        <div class="events-inner position-relative">
                            <div class="events-img overflow-hidden rounded-circle position-relative">
                                <img src="{{ asset('img/' . $kegiatan->foto) }}" class="img-fluid w-100 rounded-circle" alt="{{ $kegiatan->judul }}">
                                <div class="event-overlay">
                                    <a href="{{ asset('img/' . $kegiatan->foto) }}" data-lightbox="event-{{ $kegiatan->id }}"><i class="fas fa-search-plus text-white fa-2x"></i></a>
                                </div>
                            </div>
                            <div class="px-4 py-2 bg-secondary text-white text-center events-rate">
                                {{ \Carbon\Carbon::parse($kegiatan->tanggal)->format('Y') }}
                            </div>
                            <div class="d-flex justify-content-between px-4 py-2 bg-secondary">
                                <small class="text-white"><i class="fas fa-calendar me-1 text-primary"></i>{{ \Carbon\Carbon::parse($kegiatan->tanggal)->format('d M Y') }}</small>
                                <small class="text-white"><i class="fas fa-map-marker-alt me-1 text-primary"></i>Mauk</small>
                            </div>
                        </div>
                        <div class="events-text p-4 border border-primary bg-white border-top-0 rounded-bottom">
                            <a href="#" class="h4">{{ $kegiatan->judul }}</a>
                            <p class="mb-0 mt-3">{{ $kegiatan->deskripsi }}</p>
                        </div>
                    </div>
                </div>
            @empty
                <p class="text-center">Belum ada kegiatan.</p>
            @endforelse
        </div>
    </div>
</div>
<!-- Events End -->


        <!-- Footer Start -->
        <div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="row g-5">
                <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="footer-item">
                    <h2 class="fw-bold mb-3"><span class="text-primary mb-0">PAUD</span><span class="text-secondary"> Al Mubarok</span></h2>
                    <p class="mb-4">Sekolah Anak Usia Dini yang menyenangkan dan penuh kasih, berlokasi di Jatiwaringin, Mauk, Kabupaten Tangerang.</p>
                    <div class="border border-primary p-3 rounded bg-light">
                        <h5 class="mb-3">Jam Kunjungan</h5>
                        <p class="mb-1">Senin - Jumat: 08.00 - 11.00 WIB</p>
                        <p class="mb-0">Sabtu - Minggu: Libur</p>
                    </div>
                </div>
            </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <div class="footer-item">
                            <div class="d-flex flex-column p-4 ps-5 text-dark border border-primary" 
                            style="border-radius: 50% 20% / 10% 40%;">
                            <p>Senin: 08.00 - 11.00 WIB</p>
                            <p>Selasa: 08.00 - 11.00 WIB</p>
                            <p>Rabu: 08.00 - 11.00 WIB</p>
                            <p>Kamis: 08.00 - 11.00 WIB</p>
                            <p>Jumat: 08.00 - 10.00 WIB</p>
                            <p>Sabtu: Libur</p>
                            <p class="mb-0">Minggu: Libur</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <div class="footer-item">
                            <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">LOCATION</h4>
                            <div class="d-flex flex-column align-items-start">
                            <a class="text-body mb-3"><i class="fa fa-map-marker-alt text-primary me-2"></i> Jatiwaringin RT 004 RW 001, Mauk, Kab. Tangerang</a>
                            <a href="https://wa.me/6289668378755" class="text-body mb-3"><i class="fab fa-whatsapp text-primary me-2"></i> 0896-6837-8755 (WA)</a>
                            <a class="text-body mb-3"><i class="fa fa-clock text-primary me-2"></i> 07.00 - 11.00 WIB</a>
                                <div class="footer-icon d-flex">
                                    <a class="btn btn-primary btn-sm-square me-3 rounded-circle text-white" href=""><i class="fab fa-facebook-f"></i></a>
                                    <a class="btn btn-primary btn-sm-square me-3 rounded-circle text-white" href=""><i class="fab fa-twitter"></i></a>
                                    <a href="#" class="btn btn-primary btn-sm-square me-3 rounded-circle text-white"><i class="fab fa-instagram"></i></a>
                                    <a href="#" class="btn btn-primary btn-sm-square rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="footer-item">
        <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">
            Lokasi PAUD Al Mubarok
        </h4>
        <div class="rounded border border-primary overflow-hidden" style="width: 100%; height: 200px;">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d304.69055499849856!2d106.54165079149152!3d-6.085553325043288!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sid!2sid!4v1754514849019!5m2!1sid!2sid"
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</div>

                               </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End -->

<!-- Copyright Start -->
<div class="container-fluid copyright bg-dark py-3">
    <div class="container text-center">
        <small class="text-white">
            &copy; 2025 PAUD Al Mubarok. All rights reserved. 
        </small>
    </div>
</div>
<!-- Copyright End -->

        <!-- Copyright End -->


        <!-- Back to Top -->
        <a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>   

        
    <!-- JavaScript Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/lightbox/js/lightbox.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
    </body>

</html>
@endsection
