@section('title', 'Campus Life Glimpse | Lyallpur Girls Cadet College')
@section('description', 'Get a glimpse of student life at Lyallpur Girls Cadet College. Explore photos of campus, cadet training, academics, and co-curricular activities.')
@section('keywords',  'Glimpse Photos of Cadet Life at Girls College Lyallpur Girls Cadet College Glimpse What Does Lyallpur Girls Cadet College Look Like?')
@section('tags', 'Glimpse, Photos of Cadet Life at Girls College, Lyallpur Girls Cadet College Glimpse, What Does Lyallpur Girls Cadet College Look Like?')

@extends('front.layouts.app')
@section('content')

    <div class="admission-banner">
        <div class="admission-banner-img">
            <img src="{{asset('front/img/training.png')}}" alt="Glimpses">
        </div>
        <div class="admission-banner-text w-100">
            <h2 class="text-white">Lyallpur Girls Cadet <br>
                College, Faisalabad</h2>
        </div>
    </div>

    <div class="admission-content container mb-5">
        <h2 class="my-4">Glimpses</h2>
        <div class="row g-3">
            @foreach($glimpses as $glimpse)
                <div class="col-lg-4 col-md-6 glimpse-gallery">
                    <a href="#" class="glimpse-img" data-bs-toggle="modal" data-bs-target="#glimpseModal"
                       data-src="{{route('get-image.glimpse',$glimpse['id'])}}" data-title="{{$glimpse['title']}}">
                        <img class="img-fluid" src="{{route('get-image.glimpse',$glimpse['id'])}}"
                             alt="Glimpse"/>
                    </a>
                </div>
            @endforeach
        </div>
        <div class="modal fade" id="glimpseModal" tabindex="-1" aria-labelledby="glimpseModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg rounded-1">
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="btn-close float-end mb-2" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        <img class="img-fluid" id="modalImage" src="" alt="Image not uploaded">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center mb-5 glimpse-links">
        {!! $glimpses->links() !!}
    </div>

@endsection

@push('js')
<script>
    $(document).on("click", ".glimpse-img", function () {
        var src = $(this).data('src');
        $('#modalImage').attr('src', src);
    });

</script>
@endpush