@extends('admin.layouts.app')
@section('title', 'Gallery')
@section('breadcrumb')
    <li class="breadcrumb-item active">Gallery</li>
@endsection

@section('content')
<div class="page-header">
    <h1><i class="fas fa-photo-video" style="color:#6a1b9a"></i> Gallery</h1>
    <a href="{{ route('admin.gallery.create') }}" class="btn btn-green"><i class="fas fa-plus me-1"></i> Add Image</a>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-sm-4">
                <input type="text" name="search" class="form-control form-control-sm" placeholder="Search by title..." value="{{ request('search') }}">
            </div>
            <div class="col-sm-3">
                <select name="category" class="form-select form-select-sm">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat }}" {{ request('category')==$cat?'selected':'' }}>{{ $cat }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto d-flex gap-2">
                <button type="submit" class="btn btn-sm btn-green"><i class="fas fa-search"></i></button>
                <a href="{{ route('admin.gallery.index') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-times"></i></a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>{{ $items->total() }} Images</span>
        <button id="bulkDeleteBtn" data-url="{{ route('admin.gallery.bulk-delete') }}" class="btn btn-sm btn-red" style="display:none">
            <i class="fas fa-trash me-1"></i>Delete Selected
        </button>
    </div>

    {{-- Grid view --}}
    <div class="card-body">
        <div class="row g-3">
            <div class="col-12 mb-2">
                <input type="checkbox" id="selectAll" class="form-check-input me-1"> <label for="selectAll" style="font-size:.82rem;cursor:pointer">Select All</label>
            </div>
            @forelse($items as $item)
            <div class="col-6 col-sm-4 col-md-3 col-xl-2">
                <div class="card h-100 position-relative" style="border:2px solid transparent" id="galleryCard{{ $item->id }}">
                    <div class="position-absolute top-0 start-0 p-1 z-1">
                        <input type="checkbox" class="form-check-input row-check" value="{{ $item->id }}"
                            onchange="document.getElementById('galleryCard{{ $item->id }}').style.borderColor=this.checked?'#2d6a35':'transparent'">
                    </div>
                    <div class="position-absolute top-0 end-0 p-1 z-1">
                        <button class="status-toggle {{ $item->is_active ? 'on' : 'off' }}" style="width:32px;height:18px;font-size:.6rem"
                            data-url="{{ route('admin.gallery.toggle-status', $item) }}"></button>
                    </div>
                    <img src="{{ Storage::url($item->image) }}" class="card-img-top"
                        style="height:120px;object-fit:cover" alt="{{ $item->title }}">
                    <div class="card-body p-2">
                        <div class="fw-semibold text-truncate" style="font-size:.78rem" title="{{ $item->title }}">{{ $item->title }}</div>
                        @if($item->category)
                        <span class="badge" style="background:#f3e5f5;color:#6a1b9a;font-size:.65rem">{{ $item->category }}</span>
                        @endif
                    </div>
                    <div class="card-footer bg-white border-top-0 p-2 d-flex gap-1">
                        <a href="{{ route('admin.gallery.edit', $item) }}" class="btn btn-sm btn-outline-primary py-0 px-2 flex-fill"><i class="fas fa-edit"></i></a>
                        <form action="{{ route('admin.gallery.destroy', $item) }}" method="POST" onsubmit="return confirm('Delete image?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger py-0 px-2"><i class="fas fa-trash"></i></button>
                        </form>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-center text-muted py-5">
                <i class="fas fa-images fa-3x mb-3 d-block opacity-25"></i>
                No gallery images yet. <a href="{{ route('admin.gallery.create') }}">Add your first image</a>
            </div>
            @endforelse
        </div>
    </div>
    @if($items->hasPages())
    <div class="card-footer bg-white">{{ $items->links() }}</div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.row-check').forEach(cb => {
    cb.addEventListener('change', () => {
        document.getElementById('bulkDeleteBtn').style.display =
            document.querySelectorAll('.row-check:checked').length > 0 ? 'inline-flex' : 'none';
    });
});
</script>
@endpush