@extends('layouts.admin')

@section('content')
<div class="container-fluid">

    <div class="admin-page-header mb-4">
        <div>
            <h2><i class="fas fa-images me-2" style="color: var(--admin-accent);"></i> Hero Images</h2>
            <small>Upload background images for the fading slideshows. Up to {{ $max }} images per section.</small>
        </div>
    </div>

    @include('partials.alerts')

    <div id="heroAccordion" data-hero-accordion>
    @foreach($sections as $key => $label)
        @php $list = $images[$key] ?? collect(); $open = $key === 'home'; @endphp
        <div class="admin-form-card mb-3 hero-section-card">
            <div class="card-header hero-section-toggle d-flex justify-content-between align-items-center {{ $open ? '' : 'collapsed' }}"
                 role="button" data-bs-toggle="collapse" data-bs-target="#hero-sec-{{ $key }}"
                 aria-expanded="{{ $open ? 'true' : 'false' }}" aria-controls="hero-sec-{{ $key }}" data-hero-section="{{ $key }}">
                <span><i class="fas fa-chevron-right hero-caret me-2"></i><i class="fas fa-photo-film me-2"></i> {{ $label }}</span>
                <span class="badge {{ $list->count() >= $max ? 'bg-danger' : 'bg-secondary' }}">{{ $list->count() }}/{{ $max }}</span>
            </div>
            <div id="hero-sec-{{ $key }}" class="collapse {{ $open ? 'show' : '' }}" data-bs-parent="#heroAccordion" data-hero-collapse="{{ $key }}">
            <div class="card-body">
                @if($list->count() > 0)
                    <div class="row g-3 mb-3">
                        @foreach($list as $img)
                            <div class="col-6 col-md-3">
                                <div class="hero-thumb {{ $img->is_active ? '' : 'is-hidden' }}">
                                    <img src="{{ $img->url() }}" alt="{{ $img->caption }}">
                                    @unless($img->is_active)<span class="hero-thumb-badge">Hidden</span>@endunless
                                    <div class="hero-thumb-actions">
                                        <form method="POST" action="{{ route('admin.hero-images.toggle', $img->id) }}">@csrf @method('PATCH')
                                            <button class="btn btn-sm btn-light" title="{{ $img->is_active ? 'Hide' : 'Show' }}"><i class="fas fa-{{ $img->is_active ? 'eye-slash' : 'eye' }}"></i></button>
                                        </form>
                                        <form method="POST" action="{{ route('admin.hero-images.delete', $img->id) }}"
                                            onsubmit="event.preventDefault(); showConfirm(this, { title:'Remove image?', message:'This image will be deleted from the slideshow.', confirmText:'Delete', type:'danger' });">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-danger" title="Delete"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </div>
                                    @if($img->caption)<div class="hero-thumb-caption">{{ $img->caption }}</div>@endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-muted small">No images yet — the section falls back to its brand gradient.</p>
                @endif

                @if($list->count() < $max)
                    <form method="POST" action="{{ route('admin.hero-images.store') }}" enctype="multipart/form-data" data-hero-form>
                        @csrf
                        <input type="hidden" name="section" value="{{ $key }}">
                        <label class="hero-dropzone" data-dropzone>
                            <input type="file" name="images[]" multiple accept="image/*" class="hero-file-input" data-input hidden>
                            <div class="hero-dropzone-inner" data-prompt>
                                <p class="mb-2 fw-semibold">Drop images here <span style="color: var(--admin-accent);">OR</span> click to select</p>
                                <div class="hero-dropzone-icon"><i class="fas fa-cloud-arrow-up"></i></div>
                                <p class="text-muted small mb-0 mt-2">JPG/PNG/WebP · max 10MB each · up to {{ $max - $list->count() }} more</p>
                            </div>
                            <div class="hero-previews" data-previews></div>
                        </label>
                        <div class="d-flex justify-content-end mt-2">
                            <button type="submit" class="btn btn-admin-primary" data-submit disabled>
                                <i class="fas fa-upload me-1 btn-label-icon"></i><span class="btn-spinner"></span> Upload images
                            </button>
                        </div>
                    </form>
                @endif
            </div>
            </div>
        </div>
    @endforeach
    </div>

</div>

@push('rich_editor_assets')
<style>
    /* Collapsible sections */
    .hero-section-toggle { cursor: pointer; user-select: none; }
    .hero-section-toggle .hero-caret { transition: transform .2s ease; font-size: 0.8rem; }
    .hero-section-toggle[aria-expanded="true"] .hero-caret { transform: rotate(90deg); }
    .hero-thumb { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; box-shadow: 0 4px 14px rgba(13,22,79,0.12); }
    .hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .hero-thumb.is-hidden img { filter: grayscale(1) opacity(0.5); }
    .hero-thumb-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.65rem; padding: 2px 8px; border-radius: 10px; }
    .hero-thumb-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
    .hero-thumb-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; font-size: 0.7rem; padding: 1.4rem 0.5rem 0.4rem; }
    /* Drop zone */
    .hero-dropzone { display:block; border:2px dashed #cdd5e2; border-radius:14px; padding:1.5rem; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; background:linear-gradient(180deg,#fff,#fbfcff); }
    .hero-dropzone:hover, .hero-dropzone.dragover { border-color:var(--admin-accent,#c8913a); background:#fff8ee; }
    .hero-dropzone-icon { font-size:1.8rem; color:var(--admin-accent,#c8913a); }
    .hero-previews { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
    .hero-previews:empty { display:none; }
    .hero-preview { position:relative; width:84px; height:60px; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(13,22,79,.15); }
    .hero-preview img { width:100%; height:100%; object-fit:cover; }
    .hero-preview .hp-name { position:absolute; bottom:0; left:0; right:0; font-size:.55rem; background:rgba(0,0,0,.6); color:#fff; padding:1px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
</style>
@endpush

@push('rich_editor_inits')
    // Remember which section the admin had open across refreshes (one at a time).
    (function () {
        var KEY = 'gfcHeroOpenSection';
        var acc = document.querySelector('[data-hero-accordion]');
        if (!acc) return;
        var stored = null;
        try { stored = localStorage.getItem(KEY); } catch (e) {}
        // stored === null  -> first visit, keep server default (home open)
        // stored === ''    -> user closed everything, honor that
        // stored === 'key' -> open that section
        if (stored !== null) {
            acc.querySelectorAll('[data-hero-collapse]').forEach(function (el) {
                var isTarget = el.getAttribute('data-hero-collapse') === stored;
                var toggle = acc.querySelector('[data-hero-section="' + el.getAttribute('data-hero-collapse') + '"]');
                el.classList.toggle('show', isTarget);
                if (toggle) {
                    toggle.classList.toggle('collapsed', !isTarget);
                    toggle.setAttribute('aria-expanded', isTarget ? 'true' : 'false');
                }
            });
        }
        acc.addEventListener('shown.bs.collapse', function (ev) {
            var key = ev.target.getAttribute('data-hero-collapse');
            try { localStorage.setItem(KEY, key); } catch (e) {}
        });
        acc.addEventListener('hidden.bs.collapse', function () {
            if (!acc.querySelector('.collapse.show')) {
                try { localStorage.setItem(KEY, ''); } catch (e) {}
            }
        });
    })();

    document.querySelectorAll('[data-hero-form]').forEach(function (form) {
        var zone = form.querySelector('[data-dropzone]');
        var input = form.querySelector('[data-input]');
        var previews = form.querySelector('[data-previews]');
        var prompt = form.querySelector('[data-prompt]');
        var submit = form.querySelector('[data-submit]');
        function render() {
            previews.innerHTML = '';
            var files = Array.prototype.slice.call(input.files);
            submit.disabled = files.length === 0;
            prompt.style.display = files.length ? 'none' : '';
            files.forEach(function (f) {
                var d = document.createElement('div'); d.className = 'hero-preview';
                var img = document.createElement('img'); img.src = URL.createObjectURL(f); d.appendChild(img);
                var n = document.createElement('span'); n.className = 'hp-name'; n.textContent = f.name; d.appendChild(n);
                previews.appendChild(d);
            });
        }
        input.addEventListener('change', render);
        ['dragenter','dragover'].forEach(function (e) { zone.addEventListener(e, function (ev) { ev.preventDefault(); zone.classList.add('dragover'); }); });
        ['dragleave','drop'].forEach(function (e) { zone.addEventListener(e, function (ev) { ev.preventDefault(); zone.classList.remove('dragover'); }); });
        zone.addEventListener('drop', function (ev) { if (ev.dataTransfer && ev.dataTransfer.files.length) { input.files = ev.dataTransfer.files; render(); } });
    });
@endpush
@endsection