@extends('layouts.admin')
@section('title', 'Accesos Directos')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="d-flex align-items-center gap-3 mb-4">
            <div>
                <h5 class="fw-bold mb-1">Accesos Directos</h5>
                <p class="text-muted small mb-0">Edita los 4 bloques que aparecen en la banda superior del portal.</p>
            </div>
        </div>

        <form method="POST" action="{{ route('access.update') }}" id="accessForm">
            @csrf @method('PUT')

            <div class="builder-toolbar">
                <button type="button" title="Negrita" onmousedown="event.preventDefault()" onclick="exec('bold')"><i class="bi bi-type-bold"></i></button>
                <button type="button" title="Cursiva" onmousedown="event.preventDefault()" onclick="exec('italic')"><i class="bi bi-type-italic"></i></button>
                <button type="button" title="Subrayado" onmousedown="event.preventDefault()" onclick="exec('underline')"><i class="bi bi-type-underline"></i></button>
                <select onmousedown="saveSelection()" onchange="restoreSelection(); exec('formatBlock', this.value); this.selectedIndex=0;">
                    <option value="">Texto</option>
                    <option value="H2">Titulo</option>
                    <option value="H3">Subtitulo</option>
                    <option value="P">Parrafo</option>
                </select>
                <select class="toolbar-font" title="Tipo de letra" onmousedown="saveSelection()" onchange="restoreSelection(); execFontFamily(this.value); this.selectedIndex=0;">
                    <option value="">Tipografia</option>
                    <option value="Arial, sans-serif">Arial</option>
                    <option value="Georgia, serif">Georgia</option>
                    <option value="'Times New Roman', serif">Times New Roman</option>
                    <option value="Verdana, sans-serif">Verdana</option>
                    <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
                    <option value="Tahoma, sans-serif">Tahoma</option>
                    <option value="'Courier New', monospace">Courier New</option>
                    <option value="Calibri, sans-serif">Calibri</option>
                    <option value="'Segoe UI', sans-serif">Segoe UI</option>
                </select>
                <select class="toolbar-font" title="Tamano de texto" onmousedown="saveSelection()" onchange="restoreSelection(); execFontSize(this.value); this.selectedIndex=0;">
                    <option value="">Tamano</option>
                    <option value="16">16 px</option>
                    <option value="18">18 px</option>
                    <option value="20">20 px</option>
                    <option value="24">24 px</option>
                    <option value="28">28 px</option>
                    <option value="32">32 px</option>
                    <option value="40">40 px</option>
                    <option value="48">48 px</option>
                </select>
                <span class="toolbar-sep"></span>
                <label class="color-label" title="Color de texto"><input type="color" onmousedown="saveSelection()" onchange="restoreSelection(); exec('foreColor', this.value);"></label>
                <button type="button" title="Lista" onmousedown="event.preventDefault()" onclick="exec('insertUnorderedList')"><i class="bi bi-list-ul"></i></button>
                <button type="button" title="Lista numerada" onmousedown="event.preventDefault()" onclick="exec('insertOrderedList')"><i class="bi bi-list-ol"></i></button>
                <button type="button" title="Centrar" onmousedown="event.preventDefault()" onclick="exec('justifyCenter')"><i class="bi bi-text-center"></i></button>
                <span class="toolbar-sep"></span>
                <button type="button" title="Imagen por URL" onmousedown="event.preventDefault()" onclick="insertImagePrompt()"><i class="bi bi-image"></i></button>
                <button type="button" title="Subir imagen" onmousedown="event.preventDefault()" onclick="document.getElementById('accessImageInput').click()"><i class="bi bi-cloud-arrow-up"></i></button>
                <button type="button" title="Enlace" onmousedown="event.preventDefault()" onclick="insertLinkPrompt()"><i class="bi bi-link-45deg"></i></button>
                <span class="toolbar-sep"></span>
                <button type="button" title="Limpiar formato" onmousedown="event.preventDefault()" onclick="exec('removeFormat')"><i class="bi bi-eraser"></i></button>
                <span class="toolbar-sep"></span>
                <button type="button" class="toolbar-label text-primary bg-primary-subtle" title="Cargar el diseno por defecto (reemplaza el contenido actual)" onclick="confirmLoadTemplate()"><i class="bi bi-file-earmark-arrow-up me-1"></i>Diseno por defecto</button>
                <button type="button" class="toolbar-label text-danger bg-danger-subtle" title="Vacia los 4 bloques" onclick="clearEditor()"><i class="bi bi-trash me-1"></i>Limpiar todo</button>
            </div>

            <div class="row g-3 mt-2">
                @php
                    $iconOptions = [
                        'bi-inbox-fill' => 'Bandeja',
                        'bi-folder2-open' => 'Carpeta',
                        'bi-mortarboard-fill' => 'Birrete',
                        'bi-calendar2-check-fill' => 'Agenda',
                        'bi-people-fill' => 'Personas',
                        'bi-book-fill' => 'Libro',
                        'bi-newspaper' => 'Noticias',
                        'bi-images' => 'Imagenes',
                        'bi-play-circle-fill' => 'Video',
                        'bi-whatsapp' => 'WhatsApp',
                        'bi-telephone-fill' => 'Telefono',
                        'bi-envelope-fill' => 'Correo',
                        'bi-info-circle-fill' => 'Informacion',
                        'bi-star-fill' => 'Estrella',
                        'bi-award-fill' => 'Premio',
                        'bi-pencil-square' => 'Editar',
                        'bi-map-fill' => 'Mapa',
                        'bi-chat-quote-fill' => 'Testimonio',
                        'bi-lightbulb-fill' => 'Idea',
                        'bi-globe2' => 'Mundo',
                    ];
                @endphp
                @foreach([1,2,3,4] as $n)
                <div class="col-md-6">
                    <div class="access-block-card">
                        <div class="access-block-header">
                            <i class="bi bi-grid-1x2"></i> Bloque {{ $n }}
                            <span class="ms-auto d-flex align-items-center gap-2">
                                <label class="m-0 d-flex align-items-center gap-1 small" title="Color del boton">
                                    <i class="bi bi-droplet-half"></i>
                                    <input type="color" class="block-btn-picker" data-block="{{ $n }}" value="#2563eb">
                                </label>
                                <button type="button" class="btn btn-sm btn-light py-0 px-2" title="Restaurar color del boton" onclick="clearButtonColor({{ $n }})"><i class="bi bi-arrow-counterclockwise"></i></button>
                                <label class="m-0 d-flex align-items-center gap-1 small" title="Color de fondo del bloque">
                                    <i class="bi bi-paint-bucket"></i>
                                    <input type="color" class="block-bg-picker" data-block="{{ $n }}" value="{{ $settings->{'access'.$n.'_bg'} ?: '#ffffff' }}">
                                </label>
                                <button type="button" class="btn btn-sm btn-light py-0 px-2" title="Quitar fondo" onclick="clearBlockBg({{ $n }})"><i class="bi bi-x-lg"></i></button>
                            </span>
                        </div>
                        <div class="access-block-config">
                            <div class="input-group input-group-sm access-url-group">
                                <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
                                <input type="text" class="form-control block-url-input" data-block="{{ $n }}" list="accessUrls" placeholder="Enlace del boton (ej. /admisiones o https://...)">
                            </div>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text"><i class="bi bi-emoji-smile"></i></span>
                                <select class="form-select block-icon-select" data-block="{{ $n }}">
                                    <option value="">Sin icono</option>
                                    @foreach($iconOptions as $val => $label)
                                    <option value="{{ $val }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div id="visualEditor{{ $n }}" class="visual-editor" contenteditable="true" data-placeholder="Escribe aqui el contenido del Bloque {{ $n }}..."></div>
                        <input type="hidden" name="access{{ $n }}_content" id="access{{ $n }}Input" value="{{ old('access'.$n.'_content', $settings->{'access'.$n.'_content'}) }}">
                        <input type="hidden" name="access{{ $n }}_bg" id="access{{ $n }}Bg" value="{{ old('access'.$n.'_bg', $settings->{'access'.$n.'_bg'}) }}">
                    </div>
                </div>
                @endforeach
            </div>

            <datalist id="accessUrls">
                <option value="admisiones"></option>
                <option value="documentos"></option>
                <option value="contacto"></option>
                <option value="niveles"></option>
                <option value="noticias"></option>
                <option value="eventos"></option>
                <option value="docentes"></option>
                <option value="galeria"></option>
                <option value="videos"></option>
            </datalist>

            <input type="file" id="accessImageInput" accept="image/*" hidden>

            <div class="d-flex justify-content-end gap-2 mt-4">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Guardar Cambios</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('styles')
<style>
    .builder-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
    .builder-toolbar button { height: 32px; min-width: 32px; padding: 0 6px; border: 1px solid transparent; background: transparent; color: #475569; border-radius: 6px; cursor: pointer; font-size: 0.95rem; }
    .builder-toolbar button:hover { background: #e2e8f0; }
    .builder-toolbar select { height: 32px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.82rem; background: #fff; padding: 0 6px; }
    .builder-toolbar .toolbar-font { font-size: 0.8rem; font-weight: 600; }
    .builder-toolbar .color-label input { width: 28px; height: 28px; border: none; padding: 0; background: none; cursor: pointer; }
    .builder-toolbar .toolbar-label { font-size: 0.8rem; font-weight: 600; padding: 0 10px; }
    .builder-toolbar .toolbar-sep { width: 1px; height: 22px; background: #e2e8f0; margin: 0 4px; }
    .access-block-card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
    .access-block-header { padding: 8px 14px; background: #f1f5f9; font-weight: 700; font-size: 0.85rem; color: #334155; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 6px; }
    .access-block-header .block-bg-picker { width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 1px; background: #fff; cursor: pointer; }
    .access-block-header .block-btn-picker { width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 1px; background: #fff; cursor: pointer; }
    .access-block-config { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; background: #fbfcfe; border-bottom: 1px solid #e2e8f0; }
    .access-block-config .input-group-text { background: #f8fafc; border-color: #e2e8f0; }
    .access-block-config .form-control, .access-block-config .form-select { border-color: #e2e8f0; font-size: 0.82rem; }
    .access-block-config .form-control:focus, .access-block-config .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,.12); }
    .visual-editor { min-height: 200px; padding: 16px; background: #fff; outline: none; }
    .visual-editor:empty::before { content: attr(data-placeholder); color: #94a3b8; }
    .visual-editor img { max-width: 100%; border-radius: 12px; }
    .visual-editor.drag-over { outline: 3px dashed #4338ca; outline-offset: -3px; background: #eef2ff; }
    .visual-editor.active { box-shadow: inset 0 0 0 2px var(--primary); }
    .visual-editor .admission-cta-btn {
        display: inline-flex; align-items: center; gap: 12px;
        padding: 15px 26px;
        background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
        color: #0f172a; font-weight: 800; font-size: 1.05rem;
        border-radius: 50px; text-decoration: none; line-height: 1.2;
        box-shadow: 0 12px 28px rgba(250, 204, 21, 0.45);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .visual-editor .admission-cta-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 36px rgba(250, 204, 21, 0.55); color: #0f172a; }
    .visual-editor .admission-cta-btn .cta-icon { font-size: 1.6rem; }
    .visual-editor .admission-cta-btn .cta-main { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
    .visual-editor .admission-cta-btn .cta-main .cta-title { font-size: 1.25rem; font-weight: 900; letter-spacing: .3px; }
    .visual-editor .admission-cta-btn .cta-main .cta-sub { font-size: .72rem; font-weight: 600; opacity: .85; }
    .visual-editor .admission-cta-btn .cta-arrow { margin-left: 2px; font-size: 1.25rem; }
    .visual-editor .acc-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 11px 22px; font-weight: 700; font-size: .9rem;
        border-radius: 50px; text-decoration: none; line-height: 1.2;
        white-space: nowrap;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }
    .visual-editor .acc-btn:hover { transform: translateY(-2px); }
    .visual-editor .acc-btn-primary { background: #3b82f6; color: #fff; box-shadow: 0 8px 20px rgba(59,130,246,.35); }
    .visual-editor .acc-btn-primary:hover { background: #2563eb; color: #fff; box-shadow: 0 12px 26px rgba(59,130,246,.5); }
    .visual-editor .acc-btn-accent { background: linear-gradient(135deg, #facc15, #eab308); color: #0f172a; box-shadow: 0 8px 20px rgba(250,204,21,.4); }
    .visual-editor .acc-btn-accent:hover { box-shadow: 0 12px 26px rgba(250,204,21,.55); color: #0f172a; }
    .visual-editor .acc-btn-outline { background: transparent; color: #3b82f6; border: 2px solid #3b82f6; }
    .visual-editor .acc-btn-outline:hover { background: #3b82f6; color: #fff; }
    .visual-editor .acc-btn-whatsapp { background: #25d366; color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.35); }
    .visual-editor .acc-btn-whatsapp:hover { background: #1ebe5d; color: #fff; box-shadow: 0 12px 26px rgba(37,211,102,.5); }
    .visual-editor .acc-card-btn {
        display: flex; align-items: center; gap: 14px;
        width: 100%; padding: 20px 22px;
        border-radius: 18px; text-decoration: none; color: #fff;
        transition: transform .22s ease, box-shadow .22s ease;
    }
    .visual-editor .acc-card-btn:hover { transform: translateY(-4px); color: #fff; }
    .visual-editor .acc-card-btn .acc-ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: rgba(255,255,255,.2); }
    .visual-editor .acc-card-btn .acc-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; }
    .visual-editor .acc-card-btn .acc-txt .acc-titulo { font-size: 1.15rem; font-weight: 800; letter-spacing: .2px; }
    .visual-editor .acc-card-btn .acc-txt .acc-sub { font-size: .78rem; font-weight: 600; opacity: .92; }
    .visual-editor .acc-card-mesa { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 12px 28px rgba(37,99,235,.32); }
    .visual-editor .acc-card-mesa:hover { box-shadow: 0 20px 38px rgba(37,99,235,.45); }
    .visual-editor .acc-card-doc { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 12px 28px rgba(5,150,105,.32); }
    .visual-editor .acc-card-doc:hover { box-shadow: 0 20px 38px rgba(5,150,105,.45); }
    .visual-editor .acc-card-plataforma { background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 12px 28px rgba(124,58,237,.32); }
    .visual-editor .acc-card-plataforma:hover { box-shadow: 0 20px 38px rgba(124,58,237,.45); }
    .visual-editor .acc-card-admision { background: linear-gradient(135deg, #facc15, #eab308); color: #0f172a; box-shadow: 0 12px 28px rgba(250,204,21,.35); }
    .visual-editor .acc-card-admision:hover { box-shadow: 0 20px 38px rgba(250,204,21,.5); color: #0f172a; }
    .visual-editor .acc-card-admision .acc-ico { background: rgba(0,0,0,.12); }
    .visual-editor .acc-card-btn { margin: 6px 0; }
</style>
@endpush

@push('scripts')
<script>
    var activeEditor = null;
    var savedRange = null;

    function saveSelection() {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            savedRange = sel.getRangeAt(0).cloneRange();
        }
        if (sel.anchorNode) {
            var node = sel.anchorNode.nodeType === 1 ? sel.anchorNode : sel.anchorNode.parentElement;
            activeEditor = node && node.closest ? node.closest('.visual-editor') : null;
        }
    }

    function restoreSelection() {
        if (savedRange) {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(savedRange);
        }
        if (activeEditor) activeEditor.focus();
    }

    function exec(cmd, val) {
        document.execCommand(cmd, false, val || null);
    }

    function markActive() {
        document.querySelectorAll('.visual-editor').forEach(function (ed) { ed.classList.remove('active'); });
        if (activeEditor) activeEditor.classList.add('active');
    }

    function applyFontStyle(key, value) {
        if (!activeEditor) return;
        var sel = window.getSelection();
        var range = sel.rangeCount ? sel.getRangeAt(0) : null;
        if (!range) return;
        var span = document.createElement('span');
        span.setAttribute('style', key + ':' + value + ';');
        if (sel.isCollapsed) {
            range.insertNode(span);
            var r = document.createRange();
            r.setStart(span, 0);
            r.collapse(true);
            sel.removeAllRanges();
            sel.addRange(r);
        } else {
            var frag = range.extractContents();
            span.appendChild(frag);
            range.insertNode(span);
        }
    }

    window.execFontFamily = function (value) { if (value) applyFontStyle('font-family', value); };
    window.execFontSize = function (value) { if (value) applyFontStyle('font-size', value + 'px'); };

    function insertImagePrompt() {
        var url = prompt('URL de la imagen:');
        if (url) exec('insertImage', url);
    }

    function insertLinkPrompt() {
        var url = prompt('URL del enlace:');
        if (url) exec('createLink', url);
    }

    var buttonIcons = [
        { value: '', label: 'Sin icono' },
        { value: 'bi-mortarboard-fill', label: 'Birrete (admision)' },
        { value: 'bi-arrow-right-circle-fill', label: 'Flecha derecha' },
        { value: 'bi-whatsapp', label: 'WhatsApp' },
        { value: 'bi-telephone-fill', label: 'Telefono' },
        { value: 'bi-envelope-fill', label: 'Correo' },
        { value: 'bi-info-circle-fill', label: 'Informacion' },
        { value: 'bi-calendar-event-fill', label: 'Calendario' },
        { value: 'bi-people-fill', label: 'Personas' },
        { value: 'bi-book-fill', label: 'Libro' },
        { value: 'bi-image-fill', label: 'Imagen' },
        { value: 'bi-play-circle-fill', label: 'Play (video)' },
        { value: 'bi-map-fill', label: 'Mapa (ubicacion)' },
    ];

    window.insertButton = function (type) {
        if (!activeEditor) {
            Swal.fire('Atencion', 'Haz clic dentro de un bloque antes de insertar un boton.', 'warning');
            return;
        }

        var typeLabel = { primary: 'Primario', accent: 'Acento', outline: 'Contorno', whatsapp: 'WhatsApp' }[type] || '';

        var iconOptions = buttonIcons.map(function (i) {
            return '<option value="' + i.value + '"' + (i.value === 'bi-arrow-right-circle-fill' ? ' selected' : '') + '>' + i.label + '</option>';
        }).join('');

        Swal.fire({
            title: 'Insertar boton ' + typeLabel,
            html:
                '<div style="text-align:left;">' +
                '<label style="font-size:.8rem;font-weight:600;display:block;margin-bottom:4px;">Texto del boton</label>' +
                '<input id="swal-btn-text" class="swal2-input" placeholder="Ej. Ver docentes" value="">' +
                '<label style="font-size:.8rem;font-weight:600;display:block;margin:12px 0 4px;">Enlace (URL)</label>' +
                '<input id="swal-btn-url" class="swal2-input" placeholder="Ej. /docentes o https://..." value="">' +
                '<label style="font-size:.8rem;font-weight:600;display:block;margin:12px 0 4px;">Icono</label>' +
                '<select id="swal-btn-icon" class="swal2-select" style="margin-bottom:4px;">' + iconOptions + '</select>' +
                '</div>',
            focusConfirm: false,
            showCancelButton: true,
            confirmButtonText: 'Insertar',
            cancelButtonText: 'Cancelar',
            preConfirm: function () {
                var text = document.getElementById('swal-btn-text').value.trim();
                if (!text) {
                    Swal.showValidationMessage('Escribe el texto del boton.');
                    return false;
                }
                return {
                    text: text,
                    url: document.getElementById('swal-btn-url').value.trim(),
                    icon: document.getElementById('swal-btn-icon').value
                };
            }
        }).then(function (result) {
            if (result.isConfirmed && result.value) {
                var iconHtml = result.value.icon ? '<i class="bi ' + result.value.icon + '"></i>' : '';
                var href = result.value.url || '#';
                var html = '<a href="' + href + '" class="acc-btn acc-btn-' + type + '">' + iconHtml + '<span>' + result.value.text + '</span></a>';
                activeEditor.focus();
                document.execCommand('insertHTML', false, html + '&nbsp;');
            }
        });
    };

    var uploadUrl = '{{ route('about.upload-image') }}';

    function uploadLocalImage(file) {
        var data = new FormData();
        data.append('image', file);
        return fetch(uploadUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: data
        }).then(function (res) { return res.json(); }).then(function (json) {
            if (!json.success) throw new Error(json.message || 'No se pudo subir la imagen.');
            return json.url;
        });
    }

    function insertImageFile(file) {
        if (!activeEditor) {
            Swal.fire('Atencion', 'Haz clic dentro de un bloque antes de subir una imagen.', 'warning');
            return;
        }
        uploadLocalImage(file).then(function (url) {
            activeEditor.focus();
            document.execCommand('insertHTML', false, '<img src="' + url + '" alt="imagen" style="max-width:100%;border-radius:12px;">');
        }).catch(function (err) {
            Swal.fire('Error', err.message || 'No se pudo subir la imagen.', 'error');
        });
    }

    document.getElementById('accessImageInput').addEventListener('change', function () {
        var file = this.files[0];
        if (file) insertImageFile(file);
        this.value = '';
    });

    function defaultBlockTemplate(label, num, icon, color) {
        return '<div style="text-align:center;">' +
            '<div style="width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:' + color + '1a;color:' + color + ';margin:0 auto 8px;"><i class="bi ' + icon + '"></i></div>' +
            '<div style="font-size:2.5rem;font-weight:800;color:' + color + ';line-height:1;">' + num + '</div>' +
            '<div style="color:#64748b;font-weight:600;font-size:0.9rem;">' + label + '</div>' +
            '</div>';
    }

    function cardButtonTemplate(type, icon, title, sub, href) {
        return '<div style="display:flex;align-items:stretch;">' +
            '<a href="' + href + '" class="acc-card-btn acc-card-' + type + '">' +
            '<span class="acc-ico"><i class="bi ' + icon + '"></i></span>' +
            '<span class="acc-txt"><span class="acc-titulo">' + title + '</span><span class="acc-sub">' + sub + '</span></span>' +
            '</a>' +
            '</div>';
    }

    window.loadTemplate = function () {
        var templates = [
            cardButtonTemplate('mesa', 'bi-inbox-fill', 'Mesa de Partes', 'Tramites y documentos', '#'),
            cardButtonTemplate('doc', 'bi-folder2-open', 'Publicaciones', 'Documentos y recursos', 'documentos'),
            cardButtonTemplate('plataforma', 'bi-mortarboard-fill', 'Plataforma Educativa', 'Aula virtual', '#'),
            cardButtonTemplate('admision', 'bi-calendar2-check-fill', 'Admision 2027', 'Inscripciones abiertas', '#'),
        ];
        for (var i = 0; i < 4; i++) {
            document.getElementById('visualEditor' + (i + 1)).innerHTML = templates[i];
            syncBlockConfig(i + 1);
        }
    };

    window.confirmLoadTemplate = function () {
        Swal.fire({
            title: '¿Cargar diseño por defecto?',
            text: 'Se reemplazara el contenido de los 4 bloques. ¿Deseas continuar?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Si, cargar',
            cancelButtonText: 'Cancelar'
        }).then(function (result) {
            if (result.isConfirmed) loadTemplate();
        });
    };

    window.clearBlockBg = function (n) {
        document.getElementById('visualEditor' + n).style.backgroundColor = '';
        document.getElementById('access' + n + 'Bg').value = '';
        document.querySelector('.block-bg-picker[data-block="' + n + '"]').value = '#ffffff';
    };

    function hexToRgb(hex) {
        hex = hex.replace('#', '');
        if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        var num = parseInt(hex, 16);
        return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
    }

    function shadeColor(hex, percent) {
        var rgb = hexToRgb(hex);
        var t = percent < 0 ? 0 : 255;
        var p = Math.abs(percent) / 100;
        rgb = rgb.map(function (c) { return Math.round((t - c) * p + c); });
        return 'rgb(' + rgb.join(',') + ')';
    }

    function blockButtons(n) {
        var editor = document.getElementById('visualEditor' + n);
        return editor ? editor.querySelectorAll('.acc-card-btn, .acc-btn, .admission-cta-btn') : [];
    }

    window.applyButtonColor = function (n, color) {
        if (!color) return;
        var btns = blockButtons(n);
        btns.forEach(function (btn) {
            btn.style.background = 'linear-gradient(135deg, ' + color + ' 0%, ' + shadeColor(color, -18) + ' 100%)';
            btn.style.boxShadow = '0 12px 28px ' + color + '66';
        });
    };

    window.clearButtonColor = function (n) {
        var btns = blockButtons(n);
        btns.forEach(function (btn) {
            btn.style.background = '';
            btn.style.boxShadow = '';
        });
        document.querySelector('.block-btn-picker[data-block="' + n + '"]').value = '#2563eb';
    };

    window.applyBlockUrl = function (n, url) {
        var btns = blockButtons(n);
        btns.forEach(function (btn) {
            btn.setAttribute('href', url || '#');
        });
    };

    window.applyBlockIcon = function (n, icon) {
        var editor = document.getElementById('visualEditor' + n);
        if (!editor) return;
        var icons = editor.querySelectorAll('.acc-ico i, .cta-icon');
        icons.forEach(function (el) {
            el.className = 'bi ' + icon;
        });
    };

    window.syncBlockConfig = function (n) {
        var editor = document.getElementById('visualEditor' + n);
        if (!editor) return;
        var btn = editor.querySelector('.acc-card-btn, .acc-btn, .admission-cta-btn');
        var urlInput = document.querySelector('.block-url-input[data-block="' + n + '"]');
        var iconSelect = document.querySelector('.block-icon-select[data-block="' + n + '"]');

        if (btn && urlInput) {
            urlInput.value = btn.getAttribute('href') || '';
        }
        if (btn && iconSelect) {
            var iconEl = btn.querySelector('.acc-ico i, .cta-icon');
            if (iconEl) {
                var match = iconEl.className.match(/bi-[a-z0-9-]+/);
                iconSelect.value = match ? match[0] : '';
            }
        }
    };

    window.clearEditor = function () {
        Swal.fire({
            title: '¿Limpiar todo?',
            text: 'Se vaciaran los 4 bloques. ¿Deseas continuar?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Si, limpiar',
            cancelButtonText: 'Cancelar'
        }).then(function (result) {
            if (result.isConfirmed) {
                for (var i = 1; i <= 4; i++) {
                    document.getElementById('visualEditor' + i).innerHTML = '';
                }
            }
        });
    };

    (function init() {
        for (var i = 1; i <= 4; i++) {
            var existing = document.getElementById('access' + i + 'Input').value || '';
            if (existing) {
                document.getElementById('visualEditor' + i).innerHTML = existing;
            }
            var bg = document.getElementById('access' + i + 'Bg').value;
            if (bg) {
                document.getElementById('visualEditor' + i).style.backgroundColor = bg;
            }
            syncBlockConfig(i);
        }

        document.querySelectorAll('.block-bg-picker').forEach(function (picker) {
            picker.addEventListener('input', function () {
                var n = this.getAttribute('data-block');
                document.getElementById('visualEditor' + n).style.backgroundColor = this.value;
                document.getElementById('access' + n + 'Bg').value = this.value;
            });
        });

        document.querySelectorAll('.block-btn-picker').forEach(function (picker) {
            picker.addEventListener('input', function () {
                var n = this.getAttribute('data-block');
                applyButtonColor(n, this.value);
            });
        });

        document.querySelectorAll('.block-url-input').forEach(function (input) {
            input.addEventListener('input', function () {
                var n = this.getAttribute('data-block');
                applyBlockUrl(n, this.value.trim());
            });
        });

        document.querySelectorAll('.block-icon-select').forEach(function (select) {
            select.addEventListener('change', function () {
                var n = this.getAttribute('data-block');
                applyBlockIcon(n, this.value);
            });
        });

        var editors = document.querySelectorAll('.visual-editor');

        editors.forEach(function (ed) {
            ed.addEventListener('focus', function () {
                activeEditor = ed;
                markActive();
            });
            ed.addEventListener('mouseup', function () {
                activeEditor = ed;
                saveSelection();
                markActive();
            });
            ed.addEventListener('keyup', function () {
                activeEditor = ed;
                saveSelection();
                markActive();
            });

            ed.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.stopPropagation();
                ed.classList.add('drag-over');
            });
            ed.addEventListener('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                ed.classList.remove('drag-over');
            });
            ed.addEventListener('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                ed.classList.remove('drag-over');
                activeEditor = ed;
                markActive();
                var files = e.dataTransfer.files;
                if (!files || !files.length) return;
                for (var i = 0; i < files.length; i++) {
                    if (files[i].type && files[i].type.indexOf('image/') === 0) {
                        insertImageFile(files[i]);
                    }
                }
            });
        });

        document.getElementById('accessForm').addEventListener('submit', function () {
            for (var i = 1; i <= 4; i++) {
                document.getElementById('access' + i + 'Input').value = document.getElementById('visualEditor' + i).innerHTML;
            }
        });
    })();
</script>
@endpush