@component('fragments.modal')
    @slot('idmodal')
        modalNewIndice
    @endslot

    @slot('title')
        Agregar Índice
    @endslot

    @slot('action')
        <form id="nuevo_indice" class="ui form" method="POST" action="{{url('normas/'.$norma_indices->id_norma.'/new_indice')}}" role="form" enctype="multipart/form-data">
    @endslot

    @slot('form')
        {{ csrf_field() }}

        <div class="required field">
            <label for="orden">Orden</label>
            <input
                type="number"
                class="form-control"
                id="orden"
                name="orden"
                min="1"
                step="1"
                value="{{ isset($siguiente_orden_indice) ? $siguiente_orden_indice : 1 }}"
                placeholder="Orden en el que se mostrará el índice">
            <small class="form-text text-muted">
                Por defecto se asigna el siguiente orden disponible de esta norma.
            </small>
        </div>

        <div class=" field">
            <label for="numero_index">Letra o número del índice</label>
            <input type="text" class="form-control" id="numero_index" name="numero_index" placeholder="Letra o número del índice">
        </div>
    
        <div class="required field">
            <label for="nombre">Nombre del índice</label>
            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre del índice">
        </div>

        <div class="field">
            <label for="tipo" class="col-form-label">Contenido</label>
            <div class="form-group">
                <select id="tipo" name="tipo" class="form-control" required>
                    <option value="" selected disabled>--Seleccione--</option>
                    <option value="3">Pruebas a efectuar</option>
                    <option value="4">Resultados obtenidos</option>
                    <option value="5">Equipo empleado</option>
                    <option value="6">Observaciones y comentarios</option>
                    <option value="7">Anexos</option>
                    <option value="2">Tabla</option>
                    <option value="8">Imagenes</option>
                </select>
            </div>
        </div>

        <div id="mostrar_en_contenido_informe_contenedor" style="margin-top:15px;">
            <label class="col-form-label">
                <b class="text-info">Mostrar en contenido del informe</b>
            </label>
            <br>

            <label class="radio-inline">
                <input type="radio" name="mostrar_en_contenido_informe" value="1" checked> Si
            </label>

            &nbsp;&nbsp;

            <label class="radio-inline">
                <input type="radio" name="mostrar_en_contenido_informe" value="0"> No
            </label>
        </div>
        
        <div id="mostrar_indice_contenedor" style="display:none;">
            <label class="col-form-label"><b id="texto_mostrar_indice" class="text-info">¿Mostrar instrucciones del índice?</b></label>
            <br>

            <label class="radio-inline">
                <input type="radio" name="mostrar_indice" value="0" checked> No
            </label>

            &nbsp;&nbsp;

            <label class="radio-inline">
                <input type="radio" name="mostrar_indice" value="1"> Sí
            </label>
        </div>

        {{--
        Funcionalidad deshabilitada de forma reversible.
        Esta opcion permitia colocar una tabla antes del indice "CONTENIDO DEL INFORME".

        <div id="tabla_antes_contenido_informe_contenedor" style="display:none; margin-top:15px;">
            <label class="col-form-label">
                <b class="text-info">Insertar tabla antes del contenido del informe</b>
            </label>
            <br>

            <label class="radio-inline">
                <input type="radio" name="tabla_antes_contenido_informe" value="0" checked> No
            </label>

            &nbsp;&nbsp;

            <label class="radio-inline">
                <input type="radio" name="tabla_antes_contenido_informe" value="1"> Si
            </label>
        </div>
        --}}

        <div id="bloque_instrucciones_indice" style="display:none; margin-top:15px;">
            <label for="instrucciones_indice"><b id="texto_instrucciones_indice">Instrucciones del índice</b></label>
            <textarea 
                id="instrucciones_indice" 
                name="instrucciones_indice" 
                class="form-control editor_word"
                rows="10"></textarea>
        </div>

        <div id="modo_cancelacion_resultados_contenedor" style="display:none; margin-top:15px;">
            <label class="col-form-label">
                <b class="text-info">Formato para celdas vacías de Resultado y Evaluación</b>
            </label>
            <br>
            <small class="form-text text-muted">
                Define cómo se mostrarán en el informe las variables que no tengan resultado capturado ni evaluación guardada.
            </small>
            <br>

            <label class="radio-inline">
                <input
                    type="radio"
                    name="modo_cancelacion_resultados"
                    id="modo_cancelacion_resultados_lineas"
                    value="0"
                    checked>
                Usar líneas en Resultado y N/A en Evaluación
            </label>
            <br>
            <small class="form-text text-muted">
                Mantiene el comportamiento actual: Resultado muestra líneas y Evaluación muestra N/A.
            </small>
            <br>

            <label class="radio-inline">
                <input
                    type="radio"
                    name="modo_cancelacion_resultados"
                    id="modo_cancelacion_resultados_diagonales"
                    value="1">
                Usar diagonales en Resultado y Evaluación
            </label>
            <br>
            <small class="form-text text-muted">
                Cancela ambas celdas con una diagonal cuando no exista resultado ni evaluación guardada.
            </small>
        </div>

        <div id="titulos_tabla_resultados_contenedor" style="display:none; margin-top:15px;">
            <label class="col-form-label">
                <b class="text-info">Títulos de la tabla</b>
            </label>
            <br>
            <small class="form-text text-muted">
                Define los encabezados que se mostrarán en la tabla de Resultados obtenidos, en Línea de Pruebas y en el informe de resultados.
            </small>
            <br>

            <label class="radio-inline">
                <input
                    type="radio"
                    name="personalizar_titulos_resultados"
                    id="personalizar_titulos_resultados_default"
                    value="0"
                    checked>
                Usar títulos predeterminados
            </label>
            <br>

            <label class="radio-inline">
                <input
                    type="radio"
                    name="personalizar_titulos_resultados"
                    id="personalizar_titulos_resultados_custom"
                    value="1">
                Personalizar títulos de la tabla de Resultados obtenidos
            </label>

            <div id="titulos_tabla_resultados_campos" style="display:none; margin-top:15px;">
                <div class="row">
                    <div class="col-md-6">
                        <div class="field">
                            <label for="titulo_resultados_clausula">Título de la columna Cláusula</label>
                            <input type="text" class="form-control titulo-tabla-resultados" id="titulo_resultados_clausula" name="titulo_resultados_clausula" maxlength="190" value="CLÁUSULA">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="field">
                            <label for="titulo_resultados_requisitos">Título de la columna Requisitos o ensayo</label>
                            <input type="text" class="form-control titulo-tabla-resultados" id="titulo_resultados_requisitos" name="titulo_resultados_requisitos" maxlength="190" value="REQUISITOS O ENSAYO">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="field">
                            <label for="titulo_resultados_resultado">Título de la columna Resultado</label>
                            <input type="text" class="form-control titulo-tabla-resultados" id="titulo_resultados_resultado" name="titulo_resultados_resultado" maxlength="190" value="RESULTADO">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="field">
                            <label for="titulo_resultados_evaluacion">Título de la columna Evaluación</label>
                            <input type="text" class="form-control titulo-tabla-resultados" id="titulo_resultados_evaluacion" name="titulo_resultados_evaluacion" maxlength="190" value="EVALUACIÓN">
                        </div>
                    </div>
                </div>
                <small class="form-text text-muted">
                    Si dejas algún campo vacío, se usará el título predeterminado de esa columna.
                </small>
            </div>
        </div>

        <div id="change_tipo_index"></div>

        <style>
            .note-editor.note-frame {
                border: 1px solid #dcdcdc;
            }

            .note-editor .note-toolbar {
                background: #f5f5f5;
                border-bottom: 1px solid #dcdcdc;
            }

            .note-editor .note-editing-area .note-editable {
                min-height: 260px;
                max-height: 400px;
                font-family: Arial, sans-serif;
                font-size: 11pt;
                line-height: 1.5;
                background: #fff;
                padding: 18px;
                color: #000;
            }

            .note-editor .note-editing-area .note-editable p {
                margin-bottom: 8px;
            }
        </style>

        <script>
            $(document).ready(function () {

                function inicializarEditorIndice() {
                    if (!$('#instrucciones_indice').next('.note-editor').length) {
                        $('#instrucciones_indice').summernote({
                            height: 260,
                            dialogsInBody: true,
                            disableResizeEditor: false,
                            fontNames: ['Arial', 'Calibri', 'Times New Roman', 'Verdana'],
                            fontNamesIgnoreCheck: ['Arial', 'Calibri', 'Times New Roman', 'Verdana'],
                            toolbar: [
                                ['style', ['bold', 'italic', 'underline', 'clear']],
                                ['font', ['fontname', 'fontsize', 'color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['table', ['table']],
                                ['insert', ['link']],
                                ['view', ['codeview']]
                            ],
                            callbacks: {
                                onInit: function () {
                                    $('.note-editable').css({
                                        'font-family': 'Arial, sans-serif',
                                        'font-size': '11pt',
                                        'line-height': '1.5'
                                    });
                                }
                            }
                        });
                    }
                }

                function limpiarEditorIndice() {
                    if ($('#instrucciones_indice').next('.note-editor').length) {
                        $('#instrucciones_indice').summernote('code', '');
                    } else {
                        $('#instrucciones_indice').val('');
                    }
                }

                function resetModoCancelacionResultados() {
                    $('#nuevo_indice input[name="modo_cancelacion_resultados"][value="0"]').prop('checked', true);
                }

                /*
                Funcionalidad deshabilitada de forma reversible.
                function resetTablaAntesContenidoInforme() {
                    $('#nuevo_indice input[name="tabla_antes_contenido_informe"][value="0"]').prop('checked', true);
                }
                */

                function valorDefaultMostrarEnContenidoInforme(tipo) {
                    return (tipo == '2' || tipo == '8') ? '0' : '1';
                }

                function aplicarDefaultMostrarEnContenidoInforme() {
                    let tipo = $('#tipo').val();
                    let valorDefault = valorDefaultMostrarEnContenidoInforme(tipo);

                    $('#nuevo_indice input[name="mostrar_en_contenido_informe"][value="' + valorDefault + '"]').prop('checked', true);
                }

                /*
                Funcionalidad deshabilitada de forma reversible.
                function toggleTablaAntesContenidoInforme() {
                    // Esta bandera solo aplica para tipo Tabla; al cambiar a otro tipo se limpia para no persistir estados invalidos.
                    if ($('#tipo').val() == '2') {
                        $('#tabla_antes_contenido_informe_contenedor').show();
                    } else {
                        $('#tabla_antes_contenido_informe_contenedor').hide();
                        resetTablaAntesContenidoInforme();
                    }
                }
                */

                var titulosTablaResultadosDefault = {
                    titulo_resultados_clausula: 'CLÁUSULA',
                    titulo_resultados_requisitos: 'REQUISITOS O ENSAYO',
                    titulo_resultados_resultado: 'RESULTADO',
                    titulo_resultados_evaluacion: 'EVALUACIÓN'
                };

                function asignarTitulosTablaResultadosDefault() {
                    $.each(titulosTablaResultadosDefault, function (id, valor) {
                        $('#nuevo_indice #' + id).val(valor);
                    });
                }

                function resetTitulosTablaResultados() {
                    $('#nuevo_indice input[name="personalizar_titulos_resultados"][value="0"]').prop('checked', true);
                    asignarTitulosTablaResultadosDefault();
                    $('#titulos_tabla_resultados_campos').hide();
                    $('#nuevo_indice .titulo-tabla-resultados').prop('disabled', true);
                }

                function toggleTitulosTablaResultados() {
                    let tipo = $('#tipo').val();
                    let personalizarTitulos = $('#nuevo_indice input[name="personalizar_titulos_resultados"]:checked').val();

                    if (tipo != '4') {
                        $('#titulos_tabla_resultados_contenedor').hide();
                        resetTitulosTablaResultados();
                        return;
                    }

                    $('#titulos_tabla_resultados_contenedor').show();

                    if (personalizarTitulos == '1') {
                        $('#titulos_tabla_resultados_campos').show();
                        $('#nuevo_indice .titulo-tabla-resultados').prop('disabled', false);

                        $.each(titulosTablaResultadosDefault, function (id, valor) {
                            if ($.trim($('#nuevo_indice #' + id).val()) === '') {
                                $('#nuevo_indice #' + id).val(valor);
                            }
                        });
                    } else {
                        asignarTitulosTablaResultadosDefault();
                        $('#titulos_tabla_resultados_campos').hide();
                        $('#nuevo_indice .titulo-tabla-resultados').prop('disabled', true);
                    }
                }

                function actualizarEtiquetasIndice(tipo) {
                    /*
                     * Desactivado: el tipo 6 ya no debe configurar ni mostrar
                     * la leyenda dentro de Observaciones.
                     *
                    if (tipo == '6') {
                        $('#texto_mostrar_indice').text('¿Mostrar leyenda en observaciones?');
                        $('#texto_instrucciones_indice').text('Leyenda de observaciones');
                    } else
                     */
                    if (tipo == '2' || tipo == '6') {
                        $('#texto_mostrar_indice').text('Cancelar celdas');
                        $('#texto_instrucciones_indice').text('');
                    } else if (tipo == '5') {
                        $('#texto_mostrar_indice').text('Mostrar fecha de vigencia de calibración');
                        $('#texto_instrucciones_indice').text('');
                    } else {
                        $('#texto_mostrar_indice').text('¿Mostrar instrucciones del índice?');
                        $('#texto_instrucciones_indice').text('Instrucciones del índice');
                    }
                }

                function toggleInstruccionesIndice() {
                    let tipo = $('#tipo').val();
                    let mostrarIndice = $('input[name="mostrar_indice"]:checked').val();

                    if (tipo == '2' || tipo == '6') {
                        actualizarEtiquetasIndice(tipo);
                        $('#mostrar_indice_contenedor').show();
                        $('#bloque_instrucciones_indice').hide();
                        $('#modo_cancelacion_resultados_contenedor').hide();
                        limpiarEditorIndice();
                        resetModoCancelacionResultados();
                    /*
                     * Desactivado: el tipo 6 ya no usa mostrar_indice ni editor
                     * de leyenda de observaciones.
                     *
                    } else if (tipo == '4' || tipo == '6') {
                     */
                    } else if (tipo == '4') {
                        actualizarEtiquetasIndice(tipo);
                        $('#mostrar_indice_contenedor').show();

                        if (tipo == '4') {
                            $('#modo_cancelacion_resultados_contenedor').show();
                        } else {
                            $('#modo_cancelacion_resultados_contenedor').hide();
                            resetModoCancelacionResultados();
                        }

                        if (mostrarIndice == '1') {
                            $('#bloque_instrucciones_indice').show();
                            inicializarEditorIndice();
                        } else {
                            $('#bloque_instrucciones_indice').hide();
                            limpiarEditorIndice();
                        }
                    } else if (tipo == '5') {
                        actualizarEtiquetasIndice(tipo);
                        $('#mostrar_indice_contenedor').show();
                        $('#bloque_instrucciones_indice').hide();
                        $('#modo_cancelacion_resultados_contenedor').hide();
                        limpiarEditorIndice();
                        resetModoCancelacionResultados();
                    } else {
                        actualizarEtiquetasIndice(tipo);
                        $('#mostrar_indice_contenedor').hide();
                        $('#bloque_instrucciones_indice').hide();
                        $('#modo_cancelacion_resultados_contenedor').hide();
                        limpiarEditorIndice();
                        resetModoCancelacionResultados();
                    }

                    // toggleTablaAntesContenidoInforme(); // Funcionalidad deshabilitada de forma reversible.
                    toggleTitulosTablaResultados();
                }

                $('#tipo').on('change', function () {
                    aplicarDefaultMostrarEnContenidoInforme();
                    toggleInstruccionesIndice();
                });

                $(document).on('change', 'input[name="mostrar_indice"]', function () {
                    toggleInstruccionesIndice();
                });

                $(document).on('change', '#nuevo_indice input[name="personalizar_titulos_resultados"]', function () {
                    toggleTitulosTablaResultados();
                });

                $('#modalNewIndice').on('shown.bs.modal', function () {
                    toggleInstruccionesIndice();
                });

            });
        </script>

    @endslot

    @slot('button')
        <button type="submit" class="btn btn-primary">
            <i class="save icon"></i>Guardar
        </button>
    @endslot

@endcomponent