{{-- resources/views/invoices/aging.blade.php --}}
@extends('layouts.app')

@section('title', 'Unpaid / Aging')

@section('content')
    <div class="container-fluid py-3">
        {{-- Page Header --}}
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <h1 class="h3 mb-1"><i class="bi bi-hourglass-split me-2"></i>Unpaid / Aging</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('billing.invoices') }}">Billing</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Unpaid / Aging</li>
                    </ol>
                </nav>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary">
                    <i class="bi bi-printer me-1"></i> Print
                </button>
                <button type="button" class="btn btn-outline-secondary">
                    <i class="bi bi-download me-1"></i> Export
                </button>
            </div>
        </div>

        {{-- Summary Buckets --}}
        @php
            $buckets = [
                ['label' => '0–30 days', 'count' => 18, 'amount' => 156250.0, 'icon' => 'bi-0-circle'],
                ['label' => '31–60 days', 'count' => 9, 'amount' => 112500.0, 'icon' => 'bi-1-circle'],
                ['label' => '61–90 days', 'count' => 6, 'amount' => 94800.0, 'icon' => 'bi-2-circle'],
                ['label' => '90+ days', 'count' => 4, 'amount' => 123200.0, 'icon' => 'bi-exclamation-octagon'],
            ];
            $totalAmount = array_sum(array_column($buckets, 'amount'));
            $totalCount = array_sum(array_column($buckets, 'count'));
        @endphp
        <div class="row g-3 mb-3">
            @foreach ($buckets as $b)
                <div class="col-6 col-md-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="small text-muted">{{ $b['label'] }}</div>
                                <i class="bi {{ $b['icon'] }} fs-5 text-muted"></i>
                            </div>
                            <div class="h4 mb-1">{{ $b['count'] }} <span class="text-muted small">inv</span></div>
                            <div class="fw-semibold">₱ {{ number_format($b['amount'], 2) }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="col-12">
                <div class="alert alert-info d-flex justify-content-between align-items-center">
                    <div><i class="bi bi-info-circle me-2"></i><strong>Total Outstanding:</strong> ₱
                        {{ number_format($totalAmount, 2) }} ({{ $totalCount }} invoices)</div>
                    <div>
                        <button class="btn btn-sm btn-outline-primary"><i class="bi bi-envelope me-1"></i> Send
                            Reminders</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <form class="row g-3">
                    <div class="col-12 col-md-3">
                        <label class="form-label small text-muted">Search</label>
                        <input type="text" class="form-control" placeholder="Business name / BIN / Taxpayer">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label small text-muted">Barangay</label>
                        <select class="form-select">
                            <option value="">All</option>
                            <option>Poblacion</option>
                            <option>San Isidro</option>
                            <option>San Roque</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label small text-muted">Permit Type</label>
                        <select class="form-select">
                            <option value="">All</option>
                            <option>New</option>
                            <option>Renewal</option>
                            <option>Additional Line</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label small text-muted">Aging Bucket</label>
                        <select class="form-select" id="agingBucketFilter">
                            <option value="">All</option>
                            <option>0–30</option>
                            <option>31–60</option>
                            <option>61–90</option>
                            <option>90+</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-3">
                        <label class="form-label small text-muted">As of</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
                            <input type="text" class="form-control" value="{{ now()->format('M d, Y') }}">
                        </div>
                    </div>
                    <div class="col-12 d-flex gap-2">
                        <button type="button" class="btn btn-primary"><i class="bi bi-search me-1"></i>Apply</button>
                        <button type="button" class="btn btn-outline-secondary">Reset</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Table --}}
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h2 class="h6 mb-0">Unpaid / Aging Detail</h2>
                    <div class="btn-group">
                        <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-download me-1"></i>Export
                            CSV</button>
                        <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-filetype-pdf me-1"></i>Export
                            PDF</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="agingTable" class="table table-striped table-hover align-middle w-100">
                        <thead class="table-light">
                            <tr>
                                <th>Invoice #</th>
                                <th>BIN</th>
                                <th>Business Name</th>
                                <th>Barangay</th>
                                <th>Permit Type</th>
                                <th>Issue Date</th>
                                <th>Due Date</th>
                                <th class="text-end">Amount (₱)</th>
                                <th class="text-center">Days Past Due</th>
                                <th>Aging Bucket</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $agingRows = [
                                    [
                                        'INV-2025-0002',
                                        'BIN-000124',
                                        'Mercury Drug',
                                        'San Isidro',
                                        'Renewal',
                                        '2025-01-08',
                                        '2025-01-23',
                                        18600,
                                        60,
                                        '31–60',
                                    ],
                                    [
                                        'INV-2025-0003',
                                        'BIN-000125',
                                        'Sari-Sari ni Aling Nena',
                                        'San Roque',
                                        'New',
                                        '2025-01-12',
                                        '2025-01-27',
                                        3250,
                                        90,
                                        '61–90',
                                    ],
                                    [
                                        'INV-2025-0010',
                                        'BIN-000138',
                                        'ABC Water Refilling',
                                        'Poblacion',
                                        'Renewal',
                                        '2025-02-01',
                                        '2025-02-16',
                                        5400,
                                        25,
                                        '0–30',
                                    ],
                                    [
                                        'INV-2025-0015',
                                        'BIN-000145',
                                        'XYZ Printing',
                                        'San Isidro',
                                        'Renewal',
                                        '2025-02-10',
                                        '2025-02-25',
                                        12400,
                                        110,
                                        '90+',
                                    ],
                                    [
                                        'INV-2025-0018',
                                        'BIN-000149',
                                        'Kusina ni Mang Bert',
                                        'Poblacion',
                                        'Additional Line',
                                        '2025-02-15',
                                        '2025-03-02',
                                        6800,
                                        15,
                                        '0–30',
                                    ],
                                ];
                                function bucketBadge($b)
                                {
                                    return match ($b) {
                                        '0–30'
                                            => '<span class="badge bg-success-subtle text-success border border-success-subtle">0–30</span>',
                                        '31–60'
                                            => '<span class="badge bg-warning-subtle text-warning border border-warning-subtle">31–60</span>',
                                        '61–90'
                                            => '<span class="badge bg-orange border border-warning-subtle text-dark">61–90</span>',
                                        '90+' => '<span class="badge bg-danger">90+</span>',
                                        default => '<span class="badge bg-secondary">' . $b . '</span>',
                                    };
                                }
                            @endphp
                            @foreach ($agingRows as $r)
                                <tr>
                                    <td>{{ $r[0] }}</td>
                                    <td>{{ $r[1] }}</td>
                                    <td>{{ $r[2] }}</td>
                                    <td>{{ $r[3] }}</td>
                                    <td>{{ $r[4] }}</td>
                                    <td>{{ \Carbon\Carbon::parse($r[5])->format('M d, Y') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($r[6])->format('M d, Y') }}</td>
                                    <td class="text-end">{{ number_format($r[7], 2) }}</td>
                                    <td class="text-center">{{ $r[8] }}</td>
                                    <td>{!! bucketBadge($r[9]) !!}</td>
                                    <td class="text-center">
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary" data-bs-toggle="modal"
                                                data-bs-target="#followUpModal"><i class="bi bi-envelope"></i></button>
                                            <button class="btn btn-outline-success"><i class="bi bi-cash-coin"></i></button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="7" class="text-end">Total</th>
                                <th class="text-end">
                                    ₱ {{ number_format(array_sum(array_column($agingRows, 7)), 2) }}
                                </th>
                                <th class="text-center">{{ array_sum(array_column($agingRows, 8)) }}</th>
                                <th colspan="2"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Follow Up Modal (Static) --}}
    <div class="modal fade" id="followUpModal" tabindex="-1" aria-labelledby="followUpLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="followUpLabel" class="modal-title"><i class="bi bi-envelope me-2"></i>Send Reminder</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2 small text-muted">To (Taxpayer Email)</div>
                    <input class="form-control mb-3" type="email" value="taxpayer@example.com">
                    <div class="mb-2 small text-muted">Message</div>
                    <textarea class="form-control" rows="4">Good day! This is a friendly reminder regarding your unpaid business permit invoice. Kindly settle on or before the due date indicated. Thank you.</textarea>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary"><i class="bi bi-send me-1"></i>Send</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            const table = $('#agingTable').DataTable({
                pageLength: 10,
                order: [
                    [8, 'desc']
                ], // sort by Days Past Due
                columnDefs: [{
                        targets: [-1],
                        orderable: false,
                        searchable: false
                    },
                    {
                        targets: [7],
                        className: 'text-end'
                    },
                    {
                        targets: [8],
                        className: 'text-center'
                    }
                ]
            });

            // Simple client-side filter for the Aging Bucket select (static MVP)
            $('#agingBucketFilter').on('change', function() {
                const val = $(this).val();
                if (!val) {
                    table.column(9).search('').draw();
                } else {
                    // exact match search
                    table.column(9).search('^' + val.replace('+', '\\+') + '$', true, false).draw();
                }
            });
        });
    </script>
@endpush