@extends('admin.layouts.app')
@section('title', 'Editar Publicación')

@section('styles')
<style>
:root { --n-blue:#1a237e; --n-gold:#ffe082; --n-purple:#4527a0; }

.not-hero {
    background: linear-gradient(135deg,#0d1b6e 0%,#1a237e 45%,#4527a0 100%);
    border-radius: 20px; padding: 22px 28px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
    box-shadow: 0 8px 32px rgba(13,27,110,.25);
}
.not-hero h1 {
    font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 2px;
    display: flex; align-items: center; gap: 10px;
}
.not-hero p { color: rgba(255,255,255,.55); margin: 0; font-size: .83rem; }

.form-card {
    background: #fff; border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    overflow: hidden; margin-bottom: 20px;
}
.form-card-header {
    background: linear-gradient(135deg,var(--n-blue),var(--n-purple));
    padding: 14px 22px; display: flex; align-items: center; gap: 10px;
}
.form-card-header .fch-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255,224,130,.15); border: 1.5px solid rgba(255,224,130,.25);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.form-card-header .fch-icon i { color: var(--n-gold); font-size: 16px; }
.form-card-header span { color: #fff; font-weight: 800; font-size: .95rem; }
.form-card-header small { color: rgba(255,255,255,.5); font-size:.78rem; font-weight:600; margin-left:auto; }
.form-card-body { padding: 24px 28px; }

.fl { font-size: .82rem; font-weight: 700; color: #475569; margin-bottom: 6px; display: block; }
.fl .req { color: #ef4444; }
.fi {
    width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px;
    padding: 10px 14px; font-size: .88rem; color: #1e293b;
    transition: border-color .2s, box-shadow .2s; outline: none; background: #fff;
}
.fi:focus { border-color: var(--n-blue); box-shadow: 0 0 0 3px rgba(26,35,126,.1); }
.fi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.fg { margin-bottom: 18px; }

.editor-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.editor-tab {
    padding: 5px 14px; font-size: 12px; font-weight: 700;
    border-radius: 8px; border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #64748b; cursor: pointer; transition: all .15s;
}
.editor-tab.active { background: var(--n-blue); color: #fff; border-color: var(--n-blue); }
.editor-wrapper { border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; transition: box-shadow .2s; }
.editor-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(26,35,126,.1); border-color: var(--n-blue); }

#htmlRawArea {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 13px; background: #0f172a; color: #e2e8f0;
    border-radius: 0 0 10px 10px; border: none;
    min-height: 340px; padding: 16px; resize: vertical;
    width: 100%; display: none;
}

#imgPreviewWrap { position: relative; display: inline-block; margin-bottom: 10px; }
#imgPreview {
    max-height: 130px; border-radius: 10px; display: block;
    border: 2px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
#btnRemoveImg {
    position: absolute; top: -8px; right: -8px;
    background: #ef4444; color: #fff; border: none; border-radius: 50%;
    width: 24px; height: 24px; font-size: 12px; cursor: pointer;
    line-height: 24px; text-align: center;
}

.boton-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    padding: 12px 14px; border-radius: 12px;
    border: 1.5px solid #eee; transition: all .2s; background: #fafafa;
}
.boton-row.has-url { background: rgba(26,35,126,.04); border-color: #c5cae9; }

.popup-section {
    background: linear-gradient(135deg,#1a237e08,#7b1fa208);
    border: 2px solid #c5cae9; border-radius: 16px; padding: 20px 22px;
}

.submit-bar {
    background: #f8faff; border-top: 1.5px solid #f1f5f9;
    padding: 18px 28px; display: flex; gap: 12px; justify-content: flex-end;
    align-items: center;
}

.char-count { font-size: 11px; color: #94a3b8; text-align: right; margin-top: 3px; }

.toggle-label {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: #fff; padding: 10px 16px; border-radius: 10px;
    border: 1.5px solid #e2e8f0; transition: border-color .2s;
}
.toggle-label:hover { border-color: var(--n-blue); }
.toggle-label input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--n-blue); }
.toggle-label span { font-weight: 700; color: #334155; font-size: .88rem; }
</style>
@endsection

@section('content')

{{-- ═══════ HERO ═══════ --}}
<div class="not-hero">
    <div>
        <h1>
            <div style="width:38px;height:38px;border-radius:12px;background:rgba(255,224,130,.15);border:1.5px solid rgba(255,224,130,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="bi bi-pencil-square" style="color:var(--n-gold);font-size:18px;"></i>
            </div>
            Editar Publicación
        </h1>
        <p>Modifica los datos de: <strong style="color:rgba(255,255,255,.8);">{{ $noticia->titulo }}</strong></p>
    </div>
    <div style="display:flex;gap:10px;align-items:center;">
        <a href="{{ route('admin.noticias.index') }}"
           style="display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:12px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .2s;"
           onmouseover="this.style.background='rgba(255,255,255,.2)'" onmouseout="this.style.background='rgba(255,255,255,.12)'">
            <i class="bi bi-arrow-left"></i> Volver
        </a>
    </div>
</div>

<form action="{{ route('admin.noticias.update', $noticia) }}"
      method="POST" enctype="multipart/form-data" id="formNoticia">
    @csrf @method('PUT')

    {{-- Errores manejados por SweetAlert2 en el layout --}}
    {{-- Resaltado de campos inválidos --}}
    @if($errors->any())
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        @foreach($errors->keys() as $field)
        var el = document.querySelector('[name="{{ $field }}"]');
        if (el) { el.style.borderColor = '#ef4444'; el.style.boxShadow = '0 0 0 3px rgba(239,68,68,.12)'; }
        @endforeach
    });
    </script>
    @endif

    {{-- ════════════ SECCIÓN 1 — DATOS ════════════ --}}
    <div class="form-card">
        <div class="form-card-header">
            <div class="fch-icon"><i class="bi bi-file-earmark-text-fill"></i></div>
            <span>Datos Principales</span>
            <small>Título, tipo, categoría y fecha</small>
        </div>
        <div class="form-card-body">
            <div class="fg">
                <label class="fl">Título <span class="req">*</span></label>
                <input type="text" name="titulo" class="fi"
                       value="{{ old('titulo', $noticia->titulo) }}"
                       placeholder="Título de la publicación..." required>
            </div>
            <div class="fi-row">
                <div>
                    <label class="fl">Tipo <span class="req">*</span></label>
                    <select name="tipo" class="fi" required>
                        @foreach(['noticia'=>'📰 Noticia','comunicado'=>'📢 Comunicado','convocatoria'=>'📋 Convocatoria','logro'=>'🏆 Logro'] as $val => $label)
                        <option value="{{ $val }}" {{ old('tipo', $noticia->tipo) === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="fl">Categoría</label>
                    <input type="text" name="categoria" class="fi"
                           value="{{ old('categoria', $noticia->categoria) }}"
                           placeholder="Ej: Olimpiadas, Eventos...">
                </div>
                <div>
                    <label class="fl">Fecha de Publicación <span class="req">*</span></label>
                    <input type="date" name="fecha_publicacion" class="fi"
                           value="{{ old('fecha_publicacion', $noticia->fecha_publicacion->format('Y-m-d')) }}"
                           required>
                </div>
            </div>
            <div class="fg">
                <label class="fl">
                    Resumen
                    <span style="font-weight:400;color:#94a3b8;font-size:.78rem;"> — aparece en tarjetas y vista previa</span>
                </label>
                <textarea name="resumen" id="resumen" class="fi" rows="2"
                          placeholder="Breve descripción para la tarjeta..."
                          oninput="document.getElementById('charCount').textContent=this.value.length"
                          style="resize:vertical;">{{ old('resumen', $noticia->resumen) }}</textarea>
                <div class="char-count"><span id="charCount">{{ strlen(old('resumen', $noticia->resumen ?? '')) }}</span> caracteres</div>
            </div>
            <div style="display:flex;gap:14px;flex-wrap:wrap;">
                <label class="toggle-label">
                    <input type="checkbox" name="destacado" value="1"
                           {{ old('destacado', $noticia->destacado) ? 'checked' : '' }}>
                    <i class="bi bi-star-fill" style="color:#f59e0b;"></i>
                    <span>Destacado</span>
                </label>
                <label class="toggle-label">
                    <input type="checkbox" name="activo" value="1"
                           {{ old('activo', $noticia->activo) ? 'checked' : '' }}>
                    <i class="bi bi-toggle-on" style="color:#10b981;"></i>
                    <span>Activo / Publicado</span>
                </label>
            </div>
        </div>
    </div>

    {{-- ════════════ SECCIÓN 2 — CONTENIDO ════════════ --}}
    <div class="form-card">
        <div class="form-card-header">
            <div class="fch-icon"><i class="bi bi-pencil-square"></i></div>
            <span>Contenido</span>
            <small>Editor visual HTML (TinyMCE)</small>
        </div>
        <div class="form-card-body">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
                <label class="fl mb-0">Cuerpo del artículo</label>
                <div class="editor-tabs">
                    <button type="button" class="editor-tab active" id="tabVisual" onclick="switchTab('visual')">
                        <i class="bi bi-eye me-1"></i>Visual
                    </button>
                    <button type="button" class="editor-tab" id="tabHtml" onclick="switchTab('html')">
                        <i class="bi bi-code-slash me-1"></i>HTML
                    </button>
                </div>
            </div>
            <div class="editor-wrapper">
                <textarea name="contenido" id="contenido">{{ old('contenido', $noticia->contenido) }}</textarea>
                <textarea id="htmlRawArea" spellcheck="false"
                          placeholder="<!-- Escribe HTML aquí... -->"></textarea>
            </div>
        </div>
    </div>

    {{-- ════════════ SECCIÓN 3 — IMAGEN ════════════ --}}
    <div class="form-card">
        <div class="form-card-header">
            <div class="fch-icon"><i class="bi bi-image-fill"></i></div>
            <span>Imagen</span>
            <small>JPG · PNG · WebP — recomendado 800×500 px</small>
        </div>
        <div class="form-card-body">
            @if($noticia->imagen)
            <div id="imgPreviewWrap">
                <img id="imgPreview" src="{{ asset('storage/'.$noticia->imagen) }}" alt="Imagen actual">
                <button type="button" id="btnRemoveImg" title="Quitar imagen" onclick="quitarImagen()">✕</button>
            </div>
            <input type="hidden" name="imagen_actual" value="{{ $noticia->imagen }}">
            @else
            <div id="imgPreviewWrap" style="display:none;">
                <img id="imgPreview" src="" alt="Vista previa">
                <button type="button" id="btnRemoveImg" title="Quitar imagen" onclick="quitarImagen()">✕</button>
            </div>
            @endif
            <input type="file" name="imagen" id="inputImagen" class="fi" accept="image/*"
                   onchange="previewImagen(this)" style="max-width:420px;">
            <div style="font-size:.78rem;color:#94a3b8;margin-top:6px;">
                <i class="bi bi-info-circle me-1"></i>Formatos: JPG, PNG, WebP. Tamaño recomendado: 800×500 px.
            </div>
        </div>
    </div>

    {{-- ════════════ SECCIÓN 4 — BOTONES ════════════ --}}
    <div class="form-card">
        <div class="form-card-header">
            <div class="fch-icon"><i class="bi bi-link-45deg"></i></div>
            <span>Botones de Enlace</span>
            <small>Hasta 5 botones — solo aparecen si tienen URL</small>
        </div>
        <div class="form-card-body">
            @php
                $paletaColores    = ['#1565c0','#2e7d32','#ad1457','#e65100','#6a1b9a'];
                $botonesGuardados = old('boton_url') ? null : ($noticia->botones ?? null);
            @endphp
            <div id="botonesContainer">
                @for($i = 0; $i < 5; $i++)
                @php
                    $btn      = $botonesGuardados[$i] ?? null;
                    $textoVal = old("boton_texto.$i", $btn['texto'] ?? '');
                    $urlVal   = old("boton_url.$i",   $btn['url']   ?? '');
                    $colorVal = old("boton_color.$i", $btn['color'] ?? $paletaColores[$i]);
                @endphp
                <div class="boton-row {{ $urlVal ? 'has-url' : '' }}" id="boton-row-{{ $i }}">
                    <div style="flex-shrink:0;">
                        <span class="btn-num-badge"
                              style="display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:{{ $colorVal }};color:#fff;font-size:12px;font-weight:800;">
                            {{ $i + 1 }}
                        </span>
                    </div>
                    <div style="flex-shrink:0;" title="Color del botón">
                        <input type="color" name="boton_color[{{ $i }}]"
                               value="{{ $colorVal }}" class="boton-color-input" data-idx="{{ $i }}"
                               style="width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;padding:2px;background:transparent;"
                               onchange="actualizarColorBoton({{ $i }}, this.value)">
                    </div>
                    <div style="flex:1;min-width:0;">
                        <input type="text" name="boton_texto[{{ $i }}]"
                               value="{{ $textoVal }}" class="fi"
                               style="padding:7px 12px;font-size:.84rem;"
                               placeholder="Texto del botón (ej: Ver resultados →)">
                    </div>
                    <div style="flex:2;min-width:0;">
                        <div style="position:relative;">
                            <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:13px;">
                                <i class="bi bi-link"></i>
                            </span>
                            <input type="url" name="boton_url[{{ $i }}]"
                                   value="{{ $urlVal }}" class="fi boton-url-input" data-idx="{{ $i }}"
                                   placeholder="https://... (vacío = no mostrar)"
                                   style="padding:7px 12px 7px 30px;font-size:.84rem;"
                                   oninput="toggleBotonRow({{ $i }}, this.value)">
                        </div>
                    </div>
                    <div style="flex-shrink:0;" id="preview-btn-{{ $i }}">
                        @if($urlVal)
                        <span style="display:inline-block;padding:5px 14px;border-radius:50px;background:{{ $colorVal }};color:#fff;font-size:12px;font-weight:700;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;">
                            {{ $textoVal ?: 'Ver más' }}
                        </span>
                        @else
                        <span style="color:#cbd5e1;font-size:12px;"><i class="bi bi-dash-circle"></i> vacío</span>
                        @endif
                    </div>
                </div>
                @endfor
            </div>
            <div style="font-size:11.5px;color:#94a3b8;margin-top:8px;">
                <i class="bi bi-palette me-1"></i>Haz clic en el círculo de color para cambiarlo. Los botones sin URL no aparecen en la noticia pública.
            </div>
        </div>
    </div>

    {{-- ════════════ SECCIÓN 5 — POPUP ════════════ --}}
    <div class="form-card">
        <div class="form-card-header">
            <div class="fch-icon"><i class="bi bi-megaphone-fill"></i></div>
            <span>Popup Carousel</span>
            <small>Ventana emergente en la página pública</small>
            @if($noticia->mostrar_popup)
            <span style="background:#4caf50;color:#fff;padding:3px 12px;border-radius:50px;font-size:11px;font-weight:800;margin-left:auto;">
                <i class="bi bi-broadcast-pin me-1"></i>ACTIVO EN POPUP
            </span>
            @endif
        </div>
        <div class="form-card-body">
            <div class="popup-section">
                <div style="font-size:.85rem;color:#7b1fa2;margin-bottom:16px;">
                    <i class="bi bi-info-circle me-1"></i>
                    Solo <strong>Noticias</strong> y <strong>Comunicados</strong> aparecen en el popup. Se muestra al entrar al sitio web.
                </div>
                <div style="display:flex;align-items:center;gap:20px;flex-wrap:wrap;">
                    <label class="toggle-label">
                        <input type="checkbox" name="mostrar_popup" value="1" id="chkPopup"
                               {{ old('mostrar_popup', $noticia->mostrar_popup) ? 'checked' : '' }}
                               onchange="togglePopupConfig(this.checked)">
                        <i class="bi bi-megaphone" style="color:#7b1fa2;"></i>
                        <span style="color:#1a237e;">Mostrar en Popup Carousel</span>
                    </label>
                    <div id="popupOrdenWrap"
                         style="{{ old('mostrar_popup', $noticia->mostrar_popup) ? '' : 'opacity:.4;pointer-events:none;' }}display:flex;align-items:center;gap:8px;">
                        <label style="font-size:.83rem;font-weight:700;color:#555;margin:0;">
                            <i class="bi bi-sort-numeric-up me-1"></i>Orden en carrusel:
                        </label>
                        <input type="number" name="popup_orden" min="0" max="99"
                               value="{{ old('popup_orden', $noticia->popup_orden ?? 0) }}"
                               class="fi" style="width:70px;padding:7px 10px;text-align:center;font-weight:700;">
                        <small style="color:#94a3b8;font-size:11px;">(0 = primero)</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════ SUBMIT BAR ═══════ --}}
    <div class="submit-bar">
        <a href="{{ route('admin.noticias.index') }}"
           style="display:inline-flex;align-items:center;gap:7px;padding:11px 20px;background:#f1f5f9;color:#64748b;border-radius:12px;font-weight:700;text-decoration:none;font-size:.88rem;transition:all .2s;"
           onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f1f5f9'">
            <i class="bi bi-x-lg"></i> Cancelar
        </a>
        <button type="submit" id="btnSubmit"
                style="display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,#1a237e,#4527a0);color:#fff;border:none;border-radius:14px;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(26,35,126,.3);transition:all .2s;"
                onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
            <i class="bi bi-save-fill"></i> Actualizar Publicación
        </button>
    </div>

</form>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
    selector: '#contenido',
    language: 'es_ES',
    language_url: '{{ asset("js/tinymce/langs/es_ES.js") }}',
    convert_urls: false, relative_urls: false, remove_script_host: false,
    height: 440,
    menubar: 'file edit view insert format tools table',
    plugins: ['advlist','autolink','lists','link','image','charmap','anchor','searchreplace',
              'visualblocks','code','fullscreen','insertdatetime','media','table','help',
              'wordcount','emoticons','preview'],
    toolbar:
        'undo redo | styles | bold italic underline strikethrough | ' +
        'forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image media | ' +
        'blockquote code | removeformat | fullscreen preview | help',
    toolbar_mode: 'sliding',
    content_style: `
        body { font-family: Inter, sans-serif; font-size: 15px; line-height: 1.7;
               color: #1a202c; padding: 16px 24px; max-width: 860px; margin: 0 auto; }
        h1,h2,h3,h4 { font-weight:700; color:#1a237e; margin-top:1.4em; }
        a { color:#1565c0; }
        img { max-width:100%; border-radius:8px; }
        blockquote { border-left:4px solid #1a237e; padding:8px 16px; background:#f0f4ff; margin:16px 0; }
        table { border-collapse:collapse; width:100%; }
        th,td { border:1px solid #e2e8f0; padding:8px 12px; }
        th { background:#1a237e; color:#ffe082; }
        code { background:#f1f5f9; padding:2px 6px; border-radius:4px; font-family:monospace; }
        pre  { background:#0f172a; color:#e2e8f0; padding:16px; border-radius:8px; overflow:auto; }
    `,
    images_upload_handler: blobInfo => new Promise(resolve => {
        const r = new FileReader();
        r.onload = () => resolve(r.result);
        r.readAsDataURL(blobInfo.blob());
    }),
    style_formats: [
        {title:'Párrafo',block:'p'},{title:'Título 1',block:'h1'},
        {title:'Título 2',block:'h2'},{title:'Título 3',block:'h3'},
        {title:'Cita',block:'blockquote'},{title:'Código',block:'pre'},
        {title:'Resaltado',inline:'span',styles:{'background-color':'#fffde7','border-radius':'3px','padding':'1px 4px'}},
    ],
    setup: ed => { ed.on('change input', () => ed.save()); },
    promotion: false, branding: false,
});

// ── Tabs ───────────────────────────────────────────────
let modoActual = 'visual';
function switchTab(modo) {
    const raw = document.getElementById('htmlRawArea');
    const editorContainer = document.querySelector('.tox-tinymce');
    const tabV = document.getElementById('tabVisual');
    const tabH = document.getElementById('tabHtml');
    if (modo === 'html') {
        const ed = tinymce.get('contenido');
        if (ed) raw.value = ed.getContent();
        raw.style.display = 'block';
        if (editorContainer) editorContainer.style.display = 'none';
        tabH.classList.add('active'); tabV.classList.remove('active');
        modoActual = 'html';
    } else {
        const ed = tinymce.get('contenido');
        if (ed && raw.value.trim()) ed.setContent(raw.value);
        raw.style.display = 'none';
        if (editorContainer) editorContainer.style.display = '';
        tabV.classList.add('active'); tabH.classList.remove('active');
        modoActual = 'visual';
    }
}
document.getElementById('formNoticia').addEventListener('submit', function () {
    const ed = tinymce.get('contenido');
    if (modoActual === 'html') {
        const raw = document.getElementById('htmlRawArea').value;
        if (ed) { ed.setContent(raw); ed.save(); }
    } else { if (ed) ed.save(); }
    const btn = document.getElementById('btnSubmit');
    btn.textContent = 'Guardando...'; btn.disabled = true;
});

// ── Imagen ─────────────────────────────────────────────
function previewImagen(input) {
    if (input.files && input.files[0]) {
        const r = new FileReader();
        r.onload = e => {
            document.getElementById('imgPreview').src = e.target.result;
            document.getElementById('imgPreviewWrap').style.display = 'inline-block';
        };
        r.readAsDataURL(input.files[0]);
    }
}
function quitarImagen() {
    document.getElementById('inputImagen').value = '';
    document.getElementById('imgPreviewWrap').style.display = 'none';
    const h = document.querySelector('[name=imagen_actual]');
    if (h) h.value = '';
}

document.getElementById('charCount').textContent = document.getElementById('resumen').value.length;

// ── Botones ────────────────────────────────────────────
function actualizarColorBoton(idx, color) {
    const badge = document.querySelector(`#boton-row-${idx} .btn-num-badge`);
    if (badge) badge.style.background = color;
    actualizarPreviewBoton(idx);
}
function actualizarPreviewBoton(idx) {
    const row     = document.getElementById(`boton-row-${idx}`);
    const urlEl   = row.querySelector('.boton-url-input');
    const textoEl = row.querySelectorAll('input[type=text]')[0];
    const colorEl = row.querySelector('input[type=color]');
    const preview = document.getElementById(`preview-btn-${idx}`);
    const url     = urlEl?.value.trim() ?? '';
    const texto   = textoEl?.value.trim() || 'Ver más';
    const color   = colorEl?.value ?? '#1565c0';
    if (url) {
        preview.innerHTML = `<span style="display:inline-block;padding:5px 14px;border-radius:50px;background:${color};color:#fff;font-size:12px;font-weight:700;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;">${texto}</span>`;
    } else {
        preview.innerHTML = `<span style="color:#cbd5e1;font-size:12px;"><i class="bi bi-dash-circle"></i> vacío</span>`;
    }
}
function toggleBotonRow(idx, valor) {
    const row = document.getElementById(`boton-row-${idx}`);
    if (valor.trim()) { row.classList.add('has-url'); }
    else              { row.classList.remove('has-url'); }
    actualizarPreviewBoton(idx);
}
document.querySelectorAll('.boton-row input[type=text]').forEach(input => {
    input.addEventListener('input', function () {
        const idx = parseInt(this.closest('.boton-row').id.replace('boton-row-', ''));
        actualizarPreviewBoton(idx);
    });
});

// ── Popup ──────────────────────────────────────────────
function togglePopupConfig(checked) {
    const wrap = document.getElementById('popupOrdenWrap');
    wrap.style.opacity       = checked ? '1'    : '.4';
    wrap.style.pointerEvents = checked ? 'auto' : 'none';
}
</script>
@endsection