@php
    $isEdit = filled($record);
    $isModal = isset($modalId);
    $modalId = $modalId ?? null;
    $titleId = $isModal ? $modalId.'Label' : 'adminFormTitle';
    $namePrefix = $isModal ? $modalId.'_' : 'page_';
    $backRoute = $backRoute ?? null;
    $selectedAlbumId = old('album_id', $record?->album_id ?? request('album_id'));
@endphp

@if ($isModal)
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $titleId }}" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content glass-panel admin-text border-0 rounded-4">
@else
<section class="glass-panel admin-text border-0 rounded-4 overflow-hidden">
@endif
            <form class="gallery-image-upload-form" method="POST" action="{{ $action }}" enctype="multipart/form-data">
                @csrf
                @if ($method !== 'POST')
                    @method($method)
                @endif

                @if ($isModal)
                <div class="modal-header" style="border-color: var(--admin-border);">
@else
                <div class="p-3 p-lg-4 border-bottom" style="border-color: var(--admin-border) !important;">
@endif
                    <div>
                        <h2 class="modal-title fs-5 fw-bold" id="{{ $titleId }}">{{ $isEdit ? 'Edit Gallery Image' : 'Add Gallery Images' }}</h2>
                        <p class="small admin-muted mb-0">Choose an album, set status, and upload image files.</p>
                    </div>
                    @if ($isModal)
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    @endif
                </div>

                @if ($isModal)
                <div class="modal-body">
@else
                <div class="p-3 p-lg-4">
@endif
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}album_id">Album</label>
                            <select class="form-select admin-input rounded-4 @error('album_id') is-invalid @enderror" id="{{ $namePrefix }}album_id" name="album_id">
                                <option value="">Select album</option>
                                @foreach ($selectOptions['albums'] ?? [] as $optionValue => $optionLabel)
                                    <option value="{{ $optionValue }}" @selected((string) $selectedAlbumId === (string) $optionValue)>{{ $optionLabel }}</option>
                                @endforeach
                            </select>
                            @error('album_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}status">Status</label>
                            <select class="form-select admin-input rounded-4 @error('status') is-invalid @enderror" id="{{ $namePrefix }}status" name="status">
                                <option value="">Select status</option>
                                @foreach ($selectOptions['statuses'] ?? [] as $optionValue => $optionLabel)
                                    <option value="{{ $optionValue }}" @selected((string) old('status', $record?->status ?? 'published') === (string) $optionValue)>{{ $optionLabel }}</option>
                                @endforeach
                            </select>
                            @error('status')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}sort_order">Sort Order</label>
                            <input class="form-control admin-input rounded-4 @error('sort_order') is-invalid @enderror" id="{{ $namePrefix }}sort_order" type="number" name="sort_order" value="{{ old('sort_order', $record?->sort_order ?? 0) }}">
                            @error('sort_order')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}media_files">
                                Images
                                @unless ($isEdit)
                                    <span class="text-danger">*</span>
                                @endunless
                            </label>
                            <label class="gallery-image-upload-drop" for="{{ $namePrefix }}media_files">
                                <span class="gallery-image-upload-icon">
                                    <i data-lucide="upload-cloud" width="28" height="28"></i>
                                </span>
                                <strong data-gallery-image-upload-label>{{ $isEdit ? 'Replace image' : 'Upload images' }}</strong>
                                <span>{{ $isEdit ? 'Choose one image to replace the current image.' : '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="{{ $namePrefix }}media_files" type="file" name="media_files[]" accept="image/*" @unless($isEdit) multiple @endunless data-gallery-image-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>

                        @if ($isEdit && $record?->image)
                            <div class="col-12">
                                <div class="gallery-current-image">
                                    <span><i data-lucide="image" width="22" height="22"></i></span>
                                    <div>
                                        <strong>{{ $record->image?->title_en ?: 'Current image' }}</strong>
                                        <p>{{ $record->image?->file_path }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                @if ($isModal)
                <div class="modal-footer" style="border-color: var(--admin-border);">
@else
                <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 p-3 p-lg-4 border-top" style="border-color: var(--admin-border) !important;">
@endif
                    @if ($isModal)
                    <button type="button" class="btn glass-card admin-text rounded-4 px-3" data-bs-dismiss="modal">Cancel</button>
                    @elseif ($backRoute)
                    <a class="btn glass-card admin-text rounded-4 px-3" href="{{ $backRoute }}">Cancel</a>
                    @endif
                    <button type="submit" class="btn btn-success rounded-4 px-4 fw-semibold">{{ $isEdit ? 'Update' : 'Upload' }}</button>
                </div>
            </form>
@if ($isModal)
        </div>
    </div>
</div>
@else
</section>
@endif

@once
    <style>
        .gallery-image-upload-drop {
            min-height: 12rem;
            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;
        }

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

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

        .gallery-image-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);
        }

        .gallery-current-image {
            display: flex;
            align-items: center;
            gap: .8rem;
            min-width: 0;
            padding: 1rem;
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            background: rgba(255, 255, 255, .03);
        }

        .gallery-current-image > span {
            width: 4.5rem;
            height: 3.4rem;
            flex: 0 0 4.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: .75rem;
            border: 1px solid var(--admin-border);
            background: var(--admin-input);
            color: var(--admin-muted);
        }

        .gallery-current-image strong,
        .gallery-current-image p {
            display: block;
            max-width: 34rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .gallery-current-image p {
            margin: .2rem 0 0;
            color: var(--admin-muted);
            font-size: .8rem;
        }
    </style>

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

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

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