@extends('material.layouts.dashboard')


@push('styles')
<!-- 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" />
<!-- Select2 Style -->
    <link href="{{ asset('assets/global/plugins/select2material/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/global/plugins/select2material/css/select2-bootstrap.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/global/plugins/select2material/css/pmd-select2.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Style dataTable personalizado -->
    <link href="{{ asset('css/estilos_datatable.css') }}" rel="stylesheet" type="text/css" />
<!-- Select picker -->
    <link href="{{ asset('assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Estilo general -->
    <link href="{{ asset('css/general.css') }}" rel="stylesheet" type="text/css" />

@endpush

@section('page-title', 'Reporte de seguimientos')

@section('page-description', 'Generación del reporte de seguimientos')

@section('content')
    <div class="col-md-12">
        @component('themes.bootstrap.components.portlet', ['icon' => 'fa fa-building-o', 'title' => 'Informe seguimientos'])
            

            <div class="row">            
                {!! Form::open(['role' => 'form', 'id' => 'form-informe', 'novalidate' => 'novalidate', 'method' => 'POST', 'url' => route('generar_informe_seguimientos') ]) !!} 
                                            
                    <div class="col-md-12">
                        <div class="form-body">         
                            <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="i_planes" class="control-label">Plan de mejoramiento</label>
                                {!!Form::select('i_planes[]',$planes,null,['class'=>'form-control selectpicker',
                                    'title'=>'Seleccione el plan de mejoramiento', 
                                    'data-live-search'=>'true',
                                    'multiple' => 'multiple', 
                                    'multiple data-actions-box'=>'true', 
                                    'data-size'=>'5',
                                    'id'=>'i_planes'])
                                !!}
                            </div>
                           
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-actions text-center">                                                    
                            {{ Form::submit('Descargar Informe', ['class' => 'btn green fa fa-file-excel-o', 'id' => 'btn_excel','name'=>'btn_excel','title'=>'Generar Excel']) }}                             
                        </div>
                    </div>
                {!! Form::close() !!} 
            </div>

            
        @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>
<!-- 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>
<!-- SweetAlert Scripts -->
    <script src="{{ asset('assets/global/plugins/bootstrap-sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<!-- Validation Scripts -->
    <!-- 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>
<!-- Select picker -->
    <script src="{{ asset('assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
<!-- DatePicker --> 
    <script src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script> 

@endpush

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

        var _planes = @json($_planes);
        var validateRules = {
            'i_planes[]': {required:true},
            'dt_fecha_inicio': {required:true},
            'dt_fecha_fin': {required:true}
        };
        var validateMessage = {};
        var validateForm = $('#form-informe');

         $('#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']);
            });
            $('#i_planes').val([]).trigger('change');
            $('#i_planes').html('');
            planes_filtrados.map((plan) => {
                $('#i_planes').append(`<option value=${plan.i_pk_id}>${plan.vc_nombre_plan}</option>`);
            })
            $('#i_planes').selectpicker('refresh');
            
            toastr.info(`${planes_filtrados.length} planes encontrados`);
        });

        FormValidationMd.init(validateForm, validateRules, validateMessage, false);
        
    });
</script>
@endpush