@extends('masterGuest')
@section('title', 'Sarana Prasarana')
@push('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
@endpush
@section('content')

    <div class="container-fluid pt-5 berita-container">

        <div class="container pt-5">
            <div class="bkk-title">
                <h2>Sarana Prasarana</h2>
                <p>SMA - SMK PGRI 109 Tangerang</p>
            </div>
        </div>


        <div class="col-md-12">
            <div class="container mt-4">
                <div class="row">
                    @foreach ($data as $d)
                        <div class="col-md-4 mb-5">
                            <div class="image-container">
                                <a href="{{ asset('storage') }}/{{ $d->image }}" class="glightbox"
                                    data-gallery="gallery1" data-title="Title 1" data-description="Description for Image 1">
                                    <img src="{{ asset('storage') }}/{{ $d->image }}" class="img-fluid" alt="Image 1">
                                </a>
                                <div class="title-overlay">
                                    <a href='#'>{{ $d->title }}</a>
                                </div>
                            </div>
                        </div>
                    @endforeach


                </div>


            </div>

        </div>

    </div>

@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lightbox = GLightbox({
                selector: '.glightbox',
                touchNavigation: true,
                loop: true,
                zoomable: true,
                draggable: true,
                autoplayVideos: true,
            });
        });
    </script>
@endpush