@extends('layouts.admin')

@section('content')
    <section class="d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3 mb-4">
        <div>
            <p class="small text-success fw-bold text-uppercase mb-2" style="letter-spacing: .08em;">Gallery Album</p>
            <h1 class="h3 fw-bold admin-text mb-1">{{ $record->title_en ?: 'Gallery Album' }}</h1>
            <p class="small admin-muted mb-0">Manage images already added to this album and upload more.</p>
        </div>
        <div class="d-flex flex-wrap align-items-center gap-2">
            <a class="btn glass-card admin-text rounded-4 px-3 py-2 fw-semibold d-inline-flex align-items-center gap-2" href="{{ route('admin.gallery-albums.index') }}">
                <i data-lucide="arrow-left" width="16" height="16"></i>
                Back
            </a>
            <a class="btn glass-card admin-text rounded-4 px-3 py-2 fw-semibold d-inline-flex align-items-center gap-2" href="{{ route('admin.gallery-albums.edit', $record->id) }}">
                <i data-lucide="pencil" width="16" height="16"></i>
                Edit Album
            </a>
        </div>
    </section>

    @if (session('success'))
        <div class="alert alert-success border-0 rounded-4 shadow-sm">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger border-0 rounded-4 shadow-sm">Please check the highlighted fields and try again.</div>
    @endif

    <section class="glass-card rounded-4 p-3 p-lg-4 mb-4">
        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 mb-3">
            <div>
                <h2 class="h5 fw-bold admin-text mb-1">Album Images</h2>
                <p class="small admin-muted mb-0">{{ $record->images->count() }} image{{ $record->images->count() === 1 ? '' : 's' }} added.</p>
            </div>
            <button class="btn btn-success rounded-4 px-3 fw-semibold d-inline-flex align-items-center gap-2" type="button" data-bs-toggle="collapse" data-bs-target="#addAlbumImagesPanel" aria-expanded="{{ $errors->has('media_files') || $errors->has('media_files.*') ? 'true' : 'false' }}" aria-controls="addAlbumImagesPanel">
                <i data-lucide="images" width="16" height="16"></i>
                Add Images
            </button>
        </div>

        <div class="collapse {{ $errors->has('media_files') || $errors->has('media_files.*') ? 'show' : '' }}" id="addAlbumImagesPanel">
            <form class="album-images-upload-form mb-4" method="POST" action="{{ route('admin.gallery-albums.images.store', $record->id) }}" enctype="multipart/form-data">
                @csrf
                <div class="row g-3">
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold admin-muted" for="albumImageStatus">Status</label>
                        <select class="form-select admin-input rounded-4 @error('status') is-invalid @enderror" id="albumImageStatus" name="status">
                            @foreach ($selectOptions['statuses'] ?? [] as $optionValue => $optionLabel)
                                <option value="{{ $optionValue }}" @selected((string) old('status', 'published') === (string) $optionValue)>{{ $optionLabel }}</option>
                            @endforeach
                        </select>
                        @error('status')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <label class="form-label small fw-semibold admin-muted" for="albumImageFiles">Images <span class="text-danger">*</span></label>
                        <label class="album-images-upload-drop" for="albumImageFiles">
                            <span class="album-images-upload-icon">
                                <i data-lucide="upload-cloud" width="28" height="28"></i>
                            </span>
                            <strong data-album-images-upload-label>Upload images</strong>
                            <span>Select multiple image files to add to this album.</span>
                        </label>
                        <input class="visually-hidden @error('media_files') is-invalid @enderror @error('media_files.*') is-invalid @enderror" id="albumImageFiles" type="file" name="media_files[]" accept="image/*" multiple data-album-images-upload-input>
                        @error('media_files')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        @error('media_files.*')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-3">
                    <button class="btn btn-success rounded-4 px-4 fw-semibold" type="submit">Upload Images</button>
                </div>
            </form>
        </div>

        @if ($record->images->isNotEmpty())
            <form method="POST" action="{{ route('admin.gallery-albums.images.order', $record->id) }}">
                @csrf
                @method('PATCH')

                <div class="album-images-grid">
                    @foreach ($record->images as $galleryImage)
                        @php
                            $asset = $galleryImage->image;
                            $url = $imageUrl($asset);
                            $title = $galleryImage->title_en ?: ($asset?->title_en ?: ($asset?->file_path ? basename($asset->file_path) : 'Gallery image'));
                        @endphp
                        <article class="album-image-card">
                            <div class="album-image-thumb">
                                @if ($url)
                                    <img src="{{ $url }}" alt="{{ $title }}" loading="lazy">
                                @else
                                    <span><i data-lucide="image-off" width="22" height="22"></i></span>
                                @endif
                            </div>
                            <div class="album-image-meta">
                                <strong title="{{ $title }}">{{ str($title)->limit(34) }}</strong>
                                <label class="small admin-muted" for="albumImageOrder{{ $galleryImage->id }}">Order</label>
                                <input class="form-control form-control-sm admin-input rounded-3 @error('orders.'.$galleryImage->id) is-invalid @enderror" id="albumImageOrder{{ $galleryImage->id }}" type="number" min="0" name="orders[{{ $galleryImage->id }}]" value="{{ old('orders.'.$galleryImage->id, $galleryImage->sort_order ?? 0) }}">
                                @error('orders.'.$galleryImage->id)
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <label class="small admin-muted" for="albumImageTitle{{ $galleryImage->id }}">Title</label>
                                <input class="form-control form-control-sm admin-input rounded-3 @error('titles.'.$galleryImage->id) is-invalid @enderror" id="albumImageTitle{{ $galleryImage->id }}" type="text" name="titles[{{ $galleryImage->id }}]" value="{{ old('titles.'.$galleryImage->id, $galleryImage->title_en) }}" placeholder="Image title">
                                @error('titles.'.$galleryImage->id)
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="d-flex justify-content-end mt-3">
                    <button class="btn btn-success rounded-4 px-4 fw-semibold" type="submit">Save Image Details</button>
                </div>
            </form>
        @else
            <div class="album-images-empty">
                <i data-lucide="image" width="28" height="28"></i>
                <p class="mb-0">No images added yet.</p>
            </div>
        @endif
    </section>

    <style>
        .album-images-upload-form {
            padding: 1rem;
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            background: rgba(255, 255, 255, .03);
        }

        .album-images-upload-drop {
            min-height: 11rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            border: 1px dashed rgba(34, 197, 94, .48);
            border-radius: 1rem;
            background: rgba(34, 197, 94, .08);
            color: var(--admin-text);
            cursor: pointer;
            text-align: center;
            padding: 1rem;
            transition: border-color .18s ease, background-color .18s ease;
        }

        .album-images-upload-drop:hover {
            border-color: rgba(34, 197, 94, .82);
            background: rgba(34, 197, 94, .13);
        }

        .album-images-upload-drop span:last-child {
            color: var(--admin-muted);
            font-size: .84rem;
        }

        .album-images-upload-icon {
            width: 3.25rem;
            height: 3.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 1rem;
            color: var(--admin-green);
            background: rgba(34, 197, 94, .14);
        }

        .album-images-grid {
            display: grid;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            gap: .75rem;
        }

        .album-image-card {
            min-width: 0;
            border: 1px solid var(--admin-border);
            border-radius: .85rem;
            overflow: hidden;
            background: rgba(255, 255, 255, .04);
        }

        .album-image-thumb {
            aspect-ratio: 1 / 1;
            background: rgba(0, 0, 0, .18);
        }

        .album-image-thumb img,
        .album-image-thumb span {
            width: 100%;
            height: 100%;
        }

        .album-image-thumb img {
            object-fit: cover;
        }

        .album-image-thumb span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--admin-muted);
        }

        .album-image-meta {
            padding: .6rem;
        }

        .album-image-meta strong {
            display: block;
            min-height: 2.2rem;
            overflow: hidden;
            font-size: .78rem;
            line-height: 1.35;
        }

        .album-image-meta label {
            display: block;
            margin: .45rem 0 .2rem;
        }

        .album-images-empty {
            display: grid;
            place-items: center;
            gap: .5rem;
            min-height: 14rem;
            border: 1px dashed var(--admin-border);
            border-radius: 1rem;
            color: var(--admin-muted);
        }

        @media (max-width: 1399.98px) {
            .album-images-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            .album-images-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .album-images-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[data-album-images-upload-input]').forEach((input) => {
                const label = input.closest('form')?.querySelector('[data-album-images-upload-label]');

                input.addEventListener('change', () => {
                    if (! label || ! input.files || input.files.length === 0) {
                        return;
                    }

                    label.textContent = input.files.length === 1 ? input.files[0].name : `${input.files.length} images selected`;
                });
            });
        });
    </script>
@endsection