@extends('layouts.app')
@section('title', 'Customers Due Report')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="#">Reports</a></li>
<li class="breadcrumb-item active">Customers Due</li>
@endsection
@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-people me-2" style="color:#dc2626;"></i>Customers Due Report</h1>
        <p class="page-subtitle">All customers with outstanding balances</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('customer-payments.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-cash me-1"></i>Record Payment</a>
        <button onclick="window.print()" class="btn btn-outline-secondary btn-sm"><i class="bi bi-printer me-1"></i>Print</button>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="stat-card"><div class="stat-icon" style="background:#fee2e2;"><i class="bi bi-people" style="color:#dc2626;"></i></div>
        <div><div class="stat-value">{{ $customers->total() }}</div><div class="stat-label">Customers with Due</div></div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card"><div class="stat-icon" style="background:#fef2f2;"><i class="bi bi-currency-exchange" style="color:#dc2626;"></i></div>
        <div><div class="stat-value" style="color:#dc2626;font-size:1rem;">৳{{ number_format($totalDue,0) }}</div><div class="stat-label">Total Receivable</div></div></div>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0" style="font-size:.85rem;">
                <thead><tr><th>Customer</th><th>Phone</th><th>Pending Invoices</th><th class="text-end">Oldest Invoice</th><th class="text-end">Total Due</th><th>Action</th></tr></thead>
                <tbody>
                    @forelse($customers as $c)
                    <tr>
                        <td><a href="{{ route('customers.show', $c) }}" style="font-weight:700;color:#1d4ed8;text-decoration:none;">{{ $c->name }}</a></td>
                        <td>{{ $c->phone ?? '—' }}</td>
                        <td>
                            @foreach($c->sales->take(3) as $s)
                            <a href="{{ route('sales.show', $s) }}" style="font-family:monospace;font-size:.72rem;background:#fee2e2;border-radius:4px;padding:1px 5px;text-decoration:none;color:#dc2626;display:inline-block;margin:1px;">
                                {{ $s->invoice_no }}: ৳{{ number_format($s->due_amount,0) }}
                            </a>
                            @endforeach
                            @if($c->sales->count() > 3)<span style="font-size:.72rem;color:#94a3b8;">+{{ $c->sales->count()-3 }} more</span>@endif
                        </td>
                        <td class="text-end" style="font-size:.8rem;color:#64748b;">
                            {{ $c->sales->first()?->sale_date?->format('d M Y') ?? '—' }}
                        </td>
                        <td class="text-end fw-800 text-danger" style="font-size:1rem;">৳{{ number_format($c->current_due,2) }}</td>
                        <td>
                            <a href="{{ route('customer-payments.create', ['customer_id' => $c->id]) }}"
                               class="btn btn-sm btn-outline-success">
                                <i class="bi bi-cash me-1"></i>Collect
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-5 text-muted"><i class="bi bi-check-circle-fill text-success" style="font-size:2rem;"></i><p class="mt-2">All customers are fully paid up!</p></td></tr>
                    @endforelse
                </tbody>
                <tfoot style="background:#fef2f2;">
                    <tr>
                        <td colspan="4" class="fw-700 text-end">Total Receivable:</td>
                        <td class="text-end fw-900 text-danger" style="font-size:1.1rem;">৳{{ number_format($totalDue,2) }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    @if($customers->hasPages())<div class="card-footer">{{ $customers->links() }}</div>@endif
</div>
@endsection