@extends('adminlte::page')

@section('content_header')
    <h4></h4>
@stop


@section('content')
<div>
    <div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;"></div>
    <div class="text-center" id="spinner" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
    </div>
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3>Buscar documentos por PO</h3>
        </div>
        <div class="card-body ">
            <div class="row">
                <div class="col-2">
                    <input type="text" placeholder="12345678" class="form-control" id="po" name="po" style="text-transform:uppercase">
                </div>
{{--                 <div class="col-3">
                    <input type="checkbox" name="mro" id="mro">
                    <label for="mro">
                        ¿Es una orden de MRO?
                    </label>
                </div> --}}
                <div class="col-3">
                    <button type="button" class="btn btn-warning" onClick="buscar()"><i class="fas fa-search"></i> Buscar</button>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('js')


<script type="text/javascript">

    function mostrar()
    {
        $('#spinner').show();
        $('#overlay').show();
    }

    function ocultar()
    {
        $('#spinner').hide();
        $('#overlay').hide();
    }

    function buscar()
    {
        mostrar();

        let po = document.getElementById("po").value;
        if(po.length < 1){
            Swal.fire({
                title: 'Error',
                text: "Debe ingresar una PO",
                type: 'error',
            }).then(function () {
                ocultar();
            });
            return;
        }

        let formData = new FormData();
        formData.append('_token', "{{ csrf_token() }}");
        formData.append('po', po);
        $.ajax({
            url: "{{ route('documentos.buscar') }}",
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                if(data.error)
                {
                    Swal.fire({
                        title: data.error,
                        text: "",
                        type: 'warning',
                    }).then(function () {
                        ocultar();
                    });
                }else if(data.docs)
                {
                    Swal.fire({
                        title: "Se encontraron los siguientes archivos",
                        html: generateErrorMessages(data.docs),
                        type: 'success',
                    }).then(function () {
                        ocultar();
                    });
                }

            },
            error: function (data) {
                console.log(data);
            }
        });
        $('#modalFileImporter').modal('hide');
    }

    function generateErrorMessages(errores) {
        let html = '<ul>';
        errores.forEach(function (mensaje) {
            html += '<li>' + mensaje + '</li>';
        });
        html += '</ul>';
        return html;
    }
</script>
@endsection