@extends('adminlte::page')

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


@section('content')
    <div>
        <div class="card card-outline card-primary">
            <div class="card-header">

                <div class="card-tools">
                    <button type="button" class="btn btn-success" onClick="openFileImporter('new')"><i
                            class="fas fa-upload"></i> {{ __('general.import_file') }}</button>



                </div>
            </div>
            <div class="card-body ">

                <!-- 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">
                                            <div class="form-group">
                                                <label for="exampleFormControlInput1">Tipo de Archivo</label>
                                                <select class="form-control" id="type_file" name="type_file">
                                                    <option value="">{{ __('general.choose_option') }}</option>
                                                    <option value="flujos">Flujo de pagos</option>
                                                    <option value="trianguladas">Trianguladas</option>
                                                </select>
                                            </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 class="alert alert-warning mt-3" role="alert">
                                    <strong>Nota:</strong><br> Los campos <b>NCM, TC, BeneficiariosDelExterior</b> e
                                    <b>IvaImpo</b><br> <u>NO</u> seran procesados.
                                </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 class="card card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Listado de procesos</h3>
                    </div>
                    <div class="card-body ">
                        <table id="myTable" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Fecha</th>
                                    <th>Hora</th>
                                    <th>Usuario</th>
                                    <th>Archivo</th>
                                    <th>Registros</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

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




@endsection

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

    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

    <script type="text/javascript">
        /*Carga de pagos */
        function openFileImporter(type, purchase_order = null, id = null) {
            $('#modalFileImporter').modal('show');
            $('#modalFileImporter').find('.modal-title').text(type == 'new' ? 'Cargar pagos' :
                'Actualizar Orden de Importación:');
            $('#modalFileImporter').find('#spinner').hide();
            $('#modalFileImporter').find('#body-modal').show();
            $('#modalFileImporter').find('.modal-footer').show();
            $('#modalFileImporter').find('#UploadedFile').html('');
            $('#modalFileImporter').find('#type_file').val('').trigger('change');

            $('#import-btn').attr('action', '{{ route('pagos.upload') }}');
        }

        function getTable() {
            builtDatable('myTable', {
                searching: false,
                ajax: {
                    url: "{{ route('pagos.list') }}", // URL para obtener los datos
                    type: 'POST', // Tipo de solicitud HTTP
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"; // Token CSRF para seguridad
                    }
                },
                'columns': [{
                        "data": 'id_proceso', // ID de cada registro
                        'defaultContent': 'N/A'
                    },
                    {
                        "data": 'fecha', // Fecha de creación
                        'defaultContent': 'N/A',
                        'render': function(data, type, row, meta) {
                            // Formateamos la fecha al formato DD/MM/YYYY
                            return moment(data).format('DD/MM/YYYY');
                        }
                    },
                    {
                        "data": 'hora', // Hora de creación (usamos la misma columna 'created_at' pero con formato de hora)
                        'defaultContent': 'N/A',
                        'render': function(data, type, row, meta) {
                            // Extraemos la hora de 'created_at' en formato HH:mm
                            return moment(data, 'HH:mm:ss').format('HH:mm:ss');
                        }
                    },
                    {
                        "data": 'nombre_usuario', // Usuario que generó el registro
                        'defaultContent': 'N/A'
                    },
                    {
                        "data": 'nombre_archivo', // Nombre del archivo
                        'defaultContent': 'N/A'
                    },
                    {
                        "data": 'cantidad_registros', // Número de registros
                        'defaultContent': '0'
                    },
                    {
                        "data": 'estado',
                        "render": function(data, type, row, meta) {
                            // Renderiza el estado como badge
                            return (row.estado === "exito") ?
                                '<span class="badge badge-success">{{ __('Exitoso') }}</span>' :
                                '<span class="badge badge-danger">Fallido</span>';
                        }
                    },
                ],
                'columnDefs': [{
                    'targets': [1], // Aplicamos la transformación solo en la columna de la fecha
                    'render': function(data, type, row, meta) {
                        // Formateamos la fecha al formato DD/MM/YYYY
                        return moment(data).format('DD/MM/YYYY');
                    }
                }],
                "order": [
                    [0, "desc"]
                ] // Ordenamos por fecha en orden descendente
            });
        }


        $(document).ready(function() {

                    getTable();

                    $('#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', async function(e) {
                            e.preventDefault();
                            let selectedType = $('#type_file').val();
                            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;
                            }

                            if (!selectedType) {
                                Swal.fire({
                                    title: 'Error',
                                    text: 'Debe seleccionar un tipo de archivo (Flujo de pagos o Trianguladas)',
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                });
                                return false;
                            }

                            if (selectedType === 'flujos' && !isFlujoFile(files[0])) {
                                Swal.fire({
                                    title: 'Error',
                                    text: 'El archivo no corresponde a un Flujo de pagos. Por favor cargue un archivo válido de flujo de pagos.',
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                });
                                return false;
                            }
                            if (selectedType === 'trianguladas' && !isTrianguladasFile(files[0])) {
                                Swal.fire({
                                    title: 'Error',
                                    text: 'El archivo no corresponde a TRIAARG. Por favor cargue un archivo válido de trianguladas.',
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                });
                                return false;
                            }

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



                                // Se borran datos anteriores
                                const truncate = truncateTable(files[0], selectedType);
                                // Leer el archivo Excel
                                const data = await readExcelFile(files[0]);
                                // Procesar los datos
                                const response = await excelIntegration(data, selectedType);

                                console.log('RESPONSE:', response);
                                // Guardar el proceso
                                const proceso = await guardarProceso(files[0], response);



                                if (response.data.state) {
                                    Swal.fire({
                                        title: 'Éxito',
                                        html: `<p>Archivo importado exitosamente</p>`,
                                        type: 'success',
                                        confirmButtonText: 'Ok',
                                    }).then(function() {
                                        location.reload(); // Recargar la página para actualizar la vista
                                    });
                                } else {
                                    Swal.fire({
                                        title: 'Error',
                                        text: 'Ha ocurrido un error al crear el registro: ' + data.message,
                                        type: 'error',
                                        confirmButtonText: 'Ok'
                                    }).then(function() {
                                        location.reload(); // Recargar la página para actualizar la vista
                                    });
                                }
                            });


                    });







                // Función para leer el archivo Excel
                async function readExcelFile(file) {
                    return new Promise((resolve, reject) => {
                        const reader = new FileReader();
                        reader.onload = (event) => {
                            const data = new Uint8Array(event.target.result);
                            const workbook = XLSX.read(data, {
                                type: 'array'
                            });
                            const firstSheetName = workbook.SheetNames[0];
                            const worksheet = workbook.Sheets[firstSheetName];
                            const json = XLSX.utils.sheet_to_json(worksheet);
                            resolve(json);
                        };
                        reader.onerror = reject;
                        reader.readAsArrayBuffer(file);
                    });
                }

                const auxiliar = async (data, tipo) => {
                    let url =
                        "{{ route('pagos.upload') }}"

                    // Crea un objeto que contenga tanto el array de datos como los campos adicionales
                    const payload = {
                        _token: "{{ csrf_token() }}",
                        records: data, // Asumiendo que 'data' es un array de registros
                        tipo: tipo
                    };

                    //console.log("DATA A ENVIAR",payload);

                    let requestOptions = {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            Accept: 'application/json',
                        },
                        body: JSON.stringify(payload),
                    };

                    const resp = await fetch(
                        url,
                        requestOptions
                    );

                    const sku = await resp.json();
                    // console.log("SUBIDA",sku);

                    return sku;
                };

                function groupJsonElements(jsonArray, groupSize) {
                    let groupedJson = [];
                    for (let i = 0; i < jsonArray.length; i += groupSize) {
                        let group = jsonArray.slice(i, i + groupSize);
                        groupedJson.push(group);
                    }
                    return groupedJson;
                }

                const excelIntegration = async (datos, tipo) => {
                    let total_a_procesar = datos.length;
                    const data = groupJsonElements(datos, 1000);
                    console.log('data:', data);
                    let response = {};


                    try {
                        let res = await Promise.all(data.map(async (element) => {
                            try {
                                await auxiliar(element, tipo);
                                return {
                                    success: true,
                                    procesados: element.length

                                };
                            } catch (error) {
                                console.error('Error en auxiliar:', error);
                                return {
                                    success: false,
                                    error
                                };
                            }

                        }));

                        // console.log("RESPUES DEL ALL: ", res);
                        let procesados = 0;
                        res.filter(elem => {
                            if (elem.success) {
                                procesados += elem.procesados;
                            }
                        });

                        response = {
                            "error": "no hubo errores, se proceso todo correctamente",
                            'data': {
                                'state': true,
                                aProcesar: total_a_procesar,
                                procesados: procesados
                            },
                            'grupos': data
                        };
                    } catch (error) {
                        response = {
                            "error": error.message || "Hubo un error al procesar los datos",
                            'data': {
                                'state': false
                            },
                            'grupos': data
                        };
                    }

                    return response;
                }

                async function truncateTable(excelFile, type) {
                    let url = "{{ route('pagos.delete') }}";

                    const formData = new FormData();
                    formData.append('_token', "{{ csrf_token() }}");
                    formData.append('excelFile', excelFile); // El archivo Excel que se está importando
                    formData.append('type', type);

                    let requestOptions = {
                        method: 'POST',
                        body: formData,
                    };

                    const resp = await fetch(url, requestOptions);
                    const data = await resp.json();

                    return data;
                }

                async function guardarProceso(excelFile, response) {
                    let url = "{{ route('pagos.registrarProceso') }}";
                    let seProceso = response.data.state ? true : false;
                    let procesados = response.data.aProcesar;

                    const formData = new FormData();
                    formData.append('_token', "{{ csrf_token() }}");
                    formData.append('excelFile', excelFile);
                    formData.append('seProceso', seProceso);
                    formData.append('procesados', procesados);

                    let requestOptions = {
                        method: 'POST',
                        body: formData,
                    };

                    const resp = await fetch(url, requestOptions);
                    const data = await resp.json();
                    console.log('GUARDAR PROCESO:', data);

                }

                function isFlujoFile(file) {

                    return file.name.toLowerCase().includes("flujo");
                }

                function isTrianguladasFile(file) {
                    return file.name.includes(
                    "TRIAARG"); // Ejemplo, revisar si el nombre del archivo contiene la palabra "trianguladas"
                }
    </script>
@endsection