@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Clientes Saldos')
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Clientes con Saldo a Favor</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title"><i class="fas fa-users"></i> Lista de Clientes con Saldo a Favor</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="table-clientes-saldos">
                    <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="30%">Cliente</th>
                            <th width="20%">Documento</th>
                            <th width="25%">Total Saldo a Favor</th>
                            <th width="20%">Cantidad de Ventas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($clientesConSaldo as $index => $cliente)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $cliente['nombre'] }}</td>
                                <td>{{ $cliente['documento'] }}</td>
                                <td>S/ {{ number_format($cliente['total_saldo'], 2) }}</td>
                                <td>{{ $cliente['cantidad_ventas'] }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">No hay clientes con saldo a favor</td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="3" style="text-align:right">Total General:</th>
                            <th>S/ {{ number_format($totalGeneral, 2) }}</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            $('#table-clientes-saldos').DataTable({
                language: {
                    "url": "/js/spanish.json"
                },
                pageLength: 10,
                order: [[3, 'desc']] // Ordenar por saldo descendente
            });
        });
    </script>
@stop