@extends('layouts.app')

@section('content')

@include('users.partials.header', [
    'title' => __('Clientes'),
    'description' => __('Listado sincronizado desde SAP'),
    '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 d-flex justify-content-end">
                                <button type="button" class="btn btn-success mr-2 btn_exportar">
                                    <i class="fas fa-file-excel"></i>&nbsp;Exportar Excel
                                </button>
                                <button type="button" class="btn btn-primary" id="btn-sync-clientes">
                                    <i class="fas fa-sync-alt"></i>&nbsp;Sincronizar SAP
                                </button>
                            </div>

                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="filter_text" id="filter_text" value="" placeholder="Buscar cliente...">
                            </div>

                            <div class="col-md-3">
                                <button class="btn btn-success" id="iniciar_busqueda">Buscar</button>
                                <button class="btn btn-warning" id="limpiar_busqueda">Limpiar</button>
                            </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>CÓDIGO</b></th>
                                        <th scope="col"><b>NOMBRE</b></th>
                                        <th scope="col"><b>GRUPO</b></th>
                                        <th scope="col"><b>TELEFONO 1</b></th>
                                        <th scope="col"><b>TELEFONO 2</b></th>
                                        <th scope="col"><b>CIUDAD</b></th>
                                        <th scope="col"><b>DIRECCIÓN</b></th>
                                        <th scope="col"><b>CORREO</b></th>
                                        <th scope="col"><b>CÉDULA</b></th>
                                        <th scope="col"><b>NUMERO DE CUENTA</b></th>
                                        <th scope="col"><b>INSTITUCION FINANCIERA</b></th>
                                        <th scope="col"><b>TIPO DE CUENTA</b></th>
                                        <th scope="col"><b>NOMBRE DEPENDIENTE</b></th>
                                        <th scope="col"><b>ACCIÓN</b></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="syncModal" tabindex="-1" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sincronizando clientes desde SAP</h5>
            </div>
            <div class="modal-body">
                <div id="sync-status" class="mb-3 text-muted small"></div>
                <div class="progress mb-2" style="height: 22px;">
                    <div id="sync-progress-bar"
                         class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                         role="progressbar"
                         style="width: 0%">0%</div>
                </div>
                <div class="d-flex justify-content-between small text-muted">
                    <span>Procesados: <strong id="sync-count">0</strong></span>
                    <span id="sync-page-info"></span>
                </div>
                <div id="sync-result" class="mt-3 alert d-none"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary d-none" id="sync-close-btn" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

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

<div id="print_section" hidden></div>

@endsection

@section('js')
<script src="{{ asset('js/Articulo.js?v=3.0.0') }}"></script>
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

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

    table = $('#Table-promoaciones').DataTable({
        paging: true,
        info: false,
        processing: true,
        serverSide: true,
        ordering: false,
        pageLength: 15,
        ajax: {
            url: "{{ url('promocion/datatableClientes') }}",
            type: "POST",
            data: function (d) {
                d.filter_text = $("#filter_text").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: 'CardCode', name: 'CardCode', defaultContent: '' },
            { data: 'CardName', name: 'CardName', defaultContent: '' },
            { data: 'GroupCode', name: 'GroupCode', defaultContent: '' },
            { data: 'Phone1', name: 'Phone1', defaultContent: '' },
            { data: 'Phone2', name: 'Phone2', defaultContent: '' },
            { data: 'City', name: 'City', defaultContent: '' },
            { data: 'Address', name: 'Address', defaultContent: '' },
            { data: 'MailAddress', name: 'MailAddress', defaultContent: '' },
            { data: 'cedula', name: 'cedula', defaultContent: '' },
            { data: 'numero_cuenta', name: 'numero_cuenta', defaultContent: '' },
            { data: 'institucion_financiera', name: 'institucion_financiera', defaultContent: '' },
            { data: 'tipo_cuenta', name: 'tipo_cuenta', defaultContent: '' },
            { data: 'nombre_dependiente', name: 'nombre_dependiente', defaultContent: '' },
            { data: 'action', name: 'action', orderable: false, searchable: false, defaultContent: '' },
        ],
    });

    $(document).on('click', '#Table-promoaciones tbody tr', function () {
        const url = $(this).attr('action');
        if (!url) {
            return;
        }

        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#modal').html(response);
                $('#modal').modal('show');
            }
        });
    });

    $(document).on('click', '.btn-edit-sap', function (e) {
        e.preventDefault();
        e.stopPropagation();

        const url = $(this).data('url');
        if (!url) return;

        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#modal').html(response);
                $('#modal').modal('show');
            }
        });
    });

    $("#iniciar_busqueda").on('click', function () {
        table.ajax.reload();
    });

    $("#limpiar_busqueda").on('click', function () {
        $("#filter_text").val("");
        table.ajax.reload();
    });

    $(".btn_exportar").on('click', function () {
        $.ajax({
            url: "{{ route('exportar_cliente') }}",
            beforeSend: function () {
                show();
            },
            success: function (result) {
                $("#print_section").html(result);
                ExportToExcel('xlsx', 'Listado de clientes');
            },
            complete: function () {
                hide();
            }
        });
    });

    function ExportToExcel(type, nombre, fn, dl) {
        var elt = document.getElementById('imprimirCliente');
        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')));
    }

    $('#btn-sync-clientes').on('click', function () {
        $('#sync-progress-bar').css('width', '0%').text('0%').addClass('progress-bar-animated');
        $('#sync-count').text('0');
        $('#sync-page-info').text('');
        $('#sync-status').text('Iniciando sincronización...');
        $('#sync-result').addClass('d-none').removeClass('alert-success alert-danger').text('');
        $('#sync-close-btn').addClass('d-none');

        $('#syncModal').modal('show');
        ejecutarLote(false);
    });

    function ejecutarLote(continuar) {
        const url = "{{ route('clientes_sync_sap') }}" + (continuar ? '?continuar=1' : '');

        $.ajax({
            url: url,
            type: 'GET',
            success: function (data) {
                const total = data.total || 0;
                const lote = data.lote || 0;
                const hasMore = !!data.has_more;
                const nextLink = data.next_link;

                const porcentaje = hasMore ? 95 : 100;

                $('#sync-progress-bar').css('width', porcentaje + '%').text(porcentaje + '%');
                $('#sync-count').text(total);
                $('#sync-status').text(hasMore ? 'Procesando siguiente lote...' : 'Finalizando...');
                $('#sync-page-info').text(
                    hasMore
                        ? `Lote de ${lote} · continuando sincronización`
                        : `Último lote: ${lote} registros`
                );

                if (hasMore) {
                    setTimeout(function () {
                        ejecutarLote(true);
                    }, 250);
                } else {
                    $('#sync-progress-bar')
                        .removeClass('progress-bar-animated')
                        .css('width', '100%')
                        .text('100%');
                    $('#sync-status').text('Sincronización completada');
                    $('#sync-result')
                        .removeClass('d-none alert-danger')
                        .addClass('alert-success')
                        .text(`✓ Se sincronizaron ${total} cliente(s) correctamente.`);
                    $('#sync-close-btn').removeClass('d-none');
                    window.setTimeout(function () {
                        table.ajax.reload(null, false);
                    }, 1200);
                }
            },
            error: function (xhr) {
                const msg = xhr.responseJSON?.error ?? 'Error desconocido';
                $('#sync-status').text('Error durante la sincronización');
                $('#sync-result')
                    .removeClass('d-none alert-success')
                    .addClass('alert-danger')
                    .text('✗ ' + msg);
                $('#sync-close-btn').removeClass('d-none');
                $('#sync-progress-bar')
                    .removeClass('progress-bar-animated bg-primary')
                    .addClass('bg-danger')
                    .text('Error');
            }
        });
    }
</script>
@endsection