@extends('layouts.app')
@section('title', 'Customer Aging Report')

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-0"><i class="bi bi-clock-history me-2"></i>Customer Aging Report</h4>
            <p class="text-muted mb-0 small">Receivables bucketed by 0–30, 31–60, 60+ days overdue</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('reports.export', ['format' => 'pdf', 'report' => 'customer-aging'] + request()->all()) }}"
                class="btn btn-danger btn-sm" target="_blank"><i class="bi bi-file-pdf me-1"></i>PDF</a>
            <a href="{{ route('reports.export', ['format' => 'excel', 'report' => 'customer-aging'] + request()->all()) }}"
                class="btn btn-success btn-sm"><i class="bi bi-file-earmark-excel me-1"></i>Excel</a>
            <a href="{{ route('reports.export', ['format' => 'csv', 'report' => 'customer-aging'] + request()->all()) }}"
                class="btn btn-info text-white btn-sm"><i class="bi bi-filetype-csv me-1"></i>CSV</a>
            <button class="btn btn-secondary btn-sm" onclick="window.print()"><i class="bi bi-printer me-1"></i>Print</button>
        </div>
    </div>

    {{-- Project Filter --}}
    <div class="card mb-3">
        <div class="card-body py-2">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-md-4">
                    <select name="project_id" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">All Projects</option>
                        @foreach ($projects as $p)
                            <option value="{{ $p->id }}" {{ $projectId == $p->id ? 'selected' : '' }}>{{ $p->project_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </form>
        </div>
    </div>

    {{-- Bucket Summary --}}
    <div class="row g-3 mb-4">
        <div class="col-sm-4">
            <div class="stat-card stat-success">
                <div class="stat-icon"><i class="bi bi-hourglass-top"></i></div>
                <div class="stat-info">
                    <h3>৳{{ number_format($buckets['0-30']) }}</h3>
                    <p>0–30 Days</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="stat-card stat-warning">
                <div class="stat-icon"><i class="bi bi-hourglass-split"></i></div>
                <div class="stat-info">
                    <h3>৳{{ number_format($buckets['31-60']) }}</h3>
                    <p>31–60 Days</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="stat-card stat-danger">
                <div class="stat-icon"><i class="bi bi-hourglass-bottom"></i></div>
                <div class="stat-info">
                    <h3>৳{{ number_format($buckets['60+']) }}</h3>
                    <p>60+ Days</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Data Table --}}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0">
                    <thead>
                        <tr>
                            <th>Customer</th>
                            <th>Project</th>
                            <th>Flat</th>
                            <th>Inst #</th>
                            <th>Due Date</th>
                            <th class="text-end">Amount Due</th>
                            <th class="text-end">Paid</th>
                            <th class="text-end">Outstanding</th>
                            <th class="text-end">Days Overdue</th>
                            <th>Bucket</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $row)
                            <tr>
                                <td class="fw-semibold">{{ $row['customer'] }}</td>
                                <td>{{ $row['project'] }}</td>
                                <td>{{ $row['flat'] }}</td>
                                <td>{{ $row['installment'] }}</td>
                                <td>{{ $row['due_date'] }}</td>
                                <td class="text-end">৳{{ number_format($row['amount_due']) }}</td>
                                <td class="text-end text-success">৳{{ number_format($row['amount_paid']) }}</td>
                                <td class="text-end text-danger fw-bold">৳{{ number_format($row['outstanding']) }}</td>
                                <td class="text-end">{{ $row['days_overdue'] }}</td>
                                <td>
                                    @php
                                        $bucketClass = match ($row['aging_bucket']) {
                                            '0-30' => 'bg-success',
                                            '31-60' => 'bg-warning',
                                            default => 'bg-danger',
                                        };
                                    @endphp
                                    <span class="badge {{ $bucketClass }}">{{ $row['aging_bucket'] }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center py-4 text-muted">No overdue installments found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if($data->count())
                        <tfoot class="fw-bold">
                            <tr>
                                <td colspan="7" class="text-end">Total Outstanding:</td>
                                <td class="text-end text-danger">৳{{ number_format($data->sum('outstanding')) }}</td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>
@endsection