@extends('adminlte::page')

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


@section('content')
    <div>
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3>Alta y baja de seriales de cilindros</h3>
            </div>
            <div class="card-body ">
                <div class="row">
                    <div class="col-6">
                        <button type="button" class="btn btn-warning" onClick="uploadFile('baja')"><i
                                class="fas fa-download"></i> Dar de baja seriales</button>

                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-primary" onClick="uploadFile('alta')"><i
                                class="fas fa-upload"></i> Dar de alta seriales</button>

                    </div>

                </div>

            </div>
            <div class="card-body ">
                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <h5><i class="icon fas fa-ban"></i> {{ __('general.error') }}!</h5>
                            {{ $error }}
                        </div>
                    @endforeach
                @endif

                <div class="accordion_item" id="accordionFIlter">
                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <h5 class="mb-0">
                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Filtros de Búsqueda
                                </button>
                            </h5>
                        </div>

                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionFIlter">
                            <div class="card-body">
                                @include('seriales.partials.filter')
                            </div>

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

                <div class="card card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Listado de Registros</h3>
                    </div>
                    <div class="card-body ">
                        <div class="table-responsive">
                            <table id="myTable" class="table display nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Po Number</th>
                                        <th>Number</th>
                                        <th>Dit</th>
                                        <th>Exp Date</th>
                                        <th>Ext Date</th>
                                        <th>Type</th>
                                        <th>Gmid</th>
                                        <th>Product</th>
                                        <th>Status</th>
                                        <th>Cibu</th>
                                        <th>Despacho</th>
                                        <th>Estado</th>
                                        <th>Saldo</th>
                                        <th>Ubicacion</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </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="">Subir</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

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


    <script type="text/javascript">
        let type = "";
        /*Carga reporte de integración */
        function uploadFile(tipo) {
            type = tipo;
            $('#modalFileImporter').modal('show');
            $('#modalFileImporter').find('.modal-title').text('Seleccionar archivo de seriales');
            $('#modalFileImporter').find('#spinner').hide();
            $('#modalFileImporter').find('#body-modal').show();
            $('#modalFileImporter').find('.modal-footer').show();
            $('#modalFileImporter').find('#UploadedFile').html('');
            $('#import-btn').attr('action', '{{ route('seriales.subida') }}');
        }


        $(document).ready(function() {
            $('#modalFileImporter').find('#spinner').show();

            $('#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',
                        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() }}");
                formData.append('tipo', type);
                let url = $(this).attr('action');
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log(data)
                        if (data.estado == "exito") {
                            Swal.fire({
                                title: 'Éxito',
                                text: 'Seriales dados de ' + type + ' exitósamente',
                                type: 'success',
                                confirmButtonText: 'Ok'
                            }).then(function() {
                                $('#modalFileImporter').modal('hide');
                                window.location.reload();
                            });

                        } else {
                            if (typeof data.mensajes !== 'undefined' && data.mensajes.length >
                                0) {
                                Swal.fire({
                                    title: 'Error',
                                    html: generateErrorMessages(data.mensajes),
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                }).then(function() {
                                    $('#modalFileImporter').modal('hide')
                                    $('#modalFileImporter').find('#spinner').hide();
                                    $('#modalFileImporter').find('#body-modal').show();
                                    $('#modalFileImporter').find('.modal-footer')
                                        .show();
                                });
                            } else {
                                Swal.fire({
                                    title: 'Error',
                                    text: 'Ha ocurrido un error al dar de ' + type +
                                        ' los seriales: ' + data.mensaje,
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                }).then(function() {
                                    $('#modalFileImporter').modal('hide')
                                    $('#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').modal('hide')
                                $('#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').modal('hide')
                                $('#modalFileImporter').find('#spinner').hide();
                                $('#modalFileImporter').find('#body-modal').show();
                                $('#modalFileImporter').find('.modal-footer').show();
                            })
                        }
                    }
                });
            });
        })

        function getTable() {
            builtDatable('myTable', {
                searching: false,
                ajax: {
                    url: "{{ route('seriales.obtenerTabla') }}",
                    type: 'GET',
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.filtro = $('#form-filter').serializeArray();
                    },
                    dataSrc: function(json) {
                        return json.data;
                    }
                },
                'columns': [{
                        'data': 'po_number',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'number',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'dit',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'exp_date',
                        'defaultContent': 'N/A',
                        'render': function(data) {
                            if (moment(data, 'YYYY-MM-DD', true).isValid()) {
                                return moment(data).format('DD/MM/YYYY');
                            } else {
                                return data || 'N/A';
                            }
                        }
                    },

                    {
                        'data': 'ext_date',
                        'defaultContent': 'N/A',
                        'render': function(data) {
                            if (moment(data, 'YYYY-MM-DD', true).isValid()) {
                                return moment(data).format('DD/MM/YYYY');
                            }else {
                                return data || 'N/A';
                            }
                        },
                    },
                    {
                        'data': 'type',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'gmid',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'product',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'status',
                        'defaultContent': 'N/A',
                    },
                    {
                        'data': 'cibu',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'despacho',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'estado',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'saldo',
                        'defaultContent': 'N/A'
                    },
                    {
                        'data': 'ubicacion',
                        'defaultContent': 'N/A'
                    }
                ],
                'columnDefs': [{
                    'targets': [3],
                    'render': function(data, type, row, meta) {
                        return moment(data).format('DD/MM/YYYY');
                    }
                }],
                "order": [
                    [3, "desc"]
                ]

            });
        }

        $(document).ready(function() {
            getTable();

            $('#form-filter').on('submit', function(e) {
                e.preventDefault();
                $('#myTable').DataTable().ajax.reload();
            });

            $('#clean-btn').on('click', function() {
                $('#form-filter')[0].reset();
                $('#myTable').DataTable().ajax.reload();
            });
        })


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