@extends('layouts.transparencia.painel')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>

    <h3 class="page-header"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Lote Holerite (MG Folha Pagamento)</h3>
    <form name="FrmUpload" action="{{route('processar-holerite.store')}}" method="post" id="file-upload" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
            </div>
        </div>
        <div class="form-row align-items-center" style="margin-top: 40px">
            <div class="col-md-10">
                <input type="file" name="file" class="form-control" required>
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-warning"><i class="fa fa-plus" aria-hidden="true"></i> Enviar Lote</button>
            </div>
        </div>
    </form>

    <div class="row" style="margin-top: 200px">
        <div class="col-md-12">
            <button type="button" onclick="window.history.back()" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Voltar</button>
            <a href="{{route('processar-holerite.index')}}" class="btn btn-default"><i class="fa fa-server" aria-hidden="true"></i> Lista Todos</a>
        </div>
    </div>
    <hr>
@endsection
@push('script')
    <script>
        $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#file-upload').submit(function (e) {
                e.preventDefault();
                const httpUrl = urlBase + '/transparencia/painel/processar-holerite';

                let formData = new FormData(this);
                $('#file-input-error').text('');

                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    cache: false,
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $.blockUI({message: '<h3><img src="{{url('img/gif/ajax-loader.gif')}}" /> Lote sendo processado, por favor aguarde...</h3>'});
                    },
                    success: (response) => {
                        if (response) {
                            this.reset();
                            $.blockUI({
                                message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> O arquivo foi enviado com sucesso (: </div>',
                                timeout: 1500,
                                onOverlayClick: $.unblockUI
                            });
                            $(document.location).attr('href', `${httpUrl}`);
                        }
                    },
                    error: function (response) {
                        $.each(response.responseJSON, function (key, value) {
                            $.blockUI({
                                message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + value + ' ):' + '</div>',
                                timeout: 8000,
                                onOverlayClick: $.unblockUI
                            });
                        });
                    }
                });
            });
        })
    </script>
@endpush