@extends('frontend.layouts.app')
@section('title')
    {{ $request->type == 'images' ? 'Image' : 'Video' }} Gallery -
@endsection

@push('style')
    <style>
        .gallery1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px 0;
        }

        .gallery1 a {
            display: block;
            flex: 0 0 calc(33.333% - 14px);
            height: 400px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .gallery1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;/ transition: transform 0.3s ease;
        }

        .gallery1 a:hover img {
            transform: scale(1.05);
        }

        @media (max-width: 991px) {
            .gallery1 a {
                flex: 0 0 calc(50% - 14px);
                height: 250px;
            }
        }

        @media (max-width: 576px) {
            .gallery1 a {
                flex: 0 0 100%;
                height: auto;
                aspect-ratio: 16/9;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $title = $request->type == 'images' ? 'Image Gallery' : 'Video Gallery';
    @endphp

    @include('frontend.layouts.include.breadcrumb', [
        'items' => [
            ['name' => $title, 'url' => route('galleryPage', ['type' => $request->type])],
            [
                'name' => $folder->name,
                'url' => route('gallerySubPage', ['folder' => $folder->slug, 'type' => $request->type]),
            ],
            ['name' => $subfolder->name, 'url' => null],
        ],
    ])

    <div class="container-fluid my-4">
        <div class="gallery1">

            @foreach ($galleries as $index => $gallery)
                @if ($gallery->type === 'video_link')
                    <div
                        style="flex: 0 0 calc(33.333% - 14px); height:400px; overflow:hidden; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1);">
                        <iframe width="100%" height="100%"
                            src="https://www.youtube.com/embed/{{ $gallery->video_link }}?rel=0" frameborder="0"
                            allowfullscreen>
                        </iframe>
                    </div>
                @else
                    <a href="{{ asset($gallery->image) }}" class="glightbox">
                        <img src="{{ asset($gallery->image) }}" alt="Gallery {{ $index + 1 }}">
                    </a>
                @endif
            @endforeach


        </div>
        {{ $galleries->links('vendor.pagination.frontend') }}
    </div>
@endsection

@push('script')
@endpush