@extends('public.layout.app')

@section('body')
<section class="section" style="padding-top:110px;">
    <div class="container">

        {{-- Breadcrumb --}}
        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
            <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm">
                <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
            </a>
            <a href="{{ route('front.galleries.index') }}" class="btn btn-outline-light btn-sm">
                <i class="fa-regular fa-images me-1"></i> {{ __('front.gallery') }}
            </a>
            <span class="badge bg-dark">{{ __('front.details') }}</span>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm" style="border-radius:18px; overflow:hidden;">
                    {{-- Header / Cover --}}
                    @php
                        $cover = $gallery->cover_image ? asset('storage/'.$gallery->cover_image) : null;
                        if(!$cover && $gallery->relationLoaded('images')){
                            $first = $gallery->images->first();
                            $cover = $first? asset('storage/'.$first->path) : null;
                        }
                    @endphp

                    <div style="aspect-ratio:16/8; background:#0b1220;">
                        @if($cover)
                            <img src="{{ $cover }}" alt="{{ $gallery->title }}"
                                 style="width:100%;height:100%;object-fit:cover;">
                        @else
                            <div class="h-100 d-flex align-items-center justify-content-center text-white-50">
                                <i class="fa-regular fa-images fa-2x"></i>
                            </div>
                        @endif
                    </div>

                    <div class="card-body">
                        <h3 class="fw-bold mb-2">{{ $gallery->title }}</h3>

                        <div class="text-muted small mb-3">
                            <span class="me-3">
                                <i class="fa-regular fa-calendar me-1"></i> {{ optional($gallery->created_at)->format('M d, Y') }}
                            </span>
                            @if($gallery->author)
                                <span class="me-3">
                                    <i class="fa-solid fa-user me-1"></i> {{ $gallery->author->name }}
                                </span>
                            @endif
                        </div>

                        @if($gallery->description)
                            <div class="text-muted" style="line-height:1.9;">
                                {!! nl2br(e($gallery->description)) !!}
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Images Grid (if you have images relation) --}}
                @if($gallery->relationLoaded('images') && $gallery->images->count())
                    <div class="mt-4">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <div class="fw-semibold">
                                <i class="fa-regular fa-images me-1"></i> {{ __('front.photos') }}
                            </div>
                            <div class="text-muted small">{{ $gallery->images->count() }} items</div>
                        </div>

                        <div class="row g-3">
                            @foreach($gallery->images as $img)
                                <div class="col-6 col-md-4">
                                    <a href="{{ asset('storage/'.$img->path) }}" target="_blank" class="d-block">
                                        <div class="shadow-sm" style="border-radius:16px; overflow:hidden; background:#0b1220; aspect-ratio:1/1;">
                                            <img src="{{ asset('storage/'.$img->path) }}" alt="image"
                                                 style="width:100%;height:100%;object-fit:cover;">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-lg-4">
                {{-- Related --}}
                <div class="card border-0 shadow-sm" style="border-radius:18px;">
                    <div class="card-body">
                        <div class="fw-semibold mb-2">
                            <i class="fa-solid fa-layer-group me-1"></i> {{ __('front.related_galleries') }}
                        </div>

                        <div class="d-flex flex-column gap-2">
                            @forelse($related as $r)
                                <a href="{{ route('front.galleries.show',$r->slug) }}"
                                   class="d-flex gap-2 text-decoration-none p-2 rounded"
                                   style="border:1px solid rgba(2,6,23,.08);">
                                    @php
                                        $t = $r->cover_image ? asset('storage/'.$r->cover_image) : null;
                                    @endphp
                                    <div style="width:84px; aspect-ratio:1/1; background:#0b1220; border-radius:12px; overflow:hidden;">
                                        @if($t)
                                            <img src="{{ $t }}" alt="{{ $r->title }}"
                                                 style="width:100%;height:100%;object-fit:cover;">
                                        @else
                                            <div class="h-100 d-flex align-items-center justify-content-center text-white-50">
                                                <i class="fa-regular fa-images"></i>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="flex-grow-1">
                                        <div class="fw-semibold text-dark" style="line-height:1.3;">
                                            {{ \Illuminate\Support\Str::limit($r->title, 55) }}
                                        </div>
                                        <div class="text-muted small">
                                            {{ optional($r->created_at)->format('M d, Y') }}
                                        </div>
                                    </div>
                                </a>
                            @empty
                                <div class="text-muted small">{{ __('front.no_related_front_galleries') }}</div>
                            @endforelse
                        </div>

                        <div class="mt-3">
                            <a href="{{ route('front.galleries.index') }}" class="btn btn-outline-primary btn-sm w-100">
                                <i class="fa-solid fa-arrow-left me-1"></i> {{ __('front.back_to_all_galleries') }}
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>
@endsection