@extends('layouts.admin')

@section('title', 'Gallery Albums')

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Gallery Albums</h1>
    </div>
    <a href="{{ route('admin.albums.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> New Album
    </a>
</div>

@if($albums->count())
<!-- Stats Strip -->
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:24px; margin-bottom:28px;">
    <div class="admin-card" style="margin-bottom:0; display:flex; align-items:center; gap:16px; padding:20px;">
        <div style="width:48px;height:48px;border-radius:12px;background:rgba(30,58,138,.1);display:flex;align-items:center;justify-content:center;">
            <i class="fas fa-images" style="color:var(--primary); font-size:1.2rem;"></i>
        </div>
        <div>
            <div style="font-size:1.6rem;font-weight:700;font-family:'Oswald',sans-serif;color:var(--primary);line-height:1;">{{ $albums->total() }}</div>
            <div style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;">Total Albums</div>
        </div>
    </div>
    <div class="admin-card" style="margin-bottom:0; display:flex; align-items:center; gap:16px; padding:20px;">
        <div style="width:48px;height:48px;border-radius:12px;background:rgba(239,68,68,.1);display:flex;align-items:center;justify-content:center;">
            <i class="fas fa-photo-video" style="color:var(--secondary); font-size:1.2rem;"></i>
        </div>
        <div>
            <div style="font-size:1.6rem;font-weight:700;font-family:'Oswald',sans-serif;color:var(--primary);line-height:1;">{{ $albums->sum('items_count') }}</div>
            <div style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;">Total Items</div>
        </div>
    </div>
    <div class="admin-card" style="margin-bottom:0; display:flex; align-items:center; gap:16px; padding:20px;">
        <div style="width:48px;height:48px;border-radius:12px;background:rgba(212,160,23,.12);display:flex;align-items:center;justify-content:center;">
            <i class="fas fa-image" style="color:#d4a017; font-size:1.2rem;"></i>
        </div>
        <div>
            <div style="font-size:1.6rem;font-weight:700;font-family:'Oswald',sans-serif;color:var(--primary);line-height:1;">{{ $albums->where('items_count','>',0)->count() }}</div>
            <div style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;">Active Albums</div>
        </div>
    </div>
</div>

<!-- Album Grid -->
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px;">
    @foreach($albums as $alb)
    <div class="admin-card" style="margin-bottom: 0; transition:var(--transition);"
         onmouseenter="this.style.transform='translateY(-4px)'"
         onmouseleave="this.style.transform='none'">
        <!-- Cover Image -->
        <div style="height:180px; overflow:hidden; position:relative; background:linear-gradient(135deg,var(--primary) 0%,#0d1f45 100%);">
            @if($alb->cover_image)
                <img src="{{ asset($alb->cover_image) }}" alt="{{ $alb->name }}"
                     style="width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease;"
                     onmouseenter="this.style.transform='scale(1.05)'"
                     onmouseleave="this.style.transform='scale(1)'">
            @else
                <div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;">
                    <i class="fas fa-images" style="font-size:2.5rem;color:rgba(255,255,255,0.3);"></i>
                    <span style="font-size:0.8rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px;">No Cover</span>
                </div>
            @endif
            <div class="badge badge-info" style="position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);color:#fff;">
                <i class="fas fa-image" style="margin-right:4px;"></i> {{ $alb->items_count }}
            </div>
        </div>

        <!-- Info -->
        <div class="admin-card-body">
            <h3 style="font-family:'Oswald',sans-serif;font-size:1.1rem;font-weight:600;color:var(--primary);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                {{ $alb->name }}
            </h3>
            @if($alb->description)
            <p style="font-size:0.85rem;color:var(--text-muted);line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                {{ $alb->description }}
            </p>
            @else
            <p style="font-size:0.85rem;color:var(--text-muted);font-style:italic;margin-bottom:14px;">No description</p>
            @endif

            <div style="display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-color);">
                <span style="font-size:0.8rem;color:var(--text-muted);">
                    <i class="fas fa-calendar-alt" style="margin-right:4px;"></i> {{ $alb->created_at->format('M d, Y') }}
                </span>
                <div style="display:flex;gap:8px;">
                    <a href="{{ route('admin.albums.edit', $alb->id) }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-folder-open"></i> Manage
                    </a>
                    <form action="{{ route('admin.albums.destroy', $alb->id) }}" method="POST" onsubmit="return confirm('Delete album \'{{ addslashes($alb->name) }}\'? This cannot be undone.');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div style="margin-top:24px;">{{ $albums->links() }}</div>

@else
<!-- Empty State -->
<div style="background:var(--surface);border-radius:16px;border:2px dashed var(--border-color);padding:80px 40px;text-align:center;">
    <div style="width:80px;height:80px;border-radius:50%;background:var(--bg-color);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
        <i class="fas fa-images" style="font-size:2rem;color:var(--text-muted);opacity:0.5;"></i>
    </div>
    <h3 style="font-family:'Oswald',sans-serif;color:var(--primary);margin-bottom:8px;">No Albums Yet</h3>
    <p style="color:var(--text-muted);margin-bottom:24px;font-size:0.95rem;">Create your first gallery album to start showcasing LPTA events.</p>
    <a href="{{ route('admin.albums.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Create First Album
    </a>
</div>
@endif

@endsection
