@extends('fragments.fullTemplate')
@section('titulo')
    Incisos
@endsection
@section('estilos')
    <style>
        .modal-body {
            max-height: calc(100vh - 210px);
            overflow-y: auto;
        }

        .inciso-card {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 12px;
            background: #fff;
        }

        .inciso-move {
            cursor: move;
            text-align: center;
            color: #666;
            padding-top: 4px;
        }

        .sortable-incisos .ui-state-highlight {
            height: 60px;
            background: #f8f9fa;
            border: 1px dashed #007bff;
            margin-bottom: 12px;
            border-radius: 6px;
        }
    </style>
@endsection
@section('contenido')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="ui big breadcrumb">
        <div class="section">Catálogo</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Normas</div>
        <i class="right chevron icon divider"></i>
        <div class="section">{{$norma_incisos->nombre}}</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Incisos</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-4 col-lg-3">

                <div class="ui menu nav flex-column nav-pills">
                    <a class="nav-link" href="{{url('normas/' . $norma_incisos->id_norma . '/indices')}}">Index General</a>
                    <a class="nav-link" href="{{url('normas/' . $norma_incisos->id_norma . '/clasificadores')}}">Clasificadores</a>
                    <a class="nav-link" href="{{url('normas/' . $norma_incisos->id_norma . '/capitulos')}}">Capítulos</a>
                    <a class="nav-link active" href="{{url('normas/' . $norma_incisos->id_norma . '/incisos')}}"><b> > &nbsp; Incisos</b></a>
                    <a class="nav-link" id="" href="{{ url('normas/'.$norma_incisos->id_norma.'/equipos_asignados') }}">Equipos</a>
                </div>

                <hr>

                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <a class="ui button gray btn-block" href="{{url('normas')}}">
                            <i class="arrow circle left icon"></i>Atrás
                        </a>
                    </div>
                </div>

            </div>

            <div class="col-12 col-sm-12 col-md-8 col-lg-9">

                <div class="content">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        @if(session()->has('success'))
                            <div class="alert alert-success text-center alert-dismissible" role="alert">
                                <strong>{{ session()->get('success') }}</strong>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        @if(session()->has('warning'))
                            <div class="alert alert-warning text-center alert-dismissible" role="alert">
                                <strong>{{ session()->get('warning') }}</strong>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        @if(session()->has('error'))
                            <div class="alert alert-danger text-center alert-dismissible" role="alert">
                                <strong>{{ session()->get('error') }}</strong>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        @if (count($errors) > 0)
                            <div class="alert alert-danger alert-dismissible" role="alert">
                                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>

                @if ($permisos->gerente == 1)
                    <a class="ui button fluid primary" id="new_inciso">
                        <i class="add alternate icon"></i> Nuevo inciso
                    </a>
                @endif

                <div class="ui divider"></div>

                <div class="sx-autorender">
                    <div class="sx-scroll-x">
                        <div id="accordion">
                            @foreach($norma_incisos->capitulos as $capitulo)
                                <div class="card">
                                    
                                    <div class="card-header" id="headingOne">

                                        <div class="row">
                                            <div class="col-12 col-sm-12 col-md-5 col-lg-5">
                                                <h5 class="mb-0" id="list-item-{{$capitulo->id_capitulo}}">
                                                    <button class="btn btn-info btn-block text-left" data-toggle="collapse" data-target="#collapse{{$capitulo->id_capitulo}}" aria-expanded="true" aria-controls="collapse{{$capitulo->id_capitulo}}">
                                                        {{$capitulo['numero']}}. {{ $capitulo['capitulo'] ?? $capitulo['eng_capitulo'] }}
                                                    </button>
                                                </h5>
                                            </div>
                                            <div class="col-12 col-sm-12 col-md-7 col-lg-7">
                                                <h6 class="card-subtitle mt-2 text-muted">
                                                    {{ $capitulo->descripcion ?? $capitulo->eng_descripcion}}
                                                </h6>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    
                                    <div id="collapse{{$capitulo->id_capitulo}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                        <div class="card-body" id="{{'capitulo' . $capitulo->id_capitulo}}"></div>
                                    </div>

                                </div>

                                <!--
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                        <h5 class="mb-0" id="list-item-{{$capitulo->id_capitulo}}">
                                            <button class="btn btn-link" data-toggle="collapse"
                                                data-target="#collapse{{$capitulo->id_capitulo}}" aria-expanded="true"
                                                aria-controls="collapse{{$capitulo->id_capitulo}}">
                                                {{$capitulo['numero']}}.
                                                {{ $capitulo['capitulo'] ?? $capitulo['eng_capitulo'] }}
                                            </button>
                                        </h5>
                                        <h6 class="card-subtitle mb-2 text-muted">
                                            {{ $capitulo->descripcion ?? $capitulo->eng_descripcion}}
                                        </h6>
                                    </div>
                                    <div id="collapse{{$capitulo->id_capitulo}}" class="collapse" aria-labelledby="headingOne"
                                        data-parent="#accordion">
                                        <div class="card-body" id="{{'capitulo' . $capitulo->id_capitulo}}"></div>
                                    </div>
                                </div>
                                -->
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    @include('NormasIncisos.new_inciso')
    @include('NormasIncisos.edit_inciso')
    @include('NormasIncisos.delete_inciso')
    @include('NormasIncisos.new_subinciso')
    @include('NormasIncisos.new_variable')
    @include('NormasIncisos.edit_variable')
    @include('NormasIncisos.delete_variable')
    @include('NormasIncisos.img')
    @include('NormasIncisos.delete_img')

    <div id="spinner" class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="width: 48px">
                <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>

    <div id="modalAdvertenciaImagenVariable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalAdvertenciaImagenVariableTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title" id="modalAdvertenciaImagenVariableTitle">Imagen demasiado grande</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        La imagen que intentas insertar es demasiado grande para este campo.
                        Para evitar que se desajusten las tablas de Normas y Linea de Pruebas,
                        cargala desde el boton <strong>Imagenes</strong> en las acciones de la variable.
                    </p>
                    <ul class="mb-0">
                        <li><strong>Archivo:</strong> <span id="advertenciaImagenNombre">-</span></li>
                        <li><strong>Tamano:</strong> <span id="advertenciaImagenTamano">-</span></li>
                        <li><strong>Dimensiones:</strong> <span id="advertenciaImagenDimensiones">-</span></li>
                        <li><strong>Limites:</strong> máximo 200 KB, horizontal 600 x 400 px o vertical 400 x 600 px</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Entendido</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var specialCharacters = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                click: function () {
                    context.invoke('editor.insertText', specialchars);
                }
            });
            return button.render();
        }

        var limiteImagenInlineNormas = {
            maxBytes: 200 * 1024,
            maxHorizontalWidth: 600,
            maxHorizontalHeight: 400,
            maxVerticalWidth: 400,
            maxVerticalHeight: 600,
            allowedTypes: ['image/jpeg', 'image/png', 'image/webp']
        };

        var formatoBytesImagenNormas = function (bytes) {
            if (!bytes) {
                return '0 KB';
            }

            if (bytes >= 1024 * 1024) {
                return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
            }

            return Math.ceil(bytes / 1024) + ' KB';
        };

        var bytesBase64ImagenNormas = function (src) {
            if (!src || src.indexOf('base64,') === -1) {
                return 0;
            }

            var base64 = src.split('base64,')[1] || '';
            return Math.ceil((base64.length * 3) / 4);
        };

        var mostrarAdvertenciaImagenInlineNormas = function (info) {
            $('#advertenciaImagenNombre').text(info.name || 'Imagen');
            $('#advertenciaImagenTamano').text(info.size ? formatoBytesImagenNormas(info.size) : '-');
            $('#advertenciaImagenDimensiones').text(info.width && info.height ? info.width + ' x ' + info.height + ' px' : '-');
            $('#modalAdvertenciaImagenVariable').modal('show');
        };

        var imagenInlineExcedeLimitesNormas = function (info) {
            var esVertical = info.height > info.width;
            var maxWidth = esVertical ? limiteImagenInlineNormas.maxVerticalWidth : limiteImagenInlineNormas.maxHorizontalWidth;
            var maxHeight = esVertical ? limiteImagenInlineNormas.maxVerticalHeight : limiteImagenInlineNormas.maxHorizontalHeight;

            return info.size > limiteImagenInlineNormas.maxBytes ||
                info.width > maxWidth ||
                info.height > maxHeight;
        };

        var insertarImagenInlineNormas = function ($editor, dataUrl) {
            var img = document.createElement('img');
            img.src = dataUrl;
            img.style.maxWidth = '100%';
            img.style.height = 'auto';
            img.style.display = 'block';
            $editor.summernote('insertNode', img);
        };

        var procesarImagenInlineNormas = function (editor, file) {
            var $editor = $(editor);

            if (!file || limiteImagenInlineNormas.allowedTypes.indexOf(file.type) === -1) {
                mostrarAdvertenciaImagenInlineNormas({
                    name: file ? file.name : 'Imagen',
                    size: file ? file.size : 0
                });
                return;
            }

            var reader = new FileReader();

            reader.onload = function (event) {
                var img = new Image();

                img.onload = function () {
                    var info = {
                        name: file.name,
                        size: file.size,
                        width: img.width,
                        height: img.height
                    };

                    if (imagenInlineExcedeLimitesNormas(info)) {
                        mostrarAdvertenciaImagenInlineNormas(info);
                        return;
                    }

                    insertarImagenInlineNormas($editor, event.target.result);
                };

                img.onerror = function () {
                    mostrarAdvertenciaImagenInlineNormas({
                        name: file.name,
                        size: file.size
                    });
                };

                img.src = event.target.result;
            };

            reader.readAsDataURL(file);
        };

        var obtenerImagenesClipboardNormas = function (clipboardData) {
            var imagenes = [];

            if (!clipboardData || !clipboardData.items) {
                return imagenes;
            }

            for (var i = 0; i < clipboardData.items.length; i++) {
                var item = clipboardData.items[i];
                if (item.kind === 'file' && item.type.indexOf('image/') === 0) {
                    imagenes.push(item.getAsFile());
                }
            }

            return imagenes;
        };

        var validarImagenesInlineGuardadoNormas = function ($editor) {
            if (!$editor.length || !$editor.data('summernote')) {
                return true;
            }

            var html = $editor.summernote('code') || '';
            var $contenido = $('<div>').html(html);
            var permitido = true;

            $contenido.find('img').each(function () {
                var src = $(this).attr('src') || '';
                var bytes = bytesBase64ImagenNormas(src);

                if (bytes > limiteImagenInlineNormas.maxBytes) {
                    mostrarAdvertenciaImagenInlineNormas({
                        name: 'Imagen insertada en el editor',
                        size: bytes
                    });
                    permitido = false;
                    return false;
                }
            });

            return permitido;
        };

        var crearOpcionesSummernoteNormas = function () {
            return {
                dialogsInBody: true,
                placeholder: 'Resultado',
                tabsize: 1,
                height: 50,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['view', ['fullscreen', 'codeview']],
                    ['specialchars', ['specialchars']]
                ],
                icons: {
                    specialchars: '<i class="at icon"></i>',
                },
                callbacks: {
                    onImageUpload: function (files) {
                        for (var i = 0; i < files.length; i++) {
                            procesarImagenInlineNormas(this, files[i]);
                        }
                    },
                    onPaste: function (e) {
                        var originalEvent = e.originalEvent || e;
                        var clipboardData = originalEvent.clipboardData || window.clipboardData;
                        var imagenes = obtenerImagenesClipboardNormas(clipboardData);

                        e.preventDefault();

                        if (imagenes.length > 0) {
                            for (var i = 0; i < imagenes.length; i++) {
                                procesarImagenInlineNormas(this, imagenes[i]);
                            }
                            return;
                        }

                        var bufferText = clipboardData ? clipboardData.getData('Text') : '';
                        document.execCommand('insertText', false, bufferText);
                    },
                    onDrop: function (e) {
                        var originalEvent = e.originalEvent || e;
                        var files = originalEvent.dataTransfer ? originalEvent.dataTransfer.files : [];

                        if (!files || files.length === 0) {
                            return;
                        }

                        e.preventDefault();

                        for (var i = 0; i < files.length; i++) {
                            if (files[i].type.indexOf('image/') === 0) {
                                procesarImagenInlineNormas(this, files[i]);
                            }
                        }
                    }
                },
                buttons: {
                    specialchars: specialCharacters
                }
            };
        };

        $('.summernote').summernote(crearOpcionesSummernoteNormas());

        /**
         * Bandera para evitar múltiples peticiones AJAX al reordenar incisos.
         * Con esto evitamos que el usuario dispare varias peticiones
         * simultáneas mientras una todavía sigue en curso.
         */
        var guardandoOrdenIncisos = false;

        $(document).ready(function () {
            const capitulos = {!! json_encode($capitulos) !!};

            for (let i = 0; i < Object.keys(capitulos).length; i++) {
                let html1 = '';

                if (capitulos[i]['incisos'] != null) {
                    html1 += html_incisos(
                        capitulos[i]['incisos'],
                        capitulos[i]['id_capitulo'],
                        String(capitulos[i]['numero'] || ''),
                        0,
                        1
                    );
                }
                $('div#capitulo' + capitulos[i]['id_capitulo']).append(html1);
            }

            $(".tableData").DataTable({
                "searching": false,
                "paging": false,
                "ordering": false,
                "info": false
            });

            inicializarSortableVariables();
            inicializarSortableIncisos();

            $('.dropdown-toggle').dropdown();
        });

        function inicializarSortableVariables() {
            $(".tbody_inciso").sortable({
                items: "tr",
                cursor: 'move',
                opacity: 0.6,
                update: function () {
                    let class_id_inciso = $(this).data("id");
                    sendOrderToServer(class_id_inciso);
                }
            });
        }

        /**
         * Inicializa el drag & drop de incisos.
         *
         * Esta versión es ligera:
         * - no muestra loader
         * - no recarga la página
         * - guarda silenciosamente en background
         */
        function inicializarSortableIncisos() {
            $(".sortable-incisos").sortable({
                items: "> .inciso-item",
                handle: ".inciso-move",
                cursor: "move",
                opacity: 0.8,
                placeholder: "ui-state-highlight",
                update: function (event, ui) {
                    let $contenedor = $(this);

                    if (!$contenedor.hasClass('ui-sortable')) {
                        return;
                    }

                    sendIncisoOrderToServer($contenedor);
                }
            });
        }

        function sendOrderToServer(class_id_inciso) {
            var order = [];

            $('tr.row_' + class_id_inciso).each(function (index, element) {
                order.push({
                    id: $(this).attr('data-id'),
                    position: index + 1
                });
            });

            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content") },
                method: "POST",
                dataType: "json",
                url: "{{ url('incisos/variable/orden') }}",
                data: {
                    order: order
                },
                success: function (response) {
                    console.log(response);
                }
            }); 
        }

        /**
         * Envía el nuevo orden del grupo de incisos arrastrado.
         *
         * Esta versión:
         * - evita doble petición con guardandoOrdenIncisos
         * - valida que exista un arreglo con elementos
         * - guarda silenciosamente en background
         * - no muestra loader
         * - no recarga la vista
         */
        function sendIncisoOrderToServer($contenedor) {
            if (guardandoOrdenIncisos) {
                return;
            }

            let order = [];

            $contenedor.children('.inciso-item').each(function (index) {
                order.push({
                    id: $(this).data('id'),
                    position: index + 1
                });
            });

            if (order.length === 0) {
                return;
            }

            guardandoOrdenIncisos = true;

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
                },
                method: "POST",
                dataType: "json",
                url: "{{ route('normas-incisos.update-orden-incisos') }}",
                data: {
                    order: order
                },
                success: function (response) {
                    console.log('Respuesta update_orden_incisos:', response);

                    /**
                     * Guardado silencioso.
                     * Solo liberamos el bloqueo para permitir seguir moviendo incisos.
                     */
                    guardandoOrdenIncisos = false;

                    if (!(response && response.success === true)) {
                        alert(
                            (response && response.message)
                                ? response.message
                                : 'No fue posible actualizar el orden de los incisos.'
                        );
                    }
                },
                error: function (xhr) {
                    guardandoOrdenIncisos = false;
                    console.error(xhr.responseText);
                    alert('Error al guardar el orden de los incisos.');
                }
            });
        }

        // NUEVA FUNCION CORREGIDA PARA NUMEROS EN INCISOS
        function html_incisos(incisos, id_capitulo, numeroBase = '', parentId = 0, nivel = 1) {
            let html = '';
            let length = Object.keys(incisos).length;

            if (length != 0) {
                html += `<div class="sortable-incisos" data-capitulo-id="${id_capitulo}" data-parent-id="${parentId}" data-nivel="${nivel}">`;

                for (let k = 0; k < length; k++) {
                    let inc_numero = incisos[k]['numero'] || "";
                    let eng_numero = incisos[k]['eng_numero'] || "";
                    let inc_name = incisos[k]['inciso'] || "";
                    let eng_inciso = incisos[k]['eng_inciso'] || "";
                    let inc_descripcion = incisos[k]['descripcion'] || "";
                    let eng_descripcion = incisos[k]['eng_descripcion'] || "";
                    let id_inciso = incisos[k]['id_inciso'];

                    let numeroVisible = eng_numero || inc_numero || "";
                    let prefijoNumero = numeroBase ? (numeroBase + '.') : '';
                    let numeroCompleto = (prefijoNumero + numeroVisible).trim();

                    html += `
                        <div class="inciso-item inciso-card" data-id="${id_inciso}">
                            <div class="ui grid">
                                @if ($permisos->gerente == 1)
                                    <div class="one wide column inciso-move" title="Mover inciso">
                                        <i class="arrows alternate icon"></i>
                                    </div>
                                    <div class="fourteen wide column">
                                @else
                                    <div class="sixteen wide column">
                                @endif
                                        <strong class="text-justify">
                                            ${numeroCompleto} ${eng_inciso || inc_name}
                                        </strong>
                                        <br>
                                        ${eng_descripcion || inc_descripcion}
                    `;

                    if (incisos[k]['variable'].length > 0) {
                        html += `
                            <div class="sx-autorender" style="margin-top: 20px;">
                                <div class="sx-scroll-x">
                                    <div class="table-responsive">
                                        <table id="inciso_variable_${id_inciso}" class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th class="table-active" style="width: 20%;">Variable</th>
                                                    <th class="table-active" style="width: 20%;">Nota</th>
                                                    <th class="table-active" style="width: 20%;">Tipo</th>
                                                    <th class="table-active" style="width: 20%;">Unidad</th>
                                                    
                                                    <th class="table-active collapsing text-center" style="width: 10%;">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody class="tbody_inciso" data-id="${id_inciso}">
                        `;

                        for (let l = 0; l < incisos[k]['variable'].length; l++) {
                            let id_inciso_x_variable = incisos[k]['variable'][l]['id_inciso_x_variable'] ?? "";
                            let variable_nombre = incisos[k]['variable'][l]['nombre_definido'] ?? "";
                            let variable_nombre_ing = incisos[k]['variable'][l]['eng_nombre_definido'] ?? "";
                            let variable_nota = incisos[k]['variable'][l]['nota'] ?? "";
                            let variable_nombre_tipo = incisos[k]['variable'][l]['nombre_tipo'] ?? "";
                            let variable_unidad = incisos[k]['variable'][l]['unidad'] ?? "";
                            let variable_evaluacion_default = incisos[k]['variable'][l]['evaluacion_default'] ?? "";

                            html += `
                                <tr class="row_${id_inciso}" data-id="${id_inciso_x_variable}">
                                    <td>${variable_nombre_ing || variable_nombre}</td>
                                    <td>${variable_nota}</td>
                                    <td>${variable_nombre_tipo}</td>
                                    <td>${variable_unidad}</td>
                                    
                                    <td class="collapsed text-center">
                                        <div class="ui tiny icon buttons">
                                            <a class="ui button green edit-variable mini"
                                                title="Modifica"
                                                data-id="${id_inciso_x_variable}">
                                                <i class="pencil alternate icon"></i>
                                            </a>
                                            @if ($permisos->gerente == 1)
                                                <a class="ui button red edit_modify_empresa_modal mini"
                                                    title="Eliminar"
                                                    id="delete_variable"
                                                    data-id="${id_inciso_x_variable}">
                                                    <i class="trash icon"></i>
                                                </a>
                                                <a class="ui button orange edit_modify_empresa_modal mini"
                                                    title="Imagenes"
                                                    id="img"
                                                    data-id="${id_inciso_x_variable}">
                                                    <i class="file image icon"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            `;
                        }

                        html += `
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        `;
                    }

                    html += `</div>`;

                    @if ($permisos->gerente == 1)
                        html += `
                            <div class="one wide column">
                                <div class="ui right floated mini">
                                    <div class="btn-group dropleft">
                                        <button class="ui btn btn-secondary dropdown-toggle mini"
                                            id="opciones${id_inciso}" data-toggle="dropdown" aria-haspopup="true">
                                            <i class="cog icon"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dLabel">
                                            <a class="ui dropdown-item mini" id="edit_inciso" data-id="${id_inciso}">Editar</a>
                                            <a class="ui dropdown-item mini" id="delete_inciso" data-id="${id_inciso}">Eliminar</a>
                                            <a class="ui dropdown-item mini" id="new_subInciso" data-id="${id_inciso}">Agregar subíndice</a>
                                            <a class="ui dropdown-item mini" id="new_variable" data-id="${id_inciso}">Agregar variable</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    @endif

                    html += `</div>`;

                    if (Object.keys(incisos[k]['incisos']).length != 0) {
                        let siguienteBase = numeroCompleto;

                        html += `
                            <div style="margin-left: 30px; margin-top: 10px;">
                                ${html_incisos(incisos[k]['incisos'], id_capitulo, siguienteBase, id_inciso, nivel + 1)}
                            </div>
                        `;
                    }

                    html += `</div>`;
                }

                html += `</div>`;
            }

            return html;
        }


        /*
        // VERSION ANTERIOR SIN NUMEROS EN INCISOS
        function html_incisos(incisos, id_capitulo, parentId = 0, nivel = 1) {
            let html = '';
            let length = Object.keys(incisos).length;

            if (length != 0) {
                html += `<div class="sortable-incisos" data-capitulo-id="${id_capitulo}" data-parent-id="${parentId}" data-nivel="${nivel}">`;

                for (let k = 0; k < length; k++) {
                    let inc_numero = incisos[k]['numero'] || "";
                    let eng_numero = incisos[k]['eng_numero'] || "";
                    let inc_name = incisos[k]['inciso'] || "";
                    let eng_inciso = incisos[k]['eng_inciso'] || "";
                    let inc_descripcion = incisos[k]['descripcion'] || "";
                    let eng_descripcion = incisos[k]['eng_descripcion'] || "";
                    let id_inciso = incisos[k]['id_inciso'];

                    html += `
                        <div class="inciso-item inciso-card" data-id="${id_inciso}">
                            <div class="ui grid">
                                @if ($permisos->gerente == 1)
                                    <div class="one wide column inciso-move" title="Mover inciso">
                                        <i class="arrows alternate icon"></i>
                                    </div>
                                    <div class="fourteen wide column">
                                @else
                                    <div class="sixteen wide column">
                                @endif
                                        <strong class="text-justify">
                                            ${eng_numero || inc_numero} ${eng_inciso || inc_name}
                                        </strong>
                                        <br>
                                        ${eng_descripcion || inc_descripcion}
                    `;

                    if (incisos[k]['variable'].length > 0) {
                        html += `
                            <div class="sx-autorender" style="margin-top: 20px;">
                                <div class="sx-scroll-x">
                                    <div class="table-responsive">
                                        <table id="inciso_variable_${id_inciso}" class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th class="table-active" style="width: 20%;">Variable</th>
                                                    <th class="table-active" style="width: 20%;">Nota</th>
                                                    <th class="table-active" style="width: 20%;">Tipo</th>
                                                    <th class="table-active" style="width: 20%;">Unidad</th>
                                                    
                                                    <th class="table-active collapsing text-center" style="width: 10%;">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody class="tbody_inciso" data-id="${id_inciso}">
                        `;

                        for (let l = 0; l < incisos[k]['variable'].length; l++) {
                            let id_inciso_x_variable = incisos[k]['variable'][l]['id_inciso_x_variable'] ?? "";
                            let variable_nombre = incisos[k]['variable'][l]['nombre_definido'] ?? "";
                            let variable_nombre_ing = incisos[k]['variable'][l]['eng_nombre_definido'] ?? "";
                            let variable_nota = incisos[k]['variable'][l]['nota'] ?? "";
                            let variable_nombre_tipo = incisos[k]['variable'][l]['nombre_tipo'] ?? "";
                            let variable_unidad = incisos[k]['variable'][l]['unidad'] ?? "";
                            let variable_evaluacion_default = incisos[k]['variable'][l]['evaluacion_default'] ?? "";

                            html += `
                                <tr class="row_${id_inciso}" data-id="${id_inciso_x_variable}">
                                    <td>${variable_nombre_ing || variable_nombre}</td>
                                    <td>${variable_nota}</td>
                                    <td>${variable_nombre_tipo}</td>
                                    <td>${variable_unidad}</td>
                                    
                                    <td class="collapsed text-center">
                                        <div class="ui tiny icon buttons">
                                            <a class="ui button green edit-variable mini"
                                                title="Modifica"
                                                data-id="${id_inciso_x_variable}">
                                                <i class="pencil alternate icon"></i>
                                            </a>
                                            @if ($permisos->gerente == 1)
                                                <a class="ui button red edit_modify_empresa_modal mini"
                                                    title="Eliminar"
                                                    id="delete_variable"
                                                    data-id="${id_inciso_x_variable}">
                                                    <i class="trash icon"></i>
                                                </a>
                                                <a class="ui button orange edit_modify_empresa_modal mini"
                                                    title="Imagenes"
                                                    id="img"
                                                    data-id="${id_inciso_x_variable}">
                                                    <i class="file image icon"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            `;
                        }

                        html += `
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        `;
                    }

                    html += `</div>`;

                    @if ($permisos->gerente == 1)
                        html += `
                            <div class="one wide column">
                                <div class="ui right floated mini">
                                    <div class="btn-group dropleft">
                                        <button class="ui btn btn-secondary dropdown-toggle mini"
                                            id="opciones${id_inciso}" data-toggle="dropdown" aria-haspopup="true">
                                            <i class="cog icon"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dLabel">
                                            <a class="ui dropdown-item mini" id="edit_inciso" data-id="${id_inciso}">Editar</a>
                                            <a class="ui dropdown-item mini" id="delete_inciso" data-id="${id_inciso}">Eliminar</a>
                                            <a class="ui dropdown-item mini" id="new_subInciso" data-id="${id_inciso}">Agregar subíndice</a>
                                            <a class="ui dropdown-item mini" id="new_variable" data-id="${id_inciso}">Agregar variable</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    @endif

                    html += `</div>`;

                    if (Object.keys(incisos[k]['incisos']).length != 0) {
                        html += `
                            <div style="margin-left: 30px; margin-top: 10px;">
                                ${html_incisos(incisos[k]['incisos'], id_capitulo, id_inciso, nivel + 1)}
                            </div>
                        `;
                    }

                    html += `</div>`;
                }

                html += `</div>`;
            }

            return html;
        }
        */

    </script>

    <script>
        var resultData = [];
        var id_inciso = 0;
        var id_variable = 0;
        var form_accion = '';

        /**
         * Marca en un contenedor la evaluación default indicada.
         * Se utiliza tanto en la edición como en futuras cargas dinámicas.
         */
        
        /**
         * Convierte la respuesta AJAX en objeto JSON de forma segura.
         * Si jQuery ya entregó un objeto, se devuelve tal cual.
         */
        function parseAjaxJson(response) {
            if (typeof response === 'string') {
                try {
                    return JSON.parse(response);
                } catch (e) {
                    console.error('No se pudo convertir la respuesta a JSON:', response);
                    return null;
                }
            }
            return response;
        }

        /**
         * Devuelve el token CSRF desde la meta o desde un input hidden.
         */
        function getCsrfToken() {
            return $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val();
        }

        /**
         * Obtiene el mapa de evaluaciones almacenado en un formulario.
         * Cada llave representa un id_opcion y su valor la evaluación seleccionada.
         */
        function obtenerMapaEvaluaciones($formulario) {
            return $formulario.data('evaluacionesPorOpcion') || {};
        }

        /**
         * Guarda el mapa de evaluaciones en memoria del formulario y además
         * lo sincroniza con el input hidden para enviarlo completo al backend.
         */
        function guardarMapaEvaluaciones($formulario, mapa) {
            $formulario.data('evaluacionesPorOpcion', mapa || {});
            $formulario.find('input[name="evaluaciones_por_opcion"]').val(JSON.stringify(mapa || {}));
        }

        /**
         * Marca en un contenedor la evaluación default indicada.
         * Se reutiliza el mismo grupo visible de radios tanto en alta como en edición.
         */
        function aplicarEvaluacionDefaultEnContenedor(selectorContenedor, evaluacionDefault) {
            let $contenedor = $(selectorContenedor);
            $contenedor.find('input[name="evaluacion_default"]').prop('checked', false);

            if (evaluacionDefault) {
                $contenedor.find('input[name="evaluacion_default"][value="' + evaluacionDefault + '"]').prop('checked', true);
            }
        }

        /**
         * Toma la opción seleccionada del formulario y pinta en el grupo de radios
         * la evaluación guardada para esa opción.
         */
        function aplicarEvaluacionSegunOpcion($formulario) {
            let idOpcion = $formulario.find('#id_opcion').val();
            let mapa = obtenerMapaEvaluaciones($formulario);

            if (!idOpcion) {
                aplicarEvaluacionDefaultEnContenedor($formulario, '');
                return;
            }

            let evaluacion = mapa[String(idOpcion)] || mapa[idOpcion] || '';
            aplicarEvaluacionDefaultEnContenedor($formulario, evaluacion);
        }

        /**
         * Guarda en el mapa interno la evaluación del grupo de radios para la opción
         * seleccionada actualmente en el formulario.
         */
        function registrarEvaluacionActual($formulario) {
            let idOpcion = $formulario.find('#id_opcion').val();
            let evaluacion = $formulario.find('input[name="evaluacion_default"]:checked').val();

            if (!idOpcion || !evaluacion) {
                guardarMapaEvaluaciones($formulario, obtenerMapaEvaluaciones($formulario));
                return;
            }

            let mapa = obtenerMapaEvaluaciones($formulario);
            mapa[String(idOpcion)] = evaluacion;
            guardarMapaEvaluaciones($formulario, mapa);
        }

        /**
         * Carga las opciones del clasificador dentro del select del formulario.
         * Ya no se renderiza una segunda interfaz de evaluaciones por opción;
         * solo se llena el select y se reutiliza el único bloque visible de radios.
         */
        function cargarOpcionesClasificador(config) {
            $.ajax({
                url: "{{ url('opciones/show_opciones') }}",
                method: "POST",
                dataType: "json",
                data: {
                    'id_clasificador': config.idClasificador,
                    '_token': getCsrfToken()
                },
                success: function (response) {
                    let result = parseAjaxJson(response);

                    if (!result || result.success !== true) {
                        console.error('No se pudieron cargar las opciones del clasificador.', response);
                        return;
                    }

                    let opciones = Array.isArray(result.data) ? result.data : [];
                    let htmlOption = '<option value="" selected disabled>--Seleccione--</option>';

                    $.each(opciones, function (key, val) {
                        htmlOption += '<option value="' + val['id_opcion'] + '">' + val['opcion'] + '</option>';
                    });

                    let $select = $(config.selectSelector);
                    let $formulario = $select.closest('#modal-form-variable, #modal-form-modify-variable');

                    $select.html(htmlOption);

                    if ($select.hasClass('selectpicker')) {
                        $select.selectpicker('refresh');
                    }

                    if (config.selectedOptionId) {
                        $select.val(String(config.selectedOptionId));
                        if ($select.hasClass('selectpicker')) {
                            $select.selectpicker('val', String(config.selectedOptionId));
                        }
                    } else {
                        $select.val('');
                        if ($select.hasClass('selectpicker')) {
                            $select.selectpicker('val', '');
                        }
                    }

                    if (config.optionEvaluaciones) {
                        guardarMapaEvaluaciones($formulario, config.optionEvaluaciones);
                    }

                    aplicarEvaluacionSegunOpcion($formulario);
                },
                error: function (xhr) {
                    console.error('Error al cargar opciones del clasificador:', xhr.responseText);
                }
            });
        }

        document.querySelector('.custom-file-input').addEventListener('change', function (e) {
            fileName = "";
            files = document.getElementById("customFileLang").files;
            for (const file of files) {
                fileName += file.name + ", ";
            }
            var nextSibling = e.target.nextElementSibling
            nextSibling.innerText = fileName;
        });

        $(document).ready(function () {
            $('#new_inciso').click(function () {
                $('#modalNewInciso').modal('show');
            });

            $(document).on('click', 'a#edit_inciso', function () {
                id_inciso = $(this).data('id');
                show_inciso(id_inciso, 'modalEditInciso');
            });

            var subinciso = {};

            $(document).on('click', 'a#new_subInciso', function () {
                id_inciso = $(this).data('id');
                show_inciso(id_inciso, 'modalEditSubInciso');
            });

            $(document).on('click', 'a#new_variable', function () {
                id_inciso = $(this).data('id');
                $('div#opciones').html('');
                opcion = 1;
                show_inciso(id_inciso, 'modalNewVariable');
            });

            $(document).on('click', 'a#delete_inciso', function () {
                id_inciso = $(this).data('id');
                show_inciso(id_inciso, 'modalDeleteInciso');
            });

            $('#id_clasificador').change(function () {
                var id_clasificador = $(this).val();
                let $formulario = $('#modal-form-variable');

                // Si el usuario cambia de clasificador en una variable nueva,
                // se reinicia el mapa porque el catálogo de opciones cambia.
                guardarMapaEvaluaciones($formulario, {});

                cargarOpcionesClasificador({
                    idClasificador: id_clasificador,
                    selectSelector: '#modal-form-variable #id_opcion',
                    optionEvaluaciones: {},
                    selectedOptionId: null
                });
            });

            $('#id_norma_clasificador').change(function () {
                var id_clasificador = $(this).val();
                let $formulario = $('#modal-form-modify-variable');

                // En edición se conserva el mapa cargado desde backend hasta que
                // el usuario cambie manualmente de clasificador.
                guardarMapaEvaluaciones($formulario, {});

                cargarOpcionesClasificador({
                    idClasificador: id_clasificador,
                    selectSelector: '#modal-form-modify-variable #id_opcion',
                    optionEvaluaciones: {},
                    selectedOptionId: null
                });
            });

            // Cuando el usuario cambia de opción del clasificador, se reutiliza
            // el mismo bloque visible de radios para mostrar la evaluación
            // correspondiente a esa opción.
            $(document).on('change', '#modal-form-variable #id_opcion, #modal-form-modify-variable #id_opcion', function () {
                let $formulario = $(this).closest('#modal-form-variable, #modal-form-modify-variable');
                aplicarEvaluacionSegunOpcion($formulario);
            });

            // Cuando cambia la evaluación visible, se guarda en memoria para la
            // opción seleccionada y se sincroniza en el input hidden.
            $(document).on('change', '#modal-form-variable input[name="evaluacion_default"], #modal-form-modify-variable input[name="evaluacion_default"]', function () {
                let $formulario = $(this).closest('#modal-form-variable, #modal-form-modify-variable');
                registrarEvaluacionActual($formulario);
            });

            $('#id_tipo_variable').change(function () {
                var id_tipo = $(this).val();
                $("#change_tipo_variable").load("{{ url('tipo_variable') }}/" + id_tipo, function () {
                    $('#summernote').summernote(crearOpcionesSummernoteNormas());

                    opcion = 1;

                    $('a#add_opcion').click(function () {
                        opcion++;
                        html = '';
                        html = '<div class="form-group row">' +
                            '<label for="orden" class="col-sm-3 col-form-label">Opción ' + opcion + '</label>' +
                            '<div class="col-sm-9">' +
                            '<input type="text" class="form-control opcion" id="opcion_' + opcion + '" name="opcion_' + opcion + '" placeholder="Opción ' + opcion + '">' +
                            '</div>' +
                            '</div>';
                        $('div#opciones').append(html);
                    });

                    $('a#add_parametro').click(function () {
                        opcion++;
                        html = '';
                        html = '<div class="form-group row">' +
                            '<label for="orden" class="col-sm-3 col-form-label">Parametro ' + opcion + '</label>' +
                            '<div class="col-sm-9">' +
                            '<input type="text" class="form-control" id="parametro_' + opcion + '" name="parametro_' + opcion + '" placeholder="Parametro ' + opcion + '">' +
                            '</div>' +
                            '</div>';
                        $('div#parametros').append(html);
                    });
                });
            });

            $('#modal-form-modify-variable #id_tipo_variable').change(function () {
                var id_tipo = $(this).val();
                $("#modal-form-modify-variable #change_tipo_variable").load("{{ url('tipo_variable') }}/" + id_tipo, function () {
                    $('#summernote').summernote(crearOpcionesSummernoteNormas());

                    num_opcion = 1;

                    $('a#add_opcion').click(function () {
                        num_opcion++;
                        html = '';
                        html = '<div class="form-group row">' +
                            '<label for="orden" class="col-sm-3 col-form-label">Opción ' + num_opcion + '</label>' +
                            '<div class="col-sm-9">' +
                            '<input type="text" class="form-control opcion" id="opcion_' + num_opcion + '" name="opcion_' + num_opcion + '" placeholder="Opción ' + num_opcion + '">' +
                            '</div>' +
                            '</div>';
                        $('#modal-form-modify-variable div#opciones').append(html);
                    });

                    $('a#add_parametro').click(function () {
                        num_opcion++;
                        html = '';
                        html = '<div class="form-group row">' +
                            '<label for="orden" class="col-sm-3 col-form-label">Parametro ' + num_opcion + '</label>' +
                            '<div class="col-sm-9">' +
                            '<input type="text" class="form-control parametro" id="parametro_' + num_opcion + '" name="parametro_' + num_opcion + '" placeholder="Parametro ' + num_opcion + '">' +
                            '</div>' +
                            '</div>';
                        $('#modal-form-modify-variable div#parametros').append(html);
                    });
                });
            });

            $(document).on('click', 'a.edit-variable', function (e) {
                e.preventDefault();
                const id_variable = $(this).data('id');
                showLoader();
                show_variable(id_variable, 'modalEditVariable');
            });

            $(document).on('click', 'a#delete_variable', function () {
                id_variable = $(this).data('id');
                show_variable(id_variable, 'modalDeleteVariable');
            });

            $(document).on('click', 'a#img', function () {
                id_variable = $(this).data('id');
                show_imagenes(id_variable, 'modalImg');
            });
        });

        $('#modalEditInciso').on('show.bs.modal', function () {
            add_data_modal(resultData, 'modal-form-modify');
        });

        $('#modalEditSubInciso').on('show.bs.modal', function () {
            $('#modal-form-subinciso #id_inciso').val(subinciso['id_inciso']);
            $('#modal-form-subinciso #nivel').val(subinciso['nivel']);
            $('#modal-form-subinciso #id_capitulo').val(subinciso['id_capitulo']);
            $('#modal-form-subinciso #inciso').val(subinciso['inciso']);
        });

        $('#modalDeleteInciso').on('show.bs.modal', function () {
            $('#modal-form-delete input#id_inciso').val(id_inciso);
        });

        $('#modalNewVariable').on('show.bs.modal', function () {
            add_data_modal(resultData, 'modal-form-variable');

            let $formulario = $('#modal-form-variable');

            // Al abrir la modal nueva se inicia un mapa vacío, porque todavía
            // no existen evaluaciones guardadas para las opciones del clasificador.
            guardarMapaEvaluaciones($formulario, {});
            $formulario.find('#id_opcion').val('');
            if ($formulario.find('#id_opcion').hasClass('selectpicker')) {
                $formulario.find('#id_opcion').selectpicker('refresh');
            }
            aplicarEvaluacionDefaultEnContenedor($formulario, $formulario.find('input[name="evaluacion_default"]:checked').val() || 'NA');
        });

        $('#modalDeleteImagen').on('show.bs.modal', function () {
            add_data_modal(resultData, 'modal-form-delete-img');
        });

        $('#modalImg').on('show.bs.modal', function () {
            add_data_modal(resultData, 'modal-form-variable-img');
            html = "";
            for (const imgs of resultData['imgs']) {
                html += "<tr>" +
                    "<td><div><img class='img-thumbnail' src='{{asset('storage/normas_img')}}/" + imgs['nombre'] + "'></div></td>" +
                    "<td>" + imgs['name_file'] + "</td>" +
                    "<td>" +
                    '<div class="ui tiny icon buttons">' +
                    '<a class="ui button red edit_modify_empresa_modal mini" title="Eliminar" id="delete_img" data-id="' + (imgs['id_referencia'] ? imgs['id_referencia'] : "") + '">' +
                    '<i class="trash icon"></i>' +
                    '</a>' +
                    '</div>' +
                    "</td>" +
                    "</tr>";
            }
            $("tbody#table-img").html(html);

            $(document).on('click', 'a#delete_img', function () {
                id_inciso = $(this).data('id');
                show_imagen(id_inciso, 'modalDeleteImagen');
            });
        });

        $('#modalEditVariable').on('show.bs.modal', function () {
            $(this).find('input[name="evaluacion_default"]').prop('checked', false);

            $("#modal-form-modify-variable #change_tipo_variable").load("{{ url('tipo_variable') }}/" + resultData["id_tipo_variable"], function () {
                $("#modal-form-modify-variable :input").each(function () {
                    $('#summernote').summernote(crearOpcionesSummernoteNormas());

                    @if (!$permisos->gerente == 1);
                        $('.bloqueo_analista').summernote('disable');
                    @endif

                    let input = $(this).attr('id');

                    if (input in resultData && input != 'id_norma_clasificador') {
                        if (!(input == "equipo") && !(input == "evaluacion_cumple")) {
                            $('#modal-form-modify-variable #' + input).val(resultData[input]);
                        }

                        if (input == "equipo") {
                            $('#modal-form-modify-variable #' + input).prop("checked", !!resultData[input]);
                        }

                        if (input == "evaluacion_cumple") {
                            $('#modal-form-modify-variable #' + input).prop("checked", !!resultData[input]);
                        }

                        if (input == "nombre_definido") {
                            $('#modal-form-modify-variable #nombre_definido.summernote').summernote("code", resultData[input]);
                        }

                        if (input == "tabla") {
                            $('#modal-form-modify-variable #' + input + '.summernote').summernote("code", resultData[input]);
                        }

                        if (input == "resultado_default_internacional") {
                            $('#modal-form-modify-variable #' + input + '.summernote').summernote("code", resultData[input]);
                        }
                    }

                    if (resultData["evaluacion_default"]) {
                        $('#modal-form-modify-variable input[name="evaluacion_default"][value="' + resultData["evaluacion_default"] + '"]').prop('checked', true);
                    }
                });

                if (resultData.id_norma_clasificador) {
                    let $formulario = $('#modal-form-modify-variable');
                    $('#modal-form-modify-variable #id_norma_clasificador').val(resultData.id_norma_clasificador);

                    guardarMapaEvaluaciones($formulario, resultData.option_evaluaciones || {});

                    cargarOpcionesClasificador({
                        idClasificador: resultData.id_norma_clasificador,
                        selectSelector: '#modal-form-modify-variable #id_opcion',
                        optionEvaluaciones: resultData.option_evaluaciones || {},
                        selectedOptionId: resultData.id_opcion || null
                    });

                    if (resultData["evaluacion_default"] && !resultData.id_opcion) {
                        aplicarEvaluacionDefaultEnContenedor('#modal-form-modify-variable', resultData["evaluacion_default"]);
                    }
                } else {
                    guardarMapaEvaluaciones($('#modal-form-modify-variable'), {});
                    aplicarEvaluacionDefaultEnContenedor('#modal-form-modify-variable', resultData["evaluacion_default"] || '');
                }

                opciones = resultData.opciones;
                num_opcion = 0;
                $('div#opcion_1').html('');

                for (const opcion of opciones) {
                    num_opcion++;
                    html = '<div class="form-group row">' +
                        '<label for="orden" class="col-sm-3 col-form-label">Opción ' + num_opcion + '</label>' +
                        '<div class="col-sm-9">' +
                        '<input type="text" class="form-control id_opcion" id="id_opcion_' + num_opcion + '" name="id_opcion_' + num_opcion + '" value ="' + opcion['id_opcion'] + '" hidden>' +
                        '<input type="text" class="form-control opcion" id="opcion_' + num_opcion + '" name="opcion_' + num_opcion + '" placeholder="Opción ' + num_opcion + '" value ="' + opcion['opcion'] + '">' +
                        '</div>' +
                        '</div>';
                    $('div#opciones').append(html);
                }

                $('a#add_opcion').click(function () {
                    num_opcion++;
                    html = '<div class="form-group row">' +
                        '<label for="orden" class="col-sm-3 col-form-label">Opción ' + num_opcion + '</label>' +
                        '<div class="col-sm-9">' +
                        '<input type="text" class="form-control opcion" id="opcion_' + num_opcion + '" name="opcion_' + num_opcion + '" placeholder="Opción ' + num_opcion + '">' +
                        '</div>' +
                        '</div>';
                    $('#modal-form-modify-variable div#opciones').append(html);
                });

                num_opcion = 0;
                parametros = resultData.parametros;
                $('div#parametro_1').html('');

                for (const parametro of parametros) {
                    num_opcion++;
                    html = '<div class="form-group row">' +
                        '<label for="orden" class="col-sm-3 col-form-label">Parametro ' + num_opcion + '</label>' +
                        '<div class="col-sm-9">' +
                        '<input type="text" class="form-control id_parametro" id="id_parametro_' + num_opcion + '" name="id_parametro_' + num_opcion + '" value ="' + parametro['id_parametro'] + '" hidden>' +
                        '<input type="text" class="form-control parametro" id="parametro_' + num_opcion + '" name="parametro_' + num_opcion + '" placeholder="Parametro ' + num_opcion + '" value ="' + parametro['parametro'] + '">' +
                        '</div>' +
                        '</div>';
                    $('#modal-form-modify-variable div#parametros').append(html);
                }

                $('a#add_parametro').click(function () {
                    num_opcion++;
                    html = '<div class="form-group row">' +
                        '<label for="orden" class="col-sm-3 col-form-label">Parametro ' + num_opcion + '</label>' +
                        '<div class="col-sm-9">' +
                        '<input type="text" class="form-control parametro" id="parametro_' + num_opcion + '" name="parametro_' + num_opcion + '" placeholder="Parametro ' + num_opcion + '">' +
                        '</div>' +
                        '</div>';
                    $('#modal-form-modify-variable div#parametros').append(html);
                });
            });
        });

        $('#modalDeleteVariable').on('show.bs.modal', function () {
            $('#modal-form-delete-variable input#id_inciso_x_variable').val(id_variable);
        });

        var show_inciso = function (id_inciso, modal) {
            showLoader();
            $.ajax({
                url: "{{ url('incisos/show_inciso') }}",
                method: "POST",
                dataType: "json",
                data: { 'id_inciso': id_inciso, '_token': getCsrfToken() },
                success: function (response) {
                    result = parseAjaxJson(response);
                    if (modal == 'modalEditSubInciso') {
                        subinciso = result.data;
                    } else {
                        resultData = result.data;
                    }
                    $('#' + modal).modal('show');
                    hideLoader();
                },
                error: function () {
                    hideLoader();
                }
            });
        }

        var show_variable = function (id_variable, modal) {
            $.ajax({
                url: "{{ url('incisos/show_variable') }}",
                method: "POST",
                dataType: "json",
                data: {
                    'id_variable': id_variable,
                    '_token': getCsrfToken()
                },
                success: function (response) {
                    result = parseAjaxJson(response);
                    resultData = result.data;
                    hideLoader();
                    $('#' + modal).modal('show');
                },
                error: function (xhr) {
                    console.error("Error AJAX:", xhr.responseText);
                    hideLoader();
                    alert("Error al cargar la variable.");
                }
            });
        }

        var show_imagenes = function (id_variable, modal) {
            showLoader();
            $.ajax({
                url: "{{ url('varaibles/img/show') }}",
                method: "POST",
                data: { 'id_variable': id_variable, '_token': getCsrfToken() },
                success: function (response) {
                    result = parseAjaxJson(response);
                    resultData = result.data;
                    $('#' + modal).modal('show');
                    hideLoader();
                },
                error: function (xhr) {
                    console.error("Error AJAX:", xhr.responseText);
                    hideLoader();
                    alert("Error al cargar la variable.");
                }
            });
        }

        var show_imagen = function (id_variable, modal) {
            $.ajax({
                url: "{{ url('varaibles/img/show_img') }}",
                method: "POST",
                data: { 'id_variable': id_variable, '_token': getCsrfToken() },
                success: function (response) {
                    result = parseAjaxJson(response);
                    resultData = result.data;
                    $('#' + modal).modal('show');
                }
            });
        }

        var add_data_modal = function (resultData, form_accion) {
            console.log('resultData', resultData);
            $("#" + form_accion + " :input").each(function () {
                let input = $(this).attr('id');

                if (input in resultData) {
                    if ($(this).attr('type') == 'checkbox') {
                        if (resultData[input] == 1) {
                            $('#' + form_accion + ' #' + input).prop('checked', true);
                        } else {
                            $('#' + form_accion + ' #' + input).prop('checked', false);
                        }
                    } else {
                        $('#' + form_accion + ' #' + input).val(resultData[input]);
                    }
                }
            });
        };


        // Antes de enviar la modal nueva por submit normal, se registra la evaluación
        // visible para la opción actual y se serializa el mapa completo en el hidden.
        $('#nueva_variable').on('submit', function (e) {
            if (!validarImagenesInlineGuardadoNormas($('#modal-form-variable #nombre_definido'))) {
                e.preventDefault();
                return false;
            }

            registrarEvaluacionActual($('#modal-form-variable'));
        });

        $("#save-data").click(function () {
            let $contenedor = $('div#modal-form-modify-variable');

            if (!validarImagenesInlineGuardadoNormas($contenedor.find('#nombre_definido'))) {
                return false;
            }

            // Se envía la evaluación default seleccionada junto con la opción actual del clasificador.
            // En backend se conservará en la variable y además se asociará a la relación opción-variable.
            registrarEvaluacionActual($contenedor);

            let data = {
                'id_inciso_x_variable': $('div#modal-form-modify-variable #id_inciso_x_variable').val(),
                'id_norma_clasificador': $('div#modal-form-modify-variable #id_norma_clasificador').val(),
                'id_opcion': $('div#modal-form-modify-variable #id_opcion').val(),
                'nombre_definido': $('div#modal-form-modify-variable #nombre_definido').summernote('code'),
                'orden': $('div#modal-form-modify-variable #orden').val(),
                'nota': $('div#modal-form-modify-variable #nota').val(),
                'equipo': ($('div#modal-form-modify-variable #equipo:checked').val() ? $('div#modal-form-modify-variable #equipo').val() : 0),
                'evaluacion_cumple': ($('div#modal-form-modify-variable #evaluacion_cumple:checked').val() ? $('div#modal-form-modify-variable #evaluacion_cumple').val() : 0),
                'id_tipo_variable': $('div#modal-form-modify-variable #id_tipo_variable').val(),
                'valor_limite_superior': $('div#modal-form-modify-variable #valor_limite_superior').val(),
                'valor_limite_inferior': $('div#modal-form-modify-variable #valor_limite_inferior').val(),
                'id_magnitud': $('div#modal-form-modify-variable #id_magnitud').val(),
                'precision': $('div#modal-form-modify-variable #precision').val(),
                'resultado_default_internacional': $('div#modal-form-modify-variable #resultado_default_internacional').val(),
                'evaluacion_default': $contenedor.find('input[name="evaluacion_default"]:checked').val(),
                'evaluaciones_por_opcion': $contenedor.find('input[name="evaluaciones_por_opcion"]').val(),
                '_token': $('input[name="_token"]').val(),
            }

            $contenedor.find('.opcion:input').each(function () {
                let id = $(this).attr('id');
                data[id] = $(this).val();
            });

            $('div#modal-form-modify-variable .opcion:input').each(function () {
                let id = $(this).attr('id')
                data[id] = $(this).val();
            });
            $('div#modal-form-modify-variable .id_opcion:input').each(function () {
                let id = $(this).attr('id')
                data[id] = $(this).val();
            });
            $('div#modal-form-modify-variable .parametro:input').each(function () {
                let id = $(this).attr('id')
                data[id] = $(this).val();
            });
            $('div#modal-form-modify-variable .id_parametro:input').each(function () {
                let id = $(this).attr('id')
                data[id] = $(this).val();
            });

            if ($('div#modal-form-modify-variable #tabla').length != 0 && data['id_tipo_variable'] == 9) {
                data['tabla'] = $('div#modal-form-modify-variable #tabla').val();
            } else if ($('div#modal-form-modify-variable #tabla').length != 0) {
                data['tabla'] = $('div#modal-form-modify-variable #tabla').summernote('code');
            }

            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
                url: "{{url('incisos/edit_variable')}}",
                type: "POST",
                data: data,
                success: function (response) {
                    try {
                        let result = parseAjaxJson(response);
                        $('#modalEditVariable').modal('hide');
                        showLoader();
                        location.reload();
                    } catch(e) {
                        console.error("Error al procesar respuesta", e);
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        console.log("Errores de validación:", errors);
                    }
                }
            });
        });
    </script>

    <script src="{{ url('assets/js/standars/inciso.js?v=1.0') }}"></script>
    <script src="{{ url('assets/js/standars/subinciso.js?v=1.0') }}"></script>
    <script src="{{ url('assets/js/standars/variable.js') }}"></script>
@endsection