@extends('admin.layouts.app')

@section('title', 'Galeri — '.$collection->getTranslation('name', 'tr'))
@section('page-title', $collection->getTranslation('name', 'tr'))
@section('page-subtitle', 'Koleksiyon galerisi')

@section('content')
@include('admin.partials.collection-tabs')

<div class="card admin-card mb-4">
    <div class="card-body p-4">
        <h2 class="admin-section-title">Toplu yükleme</h2>
        <p class="text-muted small mb-3">Birden fazla fotoğraf seçebilirsiniz. Çok büyük dosyalarda 4–5 görseli bir seferde yükleyin.</p>
        <form method="POST" action="{{ route('admin.collections.gallery.store', $collection) }}" enctype="multipart/form-data" class="row g-3 align-items-end" data-gallery-form>
            @csrf
            <div class="col-md-8">
                <label class="form-label">Görseller</label>
                <input type="file" name="uploads[]" id="galleryMultiUpload" class="form-control" accept="image/*" multiple required>
                <div class="form-text" data-gallery-count>Birden fazla görsel seçebilirsiniz · her dosya en fazla 20 MB</div>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-cisa btn-primary w-100">Seçilenleri yükle</button>
            </div>
        </form>
    </div>
</div>

<div class="page-toolbar">
    <p class="text-muted mb-0">{{ $images->total() }} görsel</p>
    <a href="{{ route('admin.collections.gallery.create', $collection) }}" class="btn btn-outline-secondary btn-sm">
        Tek görsel ekle
    </a>
</div>

@if ($images->count())
    <div class="gallery-grid">
        @foreach ($images as $image)
            <article class="gallery-card">
                <img src="{{ media_url($image->path) }}" alt="">
                <div class="gallery-card__body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small text-muted">Sıra {{ $image->sort_order }}</span>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.collections.gallery.edit', [$collection, $image]) }}" class="btn btn-sm btn-outline-secondary flex-grow-1">Düzenle</a>
                        <form action="{{ route('admin.collections.gallery.destroy', [$collection, $image]) }}" method="POST" onsubmit="return confirm('Bu görsel silinsin mi?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger">Sil</button>
                        </form>
                    </div>
                </div>
            </article>
        @endforeach
    </div>
    @if ($images->hasPages())
        <div class="mt-4">{{ $images->links() }}</div>
    @endif
@else
    <div class="card admin-card">
        <div class="card-body text-center text-muted py-5">Henüz galeri görseli yok.</div>
    </div>
@endif
@endsection