@extends('layouts.app')

@section('title', 'Unpaid Report')

@section('content')
@php
    $cur = ($filters['currency'] ?? 'PHP') === 'PHP' ? '₱' : $filters['currency'] . ' ';
    $bucketColors = [
        'Current' => 'secondary',
        '1-30 Days' => 'info',
        '31-60 Days' => 'warning',
        '61-90 Days' => 'orange',
        'Over 90 Days' => 'danger',
    ];
@endphp

<div class="container-fluid">
    <div class="mb-4">
        <a href="{{ route('reports.index') }}" class="btn btn-link btn-sm px-0 text-primary">
            <i class="fas fa-arrow-left me-1"></i> Back to Reports
        </a>
        <h2 class="mb-1"><i class="fas fa-file-invoice-dollar me-2"></i>Unpaid Report</h2>
        <p class="text-muted small mb-0">Bills still carrying a balance, with aging analysis</p>
    </div>

    @include('reports.partials.filter', ['route' => 'reports.unpaid', 'showSearch' => true])

    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-danger">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Total Unpaid</small>
                    <h4 class="mb-0 mt-2 text-danger">{{ $cur }}{{ number_format($summary['balance'], 2) }}</h4>
                    <small class="text-muted">{{ number_format($summary['bills']) }} bills</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-warning">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Past Due</small>
                    <h4 class="mb-0 mt-2 text-warning">{{ $cur }}{{ number_format($summary['overdue_balance'], 2) }}</h4>
                    <small class="text-muted">{{ number_format($summary['overdue_bills']) }} bills past due date</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-primary">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Accounts Affected</small>
                    <h4 class="mb-0 mt-2 text-primary">{{ number_format($summary['accounts']) }}</h4>
                    <small class="text-muted">
                        avg {{ $summary['accounts'] > 0 ? $cur . number_format($summary['balance'] / $summary['accounts'], 2) : $cur . '0.00' }} per account
                    </small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-success">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Partially Paid</small>
                    <h4 class="mb-0 mt-2 text-success">{{ $cur }}{{ number_format($summary['paid'], 2) }}</h4>
                    <small class="text-muted">already received on these bills</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Aging -->
    <div class="card mb-4">
        <div class="card-header bg-white">
            <h6 class="mb-0">Aging Summary</h6>
        </div>
        <div class="card-body">
            <div class="row text-center">
                @foreach($aging as $bucket => $data)
                    <div class="col">
                        <small class="text-muted text-uppercase fw-bold d-block">{{ $bucket }}</small>
                        <h5 class="mb-0 mt-2">{{ $cur }}{{ number_format($data['amount'], 2) }}</h5>
                        <small class="text-muted">{{ number_format($data['count']) }} bills</small>
                        <div class="progress mt-2" style="height:6px;">
                            <div class="progress-bar bg-{{ $bucketColors[$bucket] === 'orange' ? 'warning' : $bucketColors[$bucket] }}"
                                 style="width: {{ $summary['balance'] > 0 ? min(100, $data['amount'] / $summary['balance'] * 100) : 0 }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0">Unpaid Bills</h6>
            <small class="text-muted">Oldest due date first</small>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 report-table">
                <thead class="table-light">
                    <tr>
                        <th>Bill #</th>
                        <th>Account</th>
                        <th>Billing Date</th>
                        <th>Due Date</th>
                        <th class="text-end">Total Due</th>
                        <th class="text-end">Paid</th>
                        <th class="text-end">Balance</th>
                        <th class="text-end">Days Overdue</th>
                        <th>Aging</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($paginated as $row)
                        <tr>
                            <td><a href="{{ route('billings.show', $row['id']) }}">{{ $row['billing_number'] }}</a></td>
                            <td>
                                <div class="fw-semibold">{{ $row['client_name'] }}</div>
                                <small class="text-muted">{{ $row['account_number'] }}</small>
                            </td>
                            <td><small>{{ $row['billing_date']?->format('M d, Y') ?? '—' }}</small></td>
                            <td><small>{{ $row['due_date']?->format('M d, Y') ?? '—' }}</small></td>
                            <td class="text-end">{{ number_format($row['total_amount_due'], 2) }}</td>
                            <td class="text-end text-success">{{ number_format($row['amount_paid'], 2) }}</td>
                            <td class="text-end fw-semibold text-danger">{{ $cur }}{{ number_format($row['balance'], 2) }}</td>
                            <td class="text-end">{{ $row['days_overdue'] > 0 ? number_format($row['days_overdue']) : '—' }}</td>
                            <td>
                                <span class="badge bg-{{ $bucketColors[$row['bucket']] === 'orange' ? 'warning' : $bucketColors[$row['bucket']] }}">
                                    {{ $row['bucket'] }}
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-{{ $row['status'] === 'overdue' ? 'danger' : 'secondary' }}">{{ ucfirst($row['status']) }}</span>
                                @if($row['is_disconnected'])
                                    <span class="badge bg-dark">Disconnected</span>
                                @elseif($row['disconnection_status'] === 'notice_sent')
                                    <span class="badge bg-warning text-dark">Notice Sent</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted py-5">
                                No unpaid bills for this period. 🎉
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($rows->isNotEmpty())
                    <tfoot>
                        <tr>
                            <td colspan="4">Total ({{ number_format($summary['bills']) }} bills)</td>
                            <td class="text-end">{{ number_format($summary['billed'], 2) }}</td>
                            <td class="text-end">{{ number_format($summary['paid'], 2) }}</td>
                            <td class="text-end">{{ $cur }}{{ number_format($summary['balance'], 2) }}</td>
                            <td colspan="3"></td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
        @if($paginated->hasPages())
            <div class="card-footer bg-white">
                {{ $paginated->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
    <p class="text-muted small mt-2 mb-0">
        The date filter applies to the <strong>billing date</strong>. Use "All Time" to see every outstanding bill
        regardless of when it was issued.
    </p>
</div>
@endsection