@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" />

@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', 'nofooter' => true])
        <div class="row">
            <input type="hidden" id="id_causa" name="id_causa" value="{{$id_causa}}">
           
            <div class="col-md-4 form-group">
                <h5><b>Plan de mejoramiento</b></h5>
                <span>{{ $hallazgo->plan['vc_nombre_plan'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5><b>Tipo</b></h5>
                <span>{{ $hallazgo->plan['vc_tipo'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5><b>Auditor</b></h5>
                <span>{{ $hallazgo->plan->auditor['full_name'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5><b>Hallazgo</b></h5>
                <span>{{ $hallazgo['vc_codigo'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5><b>Componente</b></h5>
                <span>{{ $hallazgo['vc_componente'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5><b>Factor</b></h5>
                <span>{{ $hallazgo['vc_factor'] }}</span>
            </div>
            <div class="col-md-12 form-group">
                <h5><b>Descripción del hallazgo</b></h5>
                <span>{{ $hallazgo['tx_descripcion'] }}</span>
            </div>
            <div class="col-md-12 form-group">
            <h5><b>Causa #: {{$id_causa}}</b></h5>
                <span>{{ $tx_causa }}</span>
            </div>
        </div>
        @endcomponent
        
        @component('themes.bootstrap.components.portlet', ['icon' => 'fa fa-building-o', 'title' => 'Actividades'])
            
            {{-- Datatable Acciones--}}
            <div class="">
                <div data-show="gestion_accion" class="progress" style="display:none">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                        <span class="sr-only"></span>
                    </div>
                </div>
                @component('themes.bootstrap.components.datatable', ['id' => 'acciones-table'])
                    @slot('columns', ['<input type="checkbox" id="all">' => ['class' => 'hide'], '', 'Estado - 1a linea delegado','Comentarios 2a Linea','Estado - 3a linea', 'Numero de Seguimientos Pendientes ','Id','Código','Usuario Origen','Encargados','Resposables', 'Tipo','Actividad','indicador','Formula indicador','Meta','Fecha inicio','Fecha fin'])
                @endcomponent
            </div>

            @if($solo_delegado == 1 && $validacionCerrado == 1)
                <div class="row">
                    <div class="col-md-12">
                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-pink">
                            <span class="bg-font-red-pink font-lg sbold">Proceso de revisión:</span>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <label for="tx_observacion" class="form-label">* Observación</label>
                        <textarea name="tx_observacion" id="tx_observacion"class="form-control" rows="5"></textarea>
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-12 text-center">
                        <br>
                        <button class="btn btn-success" id="aprobar_acciones">Aprobar</button>
                        <button class="btn btn-danger" id="devolver_acciones">Devolver</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <br>
                    </div>
                </div>
            @endif
            
            {{--FORMULARIO ACCIONES--}}
            @component('themes.bootstrap.components.modal-large', ['id' => 'modal-form-acciones', 'class'=>'modal-form', 'icon'=>'icon-settings font-green-haze','title' => 'Registro de actividad'])
                    @slot('body')
                        @include('material.sections.hallazgos.acciones.formulario')
                    @endslot
                @slot('footer')
                    <div class="progress progress-striped active" style="display: none;">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span class="sr-only"> </span>
                        </div>
                    </div>
                @endslot
            @endcomponent

        @endcomponent

        @component('themes.bootstrap.components.modal', [
            'id' => 'modal-aprobar-acciones', 
            'class'=>'modal-form', 
            'icon'=>'icon-settings font-green-haze',
            'title' => 'Aprobar acciones']
        )
            @slot('body')
                <div class="col-md-12">
                    <p class="mensaje"></p>
                </div>
            @endslot
            @slot('footer')
                <button id="confirmar_aprobar_acciones" class="btn btn-success">Aceptar</button>
                <button class="btn" data-dismiss="modal">Cancelar</button>
            @endslot
        @endcomponent

        @component('themes.bootstrap.components.modal', [
            'id' => 'modal-devolver-acciones', 
            'class'=>'modal-form', 
            'icon'=>'icon-settings font-green-haze',
            'title' => 'Devolver acciones']
        )
            @slot('body')
                <div class="col-md-12">
                    <p class="mensaje"></p>
                </div>
            @endslot
            @slot('footer')
                <button id="confirmar_devolver_acciones" class="btn btn-danger">Aceptar</button>
                <button class="btn" data-dismiss="modal">Cancelar</button>
            @endslot
        @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 validateMessage = {};

        var validateRulesAccion = {
            'vc_tipo':   {required: true },
            'tx_accion': { minlength: 1, required: true },
            'tx_objetivo':  { minlength: 1, required: true },
            'vc_indicador':  { minlength: 1, required: true },
            'vc_formula_indicador':  { minlength: 1, required: true },
            'vc_meta':  { minlength: 1, required: true },
            'dt_fecha_inicio':  { required: true },
            'dt_fecha_fin':  { required: true },
            //'vc_codigo':  { required: true },
            'i_fk_id_proceso':  { required: true },
            'i_fk_id_user_encargado':  { required: true },
        };

        //Tabla Acciones
        let table_acc, url_acc, columns_acc, modal_acc;
        let id_causa = $('#id_causa').val();
        let editarAccion = 0;

        table_acc = $('#acciones-table');
        url_acc =  "{{ url('hallazgos') }}" + '/data_acciones_causa/' + id_causa
        columns_acc = [
            {
                name: 'checkbox',
                data: 'checkbox',
                searchable: false,
                exportable: false,
                printable: false,
                orderable: false,
                render: null,
                responsivePriority:2,
                width: '10px'
            },
            {
                data: 'link',
                name: 'link',
                orderable: false,
                searchable: false,
                exportable: false,
                printable: false,
                className: 'text-right',
                render: null,
                responsivePriority:2,
                width: '35px'
            },
            {data: 'i_estado_delegado', name: 'i_estado_delegado', width: '30px'},
            {data: 'recomenda', name: 'recomenda', width: '20px'},
            {data: 'i_estado_tercera', name: 'i_estado_tercera', width: '30px'},
            {data: 'seguimiento', name: 'seguimiento' , width: '30px'},
            {data: 'i_pk_id', name: 'i_pk_id', width: '8px'},
            {data: 'vc_codigo', name: 'vc_codigo', width: '8px'},
            {data: 'vc_usuario', name: 'vc_usuario', width: '30px'},
            {data: 'vc_encargados', name: 'vc_encargados', width: '30px'},
            {data: 'vc_responsables', name: 'vc_responsables', width: '30px'},
            {data: 'vc_tipo', name: 'vc_tipo', width: '30px'},
            {data: 'tx_accion', name: 'tx_accion'},
            //{data: 'vc_indicador', name: 'vc_indicador', width: '30px','visible': false},
            {data: 'vc_indicador', name: 'vc_indicador', width: '30px'},
            {data: 'vc_formula_indicador', name: 'vc_formula_indicador', width: '30px'},
            {data: 'vc_meta', name: 'vc_meta', width: '30px'},
            {data: 'dt_fecha_inicio', name: 'dt_fecha_inicio', width: '30px'},
            {data: 'dt_fecha_fin', name: 'dt_fecha_fin', width: '30px'},
            
        ];
        modal_acc = 'modal-form-acciones';
        dataTableServer.init(table_acc, url_acc, columns_acc, modal_acc);
        table_acc = table_acc.DataTable();
        
        var seleccionados = [];

        $('input[id="all"]').on('click', function(e) {
            $('#acciones-table input[type="checkbox"]').prop('checked', $(this).is(':checked')).trigger('change');
        });

        $('#acciones-table').delegate('input[type="checkbox"]', 'change', function(e) {
            valor = parseInt($(this).val());

            if(!isNaN(valor))
            {
                if($(this).is(':checked')) 
                {
                    if(seleccionados.indexOf(valor) == -1) seleccionados.push(valor);
                } else {
                    seleccionados = seleccionados.filter((id) => id != $(this).val());
                }
            }
        });

        $('#aprobar_acciones').on('click', function(e) {
            $('#modal-aprobar-acciones .mensaje').html(`Se aprobará ${seleccionados.length} acciones, haz click en <strong>Aceptar</strong> para continuar, de lo contrario haz click en <strong>Cancelar</strong>`);
            $('#modal-aprobar-acciones').modal('show');
        });

        var url_aprobar_acciones = '{{ route("aprobar_acciones") }}';
        $('#confirmar_aprobar_acciones').on('click', function(e) {
            if (seleccionados.length > 0)
            {
                let observacion = $('#tx_observacion').val();
                
                $.post(
                    url_aprobar_acciones,
                    {
                        acciones: seleccionados.join(','), observacion
                    }
                ).done((data) => {
                    $('#modal-aprobar-acciones').modal('hide');
                    swal({
                            title: 'Bien!',
                            text: 'Se han aprobado las actividades seleccionadas.',
                            icon: 'success',
                            type: 'success'
                    });
                    table_acc.ajax.reload();
                });
            }
        });

        $('#devolver_acciones').on('click', function(e) {
            $('#modal-devolver-acciones .mensaje').html(`Se devolveran ${seleccionados.length} acciones, haz click en <strong>Aceptar</strong> para continuar, de lo contrario haz click en <strong>Cancelar</strong>`);
            $('#modal-devolver-acciones').modal('show');
        });

        var url_devolver_acciones = '{{ route("devolver_acciones") }}';
        $('#confirmar_devolver_acciones').on('click', function(e) {
            if (seleccionados.length > 0)
            {
                let observacion = $('#tx_observacion').val();
                $.post(
                    url_devolver_acciones,
                    {
                        acciones: seleccionados.join(','), observacion
                    }
                ).done((data) => {
                    $('#modal-devolver-acciones').modal('hide');
                    table_acc.ajax.reload();
                });
            }
        });

        table_acc.on('draw.dt', function () {
            $('#acciones-table input[type="checkbox"]').each((i, e) => {
                if(seleccionados.indexOf(parseInt($(e).val())) != -1)
                {
                    $(e).prop('checked', true);
                }
            });
        });

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

        //Crear acción
        $('#btn_save_accion').unbind('click').click(function (e) {
            e.preventDefault();
            var validateForm = $('#form-accion');
            FormValidationMd.init(validateForm, validateRulesAccion, false, false);

            if(validateForm.valid()) {
                $('#modal-form-acciones').modal('hide');
                $('*[data-show="gestion_accion"]').show();
                setTimeout(function(){ 
                    $('*[data-show="gestion_accion"]').hide();
                }, 5000);
                var route, type;
                route = '{{ route('store_accion_causa') }}';
                type = 'POST';
                var data = new FormData();

                if(editarAccion == 1){
                    data.append("i_pk_id_accion", $('#i_pk_id_accion').val());
                }else{
                    data.append("i_pk_id_accion", 0);
                }
                data.append("i_fk_user_accion", $('#i_fk_user_accion').val());
                data.append("i_fk_id_causa", id_causa);
                data.append("vc_tipo", $('#vc_tipo').val());
                data.append("tx_accion", $('#tx_accion').val());
                data.append("vc_indicador", $('#vc_indicador').val());
                data.append("vc_formula_indicador", $('#vc_formula_indicador').val());
                data.append("vc_meta", $('#vc_meta').val());
                data.append("dt_fecha_inicio", $('#dt_fecha_inicio').val());
                data.append("dt_fecha_fin", $('#dt_fecha_fin').val());
                data.append("vc_codigo", $('#vc_codigo').val());
                data.append("i_fk_id_user_encargado", $('#i_fk_id_user_encargado').val());
                data.append("i_fk_id_user_responsable", $('#i_fk_id_user_responsable').val());
                data.append("i_fk_id_proceso", $('#i_fk_id_proceso').val());
                var form = $('#form-accion');
                var table = $('#acciones-table');
                var tableRoute = "{{ url('hallazgos') }}" + '/data_acciones_causa/' + id_causa;
                ajaxRequest.init(route, type, data, modal_acc, form, table, tableRoute, true);
                editarAccion = 0;
            }
        });

        $('#acciones-table').delegate('.edit', 'click', function () {
            var validateForm = $('#form-accion');
            validateForm[0].reset();
            $('.progress').hide();
            $('#btn_cancel').removeAttr('disabled');
            $('#btn_save_accion').removeAttr('disabled');
            editarAccion = 1;
            $('#i_pk_id_accion').val($(this).data('id'));
            $('#i_fk_user_accion').val($(this).data('id-user'));
            $('#i_fk_id_causa').val(id_causa);
            $('#vc_tipo').selectpicker('val', $(this).data('vc-tipo'));
            $('.selectpicker').selectpicker('refresh');
            $('#i_fk_id_proceso').selectpicker('val', $(this).data('i-fk-id-proceso'));
            $('.selectpicker').selectpicker('refresh');
            $('#tx_accion').val($(this).data('tx-accion'));
            $('#vc_indicador').val($(this).data('vc-indicador'));
            $('#vc_formula_indicador').val($(this).data('vc-formula-indicador'));
            $('#vc_meta').val($(this).data('vc-meta'));
            $('#dt_fecha_inicio').val($(this).data('dt-fecha-inicio'));
            $('#dt_fecha_fin').val($(this).data('dt-fecha-fin'));
            $('#vc_codigo').val($(this).data('vc-codigo'));

            let encargados = $(this).data('i-fk-id-user-encargado')+ '';
            let arr = encargados.split(',');  
                
                    if(arr){
                        $("#i_fk_id_user_encargado").val(arr);
                    }else{
                        $("#i_fk_id_user_encargado").val('');
                    }
                    $("#i_fk_id_user_encargado").selectpicker("refresh");
            
            let responsable = $(this).data('i-fk-id-user-responsable')+ '';
            let arr2 = responsable.split(',');

                    if(arr){
                        $("#i_fk_id_user_responsable").val(arr2);
                    }else{
                        $("#i_fk_id_user_responsable").val('');
                    }
                    $("#i_fk_id_user_responsable").selectpicker("refresh");

                    
            $('#modal-form-acciones').modal('show');

            var sendAjax = function () {
                var dataRequest = function () {
                    var route, type;
                    route = '{{ route('store_accion_causa') }}';
                    type = 'POST';

                    var data = new FormData();
                    data.append('_method', 'PUT')
                    data.append("i_pk_id_accion", $('#i_pk_id_accion').val());
                    data.append("i_fk_user_accion", $('#i_fk_user_accion').val());
                    data.append("i_fk_id_causa", id_causa);
                    data.append("vc_tipo", $('#vc_tipo').val());
                    data.append("tx_accion", $('#tx_accion').val());
                    data.append("vc_indicador", $('#vc_indicador').val());
                    data.append("vc_formula_indicador", $('#vc_formula_indicador').val());
                    data.append("vc_meta", $('#vc_meta').val());
                    data.append("dt_fecha_inicio", $('#dt_fecha_inicio').val());
                    data.append("dt_fecha_fin", $('#dt_fecha_fin').val());
                    data.append("vc_codigo", $('#vc_codigo').val());
                    data.append("i_fk_id_user_encargado", $('#i_fk_id_user_encargado').val());
                    var form = $('#form-accion');

                    $('#btn_cancel').attr('disabled', 'disabled');
                    $('#btn').attr('disabled', 'disabled');
                    var table = $('#acciones-table');
                    var modal = 'edit-accion';
                    var tableRoute = "{{ url('hallazgos') }}" + '/data_acciones_causa/' + id_causa;
                    $('.progress').show();
                    ajaxRequest.init(route, type, data, modal, validateForm, table, tableRoute, true);
                }
                return {
                    init: function () {
                        dataRequest();
                    }
                }
            }();
            FormValidationMd.init(validateForm, validateRulesAccion, validateMessage, sendAjax);
        });

        //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();
        });

        $('#acciones-table').delegate('.eliminar', 'click', function () {
            var id = $(this).data('id');
            $('*[data-show="gestion_accion"]').show();
            setTimeout(function(){ 
                $('*[data-show="gestion_accion"]').hide();
            }, 5000);
            var dataRequest = function (id) {
                var route, type;
                route = '{{ route('delete_accion') }}';
                type = 'POST';

                var data = new FormData();
                data.append("i_pk_id", id);
                var table = $('#acciones-table');
                var modal = null;
                var validateForm = null;
                var tableRoute = "{{ url('hallazgos') }}" + '/data_acciones_causa/' + id_causa;
                ajaxRequest.init(route, type, data, modal, validateForm, table, tableRoute, true);
            }(id);
        });


    });
</script>
@endpush