@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/sweetalert/sweetalert.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/materialize-stepper/materialize-stepper.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/katex.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/monokai-sublime.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/quill.snow.css')}}">
@endsection
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-file-manager.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/widget-timeline.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-select2.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-wizard.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/intro.css')}}">
@endsection
<div class="container">
    <div class="section">
        <div class="card">
            <div class="card-content">
                <div class="row">
                    <h6>Solicitud de préstamo de documentación.</h6>
                </div>

                <div class="row">
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Folio: </strong></label>
                            {!! Form::text('[folio]',$fol, ['class' => 'form-control', 'maxlength' =>'350', 'id' => 'folio', 'name' => 'foli', 'value' => '{{$fol}}', 'disabled' => true]) !!}
                          </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Fecha de préstamo: </strong></label>
                            {!! Form::date('[fPrestamo]', null, ['class' => 'form-control', 'placeholder' => 'P.ej. Solicitud de material',  'maxlength' =>'350', 'id' => 'fPrestamo', 'name' => 'fPrestamo', 'required' => true]) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Fecha de devolución: </strong></label>
                            {!! Form::date('[fDevolucion]', null, ['class' => 'form-control', 'placeholder' => 'P.ej. Solicitud de material',  'maxlength' =>'350', 'id' => 'fDevolucion', 'name' => 'fDevolucion', 'required' => true]) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Tipo de solicitud: </strong></label>
                            {!! Form::select('[tipoSol]',$tipoS,  [], ['class' => 'form-control', 'placeholder' => 'Seleccione una opción',  'maxlength' =>'350', 'id' => 'tipoSol', 'name' => 'tipoSol', 'required' => true]) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Folio de solicitud: </strong></label>
                            {!! Form::text('[folSol]', null, ['class' => 'form-control', 'placeholder' => 'P.ej. 40011/2115/2023',  'maxlength' =>'350', 'id' => 'folSol', 'name' => 'folSol']) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Referencia del documento: </strong></label>
                            {!! Form::text('[refDoc]', null, ['class' => 'form-control', 'placeholder' => 'P.ej. CPL/2522/2023',  'maxlength' =>'350', 'id' => 'refDoc', 'name' => 'refDoc']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>No. de oficio de remisión: </strong></label>
                            {!! Form::text('[no_oficio_remision]', null, ['class' => 'form-control', 'placeholder' => 'P.ej. 40011/2115/2023',  'maxlength' =>'350', 'id' => 'no_oficio_remision', 'name' => 'no_oficio_remision', 'required' => true]) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Fecha de oficio: </strong></label>
                            {!! Form::date('[fOficioSol]', null, ['class' => 'form-control', 'maxlength' =>'350', 'id' => 'fOficioSol', 'name' => 'fOficioSol', 'required' => true]) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Oficio de solicitud: </strong></label>
                            <div class="file-field input-field" >
                                <div class="btn bg-primary" >
                                    <i class="material-icons left">attach_file</i>
                                    <input type="file" id="file_path_url" name="file_path_url">
                                </div>
                                <div class="file-path-wrapper">
                                    <input class="file-path validate" type="text" placeholder="Archivo" >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <div class="form-group">
                            <label class="control-label"><strong>Observaciones: </strong></label>
                            <textarea name="observaciones" id="observaciones" class="form-control"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <center>
                            <button class="waves-effect waves-dark btn btn-primary" type="submit" id="b1" onclick="enviaForm();">
                                Enviar
                            </button>
                        </center>
                        <div id="loader1" style="display: none;" class="loader1">
                            <img style="position: relative; left: 45%; top: 40%; width: 10%; height: 10%;" src="{{ asset('images/logo/cube.gif') }}">
                            <p style="position: relative; left: 46%; top: 40%;">Enviando . . .</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@push('scripts')
    <script type="text/javascript">
        function enviaForm() {
            $(".loader1").show();
            document.getElementById('b1').style.display='none';

            let fd = new FormData();

            let dtaa = document.getElementById("file_path_url").files[0];
            let folSol = $("#folSol").val();
            let referencia = $("#refDoc").val();
            let fPrestamo = $("#fPrestamo").val();
            let fDevolucion = $("#fDevolucion").val();
            let tipoSol = $("#tipoSol").val();
            let no_oficio_remision = $("#no_oficio_remision").val();
            let fOficioSol = $("#fOficioSol").val();
            let observaciones = $("#observaciones").val();
            let folio = $("#folio").val();

            fd.append("folSol", folSol)
            fd.append("refDoc", referencia)
            fd.append("fPrestamo", fPrestamo)
            fd.append("fDevolucion", fDevolucion)
            fd.append("tipoSol", tipoSol)
            fd.append("no_oficio_remision", no_oficio_remision)
            fd.append("fOficioSol", fOficioSol)
            fd.append("file_path_url", dtaa)
            fd.append("observaciones",  observaciones)
            fd.append("folio",  folio)

            $.ajax({
                url: "{{ url('validarDatos') }}",
                type: 'post',
                data: fd,
                contentType:false,
                processData: false,
                xhrFields: {
                    responseType: 'blob'
                },
                beforeSend: function() {},
                success: function(response) {
                    id = response;
                        var blob = new Blob([response]);
                        console.log(blob);
                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = "acuse.pdf";
                        link.click();
                        location.reload();
                },
                error: function(blob) {
                    //  console.log(blob);
                }
            })
        }
    </script>
@endpush