@extends('adminlte::page')

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


@section('content')
<div>
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3>Consumo de Temporales</h3>
        </div>
        <div class="card-body ">
            <div class="row">
                <div class="col-6">
                    <a type="button" class="btn btn-warning" href="{{ route('consumos.descargar') }}" ><i class="fas fa-download"></i> Descargar Archivo Consumos</a>
                </div>
                <div class="col-6">
                    <button type="button" class="btn btn-primary"
                        onClick="uploadFile()"><i class="fas fa-upload"></i> Subir Archivo Consumos</button>

                </div>

            </div>

        </div>


    </div>
    <!-- Modal -->
    <div class="modal fade" id="modalFileImporter" tabindex="-1" aria-labelledby="modalFileImporterLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalFileImporterLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center" id="spinner" style="display:none"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>
                    <div id="body-modal">
                        <form action="" id="file_import_form" enctype="multipart/form-data" >
                            @csrf
                            <div class="input-group mb-12">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputFile-addon">Upload</span>
                                </div>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="inputFile"
                                        aria-describedby="inputFile-addon" name="file">
                                    <label class="custom-file-label" for="inputFile">{{ __('general.choose_file') }}</label>
                                </div>
                            </div>

                            <div class="input-group mb-12">
                                <label for="inputFile" class="custom-inputFile" id="UploadedFile">
                                    <i class="fa fa-cloud-upload"></i>
                                </label>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{  __('general.cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="import-btn" action="">{{ __('general.import') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
@include('partials.scripts.select2')


<script type="text/javascript">



    /*Carga reporte de integración */
    function uploadFile(type, purchase_order = null, id = null) {
        $('#modalFileImporter').modal('show');
        $('#modalFileImporter').find('.modal-title').text('Imnportar archivo de consumos');
        $('#modalFileImporter').find('#spinner').hide();
        $('#modalFileImporter').find('#body-modal').show();
        $('#modalFileImporter').find('.modal-footer').show();
        $('#modalFileImporter').find('#UploadedFile').html('');

        $('#import-btn').attr('action', '{{ route("consumos.subir") }}');
    }


    $(document).ready(function(){

        $('#modalFileImporter #inputFile').change(function() {
            var i = $(this).prev('label').clone();
            var file = $(this)[0].files[0].name;
            $('#modalFileImporter').find('#UploadedFile').text(file);
        });

        $('#import-btn').on('click', function(e){
            e.preventDefault();
            let files = $('#file_import_form').find('[name="file"]')[0].files;
            if(files.length <= 0){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe seleccionar un archivo para importar',
                    type: 'error',
                    confirmButtonText: 'Ok'
                });
                return false;
            }

            $('#modalFileImporter').find('#spinner').show();
            $('#modalFileImporter').find('#body-modal').hide();
            $('#modalFileImporter').find('.modal-footer').hide();

            let form = $('#file_import_form');
            let formData = new FormData();
            formData.append('file',files[0]);
            formData.append('_token', "{{ csrf_token() }}");
            let url = $(this).attr('action');
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.success) {
                        Swal.fire({
                            title: 'Éxito',
                            text: 'Archivo importado exitósamente',
                            type: 'success',
                            confirmButtonText: 'Ok'
                        }).then(function () {
                            $('#modalFileImporter').modal('hide');
                            window.location.reload();
                        });

                    } else {
                        let texto = "", linea = "", fallido;
                        for (let index = 0; index < data.fallidos.length; index++) {
                            fallido = data.fallidos[index];
                            linea = "Consumido: " + fallido["consumido"] + ". Saldo: " + fallido["saldo"]
                            + ". Consumidor: " + fallido["consumidor"] + ". Cantidad: " + fallido["cantidad"] + "\n";
                            texto += linea;
                        }
                        Swal.fire({
                            title: 'Atención!',
                            text: data.mensaje + "\n" + texto,
                            type: 'warning',
                            confirmButtonText: 'Ok'
                        }).then(function () {
                            $('#modalFileImporter').find('#spinner').hide();
                            $('#modalFileImporter').find('#body-modal').show();
                            $('#modalFileImporter').find('.modal-footer').show();
                        });
                    }
                },
                error: function (data) {
                    if(data.status == 422){
                        var content = document.createElement('div');
                        content.innerHTML = processValidation(data.responseJSON.errors);

                        Swal.fire({
                            title: 'Error!',
                            html: content.innerHTML,
                            type: 'error',
                            confirmButtonText: 'OK'
                        }).then(function () {
                            $('#modalFileImporter').find('#spinner').hide();
                            $('#modalFileImporter').find('#body-modal').show();
                            $('#modalFileImporter').find('.modal-footer').show();
                        })
                    }else{
                        let statusText = (typeof(data.responseJSON) != 'undefined') ? data.responseJSON.message : 'Server error: ' + data.statusText
                        Swal.fire({
                            title: 'Error',
                            text: 'Ha ocurrido un error al crear el registro: ' + statusText,
                            type: 'error',
                            confirmButtonText: 'Ok'
                        }).then(function () {
                            $('#modalFileImporter').find('#spinner').hide();
                            $('#modalFileImporter').find('#body-modal').show();
                            $('#modalFileImporter').find('.modal-footer').show();
                        })
                    }
                }
            });
        });


    })
</script>
@endsection