@extends('frontend.layouts.app')

@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection

@push('head-scripts')

@endpush
@section('content')

    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}"  alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <h1 class="display-4 fw-bold text-white mb-3" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                    Gallery
                </h1>
            </div>
        </div>
    </div>

    <section class="gallery py-5 bg-light">
        <div class="container">
            @if($images->count() > 0)
                <div class="row g-4">
                    @foreach ($images as $img)
                        <div class="col-12 col-sm-6 col-lg-3" data-aos="zoom-in" data-aos-delay="{{ $loop->index * 100 }}">
                            <div class="card border-0 shadow-sm rounded-4 overflow-hidden gallery-card">
                                <img src="{{ asset('storage/Gallery/Cover/' . $img->image_path) }}"
                                     alt="Gallery"
                                     class="gallery-image">
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-center mt-5">
                    {{ $images->links('pagination::bootstrap-5') }}
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-5">
{{--                    <img src="{{ asset('assets/img/no-data.png') }}" alt="No Gallery" class="mb-3" style="max-width:180px;">--}}
                    <h4 class="text-muted">No images available in the gallery yet.</h4>
                    <p class="text-secondary">Please check back later for updates.</p>
                </div>
            @endif
        </div>
    </section>


@endsection