<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>HISTORIA CLINICA MATERNA PERINATAL 051</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #525659;
            margin: 0;
            padding: 20px;
            user-select: none;
        }

        .formato-container {
            width: 1100px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            position: relative;
            cursor: text;
        }

        .formato-editor {
            position: relative;
            width: 100%;
        }

        .formato-editor img {
            width: 100%;
            display: block;
            pointer-events: none;
        }

        /* CAMPO "AUTO-AJUSTABLE" */
        .dynamic-field {
            position: absolute;
            background: transparent;
            border: none;
            padding: 0;
            font-size: 10px;
            font-family: 'Arial', sans-serif;
            color: #000;
            z-index: 100;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            width: auto;
            max-width: 100%;
        }

        .dynamic-field:hover,
        .dynamic-field:focus-within {
            z-index: 1000;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 2px;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        }

        .dynamic-field.is-check {
            width: auto;
            height: auto;
            font-size: 16px;
            font-weight: bold;
        }

        .field-content {
            border: none;
            background: transparent;
            width: 20px;
            min-width: 10px;
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            outline: none;
            cursor: text;
            padding: 0;
            margin: 0;
            color: #000;
            overflow: hidden;
        }

        .action-btn {
            position: absolute;
            width: 12px;
            height: 12px;
            line-height: 10px;
            text-align: center;
            font-size: 9px;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            z-index: 2000;
            display: none;
            opacity: 0.8;
            font-weight: bold;
        }

        .dynamic-field:hover .action-btn,
        .dynamic-field:focus-within .action-btn {
            display: block;
        }

        .btn-del {
            top: -6px;
            right: -6px;
            background: #ff4444;
            border: 1px solid #fff;
        }

        .btn-type {
            top: -6px;
            left: -6px;
            background: #007bff;
            border: 1px solid #fff;
        }

        #instrucciones {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 11px;
            z-index: 5000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="instrucciones" onclick="this.style.display='none'">
        Clic & Escribir (Modo Preciso)<br>
        Se guarda automáticamente.<br>
        (Clic para cerrar)
    </div>

    <form role="form" method="post" id="formLienzo">
        <input type="hidden" name="idatencion" id="idatencion" value="<?php echo $_POST['idatencion'] ?? ''; ?>">
        <input type="hidden" name="tipo_formato" value="MSP_051">
        <!-- INPUT CRÍTICO: Aquí se guardan los datos JSON -->
        <input type="hidden" name="canvas_data" id="canvas_data">

        <div class="formato-container" id="contenedorCanvas">
            <div class="formato-editor">
                <img src="../../public/img/PDF_FORMATO_051_COMPLETO.png" id="img-formato">
            </div>
        </div>
    </form>

    <script>
        (function () {
            var contenedor = document.getElementById('contenedorCanvas');
            var inputData = document.getElementById('canvas_data');

            // ==========================================
            // LOGICA PRINCIPAL
            // ==========================================

            function crearCampo(x, y, tipo = 'text', valor = '', shouldFocus = true) {
                var div = document.createElement('div');
                div.className = 'dynamic-field';
                div.style.left = x + 'px';
                div.style.top = y + 'px';

                var btnDel = document.createElement('div');
                btnDel.className = 'action-btn btn-del';
                btnDel.innerHTML = '×';
                btnDel.onmousedown = (e) => {
                    e.stopPropagation();
                    div.remove();
                    guardarDatos(); // Guardar al borrar
                };

                var btnType = document.createElement('div');
                btnType.className = 'action-btn btn-type';
                btnType.innerHTML = tipo === 'text' ? 'T' : '✓';
                btnType.onmousedown = (e) => {
                    e.stopPropagation();
                    alternarTipo(div, input, btnType);
                    guardarDatos(); // Guardar al cambiar tipo
                };

                var input = document.createElement('input');
                input.className = 'field-content';
                input.value = valor;
                input.setAttribute('autocomplete', 'off');

                // EVENTOS DE GUARDADO EN TIEMPO REAL
                input.addEventListener('input', function () {
                    ajustarAncho(this);
                    guardarDatos();
                });
                input.addEventListener('change', guardarDatos);

                if (tipo === 'check') configurarComoCheck(div, input, btnType);
                else {
                    input.style.width = '30px';
                    if (valor) ajustarAncho(input);
                }

                div.appendChild(btnDel);
                div.appendChild(btnType);
                div.appendChild(input);
                contenedor.appendChild(div);

                if (shouldFocus) {
                    setTimeout(() => input.focus(), 0);
                }

                hacerArrastrable(div);
                return div;
            }

            function ajustarAncho(el) {
                el.style.width = '0px';
                var scrollW = el.scrollWidth;
                var newW = Math.max(20, scrollW + 2);
                el.style.width = newW + 'px';
            }

            function configurarComoCheck(div, input, btn) {
                div.classList.add('is-check');
                input.value = 'X';
                input.readOnly = true;
                input.style.textAlign = 'center';
                input.style.width = '16px';
                input.style.cursor = 'move';
                btn.innerHTML = '✓';
            }

            function configurarComoTexto(div, input, btn) {
                div.classList.remove('is-check');
                input.value = '';
                input.readOnly = false;
                input.style.textAlign = 'left';
                input.style.width = '30px';
                input.style.cursor = 'text';
                btn.innerHTML = 'T';
                input.focus();
            }

            function alternarTipo(div, input, btn) {
                if (div.classList.contains('is-check')) configurarComoTexto(div, input, btn);
                else configurarComoCheck(div, input, btn);
            }

            function hacerArrastrable(elmnt) {
                var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
                elmnt.onmousedown = dragMouseDown;

                function dragMouseDown(e) {
                    if (e.target.classList.contains('action-btn')) return;
                    if (e.target.tagName === 'INPUT' && !elmnt.classList.contains('is-check')) return;
                    e = e || window.event;
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    document.onmouseup = closeDragElement;
                    document.onmousemove = elementDrag;
                }

                function elementDrag(e) {
                    e = e || window.event;
                    e.preventDefault();
                    pos1 = pos3 - e.clientX;
                    pos2 = pos4 - e.clientY;
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
                }

                function closeDragElement() {
                    document.onmouseup = null;
                    document.onmousemove = null;
                    guardarDatos(); // Guardar al soltar
                }
            }

            contenedor.addEventListener('click', function (e) {
                if (e.target.closest('.dynamic-field')) return;
                var rect = contenedor.getBoundingClientRect();

                // Offset -9px calibrado previamente
                var x = e.clientX - rect.left;
                var y = e.clientY - rect.top;

                // IMPORTANTE: Al crear nuevo, aplicamos el offset aquí para visual, 
                // pero guardamos la posición final del div
                crearCampo(x, y - 9);
            });

            // ==========================================
            // FUNCIÓN CRÍTICA: SERIALIZAR A INPUT HIDDEN
            // ==========================================
            function guardarDatos() {
                var datos = [];
                var campos = document.querySelectorAll('.dynamic-field');
                var widthTotal = 1100;
                var img = document.getElementById('img-formato');
                var heightTotal = img.offsetHeight || 1555; // Fallback estimado A4 px

                campos.forEach(function (div) {
                    var input = div.querySelector('input');
                    var val = input.value;
                    if (!val || val.trim() === '') return;

                    var left = parseFloat(div.style.left);
                    var top = parseFloat(div.style.top);
                    var leftPct = (left / widthTotal) * 100;
                    var topPct = (top / heightTotal) * 100;

                    datos.push({
                        text: val,
                        left: leftPct,
                        top: topPct,
                        type: div.classList.contains('is-check') ? 'check' : 'text'
                    });
                });

                // Actualizar input hidden para que plan_tabs.js lo lea
                inputData.value = JSON.stringify(datos);
                // console.log("Datos Guardados en Hidden:", datos.length);
            }

            // ==========================================
            // FUNCIÓN CRÍTICA: CARGAR DESDE JSON (Iterativo)
            // ==========================================
            function verificarCargaExterna() {
                // Si el input tiene datos y NO hemos dibujado nada aún...
                if (inputData.value && inputData.value !== "" && document.querySelectorAll('.dynamic-field').length === 0) {
                    try {
                        var datos = JSON.parse(inputData.value);
                        if (Array.isArray(datos) && datos.length > 0) {
                            console.log("Detectados datos externos, repoblando...", datos.length);

                            var widthTotal = 1100;
                            var img = document.getElementById('img-formato');
                            var heightTotal = img.offsetHeight || 1555;

                            datos.forEach(function (d) {
                                var x = (d.left / 100) * widthTotal;
                                var y = (d.top / 100) * heightTotal;

                                // Crear sin foco para no molestar
                                var div = crearCampo(x, y, d.type || 'text', d.text, false);

                                if (d.type !== 'check') {
                                    var input = div.querySelector('input');
                                    ajustarAncho(input);
                                }
                            });
                        }
                    } catch (e) {
                        console.error("Error parseando datos externos", e);
                    }
                }
            }

            // Polling para detectar cuando plan_tabs.js inyecta los datos
            // Revisamos cada 500ms durante los primeros 5 segundos
            var intentos = 0;
            var intervalo = setInterval(function () {
                verificarCargaExterna();
                intentos++;
                if (intentos > 20) clearInterval(intervalo); // Parar a los 10 seg
            }, 500);

            // También escuchar evento 'change' por si acaso jQuery lo dispara
            inputData.addEventListener('change', verificarCargaExterna);

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

</html>