@extends('layouts.layouts')

@section('content')
    <section id="hero">
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="6000">
            <div class="carousel-inner">

                @foreach ($heroes as $hero)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                        <div class="hero-slide" style="background-image: url('{{ asset('storage/' . $hero->image) }}');">

                            <div class="hero-overlay">
                                <div class="container text-center text-white">
                                    <h1 class="hero-text">{{ $hero->judul }}</h1>
                                    <p class="hero-subtitle">{{ $hero->deskripsi }}</p>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach

            </div>

            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </section>

    <section id="program" class="program-section">
        <div class="container col-xxl-9">
            <div class="row">
                <div class="col-lg-3 col-md-6 col mb-2" data-aos="flip-left">
                    <div class="bg-white rounded-3 shadow p-3 justify-content-between d-flex align-items-center">
                        <div>
                            <p>Pendidikan <br> Berkualitas</p>
                        </div>
                        <img src="{{ asset('assets/images/ic-book.png') }}" height="55" width="55" alt="">
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col mb-2" data-aos="flip-left">
                    <div class="bg-white rounded-3 shadow p-3 justify-content-between d-flex align-items-center">
                        <div>
                            <p>Pendidikan <br> Berkarakter</p>
                        </div>
                        <img src="{{ asset('assets/images/ic-komputer.png') }}" height="55" width="55"
                            alt="">
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col mb-2" data-aos="flip-left">
                    <div class="bg-white rounded-3 shadow p-3 justify-content-between d-flex align-items-center">
                        <div>
                            <p>Tenaga Pendidik <br> Berkualitas</p>
                        </div>
                        <img src="{{ asset('assets/images/ic-neraca.png') }}" height="55" width="55" alt="">
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col mb-2" data-aos="flip-left">
                    <div class="bg-white rounded-3 shadow p-3 justify-content-between d-flex align-items-center">
                        <div>
                            <p>Siswa-siswi <br> berprestasi</p>
                        </div>
                        <img src="{{ asset('assets/images/ic-globe.png') }}" height="55" width="55" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Berita --}}
    <section id="berita" class="py-5">
        <div class="container">

            <div class="header-berita text-center">
                <h2 class="fw-bold">Berita Kegiatan Sekolah</h2>
            </div>

            <div class="row py-5" data-aos="flip-up">

                @foreach ($artikels as $item)
                    <div class="col-lg-4">
                        <div class="card-border-0">
                            <img src="{{ asset('storage/artikel/' . $item->image) }}" class="img-fluid MB-3" alt="">
                            <div class="konten-berita">
                                <p class="mb-3 text-secondary">{{ $item->create_at }}</p>
                                <h4 class="fw-bold mb-3">{{ $item->judul }}</h4>
                                <p class="text-secondary">#SekolahCintaLingkungan</p>
                                <a href="/detail/{{ $item->slug }}" text-decoration-none text-danger">Selengkapnya</a>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
            <div class="footer-berita text-center">
                <a href="/berita" class="btn btn-outline-danger">Berita Lainnya</a>
            </div>
        </div>
    </section>
    {{-- Berita --}}

    {{-- Join --}}
    <section id="join" class="py-5" data-aos="flip-down">
        <div class="container py-5">
            <div class="row d-flex align-items-center">
                <div class="col-lg-6">
                    <div class="d-flex align-items-center mb-3">
                        <div class="stripe me-2"></div>
                        <h5>Sambutan Kepala Sekolah</h5>
                    </div>
                    <h4 class="fw-bold mb-2"><u>Aliando Hidayat, S.Pd., M.Pd.</u></h4>
                    <p><strong>Kepala SMAN 2 Majujaya</strong></p>
                    <p class="mb-3">Perkembangan teknologi informasi sangat pesat. Perkembangan tersebut didukung oleh
                        semakin banyaknya pengguna internet. Indonesia merupakan negara nomer 6 dengan pengguna internet
                        terbanyak di dunia. Maka sekolah tentu terus mengikuti perkembangan tersebut. Sebagai sarana
                        informasi dan komunikasi sekolah, maka kami meluncurkan situs resmi sekolah dengan nama :
                        sman2majujaya.sch.id Kami sampaikan terima kasih kepada tim yang sudah mengembangkan website ini
                        sebagai sarana informasi yang menunjang dunia pendidikan</p>
                    {{-- <button class="btn btn-outline-danger">More</button> --}}
                </div>
                <div class="col-lg-6">
                    {{-- <img src="{{ asset('assets/images/kepsek.jpeg') }}" class="img-fluid" alt=""> --}}
                    <img src="{{ asset('assets/images/kepsek.jpg') }}"
                        class="img-fluid rounded-circle border border-3 border-primary shadow" style="max-width: 350px;"
                        alt="">
                </div>
            </div>
        </div>
    </section>
    {{-- end Join --}}

    {{-- Video --}}
    {{-- <section id="video" class="py-5" data-aos="zoom-in">
        <div class="container py-5">
            <div class="text-center">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/OG82HtXV1os?si=KsjymH5JYhlV01lG"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
        </div>
    </section> --}}
    {{-- end Video --}}

    <section id="video_youtube" class="py-5" data-aos="zoom-in">
        <div class="container py-5">
            <div class="header-berita text-center">
                <h2 class="fw-bold">Video Kegiatan Sekolah</h2>
            </div>

            <div class="row py-5" data-aos="zoom-in">

                @foreach ($videos as $item)
                    <div class="col-lg-4">
                        <iframe width="100%" height="215"
                            src="https://www.youtube.com/embed/{{ $item->youtube_code }}" title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                @endforeach


            </div>
            <div class="footer-berita text-center">
                <a href="{{ route('video.lainnya') }}" class="btn btn-outline-black">
                    Video lainnya
                </a>

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

    {{-- Foto --}}
    <section id="foto" class="section-foto parallax" data-aos="zoom-in-up">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-5">
                <div class="d-flex align-items-center">
                    <div class="stripe-putih me-2"></div>
                    <h5 class="fw-bold text-white">Foto Kegiatan</h5>
                </div>
                <div>
                    <a href="{{ route('foto.kegiatan') }}" class="btn btn-outline-white">
                        Foto lainnya
                    </a>

                    </a>

                </div>
            </div>

            <div class="row g-2">
                @foreach ($photos as $photo)
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="foto-card">
                            <a class="image-link" href="{{ asset('storage/photo/' . $photo->image) }}">
                                <img src="{{ asset('storage/photo/' . $photo->image) }}" class="foto-img"
                                    alt="{{ $photo->judul }}">
                            </a>
                            <p class="foto-title">{{ $photo->judul }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section id="fasilitas" class="py-5" data-aos="zoom-in-up">
        <div class="container py-5">
            <div class="text-center mb-4">
                <h3 class="fw-bold">Ekstrakurikuler</h3>
            </div>

            <div class="row g-4 justify-content-center">
                @foreach ($ekskuls as $item)
                    <div class="col-lg-3 col-md-4 col-6 text-center">
                        <div class="card shadow-sm border-0 h-100">
                            <img src="{{ asset('storage/' . $item->foto) }}" class="card-img-top"
                                style="height:170px; object-fit:cover; border-radius:10px;">
                            <div class="card-body p-2">
                                <p class="fw-semibold m-0">{{ $item->nama }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="text-center mt-4">
                <a href="{{ route('ekskul.public') }}" class="btn btn-outline-danger px-4">
                    Ekstrakurikuler Lainnya
                </a>
            </div>
        </div>
    </section>
@endsection