@extends('template.layout')

@section('styles')
    <link href="{{asset('plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('plugins/jquery-file-upload/css/jquery.fileupload-ui.css')}}" rel="stylesheet" type="text/css" />

    {{--<link href="{{asset('plugins/bootstrap-fileinput/bootstrap-fileinput.css')}}" rel="stylesheet" type="text/css" />--}}
    <style>
        .select2.select2-container.select2-container--default{
            width: 95% !important;
        }
        .select2-selection.select2-selection--single{
            height: 33px !important;
        }
        .portlet-body{
            padding-bottom: 1em;
        }

        .portlet-title{
            padding-bottom: 1.5em;
        }
        .portlet-title.sub{
            border-top: 1px solid #750e2b;
            padding-top: 2em;
            padding-bottom: 1em;
        }
        .row.group{
            padding-bottom: 1em;
        }
        .btn.blue.start{
            display: none;
        }
        .btn.blue.start.go{
            display: initial;
        }
        /*.btn.green.fileinput-button{*/
        /*background-color: #f89834 ;*/
        /*border-color: #f89834 ;*/
        /*}*/
        /*.btn.green:not(.btn-outline):active:hover, .btn.green:not(.btn-outline):active:focus, .btn.green:not(.btn-outline):active.focus, .btn.green:not(.btn-outline).active:hover, .btn.green:not(.btn-outline).active:focus, .btn.green:not(.btn-outline).active.focus, .open>.btn.green:not(.btn-outline).dropdown-toggle:hover, .open>.btn.green:not(.btn-outline).dropdown-toggle:focus, .open>.btn.green:not(.btn-outline).dropdown-toggle.focus{*/
        /*color: #fff;*/
        /*background-color: #db940e;*/
        /*border-color: #cd890e;*/
        /*}*/
    </style>
@endsection

@section('content')

    <h1 class="page-title">
        Ingreso de Expedientes
    </h1>

    <div class="portlet light bordered">
        <div class="portlet-title">

            <div class="caption">
                <a class=" icon-action-undo" href="{{ url('mesadepartes') }}" style="padding: 5px;"></a>
                Ingreso de Expedientes <label id="txtperiodo"></label></div>
            <div class="actions">
            </div>
        </div>

        @include('alerts.index')
        {!! Form::open(array('id' => 'formulario','route' => 'mesa.formulario.expediente',"files" => true,'method' => 'POST', 'class'=>'form-validation','enctype' => 'multipart/form-data')) !!}

        <div class="row">
            <div class="col-md-6">

                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-green sbold uppercase"> Datos de Ingreso - Expediente </span>
                    </div>
                </div>
                {!! Form::hidden('invisible', $num_exp, array('id' => 'invisible_id')) !!}

                <div class="row group">

                    <div class="col-lg-12 col-xs-12">
                        <div class="row">
                            <div class="col-lg-4 col-xs-12">
                                {!! Form::label('tipo_expe', 'Tipo:', ['class' => 'control-label']) !!}
                                {!! Form::select('tipo', ['1' => 'Normal','2' => 'Excepcional'],[], ['class' => 'form-control select2 select2-hidden-accessible','id'=>'select_tipo_expediente','style'=>'width:100%','tabindex' => 1]) !!}
                            </div>
                            <div class="col-lg-4 col-xs-12">
                                {!! Form::label('nro_expe', 'Posible N° de expediente:', ['class' => 'control-label']) !!}
                                {!! Form::text('nroexpediente', $num_exp, ['class' => 'form-control','id' => 'nro_expediente','onkeypress' => 'return isNumberKey(event)','onpaste' => 'return false', 'disabled' => 'disabled','tabindex' => 2]) !!}
                            </div>
                            <div class="col-lg-4 col-xs-12">
                                {!! Form::label('nro_expe', 'Envio de Documento:', ['class' => 'control-label']) !!}
                                {!! Form::select('tipo_expediente', ['0' => 'Virtual','1' => 'Fisico'],[], ['class' => 'form-control select2 select2-hidden-accessible','id'=>'select_tipoexpediente','style'=>'width:100%','tabindex' => 3]) !!}
                            </div>

                            <div class="row col-md-12" style="margin-top: 10px;">
                                <div class="col-md-6 col-xs-12">
                                    {!! Form::label('fech_ingr', 'Fecha de Ingreso:', ['class' => 'control-label']) !!}
                                    <div id="fecha_inicio" class="input-group date date-picker" data-date-format="dd/mm/yyyy">
                                        {!! Form::text('fecha_inicio', date('d-m-Y', strtotime(\Carbon\Carbon::now('America/Lima'))), array('class' => 'form-control',"id" => 'fechaInicio' , 'required' => 'required','disabled' => 'true','tabindex' => 4)) !!}
                                        <span class="input-group-btn">
                                    <button id="btnCalendar" class="btn default" type="button" disabled>
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="form-group col-lg-12 col-xs-12 {{ $errors->has('hora_none') ? ' has-error' : '' }}" id="hora_normal">
                                        <label class="control-label" for="hora_ini">Hora Inicio</label>
                                        <div class="input-icon">
                                            <i class="fa fa-clock-o"></i>
                                            {!! Form::text('hora_none', null , array('id' => 'hora_none', 'class' => 'form-control','disabled' => 'true','tabindex' => 5)) !!}
                                        </div>
                                    </div>
                                    <div class="form-group hidden col-lg-12 col-xs-12 {{ $errors->has('hora_ini') ? ' has-error' : '' }}" id="hora_excepcional">
                                        <label class="control-label" for="hora_ini">Hora Inicio</label>
                                        <div class="input-icon">
                                            <i class="fa fa-clock-o"></i>
                                            {!! Form::text('hora_excepcional', \Carbon\Carbon::now('America/Lima')->format('H:i:s') , array('id' => 'hora_excepcional', 'class' => 'form-control timepicker','tabindex' => 5)) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="portlet-title sub">
                    <div class="caption">
                        <span class="caption-subject font-green sbold uppercase"> Documentos y Destino </span>
                    </div>
                </div>
                <div class="row group">
                    <div class="form-group col-lg-8 col-xs-8 {{ $errors->has('documento') ? ' has-error' : '' }}" style="margin-right: 10px;">
                        {!! Form::label('documento_ingreso', 'Documento de Ingreso:', ['class' => 'control-label','id' => 'labelDocumentoIngreso']) !!}
                        <h6 style="color: grey">Si no logra encontrar el tipo de documento de ingreso puede agregarlo en la gestión de tipos de documentos en las opciones del menú "Mesa de partes"</h6>
                        {!! Form::select('documento', $documentos, null, ['id'=>'selectDocumentos','class' => 'form-control select2','style'=>'width:100%', 'placeholder' => 'Seleccione','tabindex' => 6]) !!}
                    </div>
                </div>


                <div class="portlet-title sub">
                    <div class="caption">
                        <span class="caption-subject font-green sbold uppercase"> Datos Adicionales </span>
                    </div>
                </div>
                <div class="row group">
                    <div class="col-md-12 col-xs-12 {{ $errors->has('selectSolicitante') ? ' has-error' : '' }}" style="margin-right: 10px;">
                        {!! Form::label('solicitante', 'Solicitante:', ['class' => 'control-label','id' => 'labelSolicitante']) !!}
                        <h6 style="color: grey">Si no logra encontrar al solicitante puede agregarlo presionando el icono de (<i class="glyphicon glyphicon-plus"></i>)</h6>
                        <div class="row">
                            <div class="col-lg-10">
                                {!! Form::select('selectSolicitante', [], null, ['id'=>'selectSolicitante','class' => 'select2','style'=>'width:100%','tabindex' => 7]) !!}
                            </div>
                            <div class="col-lg-2">
                                ( <i class="glyphicon glyphicon-plus" title="Crear nuevo Usuario Solicitante"  id="Agregar_Solicitante" style="cursor: pointer; padding: 0.5%;"></i> )
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 margin-top-10" id="remitente" style="display: none;">
                        <div class="form-group">
                            <label class="control-label" for="aula">
                                Remitente
                            </label>
                            {!! Form::text('remitente', null, array('class' => 'form-control', 'onkeypress' => 'return isTextKey(event)','pattern' => '(.|\s)*\S(.|\s)*','id' => 'inptRemitente','tabindex' => 8)) !!}
                        </div>
                    </div>

                    <div class="col-md-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-12 margin-top-10 {{ $errors->has('asuntoresponsable') ? ' has-error' : '' }}">
                                {!! Form::label('asunto', 'Asunto:', ['class' => 'control-label','id' => 'labelAsunto']) !!}
                                <h6 style="color: grey">Si no logra encontrar el asunto del trámite puede agregarlo en la gestión de tipo de asuntos en las opciones<br> del menú "Mesa de partes"</h6>
                            </div>
                            <div class="col-md-10">
                                {!! Form::select('asuntoresponsable', $asuntos, null, ['id'=>'selectAsunto','class' => 'select2','style'=>'width:100%', 'placeholder' => 'Seleccione','tabindex' => 9]) !!}
                            </div>
                            <div class="col-md-2">
                                ( <i class="glyphicon glyphicon-plus" title="Crear nuevo Asunto" id="Agregar_Asunto" style="cursor: pointer;"></i> )
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 margin-top-20" style="padding-left: 0;">
                        <div class="form-group col-lg-12 col-xs-12 {{ $errors->has('folio') ? ' has-error' : '' }}">
                            {!! Form::label('folio', 'Folio:', ['class' => 'control-label']) !!}
                            {!! Form::number('folio', null, ['class' => 'form-control','min' => '0','id' => 'numFolios','tabindex' => 10]) !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">

                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-green sbold uppercase"> Detalle </span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-xs-12 {{ $errors->has('area') ? ' has-error' : '' }}">
                        {!! Form::label('area_destino', 'Area de Destino:', ['class' => 'control-label']) !!}
                        {!! Form::text('area', 'Seleccionar Asunto' , array('class' => 'form-control' , 'disabled' => true,'id' => 'input_area')) !!}
                        {{--                        {!! Form::select('area', $dependencia, null, ['id'=>'selectArea','class' => 'select2','style'=>'width:100%', 'placeholder' => 'Seleccione']) !!}--}}
                    </div>

                    <div class="col-md-6 col-xs-12 {{ $errors->has('responsable') ? ' has-error' : '' }}">
                        {!! Form::label('responsable_area', 'Responsable del Área:', ['class' => 'control-label','id' => 'labelResponsable']) !!}
                        {{--                        {!! Form::text('responsable', 'Seleccionar Asunto' , array('class' => 'form-control' , 'disabled' => true,'id' => 'input_resp')) !!}--}}
                        {!! Form::select('responsable', [], null, ['id'=>'selectResponsable','class' => 'select2','style'=>'width:100%', 'placeholder' => 'Seleccione', 'disabled' => 'disabled']) !!}
                    </div>

                    <div class="col-md-12 margin-top-10 {{ $errors->has('tramite_name') ? ' has-error' : '' }}">
                        {!! Form::label('tramite_name', 'Tramite:', ['class' => 'control-label']) !!}
                        {!! Form::text('tramite_name', 'Seleccionar Asunto' , array('class' => 'form-control' , 'disabled' => true,'id' => 'input_tramite')) !!}
                        {{--                        {!! Form::select('area', $dependencia, null, ['id'=>'selectArea','class' => 'select2','style'=>'width:100%', 'placeholder' => 'Seleccione']) !!}--}}
                    </div>
                </div>

                {{ Form::hidden('idtramite', null , array('id' => 'id_tramite')) }}

                <div class="row margin-top-10">
                    <div class="col-md-12">
                        {!! Form::label('lb_tramite', 'Requisitos:', ['class' => 'control-label']) !!}
                        <table id="dtRequisitos" class="table table-hover nowrap dataTable dtr-inline" style="text-align: center;">
                            <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Formulario/Código/Ubicación</th>
                                <th>Costo UIT</th>
                                <th>Costo S/.</th>
                            </tr>
                            </thead>
                            <tbody style="text-align: left !important;"></tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-xs-10 {{ $errors->has('plazo') ? ' has-error' : '' }}">
                        {!! Form::label('plazo_label', 'Duracion de tramite:', ['class' => 'control-label']) !!}
                        {!! Form::text('plazo', '- - -' , array('class' => 'form-control' , 'disabled' => true,'id' => 'input_plazo')) !!}
                        {{--                        {!! Form::select('area', $dependencia, null, ['id'=>'selectArea','class' => 'select2','style'=>'width:100%', 'placeholder' => 'Seleccione']) !!}--}}
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-green sbold uppercase"> Adjunto de documentos </span>
                    </div>
                </div>

                <div class="row fileupload-buttonbar">
                    <div class="col-lg-12">
                            <span class="btn green fileinput-button ladda-label" style="margin-left: 10px;">
                                <i class="fa fa-plus"></i>
                                <span> Agregar archivos... </span>
                                <input type="file" name="archivos[]" id="expedientefiles" multiple tabindex="11"/>
                                <input type="hidden" name="numfls[]" id="numexpefls" multiple/>
                            </span>
                        <button type="submit" class="btn blue start ladda-button">
                            <i class="fa fa-upload"></i>
                            <span> Subir archivos</span>
                        </button>
                        <span class="fileupload-process"> </span>
                    </div>
                    <div class="col-lg-5 fileupload-progress fade">
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-success" style="width:0%;"> </div>
                        </div>
                        <div class="progress-extended"> &nbsp; </div>
                    </div>
                </div>

                <table role="presentation" id="dtFiles" class="table table-striped clearfix">
                    <thead>
                    <tr class="template-upload">
                        <td>Archivo</td>
                        <td>Nombre</td>
                        <td>Detalle</td>
                        <td>Opciones</td>
                    </tr>
                    </thead>
                    <tbody class="files">
                    </tbody>
                </table>
            </div>

            <div class="col-md-12" style="padding-left: 0;">
                <div class="form-group col-lg-12 col-xs-12 {{ $errors->has('observacion') ? ' has-error' : '' }}">
                    {!! Form::label('observacion_adjunto', 'Detalle:', ['class' => 'control-label']) !!}
                    {!! Form::textarea('observacion', null, ['size' => '30x5','class' => 'form-control', 'style'=>'resize: none','tabindex' => 12]) !!}
                </div>
            </div>

        </div>

        <div class="form-actions" style="text-align: left; padding-top: 25px; padding-bottom: 25px">
            <a class="btn dark btn-outline" href="{{ url('mesadepartes')}}">Cancelar</a>
            {!! Form::submit('Registrar', ['class' => 'btn blue start go ladda-button','id' => 'formulario']) !!}
        </div>

        {!! Form::close() !!}

        <div id="formulario-modal" class="modal fade" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                </div>
            </div>
        </div>

    </div>

    <div id="form_calendar" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content password">

            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
        var urlBase = "{{ url('mesadepartes') }}";
        var urlData = "{{ route('mesa.asunto.lista') }}";
        var urlData2 = "{{ route('mesa.asunto.lista') }}";
        var urlFila = "{{ route('filtro.usuarios') }}";
        var urlEx = "{{ route('filtro.usuarios') }}";
        var urlSelectAsunto = '{{ route('select.tramites') }}';
        var routeRequisitos = '{{ route('expediente.requisitos') }}';
        var idTramite = $('#id_tramite').val();
        {{--var urlImpresion = "{{ route('mesa.imprimir') }}";--}}
    </script>
    <script src="{{asset('plugins/fancybox/source/jquery.fancybox.pack.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/tmpl.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/load-image.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/blueimp-gallery/jquery.blueimp-gallery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.iframe-transport.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-process.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-image.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-audio.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-video.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-validate.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-ui.js')}}" type="text/javascript"></script>

    <script>
        function dinamicClock(){
            var Digital=new Date();
            var hours=Digital.getHours();
            var minutes=Digital.getMinutes();
            var seconds=Digital.getSeconds();

            var dn="PM";
            if (hours<12)
                dn="AM";
            if (hours>12)
                hours=hours-12;
            if (hours===0)
                hours=12;

            if (minutes<=9)
                minutes="0"+minutes;
            if (seconds<=9)
                seconds="0"+seconds;
            myclock= hours+":"+minutes+":"+seconds+" "+dn;
            document.getElementById("hora_none").value =myclock;
            setTimeout("dinamicClock()",1000)
        }


        window.onload=dinamicClock;

        function formatFileSize(bytes) {
            if (typeof bytes !== 'number') {
                return '';
            }

            if (bytes >= 1000000000) {
                return (bytes / 1000000000).toFixed(2) + ' GB';
            }

            if (bytes >= 1000000) {
                return (bytes / 1000000).toFixed(2) + ' MB';
            }
            return (bytes / 1000).toFixed(2) + ' KB';
        }

        var names = [];
        var vlaus = [];

        $("#expedientefiles").on('change',function () {
            names = [];
            vlaus = [];
            AvancTable.clear().draw();
            for(var i = 0; i < $(this).get(0).files.length; i++)
            {
                vlaus.push(1);
                var btncl = '<button type="button" class="btn red delete_file" data-id="'+i+'">' +
                    '<i class="glyphicon glyphicon-ban-circle"></i>' +
                    '<span>Eliminar</span>' +
                    '</button>';
                names.push(
                    $(this).get(0).files[i]
                );
                AvancTable.row.add( [ 'PDF' ,$(this).get(0).files[i].name, formatFileSize($(this).get(0).files[i].size) ,btncl] ).draw().node();
            }

            $("#numexpefls").val(vlaus);


        });

        $('#dtFiles').on("click",'.delete_file', function() {

            var ttx = $(this).data('id');
            vlaus[ttx*1] = 0;
            $("#numexpefls").val(vlaus);
            var prtn = $(this).parents('tr');
            AvancTable.row( prtn ).remove().draw();

        });

        var AvancTable = $("#dtFiles").DataTable({
            "language": {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "No existen participantes inscritos",
                "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 por periodo:",
                "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"
                }
            },
            "pageLength": 4,
            "info":     false,
            "searching": false,
            "lengthChange": false,
            "ordering": false,
            "columnDefs": [
                { "visible": false, "targets": [0], "searchable": true  }
            ],
            "order": [[ 0, "asc" ]]
        });
    </script>
    <script src="{{asset('js/MesaDePartes/Expediente.js')}}" type="text/javascript"></script>
@endsection