@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)
@section('image', $image)

@section('content')
@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
@endphp

@include('frontend.layouts.breadcrumb', ['title' => $gallery->title])

<section class="tv-gallery-section style-2 space bg-light">
    <div class="container">
        <div class="title-wrap text-center three">
            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Gallery</div>
            <h2 class="sec-title">{{ $gallery->title }}</h2>
            @if($gallery->description)
                <p>{{ $gallery->description }}</p>
            @endif
        </div>

        <div class="row gy-30">
            @forelse($gallery->items as $item)
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="gallery-single-box">
                        <div class="gallery-thumb cms-frame cms-frame--gallery">
                            @if($item->file_type === 'image')
                                <img class="cms-img-cover" width="408" height="360" src="{{ $item->file_url }}" alt="{{ $item->title ?: $gallery->title }}">
                                <div class="gallery-thumb-view">
                                    <a href="{{ $item->file_url }}" data-fancybox="gallery-{{ $gallery->id }}" data-caption="{{ $item->title ?: $gallery->title }}">
                                        <img src="{{ $assetPath('images/icons/eye.svg') }}" alt="View">
                                    </a>
                                </div>
                            @elseif($item->file_type === 'video')
                                <video class="cms-img-cover" controls>
                                    <source src="{{ $item->file_url }}" type="video/mp4">
                                </video>
                            @else
                                <div class="cms-inotek-empty h-100 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-file fa-3x"></i>
                                </div>
                            @endif
                        </div>
                        @if($item->title || $item->description)
                            <div class="pt-15">
                                @if($item->title)
                                    <h4 class="mb-0">{{ $item->title }}</h4>
                                @endif
                                @if($item->description)
                                    <small>{{ \Illuminate\Support\Str::limit($item->description, 95) }}</small>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-lg-12">
                    <div class="cms-inotek-empty text-center">
                        <h3>No items in this gallery</h3>
                        <p>This gallery is empty at the moment.</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</section>

@if($relatedGalleries->count() > 0)
    <section class="tv-gallery-section style-2 space-bottom bg-light">
        <div class="container">
            <div class="title-wrap three mb-40">
                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>More Gallery</div>
                <h2 class="sec-title">Related Galleries</h2>
            </div>
            <div class="row gy-30">
                @foreach($relatedGalleries as $relatedGallery)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="gallery-single-box">
                            <div class="gallery-thumb cms-frame cms-frame--gallery">
                                <img class="cms-img-cover" width="408" height="360" src="{{ $relatedGallery->cover_image_url ?: $assetPath('images/gallery/img01.webp') }}" alt="{{ $relatedGallery->title }}">
                                <div class="gallery-thumb-view">
                                    <a href="{{ route('frontend.galleries.show', $relatedGallery->slug) }}">
                                        <img src="{{ $assetPath('images/icons/eye.svg') }}" alt="View">
                                    </a>
                                </div>
                            </div>
                            <div class="pt-15">
                                <h4 class="mb-0"><a href="{{ route('frontend.galleries.show', $relatedGallery->slug) }}">{{ $relatedGallery->title }}</a></h4>
                                <small>{{ $relatedGallery->items_count }} Photos</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif
@include('frontend.partials.newsletter')
@endsection