@extends('admin.template_LFv2')

@section('content')
<div class="container">
    <div class="row">

        @if (session('status'))
            <div class="col-12 alert alert-success mb-5">{{ session('status') }}</div>
        @endif

        <div id="carga-error" class="col-12 alert alert-danger mb-5 d-none"></div>

<h2 class="destacado mb-5">Procesamiento respuesta CPLT</h2>
    <div class="row">
        <div class="col-12">
            <div class="input-group mb-1 d-flex align-items-center vertical-align-center" style="width: 380px">
                <label for="date_init" class="form-label me-2 mb-0" style="width: 70px;">Periodo</label>
                <div class="input-group" style="flex: 1;">
                    <span class="input-group-text" style="heigth: 21px;">
                        <i class="bi bi-calendar" aria-hidden="true"></i>
                    </span>
                    <input id="date_init" name="date_init" class="form-control datepicker datepicker-month" placeholder="Seleccionar una fecha" style="padding: 6px;">
                </div>
            </div>
        </div>
        <h3 class="line">Acuse recibo</h3>
        <div class="col-md-6">

                <label for="formFile1" class="form-label">Carga</label>
                <form method="POST" enctype="multipart/form-data" class='form-horizontal' id="carga" action="{{ url('admin/respuesta-reporte-cplt/carga') }}" >
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input class="form-control" name="date" type="hidden">
                                <input class="form-control" type="file" name="file" placeholder="Choose file" id="file">
                                @error('file')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" id="Procesar" class="btn btn-primary me-2 procesar">Procesar</button>
                            <button type="reset" id="Cancelar" class="btn btn-outline-primary me-2">Cancelar</button>
                        </div>
                    </div>
                </form>

        </div>

        <div class="col-md-6">

                <label for="formFile2" class="form-label">Eliminación</label>
                <form method="POST" enctype="multipart/form-data" class='form-horizontal' id="eliminacion" action="{{ url('admin/respuesta-reporte-cplt/eliminacion') }}" >
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input class="form-control" name="date" type="hidden">
                                <input class="form-control" type="file" name="file" placeholder="Choose file" id="file">
                                @error('file')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" id="Procesar" class="btn btn-primary me-2 procesar">Procesar</button>
                            <button type="reset" id="Cancelar" class="btn btn-outline-primary me-2">Cancelar</button>
                        </div>
                    </div>
                </form>

        </div>
    </div>

    <div class="row">

            <h3 class="line">Resultado procesamiento</h3>


        <div class="col-md-6">

                <label for="formFile1" class="form-label">Carga</label>
                <form method="POST" enctype="multipart/form-data" class='form-horizontal' id="carga_procesamiento" action="{{ url('admin/respuesta-procesamiento-reporte-cplt/carga-procesamiento') }}" >
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input class="form-control" name="date" type="hidden">
                                <input class="form-control" type="file" name="file" placeholder="Choose file" id="file">
                                @error('file')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" id="Procesar" class="btn btn-primary me-2 procesar">Procesar</button>
                            <button type="reset" id="Cancelar" class="btn btn-outline-primary me-2">Cancelar</button>
                        </div>
                    </div>
                </form>

        </div>

        <div class="col-md-6">

                <label for="formFile2" class="form-label">Eliminación</label>
                <form method="POST" enctype="multipart/form-data" class='form-horizontal' id="eliminacion_procesamiento" action="{{ url('admin/respuesta-procesamiento-reporte-cplt/eliminacion-procesamiento') }}" >
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input class="form-control" name="date" type="hidden">
                                <input class="form-control" type="file" name="file" placeholder="Choose file" id="file">
                                @error('file')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" id="Procesar" class="btn btn-primary me-2 procesar">Procesar</button>
                            <button type="reset" id="Cancelar" class="btn btn-outline-primary me-2">Cancelar</button>
                        </div>
                    </div>
                </form>

        </div>
    </div>

    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        var blockCss = {
            css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            },
            message: '<h1> Cargando Documento</h1>'
        };

        function mensajeError(xhr) {
            var json = xhr.responseJSON || {};
            if (json.errors) {
                var errs = [];
                $.each(json.errors, function(_, msgs) {
                    (Array.isArray(msgs) ? msgs : [msgs]).forEach(function(m) { errs.push(m); });
                });
                if (errs.length) {
                    return errs.join(' ');
                }
            }
            if (json.message) {
                return json.message;
            }
            return 'No se pudo procesar el archivo.';
        }

        function prepararCarga(formEl) {
            var formData = new FormData(formEl);
            formData.delete('_token');
            var fileInput = formEl.querySelector('input[type="file"]');
            if (!fileInput || !fileInput.files || !fileInput.files.length) {
                return Promise.reject(new Error('Seleccione un archivo.'));
            }
            var file = fileInput.files[0];
            var ext = ((file.name || '').split('.').pop() || '').toLowerCase();
            if (ext !== 'xlsx' && ext !== 'xls') {
                return Promise.reject(new Error('El campo file debe ser un archivo de tipo: xlsx, xls.'));
            }
            formData.delete('file');
            return new Promise(function(resolve, reject) {
                var reader = new FileReader();
                reader.onload = function() {
                    // Hex y no base64: el WAF lee el campo como texto y el base64 puede formar firmas.
                    var bytes = new Uint8Array(reader.result);
                    var partes = new Array(bytes.length);
                    for (var i = 0; i < bytes.length; i++) {
                        partes[i] = (bytes[i] < 16 ? '0' : '') + bytes[i].toString(16);
                    }
                    formData.set('file_hex', partes.join(''));
                    formData.set('file_ext', ext);
                    resolve(formData);
                };
                reader.onerror = function() {
                    reject(new Error('No se pudo leer el archivo.'));
                };
                reader.readAsArrayBuffer(file);
            });
        }

        // Front Door bloquea un cuerpo de ~2 MB y deja pasar partes de ~100 KB: el hex viaja en partes
        // y el servidor las une antes de procesar.
        var TAMANO_PARTE = 100000;

        function enviarParte(url, formData) {
            return new Promise(function(resolve, reject) {
                $.ajax({
                    url: url,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: resolve,
                    error: function(xhr) { reject(xhr); }
                });
            });
        }

        function idCarga() {
            var bytes = new Uint8Array(16);
            window.crypto.getRandomValues(bytes);
            return Array.prototype.map.call(bytes, function(b) {
                return (b < 16 ? '0' : '') + b.toString(16);
            }).join('');
        }

        function enviarEnPartes(url, formData) {
            var hex = formData.get('file_hex');
            var total = Math.max(1, Math.ceil(hex.length / TAMANO_PARTE));
            var uploadId = idCarga();
            var indice = 0;

            function siguiente() {
                var parte = new FormData();
                formData.forEach(function(valor, clave) {
                    if (clave !== 'file_hex') {
                        parte.append(clave, valor);
                    }
                });
                parte.set('file_hex', hex.slice(indice * TAMANO_PARTE, (indice + 1) * TAMANO_PARTE));
                parte.set('upload_id', uploadId);
                parte.set('chunk_index', String(indice));
                parte.set('chunk_total', String(total));
                return enviarParte(url, parte).then(function(data) {
                    indice++;
                    return indice < total ? siguiente() : data;
                });
            }

            return siguiente();
        }

        const $input = $('#date_init');
        const today = new Date();
        const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);

        if ($input.data('datepicker')) {
            $input.datepicker('destroy');
        }

        $input.datepicker({
            format: "mm/yyyy",
            startView: "months",
            minViewMode: "months",
            startDate: -Infinity,
            endDate: lastMonth,
            autoclose: true,
            language: "es"
        });

        $input.on("changeDate", function() {
            $('input[name="date"]').val($input.val());
        });

        $('#carga, #eliminacion, #carga_procesamiento, #eliminacion_procesamiento').on('submit', function(e) {
            e.preventDefault();
            var $form = $(this);
            var $error = $('#carga-error');
            $error.addClass('d-none').text('');
            $.blockUI(blockCss);

            prepararCarga(this).then(function(formData) {
                return enviarEnPartes($form.attr('action'), formData);
            }).then(function(data) {
                window.location.href = (data && data.redirect) ? data.redirect : window.location.href;
            }).catch(function(err) {
                $.unblockUI();
                var mensaje;
                if (err && typeof err.status === 'number') {
                    mensaje = err.status === 403 && !err.responseJSON
                        ? 'El firewall bloqueó el envío del archivo (HTTP 403).'
                        : mensajeError(err);
                } else {
                    mensaje = err && err.message ? err.message : 'No se pudo leer el archivo.';
                }
                $error.text(mensaje).removeClass('d-none');
            });
        });
    });
</script>
@endpush