@extends('admin.layout')
@section('title','Gallery')
@section('page-title','Gallery Management')

@push('styles')
<style>
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.gallery-item{position:relative;border-radius:10px;overflow:hidden;border:1px solid #e2e8f0;}
.gallery-item img{width:100%;height:120px;object-fit:cover;display:block;}
.gallery-item-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;gap:6px;}
.gallery-item:hover .gallery-item-overlay{display:flex;}
.gallery-item-meta{padding:8px 10px;background:white;border-top:1px solid #f1f5f9;}
.gallery-item-meta input{width:100%;border:none;font-size:11px;color:#374151;outline:none;font-family:'Inter',sans-serif;}
</style>
@endpush

@section('content')
<!-- Upload form -->
<div class="card" style="margin-bottom:20px;">
    <div class="card-header"><h3><i class="fas fa-cloud-upload-alt" style="color:var(--red);margin-right:8px;"></i>Upload Images</h3></div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.gallery.store') }}" enctype="multipart/form-data">
            @csrf
            <div style="display:grid;grid-template-columns:1fr 200px 120px;gap:12px;align-items:end;">
                <div class="form-group">
                    <label>Select Images (multiple allowed)</label>
                    <input type="file" name="images[]" multiple accept="image/*" required style="font-size:13px;">
                    <div style="font-size:11px;color:#94a3b8;margin-top:4px;">JPG/PNG/WebP, max 5MB each. Multiple images can be uploaded at once.</div>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <select name="category" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                        @foreach($categories as $val => $label)
                        <option value="{{ $val }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fas fa-upload"></i> Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Gallery by category -->
@forelse($items as $cat => $catItems)
<div class="card" style="margin-bottom:20px;">
    <div class="card-header">
        <h3>{{ $categories[$cat] ?? ucfirst($cat) }} <span style="font-weight:400;color:#94a3b8;font-size:13px;">({{ $catItems->count() }} images)</span></h3>
    </div>
    <div class="card-body">
        <div class="gallery-grid">
            @foreach($catItems as $img)
            <div class="gallery-item">
                <img src="{{ asset('uploads/gallery/'.$img->image) }}" alt="{{ $img->title }}">
                <div class="gallery-item-overlay">
                    <form method="POST" action="{{ route('admin.gallery.destroy', $img) }}" onsubmit="return confirm('Delete this image?')">
                        @csrf @method('DELETE')
                        <button type="submit" style="background:rgba(220,38,38,0.9);color:white;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;"><i class="fas fa-trash"></i> Delete</button>
                    </form>
                    <label style="background:rgba(0,0,0,0.7);color:white;padding:6px 8px;border-radius:6px;font-size:11px;cursor:pointer;">
                        <i class="fas fa-{{ $img->is_active ? 'eye':'eye-slash' }}"></i>
                        <form method="POST" action="{{ route('admin.gallery.update', $img) }}" style="display:inline;">
                            @csrf @method('PUT')
                            <input type="hidden" name="is_active" value="{{ $img->is_active ? '0':'1' }}">
                            <button type="submit" style="background:none;border:none;color:white;cursor:pointer;font-size:11px;font-family:'Inter',sans-serif;">{{ $img->is_active ? 'Hide':'Show' }}</button>
                        </form>
                    </label>
                </div>
                <div class="gallery-item-meta">
                    <span style="font-size:10px;color:#94a3b8;">{{ $img->is_active ? '✓ Visible' : '✗ Hidden' }}</span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@empty
<div class="card" style="padding:60px;text-align:center;color:#94a3b8;">
    <i class="fas fa-images" style="font-size:48px;opacity:0.3;display:block;margin-bottom:16px;"></i>
    No gallery images yet. Upload some above!
</div>
@endforelse
@endsection