@php($isAdmin = session('is_admin'))
@if($isAdmin)
<!-- Admin Image Editor Modal Component -->
<style>
    :root{--accent:#628eab;--muted:#9aa8b3}
    .img-edit-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:12000}
    .img-edit-modal-backdrop.open{display:flex;animation:fadeIn .3s ease forwards}

    .img-edit-modal{background:linear-gradient(135deg, #1a1a1a 0%, #0f1419 100%);padding:0;border-radius:12px;max-width:900px;width:95%;max-height:90vh;box-shadow:0 20px 60px rgba(0,0,0,0.8), 0 0 1px rgba(98,142,171,0.3);overflow:hidden;animation:slideUp .4s ease;border:1px solid rgba(98,142,171,0.2);display:flex;flex-direction:column;font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
    .img-edit-modal.open{opacity:1;transform:none}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}} 
    @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    @keyframes slideDown{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}
    .img-edit-modal.closing{animation:slideDown .28s ease forwards}

    .img-edit-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(98,142,171,0.1);background:linear-gradient(90deg, rgba(98,142,171,0.05) 0%, transparent 100%);flex-shrink:0}
    .img-edit-header h3{margin:0;color:#fff;font-size:18px;font-weight:600}
    .img-edit-close{background:none;border:none;font-size:20px;color:rgba(255,255,255,0.6);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
    .img-edit-close:hover{color:#628eab;background:rgba(98,142,171,0.1);border-radius:4px}

    .img-edit-body{padding:24px;overflow-y:auto;flex:1;display:flex;gap:20px;align-items:flex-start;min-height:0}
    .drop-zone{flex:1;min-height:180px;border-radius:10px;padding:18px;text-align:center;cursor:pointer;transition:all .22s ease;background:#0a0e13;border:1px dashed rgba(98,142,171,0.12);color:rgba(255,255,255,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center}
    .drop-zone.dragover{background:linear-gradient(180deg,#0e2a3a,#073544);border-color:var(--accent);box-shadow:0 8px 30px rgba(96,140,160,0.12)}
    .drop-zone input{display:none}
    .dz-text{color:rgba(255,255,255,0.7);font-size:14px;margin-bottom:12px}
    .dz-cta{background:linear-gradient(135deg, #628eab 0%, #5a7a99 100%);border:none;padding:8px 12px;border-radius:8px;color:#0b1220;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(98,142,171,0.28)}

    .preview{width:240px;flex:0 0 240px;text-align:center;background:#071018;border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
    .preview img{max-width:100%;max-height:220px;border-radius:6px;display:block;margin:6px auto}

    .img-edit-actions{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(98,142,171,0.1);background:rgba(98,142,171,0.02);flex-shrink:0}
    .img-edit-actions button{border:none;border-radius:6px;padding:10px 16px;font-size:14px;cursor:pointer;font-weight:600}
    .btn-cancel{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(98,142,171,0.2)}
    .btn-save{background:linear-gradient(135deg, #628eab 0%, #5a7a99 100%);color:#fff;border:none;box-shadow:0 8px 20px rgba(98,142,171,0.28)}
    .btn-save:disabled{opacity:.45;cursor:not-allowed}

    /* prevent text selection inside modal, but allow on inputs/buttons */
    .img-edit-modal, .img-edit-modal *{user-select:none !important}
    .img-edit-modal input, .img-edit-modal button, .img-edit-modal .dz-cta{user-select:auto !important}

    @media (max-width:720px){.img-edit-body{flex-direction:column}.preview{width:100%;flex-basis:auto}}
</style>
<div class="img-edit-modal-backdrop" id="imgEditBackdrop" aria-hidden="true">
    <div class="img-edit-modal" role="dialog" aria-modal="true" aria-labelledby="imgEditTitle">
        <div class="img-edit-header">
            <h3 id="imgEditTitle">Замена изображения</h3>
            <button class="img-edit-close" id="imgEditClose" aria-label="Закрыть">✕</button>
        </div>
        <div class="img-edit-body">
            <div class="drop-zone" id="imgDropZone" tabindex="0" role="button" aria-label="Загрузить изображение">
                <div class="dz-text" id="dzText">Перетащите файл сюда или нажмите для выбора</div>
                <button type="button" class="dz-cta">Выбрать файл</button>
                <input type="file" accept="image/*" id="imgFileInput" />
            </div>
            <div class="preview" id="imgPreview" style="display:none;"><img alt="Предпросмотр" id="imgPreviewTag"></div>
        </div>
        <div class="img-edit-actions">
            <button type="button" class="btn-cancel" id="imgEditCancel">Отмена</button>
            <button type="button" class="btn-save" id="imgEditSave" disabled>Сохранить</button>
        </div>
        <div id="imgEditStatus" style="margin:8px 20px 18px;font-size:13px;color:var(--muted);"></div>
    </div>
</div>
<script>
    (function(){
        if(!window.__adminImageEditorInit){window.__adminImageEditorInit=true;} else {return;}
        const backdrop = document.getElementById('imgEditBackdrop');
        const dropZone = document.getElementById('imgDropZone');
        const fileInput = document.getElementById('imgFileInput');
        const btnCancel = document.getElementById('imgEditCancel');
        const btnSave = document.getElementById('imgEditSave');
        const statusEl = document.getElementById('imgEditStatus');
        const previewWrap = document.getElementById('imgPreview');
        const previewImg = document.getElementById('imgPreviewTag');
        let currentImageEl = null; let currentPath = null; let selectedFile = null;

        function openModal(imgEl){
            currentImageEl = imgEl;
            currentPath = imgEl.getAttribute('data-image-path');
            // Focused log: indicate modal was opened and which path is being edited
            try { console.info('Admin image editor opened', { path: currentPath }); } catch(e) {}

            // Show backdrop + modal with animations
            try {
                backdrop.style.display = 'flex';
                backdrop.classList.add('open');
                const modalEl = backdrop.querySelector('.img-edit-modal');
                if (modalEl) modalEl.classList.add('open');
            } catch (e) { /* ignore */ }

            // reset state
            statusEl.textContent = '';
            btnSave.disabled = true;
            selectedFile = null;
            previewWrap.style.display = 'none';
            previewImg.src = '';

            // Prevent page scroll while modal open
            try { document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; } catch(e){}

            // Suppress global text-editor click handlers while modal is open
            try { window._suppressTextEditor = true; } catch(e){}

            // Prevent clicks/keys inside modal from bubbling to global handlers
            try {
                const modalEl = backdrop.querySelector('.img-edit-modal');
                if (modalEl) {
                    // Only suppress events that are not originating from interactive controls
                    const stop = (ev) => {
                        try {
                            const tgt = ev.target && ev.target.closest ? ev.target.closest('button, input, textarea, select, a, .dz-cta, #imgFileInput') : null;
                            if (tgt) return; // allow interactive controls to receive events
                        } catch(e){}
                        ev.stopPropagation();
                    };
                    const stopKey = (ev) => {
                        try {
                            const tgt = ev.target && ev.target.closest ? ev.target.closest('input, textarea, select, [contenteditable="true"]') : null;
                            if (tgt) return; // allow typing in inputs
                        } catch(e){}
                        if (ev.key === 'Escape') { closeModal(); }
                        ev.stopPropagation();
                    };
                    modalEl.addEventListener('click', stop, true);
                    modalEl.addEventListener('mousedown', stop, true);
                    modalEl.addEventListener('mouseup', stop, true);
                    modalEl.addEventListener('keydown', stopKey, true);
                    // remember handlers to remove later
                    modalEl._adminHandlers = { stop, stopKey };
                    // focus close button for accessibility
                    const closeBtn = document.getElementById('imgEditClose');
                    if (closeBtn) closeBtn.focus();
                }
            } catch(e){}
        }

        // Expose a helper to open modal by element or by path for debugging/automation
        try {
            window.__adminImageOpen = function(imgOrPath){
                try {
                    if (!imgOrPath) return;
                    let el = null;
                    if (typeof imgOrPath === 'string') {
                        el = document.querySelector('img[data-image-path]');
                        // prefer exact match
                        const match = document.querySelector('img[data-image-path="' + imgOrPath + '"]');
                        if (match) el = match;
                    } else if (imgOrPath instanceof Element) {
                        el = imgOrPath;
                    }
                    if (el) openModal(el);
                    else console && console.warn && console.warn('adminImageOpen: element not found for', imgOrPath);
                } catch(e) { console && console.warn && console.warn('adminImageOpen error', e); }
            };
        } catch(e) {}
        function closeModal(){
            try {
                const modalEl = backdrop.querySelector('.img-edit-modal');
                if (modalEl) {
                    // trigger closing animation
                    modalEl.classList.remove('open');
                    // ensure any prior closing class removed before re-adding
                    modalEl.classList.remove('closing');
                    // force reflow then add closing for consistent animation
                    void modalEl.offsetWidth;
                    modalEl.classList.add('closing');
                }
                backdrop.classList.remove('open');

                // restore scroll
                try { document.documentElement.style.overflow = ''; document.body.style.overflow = ''; } catch(e){}
                // clear suppression flag
                try { window._suppressTextEditor = false; } catch(e){}

                // remove internal handlers if set
                if (modalEl && modalEl._adminHandlers) {
                    try {
                        modalEl.removeEventListener('click', modalEl._adminHandlers.stop, true);
                        modalEl.removeEventListener('mousedown', modalEl._adminHandlers.stop, true);
                        modalEl.removeEventListener('mouseup', modalEl._adminHandlers.stop, true);
                        modalEl.removeEventListener('keydown', modalEl._adminHandlers.stopKey, true);
                    } catch(e){}
                    delete modalEl._adminHandlers;
                }

                // hide after animation completes (match slideDown duration)
                setTimeout(()=>{
                    try { backdrop.style.display = 'none'; } catch(e){}
                    if (modalEl) modalEl.classList.remove('closing');
                    currentImageEl = null; currentPath = null; selectedFile = null;
                }, 320);
            } catch(e) {
                // fallback
                try { backdrop.style.display = 'none'; } catch(e){}
                currentImageEl = null; currentPath = null; selectedFile = null;
            }
        }

        function markEditableImages(){
            document.querySelectorAll('img[data-image-path]').forEach(img=>{
                if(!img.classList.contains('editable-image')){img.classList.add('editable-image');}
                img.addEventListener('mouseenter',()=>img.setAttribute('data-hover','1'));
                img.addEventListener('mouseleave',()=>img.removeAttribute('data-hover'));
                img.addEventListener('click', e=>{e.preventDefault(); openModal(img);});
            });
        }
        markEditableImages();

        // Drop zone handlers
        dropZone.addEventListener('click',()=>fileInput.click());
        fileInput.addEventListener('change',()=>{ if(fileInput.files[0]) handleFile(fileInput.files[0]);});
        ['dragenter','dragover'].forEach(ev=> dropZone.addEventListener(ev, e=>{e.preventDefault(); e.stopPropagation(); dropZone.classList.add('dragover');}));
        ['dragleave','drop'].forEach(ev=> dropZone.addEventListener(ev, e=>{e.preventDefault(); e.stopPropagation(); dropZone.classList.remove('dragover');}));
        dropZone.addEventListener('drop', e=>{const f=e.dataTransfer.files[0]; if(f) handleFile(f);});

        function handleFile(file){
            if(!file.type.startsWith('image/')){statusEl.textContent='Не изображение'; return;}
            selectedFile = file; btnSave.disabled=false; const reader=new FileReader(); reader.onload=ev=>{previewImg.src=ev.target.result; previewWrap.style.display='block';}; reader.readAsDataURL(file); statusEl.textContent='Файл выбран: '+file.name;
        }

        btnCancel.addEventListener('click',()=>closeModal());
        // Close when clicking the close icon in header
        const imgEditCloseBtn = document.getElementById('imgEditClose');
        if (imgEditCloseBtn) { imgEditCloseBtn.addEventListener('click', ()=> closeModal()); }

        // Defensive: capture-phase delegated handler to ensure clicks on the close
        // control close the modal even if inner handlers call stopPropagation.
        document.addEventListener('click', function delegatedClose(ev){
            try {
                const btn = ev.target && ev.target.closest ? ev.target.closest('.img-edit-close, #imgEditClose') : null;
                if (btn) {
                    ev.stopPropagation();
                    ev.preventDefault && ev.preventDefault();
                    closeModal();
                }
            } catch(e) {}
        }, true); // capture
        backdrop.addEventListener('click',e=>{if(e.target===backdrop) closeModal();});

        // Close modal on Escape key globally when open
        document.addEventListener('keydown', function escHandler(ev){
            try {
                if (ev.key === 'Escape' || ev.key === 'Esc') {
                    // only close if backdrop is visible
                    if (backdrop && backdrop.style.display === 'flex') {
                        closeModal();
                    }
                }
            } catch(e) {}
        });

        btnSave.addEventListener('click',()=>{
            if(!selectedFile || !currentPath){return;}
            btnSave.disabled=true; statusEl.textContent='Загрузка...';
            const fd=new FormData(); fd.append('image', selectedFile); fd.append('path', currentPath);
            const token=document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            fetch('/admin/image/replace',{method:'POST', headers:{'X-CSRF-TOKEN':token}, body:fd})
                .then(r=>r.json())
                .then(data=>{
                    if(data.ok){
                        currentImageEl.src=data.url; statusEl.textContent='Сохранено'; setTimeout(()=>{closeModal();},700);
                    } else {
                        statusEl.textContent='Ошибка: '+(data.error||'Неизвестно'); btnSave.disabled=false;
                    }
                })
                .catch(err=>{statusEl.textContent='Ошибка сети'; btnSave.disabled=false; console.error(err);});
        });
    })();
</script>
@endif

<!-- Debug helper: always-register a delegated click listener to detect clicks on images with data-image-path.
     This logs a concise message so you can confirm clicks reach the page and whether the admin editor initialized. -->
<script>
    (function(){
        if (typeof document === 'undefined') return;
        // Avoid double-binding
        if (window.__adminImageClickLoggerRegistered) return; window.__adminImageClickLoggerRegistered = true;
        document.addEventListener('click', function(e){
            try {
                const img = e.target && e.target.closest ? e.target.closest('img[data-image-path]') : null;
                if (!img) return;
                const path = img.getAttribute('data-image-path');
                // Use console.info so it's visible even when console.log is gated
                console.info('Image clicked (debug):', { path: path, adminEditorInit: !!window.__adminImageEditorInit });
                // If the admin editor is initialized, try to open the modal via exported helper
                try {
                    if (window.__adminImageEditorInit && typeof window.__adminImageOpen === 'function') {
                        // call with the element so state is set correctly
                        window.__adminImageOpen(img);
                    }
                } catch (e) {
                    try { console.warn('admin-image auto-open failed', e); } catch(e){}
                }
            } catch (err) {
                try { console.warn('admin-image debug listener error', err); } catch(e){}
            }
        }, true);
    })();
</script>