@extends('layouts.admin')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="brand-font text-uppercase text-secondary mb-0">Manage Photo Gallery</h4>
    <button class="btn btn-primary-mj rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#uploadModal">
        <i class="bi bi-cloud-arrow-up me-1"></i> Upload Photo
    </button>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('admin.gallery.store') }}" method="POST" enctype="multipart/form-data" data-turbo-frame="admin-content" class="modal-content border-0 shadow rounded-4">
            @csrf
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-secondary" id="uploadModalLabel">Upload New Photo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted">Image File (JPEG/PNG/WEBP)</label>
                    <input type="file" class="form-control rounded-pill px-3" name="image" required>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted">Caption / Description</label>
                    <input type="text" class="form-control rounded-pill px-3" name="caption" placeholder="E.g., Workshop setup">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted">Category</label>
                    <select class="form-select rounded-pill px-3" name="category">
                        <option value="shop">Shop Front</option>
                        <option value="repairs">Repairs & Workshop</option>
                        <option value="customers">Happy Customers</option>
                        <option value="events">Events & Rides</option>
                        <option value="general" selected>General</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary-mj rounded-pill px-4">Upload</button>
            </div>
        </form>
    </div>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
    @forelse($galleryItems as $item)
        <div class="col">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden position-relative group-hover">
                <a href="{{ route('admin.gallery.show', $item->id) }}" class="text-decoration-none">
                    <img src="{{ asset($item->image_path) }}" class="card-img-top object-fit-cover" alt="Gallery Image" style="height: 200px;">
                </a>
                <div class="card-body p-3 bg-white">
                    <span class="badge bg-light text-secondary rounded-pill mb-2 border">{{ ucfirst($item->category) }}</span>
                    <p class="card-text small text-muted mb-0 text-truncate" title="{{ $item->caption }}">{{ $item->caption ?? 'No caption provided' }}</p>
                </div>
                <div class="position-absolute top-0 end-0 p-2 d-flex gap-1">
                    <a href="{{ route('admin.gallery.show', $item->id) }}" class="btn btn-light btn-sm rounded-circle shadow-sm admin-action-btn" title="View">
                        <i class="bi bi-eye"></i>
                    </a>
                    <form action="{{ route('admin.gallery.destroy', $item->id) }}" method="POST" class="swal-delete-form"
                          data-title="Delete this photo?" data-text="This image will be permanently removed from the gallery.">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm rounded-circle shadow-sm admin-action-btn" title="Delete">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4 p-5 text-center bg-white w-100">
                <div class="text-muted fs-1 mb-3"><i class="bi bi-images"></i></div>
                <h6 class="fw-bold text-secondary">No Photos Uploaded Yet</h6>
                <p class="text-muted small mb-0">Upload photos to showcase your shop, repairs, and customers.</p>
            </div>
        </div>
    @endforelse
</div>

<div class="d-flex justify-content-center mt-4">
    {{ $galleryItems->links('pagination::bootstrap-5') }}
</div>

@endsection
