@extends('admin.layouts.app')

@section('content')
<div class="admin-content">
    <div class="section-header">
        <h1><i class="fas fa-images"></i> Gallery Management</h1>
        <div class="breadcrumb">
            <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            <span>/</span>
            <span>Gallery</span>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="card mb-4">
        <div class="card-header">
            <h5><i class="fas fa-filter"></i> Filter Gallery Items</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.gallery.index') }}">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-control">
                            <option value="">All Types</option>
                            <option value="image" {{ request('type') == 'image' ? 'selected' : '' }}>Images</option>
                            <option value="video" {{ request('type') == 'video' ? 'selected' : '' }}>Videos</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('admin.gallery.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i> Clear
                        </a>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <a href="{{ route('admin.gallery.create') }}" class="btn btn-luxury btn-lg">
                            <i class="fas fa-plus-circle"></i> Add Gallery Item
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Gallery Items Grid -->
    <div class="row">
        @forelse($galleries as $gallery)
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="gallery-card">
                <div class="gallery-card-image">
                    @if($gallery->type === 'image')
                        <img src="{{ $gallery->file_url }}" alt="{{ $gallery->title }}">
                        <div class="gallery-type-badge type-image">
                            <i class="fas fa-image"></i> IMAGE
                        </div>
                    @else
                        <img src="{{ $gallery->thumbnail_url }}" alt="{{ $gallery->title }}">
                        <div class="gallery-type-badge type-video">
                            <i class="fas fa-video"></i> VIDEO
                        </div>
                        <div class="play-icon">
                            <i class="fas fa-play-circle"></i>
                        </div>
                    @endif
                    
                    <div class="status-badge {{ $gallery->status ? 'status-active' : 'status-inactive' }}">
                        {{ $gallery->status ? 'ACTIVE' : 'INACTIVE' }}
                    </div>
                </div>
                
                <div class="gallery-card-content">
                    <h5 class="gallery-title">{{ $gallery->title }}</h5>
                    <p class="gallery-description">{{ Str::limit($gallery->description, 80) }}</p>
                    
                    <div class="gallery-meta">
                        <span><i class="fas fa-sort-numeric-down"></i> Order: {{ $gallery->sort_order }}</span>
                        <span><i class="fas fa-calendar"></i> {{ $gallery->created_at->format('d M Y') }}</span>
                    </div>
                    
                    <div class="gallery-actions">
                        <a href="{{ route('admin.gallery.edit', $gallery) }}" class="btn btn-luxury-primary" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        
                        <button onclick="toggleFeatured({{ $gallery->id }})" class="btn btn-luxury-warning {{ $gallery->featured ? 'active' : '' }}" title="Toggle Featured">
                            <i class="fas fa-star"></i>
                        </button>
                        
                        <button onclick="toggleStatus({{ $gallery->id }})" class="btn btn-luxury-info {{ $gallery->status ? 'active' : '' }}" title="Toggle Status">
                            <i class="fas fa-eye{{ $gallery->status ? '' : '-slash' }}"></i>
                        </button>
                        
                        <form action="{{ route('admin.gallery.destroy', $gallery) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this item?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-luxury-danger" title="Delete">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="fas fa-images"></i>
                </div>
                <h3>No Gallery Items Found</h3>
                <p>Start building your gallery by adding your first item.</p>
                <a href="{{ route('admin.gallery.create') }}" class="btn btn-luxury btn-lg">
                    <i class="fas fa-plus-circle"></i> Add First Item
                </a>
            </div>
        </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($galleries->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $galleries->links() }}
    </div>
    @endif
</div>

<style>
/* Luxury Gallery Card Styles */
.gallery-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 24px;
    border: 1px solid rgba(0,0,0,0.05);
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.gallery-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-card-image img {
    transform: scale(1.1);
}

.gallery-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.type-image {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.type-video {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    opacity: 0.9;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.status-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-active {
    background: rgba(16, 185, 129, 0.9);
    color: white;
}

.status-inactive {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.gallery-card-content {
    padding: 20px;
}

.gallery-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-description {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 12px;
    line-height: 1.5;
    height: 38px;
    overflow: hidden;
}

.gallery-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.gallery-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Luxury Action Buttons */
.gallery-actions {
    display: flex;
    gap: 8px;
}

.btn-luxury {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-luxury:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
    color: white;
}

.btn-luxury-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-luxury-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: white;
}

.btn-luxury-warning {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-luxury-warning:hover,
.btn-luxury-warning.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.btn-luxury-info {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-luxury-info:hover,
.btn-luxury-info.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-luxury-danger {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-luxury-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.empty-state-icon {
    font-size: 4rem;
    color: #e5e7eb;
    margin-bottom: 20px;
}

.empty-state h3 {
    color: #374151;
    margin-bottom: 8px;
}

.empty-state p {
    color: #9ca3af;
    margin-bottom: 24px;
}
</style>

<script>
function toggleFeatured(id) {
    fetch(`{{ route('admin.gallery.toggle-featured', ':id') }}`.replace(':id', id), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('Error:', error));
}

function toggleStatus(id) {
    fetch(`{{ route('admin.gallery.toggle-status', ':id') }}`.replace(':id', id), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>
@endsection