@extends('frontend.layouts.app')
@section('title')
    @if ($request->type == 'images')
        Image
    @else
        Video
    @endif
    Gallery -
@endsection
@push('style')
    <style>
        .sub-card {
            width: 420px;
            height: 300px;
            overflow: hidden;
        }

        .sub-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    </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' => null],
        ],
    ])
    <div class="container-fluid pt-5">
        <div class="row justify-content-center">
            @foreach ($subfolders as $subfolder)
                @php
                    $gallery = $subfolder->gallery->first();
                @endphp

                @if ($gallery)
                    <div class="col-12 col-md-3 mb-4 d-flex justify-content-center">
                        <a href="{{ route('galleryItems',['folder'=>$folder->slug,'subfolder'=>$subfolder->slug,'type' => $request->type]) }}" class="sub-card-link">
                            <div class="sub-card">
                                @if ($gallery->type === 'image')
                                    <img class="sub-thumb" src="{{ asset($gallery->image) }}" alt="{{ $subfolder->name }}">
                                @else
                                    <img class="sub-thumb"
                                        src="https://img.youtube.com/vi/{{ $gallery->video_link }}/hqdefault.jpg"
                                        alt="{{ $subfolder->name }}">
                                @endif

                                <div class="overlay">
                                    <h4>{{ $subfolder->name }}</h4>
                                    <span>{{ $subfolder->gallery_count }}
                                        {{ $request->type === 'images' ? 'Photos' : 'Videos' }}</span>
                                </div>

                            </div>
                        </a>
                    </div>
                @endif
            @endforeach
        </div>

    </div>
    </div>
@endsection
@push('script')
@endpush