@extends('material.layouts.dashboard')


@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<!-- Datatables Styles -->
    <link href="{{ asset('assets/global/plugins/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
<!-- Modal Styles -->
    <link href="{{ asset('assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css') }}" rel="stylesheet" type="text/css" />
<!-- SweetAlert Styles -->
    <link href="{{ asset('assets/global/plugins/bootstrap-sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<!-- Toaster Styles -->
    <link href="{{ asset('assets/global/plugins/bootstrap-toastr/toastr.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/general.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/estilos_datatable.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('page-title', 'Actividades')


@section('page-description', 'ver, crear, modificar y eliminar Actividades')

@section('content')
    <div class="col-md-12">
        @component('themes.bootstrap.components.portlet', ['icon' => 'fa fa-building-o', 'title' => 'Actividades'])
            <div class="row">
                <div class="col-md-3 form-group form-md-line-input ">
                    <label>Vigencia</label>
                    {!!Form::select('vigencia', $vigencias, null,['class'=>'form-control selectpicker','title'=>'Seleccione una vigencia', 'data-live-search'=>'true', 'data-size'=>'5', 'id'=>'vigencia'])!!}
                </div>
                <div class="col-md-3 form-group form-md-line-input ">
                    <label>Tipo</label>
                    {!!Form::select('tipo',$tipos, null,['class'=>'form-control selectpicker','title'=>'Seleccione un tipo', 'data-live-search'=>'true', 'data-size'=>'5', 'id'=>'tipo'])!!}
                </div>
                <div class="col-md-6 form-group form-md-line-input ">
                    <label for="id_plan" class="control-label">Plan de mejoramiento</label>
                    {!!Form::select('id_plan',$planes, null,['class'=>'form-control selectpicker','title'=>'Seleccione el plan de mejoramiento', 'data-live-search'=>'true', 'data-size'=>'5', 'id'=>'id_plan'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group form-md-line-input ">
                    <label for="i_fk_id_areas" class="control-label">Áreas</label>
                    {!!Form::select('i_fk_id_areas[]',[], null,['class'=>'form-control selectpicker','title'=>'Seleccione las áreas', 'data-live-search'=>'true','multiple' => 'multiple', 'multiple data-actions-box'=>'true', 'data-size'=>'5','id'=>'i_fk_id_areas'])!!}
                </div>
                <!--<div class="col-md-12 form-group form-md-line-input">
                    <label for="tx_codigos" class="control-label">Códigos hallazgos (Separados por asteriscos *)</label>
                    <input type="text" name="tx_codigos" class="form-control" id="tx_codigos" placeholder="Códigos de hallazgos, separados por asteriscos *">
                </div>-->
                <div class="col-md-12"><br>
                    <button class="btn green " id="btn_buscar" name="btn_buscar">Buscar</button>
                </div>
                <div class="col-md-12"><hr></div>
            
                <div class="col-md-12">
                    <div id="loader"></div>
                </div>
            </div>
            <div class="row">
                <div class="four col-md-3">
                    <div class="counter-box" style="background-color:#F1C40F"><span class="counter" style="color: white" id="sin_iniciar">0</span>
                        <p style="color: white">SIN INICIAR</p>
                    </div>
                </div>
                <div class="four col-md-3">
                    <div class="counter-box" style="background-color:#337ab7"><span class="counter" style="color: white" id="proceso">0</span>
                        <p style="color: white">EN PROCESO</p>
                    </div>
                </div>
                <div class="four col-md-3">
                    <div class="counter-box" style="background-color:#ed6b75"><span class="counter" style="color: white" id="incumplido">0</span>
                        <p style="color: white">INCUMPLIDO</p>
                    </div>
                </div>
                
                <div class="four col-md-3">
                    <div class="counter-box" style="background-color:#36c6d3"><span class="counter" style="color: white" id="terminado">0</span>
                        <p style="color: white">TERMINADO</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <br>
            </div>
            {{-- Datatable Acciones--}}
            @include('material.sections.hallazgos.acciones.tabla-auditor')
        @endcomponent
    </div>
@endsection


@push('functions')
<!-- Toastr Scripts -->
    <script src="{{ asset('assets/global/plugins/bootstrap-toastr/toastr.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/ui-toastr.js') }}" type="text/javascript"></script>
<!-- Datatables Scripts -->
    <script src="{{ asset('assets/global/scripts/datatable.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/table-datatable.js') }}" type="text/javascript"></script>
<!-- Modal Scripts -->
    <script src="{{ asset('assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js') }}" type="text/javascript"></script>
 <!-- Select picker -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<!-- SweetAlert Scripts -->

    <script src="{{ asset('assets/global/plugins/bootstrap-sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<!-- Validation Scripts -->
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/localization/messages_es.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/form-validation-md.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/general-request.js') }}" type="text/javascript"></script>
<!-- Select2 Script -->
    <script src="{{ asset('assets/global/plugins/select2/js/select2.full.min.js') }}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/i18n/es.js"></script>
@endpush


@push('functions')
<script>
    jQuery(document).ready(function () {

        $('select').selectpicker();
        var _planes = @json($_planes);
        var validateMessage = {};

        $('#acciones-table tfoot th').each(function() {
            var title = $(this).text();
            if (title != "Menu" && title != "N°") {
                $(this).html('<input type="text" style="width: 100%;" placeholder="Buscar"/>');
            }
        });

        let tabla = $('#acciones-table').DataTable({
            lengthMenu: [
                [5, 10, 25, 50, -1],
                [5, 10, 25, 50, "Todo"]
            ],
            processing: true,
            scrollX:true,
            responsive:false,
            language: {
                "bProcessing": '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Procesando...</span>',
                "sLengthMenu": "Mostrar _MENU_ registros",
                "sZeroRecords": "No se encontraron resultados",
                "sEmptyTable": "Ningún dato disponible en esta tabla",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix": "",
                "sSearch": "Buscar:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst": "Primero",
                    "sLast": "Último",
                    "sNext": "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            columnDefs: [
                { targets: 'no-sort', orderable: false }
            ],
            buttons: [
                { extend: 'print', className: 'btn btn-circle btn-icon-only btn-default tooltips t-print', text: '<i class="fa fa-print"></i>' },
                { extend: 'copy', className: 'btn btn-circle btn-icon-only btn-default tooltips t-copy', text: '<i class="fa fa-files-o"></i>' },
                { extend: 'pdf', className: 'btn btn-circle btn-icon-only btn-default tooltips t-pdf', text: '<i class="fa fa-file-pdf-o"></i>' },
                { extend: 'excel', className: 'btn btn-circle btn-icon-only btn-default tooltips t-excel', text: '<i class="fa fa-file-excel-o"></i>' },
                { extend: 'csv', className: 'btn btn-circle btn-icon-only btn-default tooltips t-csv', text: '<i class="fa fa-file-text-o"></i>' },
                { extend: 'colvis', className: 'btn btn-circle btn-icon-only btn-default tooltips t-colvis', text: '<i class="fa fa-bars"></i>' }
            ],
            tabIndex: -1,
            pageLength: 10,
            dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api(),
                    data;

                // Remove the formatting to get integer data for summation
                var intVal = function(i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                };

            }
        });

        function replaceAll(text, busca, reemplaza) {
            while (text.toString().indexOf(busca) != -1)
                text = text.toString().replace(busca, reemplaza);
            return text;
        }

        tabla.columns().every(function() {
            var that = this;
            $('input', this.footer()).on('keyup change', function() {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

        $('.card .material-datatables label').addClass('form-group');

        $('#vigencia, #tipo').on('change', function(e) {
            var vigencia = $('#vigencia').val();
            var tipo = $('#tipo').val();

            var planes_filtrados = _planes.filter((plan) => {
                return plan['i_vigencia'] == (vigencia != '' ? vigencia : plan['i_vigencia']) && plan['vc_tipo'] == (tipo != '' ? tipo : plan['vc_tipo']);
            });

            $('#id_plan').html('');
            planes_filtrados.map((plan) => {
                $('#id_plan').append(`<option value=${plan.i_pk_id}>${plan.vc_nombre_plan}</option>`);
            })
            $('#id_plan').selectpicker('refresh');
            
            toastr.info(`${planes_filtrados.length} planes encontrados`);
        });


        $('#btn_buscar').on('click', function(e) {
            id_plan = $('#id_plan').val();
            id_areas = $('#i_fk_id_areas').val();
            tx_codigos = $('#tx_codigos').val();

            if(id_plan && id_areas){
                tabla.clear().draw();
                cargar_tabla(id_plan,tx_codigos, id_areas);
            }else{
                toastr.warning('Debe filtrar las acciones eligiendo un plan y áreas asociadas');
            }
        });
        
        //cargar_tabla();

        function cargar_tabla (id_plan, tx_codigos, id_areas){
            $('#loader').html('<div class="loader"></div>');
            var datos = {
                'id_plan': id_plan,
                'tx_codigos': tx_codigos,
                'id_areas': id_areas
            };
            $.post(
                "{{ route('table_acciones') }}",
                datos,
                function(data) {
                    $('#incumplido').val('');
                    $('#proceso').val('');
                    $('#terminado').val('');
                    $('#sin_iniciar').val('');


                    var incumplido = 0;
                    var proceso = 0;
                    var terminado = 0;
                    var sin_iniciar = 0;
                    
                    $('#acciones-table').DataTable().clear();
                    if (data) {
                        $.each(data, function(i, registro) {

                            switch(registro.estado){
                                case 'Terminado':
                                    terminado++;
                                    break;
                                case 'En proceso':
                                    proceso++;
                                    break;
                                case 'Sin iniciar':
                                    sin_iniciar++;
                                    break;
                                case 'Incumplido':
                                    incumplido++;
                                    break;
                            }

                            $('#incumplido').text(incumplido);
                            $('#proceso').text(proceso);
                            $('#terminado').text(terminado);
                            $('#sin_iniciar').text(sin_iniciar);


                            var tabla_arm = '<tr>'+
                                '<td><div class="text-center">'+ registro.link + '</div></td>'+
                                '<td><h4>'+ registro.i_pk_id +'</h4></td>'+
                                '<td><div>'+ registro.vc_estado+'</div></td>'+ 
                                '<td><div>'+ registro.vc_estado_ctrl_interno+'</div></td>'+ 
                                '<td class="text-center"><h4>'+ registro.num_seguimientos_pendientes +' de '+registro.num_seguimientos_total+'</h4></td>'+
                                '<td><div>'+ registro.encargados+'</div></td>'+ 
                                '<td><div>'+ registro.encargadosAreas+'</div></td>'+ 
                                '<td><div>'+ registro.vc_tipo_plan+'</div></td>'+ 
                                '<td><div>'+ registro.vc_codigo_hallazgo+'</div></td>'+
                                '<td><div class="campoArea">'+ registro.vc_area+'</div></td>'+ 
                                '<td><div class="campoAreaLargo">'+ registro.tx_descripcion_hallazgo+'</div></td>'+
                                '<td><div class="text-center" style="font-weight:bold;">'+ registro.id_causa+'</div></td>'+
                                '<td><div class="campoAreaLargo">'+ registro.tx_causa+'</div></td>'+ 
                                '<td><div class="campoAreaLargo">'+registro.tx_accion+'</div></td>'+
                                '<td><div>'+registro.vc_codigo+'</div></td>'+
                                '<td><div>'+registro.vc_tipo+'</div></td>'+
                                '<td>'+registro.vc_indicador+'</td>'+
                                '<td> <div>'+registro.vc_formula_indicador + '</div></td>'+
                                '<td> <div>'+ registro.vc_meta + '</div></td>'+
                                '<td> <div>'+ registro.i_avance + '</div></td>'+
                                '<td> <div>'+ registro.dt_fecha_inicio + '</div></td>'+
                                '<td> <div>'+ registro.dt_fecha_fin +'</div></td>'+
                                '<td><div>'+ registro.vc_usuario+'</div></td>'+
                                '</tr>';
                            var tr = $(tabla_arm);
                            tabla.row.add(tr).draw(false);
                        });
                        $('.progress').hide();
                        $('#loader').html('');

                    } else {
                        $('.progress').hide();
                        $('#loader').html('');
                    }
                }
            );
        }

        //ELiminar registro
         $('#acciones-table').delegate('a[data-show="eliminar"]', 'click', function (e) {
            $(this).closest('ul').find('li[data-rel="eliminar"]').show();
            e.stopPropagation();
        });

        $('#acciones-table').delegate('a[data-hide="eliminar"]', 'click', function (e) {
            $(this).closest('ul').find('li[data-rel="eliminar"]').hide();
            e.stopPropagation();
        });

        $('#acciones-table').delegate('.dropdown', 'click', function () {
            $(this).find('.ocultar').hide();
        });

        $('#id_plan').on('change', function(e) {
            if($(this).val() != '')
            {
                var request = $.get("{{ url('planes') }}" + '/dependencias/'+ $(this).val(), {}, function(d) {}, 'json');
                request.done(function(data) {
                    
                    var options = '';
                    $.each(data.dependencia, function(i, area) {
                        options += '<option value="'+area.i_pk_id+'">'+area.vc_parametro_detalle+'</option>';
                    });

                    $('#i_fk_id_areas').html(options);
                    $('#i_fk_id_areas').selectpicker('refresh');
                    $('#i_fk_id_areas').val($('#i_fk_id_areas').data('value')).trigger('change');
                });
            }
        });
    });
</script>
@endpush