{{-- Ortak görsel yönetimi. Beklenen: $tour, $images, $uploadUrl, $deleteRoute, $coverRoute, $featuredRoute
     Yükleme: modern sürükle-bırak + yükleme öncesi önizleme. Sunucu sözleşmesi aynı (files[] + image_type, multipart). --}}
<style>
    .dz-form { --dz-accent:#4f46e5; }
    .dz-toprow { display:flex; align-items:flex-end; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
    .dz-typefld { min-width:190px; }
    .dz-typefld label { display:block; font-size:.72rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px; }
    .dz-type { width:100%; padding:9px 11px; border:1.5px solid #e7e9f2; border-radius:11px; font-size:.85rem; font-weight:600; color:#1e293b; background:#fff; outline:none; }
    .dz-type:focus { border-color:var(--dz-accent); box-shadow:0 0 0 3px rgba(79,70,229,.1); }

    .dz-zone { position:relative; border:2px dashed #cdd3e6; border-radius:16px; background:linear-gradient(180deg,#fbfbff,#f5f6fc);
        padding:26px 18px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s, transform .15s; outline:none; }
    .dz-zone:hover, .dz-zone:focus-visible { border-color:var(--dz-accent); background:#f5f3ff; }
    .dz-zone.dz-over { border-color:var(--dz-accent); background:#eef2ff; transform:scale(1.01); box-shadow:0 10px 30px -12px rgba(79,70,229,.45); }
    .dz-ic { width:54px; height:54px; margin:0 auto 12px; border-radius:16px; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; font-size:1.4rem; box-shadow:0 8px 18px -6px rgba(79,70,229,.6); }
    .dz-title { font-weight:800; font-size:.92rem; color:#1e293b; }
    .dz-title span { color:var(--dz-accent); text-decoration:underline; text-underline-offset:2px; }
    .dz-hint { font-size:.74rem; color:#94a3b8; margin-top:5px; }

    .dz-previews { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; margin-top:14px; }
    .dz-prev { position:relative; border-radius:12px; overflow:hidden; background:#0f172a; aspect-ratio:1; box-shadow:0 4px 12px -6px rgba(15,23,42,.4); animation:dzIn .2s ease; }
    @keyframes dzIn { from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }
    .dz-prev img { width:100%; height:100%; object-fit:cover; display:block; }
    .dz-prev-x { position:absolute; top:5px; right:5px; width:24px; height:24px; border:none; border-radius:8px; cursor:pointer;
        background:rgba(15,23,42,.7); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; transition:.15s; }
    .dz-prev-x:hover { background:#ef4444; transform:scale(1.08); }
    .dz-prev-name { position:absolute; left:0; right:0; bottom:0; padding:14px 6px 5px; font-size:.62rem; color:#fff; font-weight:600;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:linear-gradient(transparent, rgba(15,23,42,.85)); }

    .dz-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
    .dz-count { font-size:.78rem; font-weight:700; color:#64748b; }
    .dz-form button[disabled] { opacity:.5; cursor:not-allowed; }
</style>

<div class="pqv-section">
    <div class="pqv-sec-title"><i class="fas fa-cloud-arrow-up"></i> Görsel Yükle</div>
    <form data-pqv-upload data-reload-tab="media" action="{{ $uploadUrl }}" enctype="multipart/form-data" class="dz-form">
        <div class="dz-toprow">
            <div class="dz-typefld">
                <label>Görsel Tipi</label>
                <select name="image_type" class="dz-type">
                    <option value="gallery">Galeri</option>
                    <option value="featured">Öne Çıkan</option>
                    <option value="cover">Kapak</option>
                    <option value="thumbnail">Küçük Görsel</option>
                </select>
            </div>
        </div>

        <div class="dz-zone" data-dz-zone tabindex="0" role="button" aria-label="Görsel seç veya sürükle bırak">
            <input type="file" name="files[]" accept="image/jpeg,image/png,image/webp" multiple hidden data-dz-input>
            <div class="dz-ic"><i class="fas fa-images"></i></div>
            <div class="dz-title">Görselleri sürükle bırak <span>veya tıkla / seç</span></div>
            <div class="dz-hint">JPEG · PNG · WEBP — dosya başına en fazla 10 MB</div>
        </div>

        <div class="dz-previews" data-dz-previews hidden></div>

        <div class="dz-actions">
            <span class="dz-count" data-dz-count></span>
            <button type="submit" class="pqv-btn pqv-btn-primary" data-dz-submit disabled><i class="fas fa-upload"></i> Yükle</button>
        </div>
    </form>
</div>

<script>
(function () {
    document.querySelectorAll('form.dz-form[data-pqv-upload]').forEach(function (form) {
        if (form.__dzInit) return; form.__dzInit = true;

        var zone = form.querySelector('[data-dz-zone]');
        var input = form.querySelector('[data-dz-input]');
        var previews = form.querySelector('[data-dz-previews]');
        var countEl = form.querySelector('[data-dz-count]');
        var submitBtn = form.querySelector('[data-dz-submit]');
        var dt = new DataTransfer();
        var MAX = 10 * 1024 * 1024;

        function sync() {
            try { input.files = dt.files; } catch (e) {}
            var n = dt.items.length;
            previews.hidden = n === 0;
            countEl.textContent = n ? (n + ' görsel seçildi') : '';
            submitBtn.disabled = n === 0;
        }
        function render() {
            previews.innerHTML = '';
            Array.prototype.forEach.call(dt.files, function (f, i) {
                var card = document.createElement('div'); card.className = 'dz-prev';
                var img = document.createElement('img');
                var rd = new FileReader(); rd.onload = function (e) { img.src = e.target.result; }; rd.readAsDataURL(f);
                var rm = document.createElement('button'); rm.type = 'button'; rm.className = 'dz-prev-x'; rm.title = 'Kaldır';
                rm.innerHTML = '<i class="fas fa-xmark"></i>';
                rm.addEventListener('click', function () { removeAt(i); });
                var nm = document.createElement('span'); nm.className = 'dz-prev-name'; nm.textContent = f.name;
                card.appendChild(img); card.appendChild(rm); card.appendChild(nm);
                previews.appendChild(card);
            });
            sync();
        }
        function addFiles(files) {
            Array.prototype.forEach.call(files, function (f) {
                if (!/^image\/(jpeg|png|webp)$/.test(f.type)) return;
                if (f.size > MAX) return;
                dt.items.add(f);
            });
            render();
        }
        function removeAt(idx) {
            var ndt = new DataTransfer();
            Array.prototype.forEach.call(dt.files, function (f, i) { if (i !== idx) ndt.items.add(f); });
            dt = ndt; render();
        }

        zone.addEventListener('click', function () { input.click(); });
        zone.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); } });
        input.addEventListener('change', function () { addFiles(input.files); });
        ['dragover', 'dragenter'].forEach(function (ev) { zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('dz-over'); }); });
        ['dragleave', 'dragend'].forEach(function (ev) { zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.remove('dz-over'); }); });
        zone.addEventListener('drop', function (e) { e.preventDefault(); zone.classList.remove('dz-over'); if (e.dataTransfer && e.dataTransfer.files) addFiles(e.dataTransfer.files); });

        sync();
    });
})();
</script>

@if($images->count())
    <div class="pqv-img-grid">
        @foreach($images as $image)
            <div class="pqv-img">
                <img src="{{ $image->image_url }}" alt="{{ $image->title ?? $tour->name }}" loading="lazy">
                <div class="pqv-img-badges">
                    @if($image->is_cover)<span class="pqv-badge pqv-b-green">Kapak</span>@endif
                    @if($image->is_featured)<span class="pqv-badge pqv-b-amber">Öne Çıkan</span>@endif
                </div>
                <div class="pqv-img-acts">
                    <button type="button" class="pqv-iconbtn success" data-pqv-post="{{ route($coverRoute, [$tour, $image->id]) }}" data-reload-tab="media" title="Kapak Yap"><i class="fas fa-star"></i></button>
                    <button type="button" class="pqv-iconbtn warn" data-pqv-post="{{ route($featuredRoute, [$tour, $image->id]) }}" data-reload-tab="media" title="Öne Çıkar"><i class="fas fa-bolt"></i></button>
                    <button type="button" class="pqv-iconbtn danger" data-pqv-delete="{{ route($deleteRoute, [$tour, $image->id]) }}" data-reload-tab="media" title="Sil"><i class="fas fa-trash"></i></button>
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="pqv-empty"><i class="fas fa-images"></i><p>Henüz görsel eklenmemiş.</p></div>
@endif