@extends('tenant.layouts.app')

@section('content')
<div class="page-headers pe-0">
    <ol class="breadcrumbs">
        <li class="breadcrumb-item">
            <a><i data-feather="award" class="stroke-icon"></i> <span>Vendedores</span></a>
        </li>
        <li class="breadcrumb-item">
            <a><span class="text-primary">Incentivo a Vendedor</span></a>
        </li>
    </ol>
</div>

{{-- Progreso EN VIVO del turno actual (Fase 1.5) — solo-lectura, se confirma al cerrar caja --}}
<div id="ms-card" class="card mb-3 border-0 shadow-sm" style="display:none;">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-2" style="gap:.5rem;">
            <h5 class="my-0">
                <i class="fas fa-bolt" style="color:#E6A23C;margin-right:6px;"></i>
                Mi turno actual
                <span id="ms-shift" class="badge bg-secondary ms-1"></span>
            </h5>
            <span id="ms-projected" class="fw-bold"></span>
        </div>
        <div class="progress" style="height:12px;border-radius:8px;">
            <div id="ms-bar" class="progress-bar bg-warning" role="progressbar" style="width:0%;transition:width .4s;"></div>
        </div>
        <small id="ms-text" class="text-muted d-block mt-1"></small>
    </div>
</div>

<div class="card mb-0">
    <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h3 class="my-0"><i class="fas fa-trophy" style="margin-right:6px;color:#E6A23C"></i> Ranking de puntos por vendedor</h3>
    </div>
    <div class="card-body">

        @if(!$enabled)
            <div class="alert alert-warning">
                El incentivo a vendedor está <strong>desactivado</strong>. Actívalo en
                Configuración → Avanzado → <strong>Incentivo Vendedor</strong>.
            </div>
        @endif

        <form method="GET" class="row g-2 align-items-end mb-3">
            <div class="col-auto">
                <label class="control-label">Desde</label>
                <input type="date" name="date_start" value="{{ $date_start }}" class="form-control">
            </div>
            <div class="col-auto">
                <label class="control-label">Hasta</label>
                <input type="date" name="date_end" value="{{ $date_end }}" class="form-control">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Filtrar</button>
                <a href="{{ route('tenant.seller_incentive.index') }}" class="btn btn-light">Limpiar</a>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th style="width:60px">#</th>
                        <th>Vendedor</th>
                        <th class="text-end">Puntos</th>
                        <th>Último movimiento</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rows as $i => $row)
                        <tr>
                            <td>
                                @if($i === 0)
                                    <i class="fas fa-trophy" style="color:#E6A23C"></i>
                                @else
                                    {{ $i + 1 }}
                                @endif
                            </td>
                            <td>{{ $row->seller_name }}</td>
                            <td class="text-end fw-bold">{{ number_format($row->points, 2) }}</td>
                            <td class="text-muted">{{ $row->last_at }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                Aún no hay puntos acumulados. Se generan al cerrar cajas que cumplan la meta.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
(function () {
    var card = document.getElementById('ms-card');
    if (!card) return;
    var sol = function (n) { return 'S/ ' + Number(n).toFixed(2); };
    function render(d) {
        if (!d.enabled || !d.has_open_cash) { card.style.display = 'none'; return; }
        card.style.display = '';
        var shiftTxt = d.use_shifts
            ? (d.shift_type === 'night' ? '🌙 Noche' : (d.shift_type === 'day' ? '☀️ Día' : '— sin turno'))
            : 'Sin turnos';
        document.getElementById('ms-shift').textContent = shiftTxt;
        var bar = document.getElementById('ms-bar');
        bar.style.width = d.progress_pct + '%';
        bar.className = 'progress-bar ' + (d.reached ? 'bg-success' : 'bg-warning');
        document.getElementById('ms-projected').textContent = d.reached
            ? ('🏆 ganarás ' + Number(d.projected_points).toFixed(0) + ' pts al cerrar')
            : ('faltan ' + sol(d.remaining) + ' para tu punto');
        document.getElementById('ms-text').textContent = sol(d.sales_net) + ' / meta ' + sol(d.meta)
            + (d.reached ? ' · ¡meta cumplida! (se confirma al cerrar la caja)' : '');
    }
    function load() {
        fetch('{{ route('tenant.seller_incentive.my_shift') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json(); })
            .then(render)
            .catch(function () {});
    }
    load();
    setInterval(load, 15000);
})();
</script>
@endsection