@extends('layouts.admin')
@section('title', 'Presentacion')

@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">Presentacion</h5>
                <p class="text-muted small mb-0">Escribe en un solo lienzo e inserta grillas de columnas como tablas invisibles.</p>
            </div>
        </div>

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

            <div class="builder-toolbar">
                <button type="button" title="Negrita" onclick="exec('bold')"><i class="bi bi-type-bold"></i></button>
                <button type="button" title="Cursiva" onclick="exec('italic')"><i class="bi bi-type-italic"></i></button>
                <button type="button" title="Subrayado" onclick="exec('underline')"><i class="bi bi-type-underline"></i></button>
                <select onchange="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>
                <span class="toolbar-sep"></span>
                <select class="toolbar-font" title="Tipo de letra" onchange="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>
                    <option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino</option>
                    <option value="'Garamond', Georgia, serif">Garamond</option>
                </select>
                <select class="toolbar-font" title="Tamano de texto" onchange="execFontSize(this.value); this.selectedIndex=0;">
                    <option value="">Tamano</option>
                    <option value="14">14 px</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="36">36 px</option>
                    <option value="40">40 px</option>
                    <option value="48">48 px</option>
                    <option value="56">56 px</option>
                </select>
                <span class="toolbar-sep"></span>
                <label class="color-label" title="Color de texto"><input type="color" onchange="exec('foreColor', this.value);"></label>
                <button type="button" title="Lista" onclick="exec('insertUnorderedList')"><i class="bi bi-list-ul"></i></button>
                <button type="button" title="Lista numerada" onclick="exec('insertOrderedList')"><i class="bi bi-list-ol"></i></button>
                <button type="button" title="Izquierda" onclick="exec('justifyLeft')"><i class="bi bi-text-left"></i></button>
                <button type="button" title="Centrar" onclick="exec('justifyCenter')"><i class="bi bi-text-center"></i></button>
                <button type="button" title="Derecha" onclick="exec('justifyRight')"><i class="bi bi-text-right"></i></button>
                <span class="toolbar-sep"></span>
                <button type="button" class="toolbar-label" title="Grilla de 1 columna" onclick="insertGrid(1)"><i class="bi bi-square me-1"></i>1 col</button>
                <button type="button" class="toolbar-label" title="Grilla de 2 columnas" onclick="insertGrid(2)"><i class="bi bi-columns me-1"></i>2 cols</button>
                <button type="button" class="toolbar-label" title="Grilla de 3 columnas" onclick="insertGrid(3)"><i class="bi bi-columns-gap me-1"></i>3 cols</button>
                <span class="toolbar-sep"></span>
                <button type="button" title="Imagen" onclick="insertImagePrompt()"><i class="bi bi-image"></i></button>
                <button type="button" title="Subir imagen" onclick="document.getElementById('aboutImageInput').click()"><i class="bi bi-cloud-arrow-up"></i></button>
                <button type="button" title="Enlace" onclick="insertLinkPrompt()"><i class="bi bi-link-45deg"></i></button>
                <button type="button" title="Limpiar formato" 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" id="btnLoadTemplate" 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 todo el editor" onclick="clearEditor()"><i class="bi bi-trash me-1"></i>Limpiar editor</button>
            </div>

            <div id="visualEditor" class="visual-editor" contenteditable="true" data-placeholder="Escribe aqui el contenido de la Presentacion. Usa los botones de grilla para insertar columnas..."></div>
            <input type="file" id="aboutImageInput" accept="image/*" hidden>

            <input type="hidden" name="about_content" id="aboutContentInput" value="{{ old('about_content', $settings->about_content) }}">

            <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-bottom: none; border-radius: 10px 10px 0 0; }
    .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; }
    .builder-toolbar #btnLoadTemplate { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
    .builder-toolbar #btnLoadTemplate:hover { background: #e0e7ff; }
    .visual-editor { min-height: 420px; border: 1px solid #e2e8f0; border-radius: 0 0 10px 10px; 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 .about-row { display: grid; gap: 12px; margin: 10px 0; padding: 4px; border-radius: 8px; }
    .visual-editor .about-row[data-cols="1"] { grid-template-columns: 1fr; }
    .visual-editor .about-row[data-cols="2"] { grid-template-columns: 1fr 1fr; }
    .visual-editor .about-row[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
    .visual-editor .about-col { border: 1px dashed #94a3b8; border-radius: 8px; padding: 10px; background: #f8fafc; min-height: 70px; }
    .visual-editor.drag-over { outline: 3px dashed #4338ca; outline-offset: -3px; background: #eef2ff; }
</style>
@endpush

@push('scripts')
<script>
    function exec(cmd, val) {
        document.execCommand(cmd, false, val || null);
    }

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

    function applyFontStyle(key, value) {
        var editor = document.getElementById('visualEditor');
        editor.focus();
        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');
    };

    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) {
        var editor = document.getElementById('visualEditor');
        editor.focus();
        var loading = '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Cargando..." style="max-width:200px;opacity:.5;">';
        document.execCommand('insertHTML', false, loading);

        uploadLocalImage(file).then(function (url) {
            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('aboutImageInput').addEventListener('change', function () {
        var file = this.files[0];
        if (file) insertImageFile(file);
        this.value = '';
    });

    window.clearEditor = function () {
        Swal.fire({
            title: '¿Limpiar editor?',
            text: 'Se eliminara todo el contenido del editor. ¿Deseas continuar?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Si, limpiar',
            cancelButtonText: 'Cancelar'
        }).then(function (result) {
            if (result.isConfirmed) {
                document.getElementById('visualEditor').innerHTML = '';
                document.getElementById('visualEditor').focus();
            }
        });
    };

    (function initDragDrop() {
        var editor = document.getElementById('visualEditor');

        editor.addEventListener('dragover', function (e) {
            e.preventDefault();
            e.stopPropagation();
            editor.classList.add('drag-over');
        });

        editor.addEventListener('dragleave', function (e) {
            e.preventDefault();
            e.stopPropagation();
            editor.classList.remove('drag-over');
        });

        editor.addEventListener('drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            editor.classList.remove('drag-over');

            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]);
                }
            }
        });
    })();

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

    window.insertGrid = function (cols) {
        var inner = '';
        for (var i = 0; i < cols; i++) {
            inner += '<div class="about-col"><p>Escribe aqui...</p></div>';
        }
        var html = '<div class="about-row" data-cols="' + cols + '">' + inner + '</div><p><br></p>';
        document.getElementById('visualEditor').focus();
        document.execCommand('insertHTML', false, html);
    };

    window.loadTemplate = function () {
        var template =
            '<div style="text-align:center; margin-bottom:6px;"><span style="display:inline-block; padding:6px 18px; background:#eef2ff; color:#4338ca; border-radius:30px; font-size:0.9rem; font-weight:600;">Nuestra Institucion</span></div>' +
            '<h2 style="text-align:center; margin:10px 0 4px; color:#1e293b;">¿Quienes Somos?</h2>' +
            '<p style="text-align:center; color:#64748b; max-width:640px; margin:0 auto 22px;">Somos una institucion educativa comprometida con la formacion integral de nuestros estudiantes, brindando educacion de calidad en un ambiente seguro y acogedor.</p>' +
            '<div class="about-row" data-cols="3">' +
            '<div class="about-col" style="padding:0;"><div style="border-radius:14px; padding:24px 18px; text-align:center; background:#fff; box-shadow:0 6px 24px rgba(2,6,23,.08); height:100%;"><div style="width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef2ff; color:#4338ca; font-size:1.5rem;"><i class="bi bi-bullseye"></i></div><h3 style="font-size:1.1rem; margin-bottom:8px;">Mision</h3><p style="color:#64748b; font-size:.95rem; margin-bottom:0;">Escribe aqui la mision del colegio...</p></div></div>' +
            '<div class="about-col" style="padding:0;"><div style="border-radius:14px; padding:24px 18px; text-align:center; background:#fff; box-shadow:0 6px 24px rgba(2,6,23,.08); height:100%;"><div style="width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#ecfdf5; color:#059669; font-size:1.5rem;"><i class="bi bi-eye"></i></div><h3 style="font-size:1.1rem; margin-bottom:8px;">Vision</h3><p style="color:#64748b; font-size:.95rem; margin-bottom:0;">Escribe aqui la vision del colegio...</p></div></div>' +
            '<div class="about-col" style="padding:0;"><div style="border-radius:14px; padding:24px 18px; text-align:center; background:#fff; box-shadow:0 6px 24px rgba(2,6,23,.08); height:100%;"><div style="width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff7ed; color:#ea580c; font-size:1.5rem;"><i class="bi bi-clock-history"></i></div><h3 style="font-size:1.1rem; margin-bottom:8px;">Historia</h3><p style="color:#64748b; font-size:.95rem; margin-bottom:0;">Escribe aqui la historia del colegio...</p></div></div>' +
            '</div>' +
            '<div class="about-row" data-cols="2">' +
            '<div class="about-col" style="padding:0;"><div style="border-radius:14px; padding:22px 20px; background:linear-gradient(135deg,#4338ca,#6366f1); color:#fff; height:100%;"><h3 style="font-size:1.1rem; margin-bottom:6px;"><i class="bi bi-cash-coin me-2"></i>Matricula</h3><p style="margin-bottom:0; opacity:.9;">Costo anual de matricula: <strong>S/ 150.00</strong></p></div></div>' +
            '<div class="about-col" style="padding:0;"><div style="border-radius:14px; padding:22px 20px; background:linear-gradient(135deg,#059669,#10b981); color:#fff; height:100%;"><h3 style="font-size:1.1rem; margin-bottom:6px;"><i class="bi bi-wallet2 me-2"></i>Pension</h3><p style="margin-bottom:0; opacity:.9;">Pension mensual: <strong>S/ 250.00</strong></p></div></div>' +
            '</div>';
        document.getElementById('visualEditor').innerHTML = template;
    };

    window.confirmLoadTemplate = function () {
        Swal.fire({
            title: '¿Cargar diseño por defecto?',
            text: 'Se reemplazará el contenido actual del editor. ¿Deseas continuar?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, cargar',
            cancelButtonText: 'Cancelar'
        }).then(function (result) {
            if (result.isConfirmed) {
                loadTemplate();
            }
        });
    };

    var existing = document.getElementById('aboutContentInput').value || '';
    if (existing) {
        document.getElementById('visualEditor').innerHTML = existing;
    } else {
        loadTemplate();
    }

    document.getElementById('aboutForm').addEventListener('submit', function () {
        document.getElementById('aboutContentInput').value = document.getElementById('visualEditor').innerHTML;
    });
</script>
@endpush