@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', 'Causas')


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

@section('content')
    <div class="col-md-12">
        <input type="hidden" name="id_hallazgo" id="id_hallazgo" value="{{$hallazgo['i_pk_id']}}">
        @component('themes.bootstrap.components.portlet', ['icon' => 'fa fa-building-o', 'title' => 'Hallazgo', 'nofooter' => true])
        <div class="row">
            <div class="col-md-12 form-group">
                <h5>Plan de mejoramiento</h5>
                <span>{{ $hallazgo->plan['vc_nombre_plan'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5>Tipo</h5>
                <span>{{ $hallazgo->plan['vc_tipo'] }}</span>
            </div>
            <div class="col-md-8 form-group form-md-line-input has-default">
                <h5>Auditor</h5>
                <span>{{ $hallazgo->plan->auditor['full_name'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5>Código</h5>
                <span>{{ $hallazgo['vc_codigo'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5>Componente</h5>
                <span>{{ $hallazgo['vc_componente'] }}</span>
            </div>
            <div class="col-md-4 form-group">
                <h5>Factor</h5>
                <span>{{ $hallazgo['vc_factor'] }}</span>
            </div>
            <div class="col-md-12 form-group">
                <h5>Descripción del hallazgo</h5>
                <span>{{ $hallazgo['tx_descripcion'] }}</span>
            </div>
            @if ($hallazgo['tx_analisis_de_causas'])
                <div class="col-md-12 form-group">
                    <h5>Soporte análisis de causas</h5>
                    <a href="{{ asset('/storage/analisis_de_causas/'.$hallazgo['tx_analisis_de_causas']) }}">Descargar</a>
                </div>
            @endif
        </div>
        
        @endcomponent
        
        @component('themes.bootstrap.components.portlet', ['icon' => 'fa fa-building-o', 'title' => 'Causas'])
            {{-- Datatable --}}
            @component('themes.bootstrap.components.datatable', ['id' => 'causas-table'])
                @slot('columns', ['','Estado','Id','Numero de acciones incumplidas','Usuario','Causa'])
            @endcomponent

            @component('themes.bootstrap.components.modal-large', ['id' => 'modal-form-history', 'class'=>'modalHistoryPlan', 'icon'=>'icon-settings font-green-haze','title' => 'Historial de Causas'])
                @slot('body')
                    <div class="row">
                        <div class="col-md-12 contenido_historial">
                        </div>
                    </div>
                @endslot
                @slot('footer')
                    <div class="row">
                    </div>
                @endslot
            @endcomponent  

            @component('themes.bootstrap.components.modal-large', ['id' => 'modal-form', 'class'=>'modalAñadirPlan', 'icon'=>'icon-settings font-green-haze','title' => 'Causas'])
                    @slot('body')
                    <div class="row">
                        <div class="col-md-12">
                           {!! Form::open(['role' => 'form', 'id' => 'form-causa', 'enctype' => 'multipart/form-data', 'novalidate' => 'novalidate', 'method' => 'POST', 'url' => route('store_causa')]) !!} 
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-12 form-group form-md-line-input">
                                        <label for="tx_causa" class="control-label">* Causa</label>
                                            <textarea name="tx_causa" class="form-control" id="tx_causa" rows="10"></textarea>
                                        </div>
                                    </div>
                                    <div class="row hidden">
                                        <div class="col-md-12">
                                            <input type="file" name="fl_evidencia" id="fl_evidencia">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <br>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <input type="hidden" name="fl_evidencia" id="fl_evidencia">       
                                    <input type="hidden" name="i_fk_user" id="i_fk_user" value="{!! auth()->user()->id !!}">
                                    <input type="hidden" name="i_fk_id_hallazgo" id="i_fk_id_hallazgo" value="{!! $hallazgo->i_pk_id !!}">
                                    <input type="hidden" name="i_pk_id" id="i_pk_id" data-reseteable=true>

                                    @if($validacionHallazgoCerrado == 1)
                                    {{ Form::button('Cancelar', ['class' => 'btn red', 'data-dismiss' =>"modal", 'id' => 'btn_cancel']) }}
                                        {{ Form::button('Guardar', ['class' => 'btn green', 'id' => 'btn_save']) }}

                                    @endif
                                </div>
                           {!! Form::close() !!} 
                        </div>
                    </div>
                @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
    </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 validateRules = {
            'tx_causa':  { minlength: 5, required: true },
        };
        var validateMessage = {};
        id_hallazgo = $('#id_hallazgo').val();

        let table, url, columns, modal;

        table = $('#causas-table');
        url = "{{ url('hallazgos') }}" +'/data_causas/'+ id_hallazgo;
        columns = [
            {
                data: 'link',
                name: 'link',
                orderable: false,
                searchable: false,
                exportable: false,
                printable: false,
                className: 'text-right',
                render: null,
                responsivePriority:2,
                width: '35px'
            },
            {data: 'i_estado', name: 'i_estado', width: '35px'},
            {data: 'i_pk_id', name: 'i_pk_id', width: '35px'},
            {data: 'acciones', name: 'acciones', width: '35px'},
            {data: 'i_fk_user', name: 'i_fk_user', width: '80px'},
            {data: 'tx_causa', name: 'tx_causa'},
        ];
        modal = 'modal-form';
        dataTableServer.init(table, url, columns, modal);

         table = table.DataTable();

        $('#causas-table').delegate('.historial', 'click', function () {
            console.log($(this).data('id'));
            var id = $(this).data('id');
            
            var post = $.post('{{ route('historial_causas') }}', {'id' : id});
            post.done(function(datos) {
               
                if(datos){
                    $('.contenido_historial').html('');
                    
                    var texto = '';
                    texto += '<ul class="list-group">';
                        $.each(datos.causas_historial, function(i, data) {

                            
                            console.log(data.user_accion);

                            var estado = '';
                            switch(data['i_estado']){
                                
                                case 0:
                                    estado = '<span class="label label-default">Pendiente</span>';
                                    break;
                                case 2:
                                    estado = '<span class="label label-danger">Corregir</span>';
                                    break;
                                case 1:
                                    estado = '<span class="label label-success">Aprobado</span>';
                                    break;
                            }

                            var user_acciones =  (data.user_accion===null) ? '' : data.user_accion['full_name'] ;

                            texto += '<li class="list-group-item"><strong>Fecha</strong> '+(''+(data['updated_at']).substring(0, 16))+'<br><strong>Encargado</strong> '+data.encargado['full_name']+'<br><strong>User Accion</strong>'+user_acciones+'<br><strong>Causa</strong> '+data['tx_causa']+'<br>'+estado+'</li>';
                        });


                        var estado = '';
                            switch(datos.causa['i_estado']){
                                
                                case 0:
                                    estado = '<span class="label label-default">Pendiente</span>';
                                    break;
                                case 2:
                                    estado = '<span class="label label-danger">Corregir</span>';
                                    break;
                                case 1:
                                    estado = '<span class="label label-success">Aprobado</span>';
                                    break;
                            }
                        var user_acciones =  (datos.causa.user_accion===null) ? '' : datos.causa.user_accion['full_name'];
                        texto += '<li class="list-group-item dashboard-stat green-turquoise"><strong>ACTUAL</strong><br><strong>Fecha</strong> '+(''+(datos.causa['updated_at']).substring(0, 16))+'<br><strong>Encargado</strong> '+datos.causa.encargado['full_name']+'<br><strong>User Accion</strong> '+user_acciones+'<br><strong>Causa</strong> '+datos.causa['tx_causa']+'<br>'+estado+'</li>';


                    texto += '</ul>';
                    $('.contenido_historial').html(texto);
                    $('#modal-form-history').modal('show');
                }

               
            })

            
        });
        
        //Edit a record
        $('#causas-table').delegate('.edit', 'click', function () {
            
            var validateForm = $('#form-causa');
            validateForm[0].reset();
            $('.progress').hide();
            $('#btn_cancel').removeAttr('disabled');
            $('#btn_save').removeAttr('disabled');

            $('#i_pk_id').val($(this).data('id'));
            $('#i_fk_user').val($(this).data('user'));
            $('#i_fk_id_hallazgo').val($(this).data('id-hallazgo'));
            $('#tx_causa').val($(this).data('causa'));
            $('#modal-form').modal('show');

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

                    var data = new FormData();
                    data.append('_method', 'PUT')
                    data.append("i_pk_id", $('#i_pk_id').val());
                    data.append("i_fk_user", $('#i_fk_user').val());
                    data.append("i_fk_id_hallazgo", $('#i_fk_id_hallazgo').val());
                    data.append("tx_causa", $('#tx_causa').val());
                    data.append("fl_evidencia", $('#fl_evidencia')[0].files.length > 0 ? $('#fl_evidencia')[0].files[0] : null);
                    
                    $('#btn_cancel').attr('disabled', 'disabled');
                    $('#btn').attr('disabled', 'disabled');
                    var table = $('#causas-table');
                    var modal = 'edit-plan';
                    var tableRoute = "{{ url('hallazgos') }}" +'/data_causas/'+ id_hallazgo;
                    $('.progress').show();
                    ajaxRequest.init(route, type, data, modal, validateForm, table, tableRoute, true);
                }
                return {
                    init: function () {
                        dataRequest();
                    }
                }
            }();
            FormValidationMd.init(validateForm, validateRules, validateMessage, sendAjax);
        });

        //Create a record
        $('#btn_save').unbind('click').click(function (e) {
            e.preventDefault();

            var validateForm = $('#form-causa');
            FormValidationMd.init(validateForm, validateRules, false, false);

            if(validateForm.valid()) {
                $('.progress').show();
                $('#btn_cancel').attr('disabled', 'disabled');
                $('#btn_save').attr('disabled', 'disabled');
                var route, type;
                route = '{{ route('store_causa') }}';
                type = 'POST';
                var data = new FormData();
                data.append("i_pk_id", $('#i_pk_id').val());
                data.append("i_fk_user", $('#i_fk_user').val());
                data.append("i_fk_id_hallazgo", $('#i_fk_id_hallazgo').val());
                data.append("tx_causa", $('#tx_causa').val());
                data.append("fl_evidencia", $('#fl_evidencia')[0].files.length > 0 ? $('#fl_evidencia')[0].files[0] : null);
                var form = $('#form-causa');
                var table = $('#causas-table');
                var tableRoute = "{{ url('hallazgos') }}" +'/data_causas/'+ id_hallazgo;
                ajaxRequest.init(route, type, data, modal, form, table, tableRoute, true);
            }
        });

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

        $('#causas-table').delegate('.opciones', 'click', function (e) {
            e.preventDefault();

            var opcion = $(this).data('opcion');
            var id = $(this).data('id');

            var route, type;
            route = '{{ route('estado_causa') }}';
            type = 'POST';

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

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

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

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

        $('#causas-table').delegate('.eliminar', 'click', function () {
            var id = $(this).data('id');
            var dataRequest = function (id) {
                var route, type;
                route = '{{ route('delete_causa') }}';
                type = 'POST';

                var data = new FormData();
                data.append("i_pk_id", id);
                var table = $('#causas-table');
                var modal = null;
                var validateForm = null;
                var tableRoute = "{{ url('hallazgos') }}" +'/data_causas/'+ id_hallazgo;
                ajaxRequest.init(route, type, data, modal, validateForm, table, tableRoute, true);
            }(id);
            //FormValidationMd.init(validateForm, validateRules, validateMessage, sendAjax);
        });

    });
</script>
@endpush