@extends('layouts.admin')

@section('title', 'Manage Album: ' . $album->name)

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <nav style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">
            <a href="{{ route('admin.albums.index') }}" style="color:var(--text-muted);text-decoration:none;">Gallery</a>
            <span style="margin:0 6px;">/</span>
            <span style="color:var(--primary);font-weight:600;">{{ Str::limit($album->name, 30) }}</span>
        </nav>
        <h1 style="font-family:'Oswald',sans-serif;font-size:1.8rem;color:var(--primary);margin:0;">
            <i class="fas fa-folder-open" style="color:var(--secondary);margin-right:8px;"></i> {{ $album->name }}
        </h1>
    </div>
    <a href="{{ route('admin.albums.index') }}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> All Albums
    </a>
</div>

<div style="display:grid; grid-template-columns:1fr 350px; gap:24px; align-items:start;">

    <!-- LEFT: Album Info + Media Grid -->
    <div style="display:flex;flex-direction:column;gap:24px;">

        <!-- Album Details Card -->
        <div class="admin-card" style="margin-bottom: 0;">
            <!-- Cover banner -->
            <div style="height:180px;background:linear-gradient(135deg,var(--primary),#0d1f45);overflow:hidden;position:relative;">
                @if($album->cover_image)
                    <img src="{{ asset($album->cover_image) }}" alt="{{ $album->name }}" style="width:100%;height:100%;object-fit:cover;opacity:0.8;">
                @endif
                <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);"></div>
                <div style="position:absolute;bottom:16px;left:20px;">
                    <div style="color:#fff;font-family:'Oswald',sans-serif;font-size:1.4rem;font-weight:700;">{{ $album->name }}</div>
                    <div style="color:rgba(255,255,255,.7);font-size:0.82rem;margin-top:2px;">
                        <i class="fas fa-image" style="margin-right:5px;"></i> {{ $album->items->count() }} items
                        &nbsp;·&nbsp;
                        <i class="fas fa-calendar" style="margin-right:5px;"></i> {{ $album->created_at->format('M Y') }}
                    </div>
                </div>
            </div>

            <!-- Update form -->
            <div class="admin-card-body">
                <form method="POST" action="{{ route('admin.albums.update', $album->id) }}" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
                        <div class="form-group" style="margin-bottom:0;">
                            <label class="form-label">Album Name <span style="color:var(--secondary);">*</span></label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $album->name) }}" required>
                        </div>
                        <div class="form-group" style="margin-bottom:0;">
                            <label class="form-label">New Cover Image</label>
                            <input type="file" name="cover_image" class="form-control" accept="image/*" style="padding: 7px 12px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3">{{ old('description', $album->description) }}</textarea>
                    </div>
                    <div style="display:flex;justify-content:flex-end;">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Media Grid -->
        <div class="admin-card" style="margin-bottom: 0;">
            <div class="admin-card-header">
                <span class="admin-card-title"><i class="fas fa-photo-video" style="color:var(--primary);margin-right:8px;"></i> Media Items</span>
                <span class="badge badge-info">{{ $album->items->count() }}</span>
            </div>

            <div class="admin-card-body">
                @if($album->items->count())
                <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;">
                    @foreach($album->items as $item)
                    <div style="border-radius:10px;overflow:hidden;border:1px solid var(--border-color);background:var(--bg-color);position:relative;transition:var(--transition);"
                         onmouseenter="this.querySelector('.item-overlay').style.opacity='1'"
                         onmouseleave="this.querySelector('.item-overlay').style.opacity='0'">
                        <!-- Media -->
                        <div style="height:130px;overflow:hidden;">
                            @if($item->type === 'image')
                                <img src="{{ asset($item->file_path) }}" alt="{{ $item->caption }}" style="width:100%;height:100%;object-fit:cover;">
                            @else
                                <div style="width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;">
                                    <i class="fab fa-youtube" style="font-size:2rem;color:#ff0000;"></i>
                                    <span style="font-size:0.7rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;">Video</span>
                                </div>
                            @endif
                        </div>
                        <!-- Hover overlay with delete -->
                        <div class="item-overlay" style="position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:.2s;display:flex;align-items:center;justify-content:center;">
                            <form action="{{ route('admin.albums.items.destroy', [$album->id, $item->id]) }}" method="POST" onsubmit="return confirm('Remove this item?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">
                                    <i class="fas fa-trash"></i> Remove
                                </button>
                            </form>
                        </div>
                        <!-- Caption -->
                        @if($item->caption)
                        <div style="padding:8px 10px;font-size:0.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                            {{ $item->caption }}
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>
                @else
                <div style="text-align:center;padding:48px 20px;">
                    <i class="fas fa-images" style="font-size:3rem;color:var(--text-muted);opacity:0.3;margin-bottom:12px;display:block;"></i>
                    <p style="color:var(--text-muted);font-size:0.95rem;">No media items yet. Add your first images or video!</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Danger Zone -->
        <div class="admin-card" style="border-color: #fca5a5;">
            <div class="admin-card-header" style="background-color: #fef2f2; border-bottom-color: #fecaca;">
                <span class="admin-card-title" style="color: #dc2626;"><i class="fas fa-exclamation-triangle" style="margin-right:8px;"></i> Danger Zone</span>
            </div>
            <div class="admin-card-body" style="display:flex;align-items:center;justify-content:space-between;gap:20px;">
                <div>
                    <div style="font-weight:600;font-size:0.95rem;color:var(--text-main);">Delete this album</div>
                    <div style="font-size:0.85rem;color:var(--text-muted);margin-top:2px;">This will permanently delete the album and all its media.</div>
                </div>
                <form action="{{ route('admin.albums.destroy', $album->id) }}" method="POST" onsubmit="return confirm('Delete album \'{{ addslashes($album->name) }}\' and ALL its items? This cannot be undone!');">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash"></i> Delete Album
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- RIGHT: Add Item Sidebar -->
    <div style="position:sticky;top:88px;">
        <div class="admin-card">
            <div class="admin-card-header" style="background-color: var(--primary); color: white;">
                <span class="admin-card-title" style="color: white;"><i class="fas fa-plus-circle" style="color: var(--secondary); margin-right:8px;"></i> Add Media</span>
            </div>
            <div class="admin-card-body">
                <form method="POST" action="{{ route('admin.albums.items.store', $album->id) }}" enctype="multipart/form-data" id="addItemForm">
                    @csrf

                    <!-- Type Toggle -->
                    <div class="form-group">
                        <label class="form-label">Media Type</label>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                            <label style="display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:2px solid var(--primary);border-radius:8px;cursor:pointer;font-weight:600;font-size:0.9rem;color:var(--primary);background:rgba(30,58,138,.05);" id="imageLabel">
                                <input type="radio" name="type" value="image" checked style="display:none;" onchange="toggleType('image')">
                                <i class="fas fa-image"></i> Images
                            </label>
                            <label style="display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;font-weight:500;font-size:0.9rem;color:var(--text-muted);" id="videoLabel">
                                <input type="radio" name="type" value="video" style="display:none;" onchange="toggleType('video')">
                                <i class="fab fa-youtube"></i> Video
                            </label>
                        </div>
                    </div>

                    <!-- Image upload zone (MULTIPLE) -->
                    <div id="imageSection" class="form-group">
                        <label class="form-label">Image Files <span style="color:var(--secondary);">*</span></label>
                        <div style="border:2px dashed var(--border-color);border-radius:10px;padding:30px 16px;text-align:center;cursor:pointer;transition:var(--transition);background-color:var(--bg-color);"
                             onclick="document.getElementById('mediaFiles').click()"
                             onmouseenter="this.style.borderColor='var(--primary)';this.style.backgroundColor='rgba(30,58,138,.02)'"
                             onmouseleave="this.style.borderColor='var(--border-color)';this.style.backgroundColor='var(--bg-color)'">
                            <i class="fas fa-cloud-upload-alt" style="font-size:2rem;color:var(--text-muted);opacity:0.5;margin-bottom:8px;display:block;"></i>
                            <div id="fileLabel" style="font-size:0.9rem;color:var(--text-main);font-weight:500;">Click to select multiple images</div>
                            <div style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">JPG, PNG, WEBP · Max 8MB per file</div>
                        </div>
                        <input type="file" id="mediaFiles" name="files[]" accept="image/*" multiple style="display:none;"
                               onchange="updateFileLabel(this)">
                    </div>

                    <!-- Video URL -->
                    <div id="videoSection" class="form-group" style="display:none;">
                        <label class="form-label">YouTube / Video URL <span style="color:var(--secondary);">*</span></label>
                        <input type="url" name="video_url" class="form-control" placeholder="https://www.youtube.com/embed/...">
                    </div>

                    <!-- Caption -->
                    <div class="form-group">
                        <label class="form-label">Caption (optional)</label>
                        <input type="text" name="caption" class="form-control" placeholder="Shared caption for all files...">
                    </div>

                    <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; padding: 12px;">
                        <i class="fas fa-plus"></i> Add to Album
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function toggleType(type) {
    const imageSection = document.getElementById('imageSection');
    const videoSection = document.getElementById('videoSection');
    const imageLabel   = document.getElementById('imageLabel');
    const videoLabel   = document.getElementById('videoLabel');

    if (type === 'image') {
        imageSection.style.display = 'block';
        videoSection.style.display = 'none';
        
        imageLabel.style.borderColor = 'var(--primary)';
        imageLabel.style.borderWidth = '2px';
        imageLabel.style.color = 'var(--primary)';
        imageLabel.style.background = 'rgba(30,58,138,.05)';
        imageLabel.style.fontWeight = '600';
        
        videoLabel.style.borderColor = 'var(--border-color)';
        videoLabel.style.borderWidth = '1px';
        videoLabel.style.color = 'var(--text-muted)';
        videoLabel.style.background = 'transparent';
        videoLabel.style.fontWeight = '500';
    } else {
        imageSection.style.display = 'none';
        videoSection.style.display = 'block';
        
        videoLabel.style.borderColor = 'var(--primary)';
        videoLabel.style.borderWidth = '2px';
        videoLabel.style.color = 'var(--primary)';
        videoLabel.style.background = 'rgba(30,58,138,.05)';
        videoLabel.style.fontWeight = '600';
        
        imageLabel.style.borderColor = 'var(--border-color)';
        imageLabel.style.borderWidth = '1px';
        imageLabel.style.color = 'var(--text-muted)';
        imageLabel.style.background = 'transparent';
        imageLabel.style.fontWeight = '500';
    }
}

function updateFileLabel(input) {
    const fileLabel = document.getElementById('fileLabel');
    if (input.files && input.files.length > 0) {
        if (input.files.length === 1) {
            fileLabel.textContent = input.files[0].name;
        } else {
            fileLabel.textContent = input.files.length + ' files selected';
        }
        fileLabel.style.color = 'var(--primary)';
    } else {
        fileLabel.textContent = 'Click to select multiple images';
        fileLabel.style.color = 'var(--text-main)';
    }
}
</script>
@endsection
