@extends('layouts.web')

@section('content')
    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
        <div class="carousel-indicators">
             @foreach ( $slide as $row => $s )     
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{$row}}" @if ($row == 0) class="active" @endif  aria-current="true" aria-label="{{$s->description}}"></button>

            @endforeach 
        </div>
        <div class="carousel-inner">
            @foreach ( $slide as $row => $s )
            <div class="carousel-item @if ($row==0) active @endif"> 
                <img src="{{url('images')}}/{{$s->image}}" class="d-block w-100" alt="{{$s->description}}">
                {{-- Caption dihapus --}}
            </div>            
            @endforeach 
            
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <div class="container my-5">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 text-center">
            <div class="col">
                <a href="{{ url('/kategori/pengumuman') }}" class="quick-link-card d-block p-3">
                    <img src="{{ asset('images/pengumuman.png') }}" alt="Pengumuman" class="img-fluid mb-2" style="max-height: 60px;">
                    <p class="mb-0 fw-bold">Pengumuman</p>
                </a>
            </div>
            <div class="col">
                <a href="{{ url('/profil/sambutan-kepala-sekolah') }}" class="quick-link-card d-block p-3">
                    <img src="{{ asset('images/sambutan.png') }}" alt="Sambutan" class="img-fluid mb-2" style="max-height: 60px;">
                    <p class="mb-0 fw-bold">Sambutan</p>
                </a>
            </div>
            <div class="col">
                <a href="{{ url('/visi-misi') }}" class="quick-link-card d-block p-3">
                    <img src="{{ asset('images/visimisi.png') }}" alt="Visi dan Misi" class="img-fluid mb-2" style="max-height: 60px;">
                    <p class="mb-0 fw-bold">Visi dan Misi</p>
                </a>
            </div>
            <div class="col">
                <a href="{{ url('/agenda') }}" class="quick-link-card d-block p-3">
                    <img src="{{ asset('images/agenda.png') }}" alt="Agenda" class="img-fluid mb-2" style="max-height: 60px;">
                    <p class="mb-0 fw-bold">Agenda</p>
                </a>
            </div>
        </div>
    </div>

    <div class="my-5">
        <div class="section-header">
            <h3>Berita Terbaru</h3>
            <a href="{{ url('/kategori/berita') }}" class="btn btn-lihat-lainnya" style="background-color: #0f2a81; color: white;">Lainnya <i class="fas fa-chevron-right ms-1"></i></a>
        </div>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            @foreach ( $news as $k )
                <div class="col">
                    <div class="card shadow-sm">
                        <div style="position: relative;">
                            <img src="{{url('images')}}/{{$k->image}}" class="card-img-top" alt="Judul Berita 1">
                            <span class="card-category">Berita</span>
                        </div>
                        <div class="card-body">
                            <div class="card-date-time">
                                <i class="far fa-calendar-alt"></i> {{substr($k->created_at,0,10)}}
                                <i class="far fa-clock ms-2"></i> {{substr($k->created_at,11,5)}} WIB
                            </div>
                            <h5 class="card-title">{{$k->title}}</h5>
                            <p class="card-text">{{substr($k->description,0,100)}} ...</p>
                        </div>
                        <div class="card-footer-action">
                            <a href="{{ url('/berita/detail/') }}{{$k->id}}" class="btn btn-outline-primary btn-selengkapnya">Selengkapnya</a>
                        </div>
                    </div>
                </div>
            @endforeach            
            </div>
    </div>
    <section class="mt-5">
            <div class="section-header">
                <h3>Program Studi</h3>
                {{-- Anda bisa menambahkan tombol "Lihat Semua Program Studi" jika ada halaman terpisah --}}
                {{-- <a href="{{ url('/program-studi') }}" class="btn btn-lihat-lainnya">Lihat Semua <i class="fas fa-arrow-right ms-2"></i></a> --}}
            </div>
            <div class="row row-cols-1 row-cols-md-2 g-4">
                <div class="col">
                    <div class="program-studi-card">
                        {{-- Ganti dengan gambar Anda untuk Farmasi Klinis dan Komunitas --}}
                        <img src="{{ asset('images/farmasiklinis.png') }}" alt="Ikon Farmasi Klinis" class="icon">
                        <h5>FARMASI KLINIS DAN KOMUNITAS</h5>
                    </div>
                </div>
                <div class="col">
                    <div class="program-studi-card">
                        {{-- Ganti dengan gambar Anda untuk Farmasi Industri --}}
                        <img src="{{ asset('images/farmasiindustri.png') }}" alt="Ikon Farmasi Industri" class="icon">
                        <h5>FARMASI INDUSTRI</h5>
                    </div>
                </div>
            </div>
        </section>

        <section class="mt-5">
            <div class="section-header">
                <h3>Galeri Foto Kegiatan</h3>
                <a href="{{ url('/kategori/berita') }}" class="btn btn-lihat-lainnya" style="background-color: #0f2a81; color: white;">Lainnya <i class="fas fa-chevron-right ms-1"></i></a>
            </div>
            <div class="row row-cols-1 row-cols-md-3 row-cols-lg-3 g-4">
                {{-- Hanya tampilkan 3 contoh item galeri --}}
                <div class="col">
                    <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-image-src="{{ asset('images/gallery/kegiatan1.jpg') }}" data-bs-title="Upacara Bendera">
                        <img src="{{ asset('images/gallery/kegiatan1.jpg') }}" class="img-fluid" alt="Upacara Bendera">
                        <div class="gallery-caption">Upacara Bendera</div>
                    </div>
                </div>
                <div class="col">
                    <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-image-src="{{ asset('images/gallery/kegiatan2.jpg') }}" data-bs-title="Pentas Seni Sekolah">
                        <img src="{{ asset('images/gallery/kegiatan2.jpg') }}" class="img-fluid" alt="Pentas Seni Sekolah">
                        <div class="gallery-caption">Pentas Seni Sekolah</div>
                    </div>
                </div>
                <div class="col">
                    <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-image-src="{{ asset('images/gallery/kegiatan3.jpg') }}" data-bs-title="Lomba Kebersihan Kelas">
                        <img src="{{ asset('images/gallery/kegiatan3.jpg') }}" class="img-fluid" alt="Lomba Kebersihan Kelas">
                        <div class="gallery-caption">Lomba Kebersihan Kelas</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mt-5 mb-5">
            <div class="section-header">
                <h3>Galeri Video Kegiatan</h3>
                <a href="{{ url('/kategori/berita') }}" class="btn btn-lihat-lainnya" style="background-color: #0f2a81; color: white;">Lainnya <i class="fas fa-chevron-right ms-1"></i></a>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                <div class="col">
                    <div class="video-item">
                        <div class="video-container">
                            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video Sambutan Kepala Sekolah" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                        <div class="video-info">
                            <h5 class="video-title">Video Sambutan Kepala Sekolah</h5>
                            <div class="video-button-group">
                                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="btn btn-outline-danger">
                                    <i class="fab fa-youtube me-2"></i>Tonton di YouTube
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="video-item">
                        <div class="video-container">
                            <iframe src="https://www.youtube.com/embed/VIDEO_ID_LAIN_1" title="Dokumentasi Acara Peringatan Hari Pahlawan" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                        <div class="video-info">
                            <h5 class="video-title">Dokumentasi Acara Peringatan Hari Pahlawan</h5>
                            <div class="video-button-group">
                                <a href="https://www.youtube.com/watch?v=VIDEO_ID_LAIN_1" target="_blank" class="btn btn-outline-danger">
                                    <i class="fab fa-youtube me-2"></i>Tonton di YouTube
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="video-item">
                        <div class="video-container">
                            <iframe src="https://www.youtube.com/embed/14" title="Video musik Gryffin - Just For A Moment ft. Iselin" 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 class="video-info">
                            <h5 class="video-title">Gryffin - Just For A Moment ft. Iselin</h5>
                            <div class="video-button-group">
                                <a href="https://www.youtube.com/watch?v=14" target="_blank" class="btn btn-outline-danger">
                                    <i class="fab fa-youtube me-2"></i>Tonton di YouTube
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="" class="img-fluid" id="modalImage" alt="Modal Image">
                </div>
            </div>
        </div>
    </div>

    <section class="running-logo-section mt-5 mb-5">
    <div class="container">
        <div class="running-logo-container">
            <div class="running-logo-track">
                <img src="{{ asset('images/bpom.jpg') }}" alt="Logo Mitra 1">
                <img src="{{ asset('images/kimiafarmadis.png') }}" alt="Logo Mitra 2">
                <img src="{{ asset('images/PT Enseval.png') }}" alt="Logo Mitra 3">
                <img src="{{ asset('images/anugrahalam.jpg') }}" alt="Logo Mitra 4">
                <img src="{{ asset('images/puskesad.png') }}" alt="Logo Mitra 5">
                <img src="{{ asset('images/bpom.jpg') }}" alt="Logo Mitra 1">
                <img src="{{ asset('images/kimiafarmadis.png') }}" alt="Logo Mitra 2">
                <img src="{{ asset('images/PT Enseval.png') }}" alt="Logo Mitra 3">
                <img src="{{ asset('images/anugrahalam.jpg') }}" alt="Logo Mitra 4">
                <img src="{{ asset('images/puskesad.png') }}" alt="Logo Mitra 5">
            </div>
        </div>
    </div>
</section>

@endsection