@extends('layouts.app')

@section('content')
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                    <h6 class="h2 text-white d-inline-block mb-0">Vendedores</h6>
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Vendedores</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-6 col-5 text-right">
                    <button class="btn btn-neutral btn-sm" id="btn-sync-vendedores">
                        <i class="fas fa-sync-alt mr-1"></i> Sincronizar SAP
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">Listado de vendedores</h3>
                        </div>
                        <div class="col text-right">
                            <input type="text" id="filter-vendedores" class="form-control form-control-sm" style="max-width: 260px; display:inline-block;" placeholder="Buscar vendedor...">
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush" id="vendedores-table">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Código</th>
                                <th scope="col">Nombre</th>
                                <th scope="col">Estado</th>
                                <th scope="col">Sincronizado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($vendedores as $vendedor)
                                <tr>
                                    <td>{{ $vendedor->SalesEmployeeCode }}</td>
                                    <td>{{ $vendedor->SalesEmployeeName }}</td>
                                    <td>
                                        @if($vendedor->active)
                                            <span class="badge badge-success">Activo</span>
                                        @else
                                            <span class="badge badge-secondary">Inactivo</span>
                                        @endif
                                    </td>
                                    <td>{{ optional($vendedor->synced_at)->format('d/m/Y h:i A') ?? 'Nunca' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">No hay vendedores cargados todavía.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </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 vendedores 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>
@endsection

@push('js')
<script>
    let vendedoresTable = $('#vendedores-table').DataTable({
        pageLength: 10,
        language: {
            search: "Buscar:",
            lengthMenu: "Mostrar _MENU_ registros",
            info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
            infoEmpty: "No hay registros disponibles",
            zeroRecords: "No se encontraron coincidencias",
            paginate: {
                previous: "Anterior",
                next: "Siguiente"
            }
        }
    });

    $('#filter-vendedores').on('keyup', function () {
        vendedoresTable.search(this.value).draw();
    });

    $('#btn-sync-vendedores').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('sap.vendedores.sync') }}" + (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} vendedor(es) correctamente.`);
                    $('#sync-close-btn').removeClass('d-none');
                    window.setTimeout(() => location.reload(), 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>
@endpush