@extends('layouts.app')

@section('content')

@include('users.partials.header', [
    'title' => __('Articulos con Promocion SAP'),
    'description' => __(''),
    'class' => 'col-lg-12'
]) 

<style>
    #Table-promoaciones tbody tr{
        cursor: pointer;
    }
</style>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-12 order-xl-1">
            <div class="card shadow">
                <div class="card-body">
                    <div class="table-responsive" style="overflow-x: hidden !important;">
                        <div class="row">
                            <div class="col-sm-12 col-lg-12 col-md-12 mb-3 text-right">
                                <button type="button" class="btn btn-info mr-2 btn-sync-promociones-sap">
                                    <i class="fas fa-sync-alt"></i>&nbsp;Sincronizar SAP
                                </button>
                                <button type="button" class="btn btn-success btn_exportar">Exportar Excel</button>
                            </div>
                            <div class="col-sm-12 col-lg-12 mb-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        {{ Form::label('Filtrar', 'Filtrar', ['class' => 'label-control']) }}
                                        <input class="form-control" placeholder="Buscar" onkeyup="saerch(this);" id="btnsearch" type="text">
                                    </div>
                                    <div class="col-md-4">
                                        {{ Form::label('Filtrar', 'Activo', ['class' => 'label-control']) }}
                                        {{ Form::select('ACTIVO_FILTER', ['S' => 'Activo', 'N' => 'Inactivo', '' => 'TODOS'], '', ['class' => 'form-control ACTIVO_FILTER']) }}
                                    </div>
                                    <div class="col-md-4">
                                        {{ Form::label('Filtrar', 'Tipo', ['class' => 'label-control']) }}
                                        {{ Form::select('TIPO_FILTER', ['FARMACIA' => 'Farmacia', 'DISTRIBUIDOR' => 'Distribuidor', '' => 'TODOS'], '', ['class' => 'form-control TIPO_FILTER']) }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <br>

                        <div class="table-responsive">
                            <table class="table align-items-center table-flush table-striped" id="Table-promoaciones">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col"><b>ARTICULO</b></th>
                                        <th scope="col"><b>NOMBRE</b></th>
                                        <th scope="col"><b>TIPO</b></th>
                                        <th scope="col"><b>VALOR PROMO</b></th>
                                        <th scope="col"><b>ACTIVO</b></th>
                                        <th scope="col"><b>SINCRONIZADO</b></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalSyncPromocionesSap" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sincronizando promociones SAP</h5>
                <button type="button" class="close sync-promociones-close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="syncPromocionesText" class="mb-2">Preparando sincronización...</p>
                <div class="progress">
                    <div id="syncPromocionesBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%">0%</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalDetallePromocionSap" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalle de artículo con promoción SAP</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="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Artículo</label>
                        <input type="text" class="form-control" id="promoSapCode" readonly>
                    </div>
                    <div class="col-md-8 mb-3">
                        <label class="form-label">Nombre del producto</label>
                        <input type="text" class="form-control" id="promoSapName" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Tipo</label>
                        <input type="text" class="form-control" id="promoSapType" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Activo</label>
                        <input type="text" class="form-control" id="promoSapActive" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Valor promo</label>
                        <input type="text" class="form-control" id="promoSapValorPromo" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Sincronizado</label>
                        <input type="text" class="form-control" id="promoSapSync" readonly>
                    </div>
                </div>
                <div class="alert alert-info mb-0">
                    Selecciona un artículo para ver la promoción SAP a la que pertenece.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>

@endsection

@section('js')
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

@if(Session::has('success'))
    <script>
        toastr.success('{!! session('success') !!}');
    </script>
@endif

@if(Session::has('error'))
    <script>
        toastr.error('{!! session('error') !!}');
    </script>
@endif

<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

var table = $('#Table-promoaciones').DataTable({
    paging: true,
    info: false,
    processing: true,
    serverSide: true,
    pageLength: 15,
    ajax: {
        url: "{{ route('datatableArticuloPromocion') }}",
        data: function (d) {
            d.ACTIVO_FILTER = $('.ACTIVO_FILTER').val();
            d.TIPO_FILTER = $('.TIPO_FILTER').val();
        }
    },
    language: {
        searchPlaceholder: "Buscar",
        decimal: "",
        emptyTable: "No hay información",
        info: "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        infoEmpty: "Mostrando 0 to 0 of 0 Entradas",
        infoFiltered: "(Filtrado de _MAX_ total entradas)",
        infoPostFix: "",
        thousands: ",",
        lengthMenu: "",
        loadingRecords: "Cargando...",
        processing: "Procesando...",
        search: "",
        zeroRecords: "Sin resultados encontrados",
        paginate: {
            first: "Primero",
            last: "Ultimo",
            next: "Siguiente",
            previous: "Anterior"
        }
    },
    fnDrawCallback: function () {
        $(".previous a").html('<i class="ni ni-bold-left"></i>');
        $(".next a").html('<i class="ni ni-bold-right"></i>');
    },
    columns: [
        { data: 'ARTICULO', name: 'ARTICULO', width: '50px', orderable: false },
        { data: 'DESCRIPCION', name: 'DESCRIPCION', orderable: false },
        { data: 'TIPO', name: 'TIPO', orderable: false },
        { data: 'valor_promo', name: 'valor_promo', orderable: false },
        { data: 'active', name: 'active', orderable: false },
        { data: 'synced_at', name: 'synced_at', orderable: false },
    ],
});

$('.ACTIVO_FILTER, .TIPO_FILTER').on('change', function () {
    table.ajax.reload();
});

function mostrarSyncPromociones() {
    $('#modalSyncPromocionesSap').modal({ backdrop: false, keyboard: false, show: true });
    $('body').css('overflow', 'hidden');
}

function ocultarSyncPromociones() {
    $('#modalSyncPromocionesSap').modal('hide');
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open').css('overflow', '');
}

let syncPromocionesActivo = false;

function sincronizarPromocionesSap(continuar = false) {
    if (!continuar) {
        syncPromocionesActivo = true;
        $('#syncPromocionesText').text('Iniciando sincronización...');
        $('#syncPromocionesBar').css('width', '10%').text('10%');
        mostrarSyncPromociones();
    }

    $.ajax({
        url: "{{ route('promocion_articulo_sync') }}",
        type: "GET",
        dataType: "json",
        data: {
            continuar: continuar ? 1 : 0
        },
        success: function (response) {
            try {
                if (response.ok) {
                    $('#syncPromocionesText').text('Procesados: ' + response.total + ' registros');

                    if (response.has_more) {
                        $('#syncPromocionesBar').css('width', '55%').text('Sincronizando...');
                        sincronizarPromocionesSap(true);
                        return;
                    }

                    $('#syncPromocionesBar').css('width', '100%').text('100%');
                    $('#syncPromocionesText').text('Sincronización completada. Registros procesados: ' + response.total);
                    setTimeout(function () {
                        ocultarSyncPromociones();
                        table.ajax.reload(null, false);
                        syncPromocionesActivo = false;
                    }, 1200);
                    return;
                }

                syncPromocionesActivo = false;
                ocultarSyncPromociones();
                toastr.warning(response.error || 'No se pudo sincronizar');
            } catch (e) {
                syncPromocionesActivo = false;
                ocultarSyncPromociones();
                toastr.error('Ocurrió un error procesando la respuesta de SAP');
            }
        },
        error: function () {
            syncPromocionesActivo = false;
            ocultarSyncPromociones();
            toastr.error('No se pudo sincronizar desde SAP');
        }
    });
}

$(".btn-sync-promociones-sap").on('click', function () {
    if (syncPromocionesActivo) {
        return;
    }

    sincronizarPromocionesSap(false);
});

$(document).on('click', '.sync-promociones-close', function () {
    if (syncPromocionesActivo) {
        return;
    }

    ocultarSyncPromociones();
});

$('#modalSyncPromocionesSap').on('hidden.bs.modal', function () {
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open').css('overflow', '');
});

$('#Table-promoaciones tbody').on('click', 'tr', function () {
    var row = table.row(this).data();

    if (!row) {
        return;
    }

    $.ajax({
        url: $(this).attr('action'),
        success: function (result) {
            $('#modal').html(result);
            $('#modal').modal('show');
        },
        error: function () {
            toastr.error('No se pudo cargar la promocion');
        }
    });
});

$(".btn_exportar").on("click", async function () {
    await generarDatatable({ exportAll: true });
    ExportToExcel("xlsx", "Listado de promociones");
    await generarDatatable({ exportAll: false });
});

function generarDatatable({ exportAll = false } = {}) {
    return new Promise((resolve) => {
        if ($.fn.DataTable.isDataTable("#Table-promoaciones")) {
            $("#Table-promoaciones").DataTable().destroy();
            $("#Table-promoaciones").empty();
        }

        const table = $("#Table-promoaciones").DataTable({
            paging: true,
            info: false,
            processing: true,
            serverSide: true,
            pageLength: exportAll ? -1 : 15,
            lengthMenu: [[15, 25, 50, 100, -1], [15, 25, 50, 100, "Todas"]],
            ajax: {
                url: "{{ route('datatableArticuloPromocion') }}",
                data: function (d) {
                d.ACTIVO_FILTER = $(".ACTIVO_FILTER").val();
                d.TIPO_FILTER = $(".TIPO_FILTER").val();
                d.export_all = exportAll ? 1 : 0;
                },
            },
            language: {
                searchPlaceholder: "Buscar",
                decimal: "",
                emptyTable: "No hay información",
                info: "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                infoEmpty: "Mostrando 0 to 0 of 0 Entradas",
                infoFiltered: "(Filtrado de _MAX_ total entradas)",
                thousands: ",",
                lengthMenu: "",
                loadingRecords: "Cargando...",
                processing: "Procesando...",
                search: "",
                zeroRecords: "Sin resultados encontrados",
                paginate: {
                    first: "Primero",
                    last: "Ultimo",
                    next: "Siguiente",
                    previous: "Anterior",
                },
            },
            fnDrawCallback: function () {
                $(".previous a").html('<i class="ni ni-bold-left"></i>');
                $(".next a").html('<i class="ni ni-bold-right"></i>');
            },
            columns: [
                { data: 'ARTICULO', name: 'ARTICULO', width: '50px', orderable: false },
                { data: 'DESCRIPCION', name: 'DESCRIPCION', orderable: false },
                { data: 'TIPO', name: 'TIPO', orderable: false },
                { data: 'valor_promo', name: 'valor_promo', orderable: false },
                { data: 'active', name: 'active', orderable: false },
                { data: 'synced_at', name: 'synced_at', orderable: false },
            ],
        });

        table.one("draw", function () {
            resolve();
        });

        if (exportAll) {
            table.page.len(-1).draw();
        }
    });
}

async function ExportToExcel(type, nombre, fn, dl) {
    var elt = document.getElementById("Table-promoaciones");
    var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1", date_format: "YYYY-MM-DD", raw: true });
    return dl
        ? XLSX.write(wb, { bookType: type, bookSST: false, type: "base64", raw: true })
        : XLSX.writeFile(wb, fn || (nombre + "." + (type || "xlsx")));
}

function saerch(e){
    var name=$(e).val();
    table.search(name).draw();
}

</script>

@endsection