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

    @slot('title')
        Editar Indice
    @endslot

    @slot('action')
        <form id="editar_indice" class="ui form" method="POST" action="{{url('index/edit_indice')}}" role="form" enctype="multipart/form-data">
    @endslot

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

        <div id="modal-form-modify">
            <input type="text" class="form-control" id="id_index" name="id_index" hidden>

            <div class="required field">
                <label for="orden">Orden</label>
                <input
                    type="number"
                    class="form-control"
                    id="orden"
                    name="orden"
                    min="1"
                    step="1"
                    placeholder="Orden en el que se mostrará el índice">
                <small class="form-text text-muted">
                    Este número controla la posición del índice dentro de la 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_edit" style="margin-top:15px;">
                <label class="col-form-label">
                    <b class="text-info">Mostrar en contenido del informe</b>
                </label>
                <br>
                &nbsp; &nbsp;
                <label class="radio-inline">
                    <input
                        type="radio"
                        name="mostrar_en_contenido_informe"
                        id="mostrar_en_contenido_informe_si_edit"
                        value="1">
                    &nbsp; Si
                </label>
                &nbsp;&nbsp;
                <label class="radio-inline">
                    <input
                        type="radio"
                        name="mostrar_en_contenido_informe"
                        id="mostrar_en_contenido_informe_no_edit"
                        value="0">
                    &nbsp; No
                </label>
            </div>

            <div id="mostrar_indice_edit" style="display:none;">
                <label class="col-form-label"><b id="texto_mostrar_indice_edit" class="text-info">¿Mostrar instrucciones del índice?</b></label>
                <br>
                &nbsp; &nbsp;
                <label class="radio-inline">
                    <input type="radio" name="mostrar_indice" id="radio_no" value="0">&nbsp; No
                </label>
                &nbsp;&nbsp;
                <label class="radio-inline">
                    <input type="radio" name="mostrar_indice" id="radio_si" value="1">&nbsp; 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_edit" 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>
                &nbsp; &nbsp;
                <label class="radio-inline">
                    <input
                        type="radio"
                        name="tabla_antes_contenido_informe"
                        id="tabla_antes_contenido_informe_no_edit"
                        value="0">
                    &nbsp; No
                </label>
                &nbsp;&nbsp;
                <label class="radio-inline">
                    <input
                        type="radio"
                        name="tabla_antes_contenido_informe"
                        id="tabla_antes_contenido_informe_si_edit"
                        value="1">
                    &nbsp; Si
                </label>
            </div>
            --}}

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

            <div id="modo_cancelacion_resultados_edit" 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_edit"
                        value="0">
                    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_edit"
                        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_edit" 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_edit"
                        value="0">
                    Usar títulos predeterminados
                </label>
                <br>

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

                <div id="titulos_tabla_resultados_campos_edit" style="display:none; margin-top:15px;">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="field">
                                <label for="titulo_resultados_clausula_edit">Título de la columna Cláusula</label>
                                <input type="text" class="form-control titulo-tabla-resultados-edit" id="titulo_resultados_clausula_edit" name="titulo_resultados_clausula" maxlength="190">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="field">
                                <label for="titulo_resultados_requisitos_edit">Título de la columna Requisitos o ensayo</label>
                                <input type="text" class="form-control titulo-tabla-resultados-edit" id="titulo_resultados_requisitos_edit" name="titulo_resultados_requisitos" maxlength="190">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="field">
                                <label for="titulo_resultados_resultado_edit">Título de la columna Resultado</label>
                                <input type="text" class="form-control titulo-tabla-resultados-edit" id="titulo_resultados_resultado_edit" name="titulo_resultados_resultado" maxlength="190">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="field">
                                <label for="titulo_resultados_evaluacion_edit">Título de la columna Evaluación</label>
                                <input type="text" class="form-control titulo-tabla-resultados-edit" id="titulo_resultados_evaluacion_edit" name="titulo_resultados_evaluacion" maxlength="190">
                            </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>

            <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>
                function inicializarEditorIndiceEdit() {
                    if (!$('#instrucciones_indice_edit').next('.note-editor').length) {
                        $('#instrucciones_indice_edit').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 () {
                                    $('#instrucciones_indice_edit').summernote('editor.formatBlock', 'p');
                                    $('.note-editable').css({
                                        'font-family': 'Arial, sans-serif',
                                        'font-size': '11pt',
                                        'line-height': '1.5'
                                    });
                                }
                            }
                        });
                    }
                }

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

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

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

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

                function aplicarDefaultMostrarEnContenidoInformeEdit() {
                    var tipo = $('#editar_indice #tipo').val();
                    var valorDefault = valorDefaultMostrarEnContenidoInformeEdit(tipo);

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

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

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

                var camposTitulosTablaResultadosEdit = {
                    titulo_resultados_clausula: 'titulo_resultados_clausula_edit',
                    titulo_resultados_requisitos: 'titulo_resultados_requisitos_edit',
                    titulo_resultados_resultado: 'titulo_resultados_resultado_edit',
                    titulo_resultados_evaluacion: 'titulo_resultados_evaluacion_edit'
                };

                function asignarTitulosTablaResultadosDefaultEdit() {
                    $.each(camposTitulosTablaResultadosEdit, function (campo, id) {
                        $('#editar_indice #' + id).val(titulosTablaResultadosDefaultEdit[campo]);
                    });
                }

                function resetTitulosTablaResultadosEdit() {
                    $('#editar_indice input[name="personalizar_titulos_resultados"][value="0"]').prop('checked', true);
                    asignarTitulosTablaResultadosDefaultEdit();
                    $('#titulos_tabla_resultados_campos_edit').hide();
                    $('#editar_indice .titulo-tabla-resultados-edit').prop('disabled', true);
                }

                function toggleTitulosTablaResultadosEdit() {
                    var tipo = $('#editar_indice #tipo').val();
                    var personalizarTitulos = $('#editar_indice input[name="personalizar_titulos_resultados"]:checked').val();

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

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

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

                        $.each(camposTitulosTablaResultadosEdit, function (campo, id) {
                            if ($.trim($('#editar_indice #' + id).val()) === '') {
                                $('#editar_indice #' + id).val(titulosTablaResultadosDefaultEdit[campo]);
                            }
                        });
                    } else {
                        asignarTitulosTablaResultadosDefaultEdit();
                        $('#titulos_tabla_resultados_campos_edit').hide();
                        $('#editar_indice .titulo-tabla-resultados-edit').prop('disabled', true);
                    }
                }

                function cargarTitulosTablaResultadosEdit(data) {
                    if (parseInt(data.personalizar_titulos_resultados) === 1) {
                        $('#editar_indice input[name="personalizar_titulos_resultados"][value="1"]').prop('checked', true);
                    } else {
                        $('#editar_indice input[name="personalizar_titulos_resultados"][value="0"]').prop('checked', true);
                    }

                    $.each(camposTitulosTablaResultadosEdit, function (campo, id) {
                        var valor = data[campo] ? data[campo] : titulosTablaResultadosDefaultEdit[campo];
                        $('#editar_indice #' + id).val(valor);
                    });

                    // toggleTablaAntesContenidoInformeEdit(); // Funcionalidad deshabilitada de forma reversible.
                    toggleTitulosTablaResultadosEdit();
                }

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

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

                    if (tipo == '2' || tipo == '6') {
                        actualizarEtiquetasIndiceEdit(tipo);
                        $('#mostrar_indice_edit').show();
                        $('#bloque_instrucciones_indice_edit').hide();
                        $('#modo_cancelacion_resultados_edit').hide();
                        limpiarEditorIndiceEdit();
                        resetModoCancelacionResultadosEdit();
                    /*
                     * 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') {
                        actualizarEtiquetasIndiceEdit(tipo);
                        $('#mostrar_indice_edit').show();

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

                        if (mostrarIndice == '1') {
                            $('#bloque_instrucciones_indice_edit').show();
                            inicializarEditorIndiceEdit();
                        } else {
                            $('#bloque_instrucciones_indice_edit').hide();
                            limpiarEditorIndiceEdit();
                        }
                    } else if (tipo == '5') {
                        actualizarEtiquetasIndiceEdit(tipo);
                        $('#mostrar_indice_edit').show();
                        $('#bloque_instrucciones_indice_edit').hide();
                        $('#modo_cancelacion_resultados_edit').hide();
                        limpiarEditorIndiceEdit();
                        resetModoCancelacionResultadosEdit();
                    } else {
                        actualizarEtiquetasIndiceEdit(tipo);
                        $('#mostrar_indice_edit').hide();
                        $('#bloque_instrucciones_indice_edit').hide();
                        $('#modo_cancelacion_resultados_edit').hide();
                        limpiarEditorIndiceEdit();
                        resetModoCancelacionResultadosEdit();
                    }

                    // toggleTablaAntesContenidoInformeEdit(); // Funcionalidad deshabilitada de forma reversible.
                    toggleTitulosTablaResultadosEdit();
                }

                $(document).ready(function () {
                    $(document).on('change', '#editar_indice #tipo', function () {
                        aplicarDefaultMostrarEnContenidoInformeEdit();
                        toggleInstruccionesEdit();
                    });

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

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

                    $('#modalEditIndice').on('shown.bs.modal', function () {
                        toggleInstruccionesEdit();
                    });
                });
            </script>
        </div>
    @endslot

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