@extends('layouts.app')

@section('title', 'Showroom Photo Gallery')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Showroom & Event Photo Gallery</h1>
        <div class="page-subtitle">Manage high-resolution photos of the flagship showroom, ceramic detailing studio, and deliveries.</div>
    </div>
    <div>
        <button class="btn btn-luxury-red" data-bs-toggle="modal" data-bs-target="#uploadPhotoModal">
            <i class="bi bi-cloud-upload-fill"></i>
            <span>Upload New Photo</span>
        </button>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm" role="alert" style="border-radius: 12px; background-color: #DCFCE7; color: #15803D;">
        <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
    </div>
@endif

<div class="content-card">
    <div class="content-card-header">
        <h5 class="content-card-title"><i class="bi bi-images"></i> Showroom Photography Portfolio</h5>
    </div>
    <div class="content-card-body">
        <div class="row g-3">
            @forelse($galleries as $photo)
            <div class="col-md-4">
                <div class="card h-100 border shadow-sm" style="border-radius:14px; overflow:hidden;">
                    <img src="{{ $photo->image }}" alt="{{ $photo->title }}" class="card-img-top" style="height:180px; object-fit:cover;">
                    <div class="card-body p-3">
                        <span class="badge bg-light text-dark border mb-1" style="font-size:0.7rem;">{{ $photo->category }}</span>
                        <h6 class="card-title fw-bold text-dark mb-0" style="font-size:0.88rem;">{{ $photo->title }}</h6>
                    </div>
                    <div class="card-footer bg-white border-top p-2 text-end">
                        <form action="{{ route('admin.gallery.destroy', $photo->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete photo?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-light text-danger"><i class="bi bi-trash"></i> Delete</button>
                        </form>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-muted py-4 text-center">No photos in gallery. Click "Upload New Photo" to add one.</div>
            @endforelse
        </div>
    </div>
</div>

<!-- Modal: Upload Photo -->
<div class="modal fade" id="uploadPhotoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 16px;">
            <div class="modal-header border-bottom">
                <h5 class="modal-title font-weight-bold"><i class="bi bi-cloud-upload text-danger me-2"></i> Add Gallery Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.gallery.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Photo Title / Caption</label>
                        <input type="text" name="title" class="form-control" placeholder="e.g. Flagship Showroom Floor" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Category</label>
                        <select name="category" class="form-select">
                            <option value="Showroom">Showroom</option>
                            <option value="Ceramic Studio">Ceramic Studio</option>
                            <option value="Deliveries">Deliveries</option>
                            <option value="VIP Events">VIP Events</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Image URL</label>
                        <input type="text" name="image" class="form-control" placeholder="https://images.unsplash.com/..." required>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-luxury-red">Upload Image</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection