@extends('fragments.fullTemplate')
@section('titulo')
    Indices
@endsection
@section('estilos')
    <style>
        .indice-move {
            cursor: move;
            color: #666;
            white-space: nowrap;
        }

        .indice-drag-icon {
            margin-right: 6px;
        }

        #lang-dt tbody .ui-state-highlight {
            height: 55px;
            background: #f8f9fa;
            border: 1px dashed #007bff;
        }
    </style>
@endsection
@section('configOpt')
            "ordering": false,
            "paging": false,
            "searching": false,
            "info": false
@endsection
@section('initComplete')
            if (typeof inicializarSortableIndices === 'function') {
                inicializarSortableIndices();
            }
@endsection
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}">
@php
    /*$id_usuario = session('id_usuario');
    $analista = 0;
    $funciona = App\Tecnicos::select('id_tecnico')->where('id_usuario', $id_usuario)->where('estatus', 1)->where('inactividad', 1)->first();
    if($funciona){
        $analista = 1;
    }*/
@endphp
<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_indices->nombre}}</div>
    <i class="right chevron icon divider"></i>
    <div class="active section">Index General</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 active" id="" href="{{url('normas/'.$norma_indices->id_norma.'/indices')}}"><b> > &nbsp; Index General</b></a>
            <a class="nav-link" id="" href="{{url('normas/'.$norma_indices->id_norma.'/clasificadores')}}">Clasificadores</a>
            <a class="nav-link" id="" href="{{url('normas/'.$norma_indices->id_norma.'/capitulos')}}">Capítulos</a>
            <a class="nav-link" id="" href="{{url('normas/'.$norma_indices->id_norma.'/incisos')}}">Incisos</a>
            <a class="nav-link" id="" href="{{ url('normas/'.$norma_indices->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_indice">
            <i class="add alternate icon"></i> Nuevo índice
        </a>
        @endif
        <div class="ui divider"></div>

        <div class="sx-autorender">
            <div class="sx-scroll-x">
                
                <table id="lang-dt" class="ui celled table unstackable">
                    <thead>
                        <tr>
                            <th class="text-center" style="width:8%;">Orden</th>
                            <th class="text-center" style="width:8%;">No.</th>
                            <th class="" style="width:44%;">Índice</th>
                            <th class="" style="width:30%;">Contenido</th>
                            <th class="text-center" style="width:10%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($norma_indices->index_general)
                        @foreach ($norma_indices->indices_general as $indices)
                            @php
                                $mostrarContenidoInforme = isset($indices->mostrar_en_contenido_informe)
                                    ? (int) $indices->mostrar_en_contenido_informe
                                    : (in_array((int) $indices->tipo, [2, 8], true) ? 0 : 1);
                            @endphp
                            <tr class="indice-row" data-id="{{$indices->id_index}}">
                                <td class="text-center @if ($permisos->gerente == 1) indice-move @endif">
                                    @if ($permisos->gerente == 1)
                                        <i class="arrows alternate icon indice-drag-icon" title="Mover índice"></i>
                                    @endif
                                    <span class="indice-orden">{{ $indices->orden ? $indices->orden : '-' }}</span>
                                </td>
                                <td class="text-center">{{ $indices->numero_index }}</td>
                                <td>{{ $indices->nombre ?? $indices->eng_nombre }}</td>
                                <td>
                                    @if ($indices->tipo == 2)
                                        Tabla &nbsp;
                                        @if ($indices->mostrar_indice == 0)
                                            <i class="large table icon text-muted" title="Cancelar celdas desactivado"></i>
                                        @endif
                                        @if ($indices->mostrar_indice == 1)
                                            <i class="large table icon text-primary" title="Cancelar celdas activado"></i>
                                        @endif
                                        {{--
                                        Funcionalidad deshabilitada de forma reversible.
                                        @if ($indices->tabla_antes_contenido_informe == 1)
                                            <br>
                                            <span class="ui tiny blue label">Antes del contenido</span>
                                        @endif
                                        --}}
                                    @endif
                                    @if ($indices->tipo == 3)
                                        Pruebas a efectuar
                                    @endif
                                    @if ($indices->tipo == 4)
                                        Resultados obtenidos &nbsp;
                                        @if ($indices->mostrar_indice == 0) 
                                            <i class="large eye slash icon text-muted" title="Mostrar instrucciones desactivado"></i>
                                        @endif
                                        @if ($indices->mostrar_indice == 1) 
                                            <i class="large eye icon text-primary" title="Mostrar instrucciones activado"></i>
                                        @endif
                                    @endif
                                    @if ($indices->tipo == 5)
                                        Equipo empleado &nbsp;
                                        @if ($indices->mostrar_indice == 0)
                                            <i class="large eye slash icon text-muted" title="Mostrar fecha de vigencia de calibración desactivado"></i>
                                        @endif
                                        @if ($indices->mostrar_indice == 1)
                                            <i class="large eye icon text-primary" title="Mostrar fecha de vigencia de calibración activado"></i>
                                        @endif
                                    @endif
                                    @if ($indices->tipo == 6)
                                        Observaciones y Comentarios &nbsp;
                                        @if ($indices->mostrar_indice == 0)
                                            <i class="large table icon text-muted" title="Cancelar celdas desactivado"></i>
                                        @endif
                                        @if ($indices->mostrar_indice == 1)
                                            <i class="large table icon text-primary" title="Cancelar celdas activado"></i>
                                        @endif
                                        {{--
                                        Desactivado: ya no se muestra el estado de la leyenda
                                        en observaciones para indices tipo 6.
                                        @if ($indices->mostrar_indice == 0)
                                            <i class="large eye slash icon text-muted" title="Mostrar leyenda en observaciones desactivado"></i>
                                        @endif
                                        @if ($indices->mostrar_indice == 1)
                                            <i class="large eye icon text-primary" title="Mostrar leyenda en observaciones activado"></i>
                                        @endif
                                        --}}
                                    @endif
                                    @if ($indices->tipo == 7)
                                        Anexos
                                    @endif
                                    @if ($indices->tipo == 8)
                                        Imagenes
                                    @endif
                                    <br>
                                    @if ($mostrarContenidoInforme === 1)
                                        <span class="ui tiny green label">En contenido</span>
                                    @else
                                        <span class="ui tiny grey label">Fuera del contenido</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="ui tiny icon buttons text-center">
                                        @if ($permisos->gerente == 1)
                                            <a class="ui button green" title="Modifica" id="edit_indice" data-id="{{$indices->id_index}}">
                                                <i class="pencil alternate icon"></i>
                                            </a>

                                            <a class="ui button red" title="Eliminar" id="delete_indice" data-id="{{$indices->id_index}}">
                                                <i class="trash alternate icon"></i>
                                            </a>

                                            @if ($indices->tipo == 2 || $indices->tipo == 6)
                                            <a class="ui button orange tabla_indice" title="tabla" id="tabla_indice" data-id="{{$indices->id_index}}">
                                                <i class="table icon"></i>
                                            </a>
                                            @endif

                                            @if ($indices->tipo == 8)
                                            <a class="ui button blue" title="Imagenes" id="img" data-id="{{$indices->id_index}}">
                                                <i class="image icon"></i>
                                            </a>
                                            @endif
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        @else
                        <tr>
                            <td colspan="5">No se encontraron registros</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>

    <div id="modal"></div>

    @include('NormasIndex.new_indice')
    @include('NormasIndex.edit_indice')
    @include('NormasIndex.delete_indice')
    @include('NormasIndex.img')
    @include('NormasIndex.delete_img')

    <script>
        var resultData = [];
        var id_norma = 0;
        var id_index = 0;
        var id_indice = 0;
        var guardandoOrdenIndices = false;

        if (document.querySelector('.custom-file-input')) {
            document.querySelector('.custom-file-input').addEventListener('change', function(e){
                var fileName = "";
                var 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_indice').click(function(){
                $('#nuevo_indice')[0].reset();
                $('#nuevo_indice #orden').val('{{ isset($siguiente_orden_indice) ? $siguiente_orden_indice : 1 }}');

                $('#mostrar_indice_contenedor').hide();
                /*
                Funcionalidad deshabilitada de forma reversible.
                $('#tabla_antes_contenido_informe_contenedor').hide();
                $('#nuevo_indice input[name="tabla_antes_contenido_informe"][value="0"]').prop('checked', true);
                */
                $('#nuevo_indice input[name="mostrar_en_contenido_informe"][value="1"]').prop('checked', true);
                $('#bloque_instrucciones_indice').hide();
                $('#modo_cancelacion_resultados_contenedor').hide();
                $('#nuevo_indice input[name="modo_cancelacion_resultados"][value="0"]').prop('checked', true);
                $('#titulos_tabla_resultados_contenedor').hide();
                $('#titulos_tabla_resultados_campos').hide();
                $('#nuevo_indice input[name="personalizar_titulos_resultados"][value="0"]').prop('checked', true);
                $('#nuevo_indice #titulo_resultados_clausula').val('CLÁUSULA').prop('disabled', true);
                $('#nuevo_indice #titulo_resultados_requisitos').val('REQUISITOS O ENSAYO').prop('disabled', true);
                $('#nuevo_indice #titulo_resultados_resultado').val('RESULTADO').prop('disabled', true);
                $('#nuevo_indice #titulo_resultados_evaluacion').val('EVALUACIÓN').prop('disabled', true);

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

                $('#modalNewIndice').modal('show');
            });

            $('a#edit_indice').click(function(){
                showLoader();
                id_indice = $(this).data('id');
                
                $.ajax({
                    url:"{{ url('index/show_indice') }}",
                    method:"POST",
                    dataType:'json',
                    data:{
                        'id_index': id_indice,
                        '_token': $('input[name="_token"]').val()
                    },
                    success:function(response){
                        if (!response.success) {
                            hideLoader();
                            return;
                        }

                        resultData = response.data;

                        add_data_modal(resultData, 'editar_indice');

                        if (parseInt(resultData.mostrar_indice) === 1) {
                            $("#radio_si").prop("checked", true);
                        } else {
                            $("#radio_no").prop("checked", true);
                        }

                        if (parseInt(resultData.modo_cancelacion_resultados) === 1) {
                            $("#modo_cancelacion_resultados_diagonales_edit").prop("checked", true);
                        } else {
                            $("#modo_cancelacion_resultados_lineas_edit").prop("checked", true);
                        }

                        /*
                        Funcionalidad deshabilitada de forma reversible.
                        if (parseInt(resultData.tabla_antes_contenido_informe) === 1) {
                            $("#tabla_antes_contenido_informe_si_edit").prop("checked", true);
                        } else {
                            $("#tabla_antes_contenido_informe_no_edit").prop("checked", true);
                        }
                        */

                        var mostrarContenidoInforme = typeof resultData.mostrar_en_contenido_informe !== 'undefined'
                            ? parseInt(resultData.mostrar_en_contenido_informe)
                            : (($.inArray(parseInt(resultData.tipo), [2, 8]) !== -1) ? 0 : 1);

                        if (mostrarContenidoInforme === 1) {
                            $("#mostrar_en_contenido_informe_si_edit").prop("checked", true);
                        } else {
                            $("#mostrar_en_contenido_informe_no_edit").prop("checked", true);
                        }

                        if (typeof cargarTitulosTablaResultadosEdit === 'function') {
                            cargarTitulosTablaResultadosEdit(resultData);
                        }

                        toggleInstruccionesEdit();

                        $('#modalEditIndice').modal('show');

                        setTimeout(function () {
                            var html = resultData.instrucciones_indice ? resultData.instrucciones_indice : '';

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

                        hideLoader();
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        hideLoader();               
                    }
                });
            });

            $('a#delete_indice').click(function(){
                id_index = $(this).data('id');
                $('#modalDeleteIndice').modal('show');
            });

            $('#tipo').change(function(){
                var id_tipo = $(this).val();
                $("#change_tipo_index").html('');
                if (id_tipo == 1) {
                    $("#change_tipo_index").load("{{ url('tipo_index') }}/" + id_tipo);
                }
            });

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

            $(document).on('click', 'a.tabla_indice', function(){
                id_index = $(this).data('id');
                $('#modal').load('{{url("carga_modal_index_tabla")}}/' + id_index, function(){
                    $('.summernote').summernote({
                        placeholder: 'Tabla',
                        tabsize: 1,
                        height: 350,
                        toolbar: [
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                            ['font', ['fontname', 'fontsize', 'strikethrough', 'superscript', 'subscript']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['table', ['table']],
                            ['view', ['fullscreen']]
                        ]
                    });
                    $('#modalDisenoTabla').modal('show');
                });
            });
        });

        $('#modalEditIndice').on('show.bs.modal', function () {
            $('#modal-form-modify #tipo').change(function(){
                var id_tipo = $(this).val();
                $("#change_tipo_index").html('');
                if (id_tipo == 1) {
                    $("#change_tipo_index").load("{{ url('tipo_index') }}/" + id_tipo);
                }
            });

            $("#modal-form-modify :input").each(function(){
                var input = $(this).attr('id');
                if (input in resultData) {
                    $('#modal-form-modify #' + input).val(resultData[input]);
                }
            });
       });

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

        $('#modalDisenoTabla').on('show.bs.modal', function () {
            $('#modal-form-tabla input#id_index').val(id_index);
        });
        
        $('#modalDeleteImagen').on('show.bs.modal', function () {
            $('#modal-form-delete-img input#id_referencia').val(id_index);
        });

        $('#modalImg').on('show.bs.modal', function () {
            add_data_modal(resultData, 'modal-form-variable-img');
            var html = "";
           
            if (resultData && resultData['img']) {
                for (const imgs of resultData['img']) {
                    html += "<tr>" +
                        "<td>" +
                            "<div class=''>" +
                                "<img class='img-thumbnail' src='{{asset('storage/normas_index_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_img'] ? imgs['id_img'] : "") + '">' +
                                    '<i class="trash icon"></i>' +
                                '</a>' +
                            '</div>' +
                        "</td>" +
                    "</tr>";
                }
            }
                
            $("tbody#table-img").html(html);

            $('a#delete_img').click(function(){
                id_index = $(this).data('id');
                $('#modalDeleteImagen').modal('show');
            });
       });

        var show_imagenes = function(id_index, modal){
            $.ajax({
                url:"{{ url('index/img/show') }}",
                method:"POST",
                dataType:'json',
                data:{
                    'id_index': id_index,
                    '_token': $('input[name="_token"]').val()
                },
                success:function(response){
                    resultData = response.data;
                    $('#' + modal).modal('show');
                }
            });
        }

        var add_data_modal = function(resultData, form_accion){
            $("#" + form_accion + " :input").each(function(){
               var input = $(this).attr('id');
               if (resultData) {
                    if (input in resultData) {
                        $('#' + form_accion + ' #' + input).val(resultData[input]);
                    }
                }
           });
        }

        function inicializarSortableIndices() {
            @if ($permisos->gerente == 1)
                var $tbody = $('#lang-dt tbody');

                if (!$tbody.length || $tbody.data('indices-sortable-ready')) {
                    return;
                }

                $tbody.data('indices-sortable-ready', true);

                $tbody.sortable({
                    items: 'tr.indice-row',
                    handle: '.indice-move',
                    cursor: 'move',
                    opacity: 0.8,
                    placeholder: 'ui-state-highlight',
                    forcePlaceholderSize: true,
                    helper: function (event, tr) {
                        var $originals = tr.children();
                        var $helper = tr.clone();

                        $helper.children().each(function (index) {
                            $(this).width($originals.eq(index).width());
                        });

                        return $helper;
                    },
                    update: function () {
                        sendIndiceOrderToServer($(this));
                    }
                });
            @endif
        }

        function sendIndiceOrderToServer($tbody) {
            if (guardandoOrdenIndices) {
                return;
            }

            var order = [];

            $tbody.children('tr.indice-row').each(function (index) {
                order.push({
                    id: $(this).data('id'),
                    position: index + 1
                });
            });

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

            guardandoOrdenIndices = true;
            $tbody.sortable('disable');

            $.ajax({
                method: 'POST',
                dataType: 'json',
                url: "{{ route('normas-index.update-orden-indices') }}",
                data: {
                    order: order,
                    _token: obtenerTokenIndice()
                },
                success: function (response) {
                    if (response && response.success === true) {
                        actualizarOrdenVisibleIndices(response.order);
                    } else {
                        alert(
                            (response && response.message)
                                ? response.message
                                : 'No fue posible actualizar el orden de los índices.'
                        );
                    }
                },
                error: function (xhr) {
                    console.error(xhr.responseText);
                    alert('Error al guardar el orden de los índices.');
                },
                complete: function () {
                    guardandoOrdenIndices = false;
                    $tbody.sortable('enable');
                }
            });
        }

        function actualizarOrdenVisibleIndices(order) {
            if ($.isArray(order) && order.length > 0) {
                $.each(order, function (index, item) {
                    $('#lang-dt tbody tr.indice-row[data-id="' + item.id + '"]')
                        .find('.indice-orden')
                        .text(item.position);
                });

                return;
            }

            $('#lang-dt tbody tr.indice-row').each(function (index) {
                $(this).find('.indice-orden').text(index + 1);
            });
        }

        function obtenerTokenIndice() {
            return $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val();
        }
    </script>

    <script src="{{ url('assets/js/standars/general_index.js') }}"></script>
@endsection