@extends('layouts.finance')

@section('title', 'Credit Cards & Debt')
@section('subtitle', 'Cards, loans, lines of credit, and debt utilization')

@section('content')
@php
    $cardDebtAmount = fn($c) => abs((float) $c->payable_balance);
    $ccBal = $cards->sum(fn($c) => $metrics->usd($cardDebtAmount($c), $c->currency));
    $ccLim = $cards->sum(fn($c) => $metrics->usd($c->credit_limit, $c->currency));
    $debtBal = $debts->sum(fn($d) => $metrics->usd($d->outstanding_balance, $d->currency));
    $utilization = $ccLim > 0 ? ($ccBal / $ccLim) * 100 : 0;
@endphp

<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
    <div class="card kpi-card"><div class="kpi-label">Total Debt</div><div class="kpi-value" style="color:#e11d48">{{ $metrics->money($ccBal + $debtBal) }}</div></div>
    <div class="card kpi-card"><div class="kpi-label">Credit Card Balances</div><div class="kpi-value" style="color:#ef4444">{{ $metrics->money($ccBal) }}</div></div>
    <div class="card kpi-card"><div class="kpi-label">Credit Card Limit</div><div class="kpi-value">{{ $metrics->money($ccLim) }}</div></div>
    <div class="card kpi-card"><div class="kpi-label">Avg. Utilization</div><div class="kpi-value">{{ number_format($utilization, 1) }}%</div></div>
</div>

<div class="card mb-5">
    <div class="flex items-center justify-between p-4">
        <h3 class="font-semibold">Credit Cards</h3>
        <a class="btn btn-primary" href="{{ route('finance.liabilities.cards.create') }}">+ Add Card</a>
    </div>
    <div class="scrollbar" style="overflow:auto">
        <table>
            <thead>
                <tr>
                    <th>Issuer</th>
                    <th>Card Name</th>
                    <th>Holder</th>
                    <th style="width:130px">Limit</th>
                    <th style="width:130px">Opening</th>
                    <th style="width:130px">Payable</th>
                    <th style="width:90px">Cur.</th>
                    <th>Utilization</th>
                    <th>Due Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            @forelse($cards as $card)
                @php
                    $cardPayableDebt = $cardDebtAmount($card);
                    $cardUtil = (float) $card->credit_limit > 0 ? ($cardPayableDebt / (float) $card->credit_limit) * 100 : 0;
                    $days = $card->due_date ? now()->startOfDay()->diffInDays($card->due_date->startOfDay(), false) : null;
                    $statusClass = $days === null ? 'pill' : ($days < 0 ? 'pill-red' : ($days <= 7 ? 'pill-amber' : 'pill-green'));
                    $statusText = $days === null ? 'No date' : ($days < 0 ? 'Overdue '.abs((int) $days).'d' : ((int) $days).'d left');
                    $barColor = $cardUtil > 80 ? '#ef4444' : ($cardUtil > 50 ? '#f59e0b' : '#10b981');
                @endphp
                <tr class="row-hover">
                    <td>{{ $card->issuer }}</td>
                    <td>{{ $card->card_name }}</td>
                    <td>{{ $card->holder }}</td>
                    <td>{{ $metrics->money($card->credit_limit, $card->currency) }}</td>
                    <td>{{ $metrics->money($card->opening_balance ?? 0, $card->currency) }}</td>
                    <td>
                        {{ $metrics->money($cardPayableDebt, $card->currency) }}
                        <a href="{{ route('finance.liabilities.cards.invoices', $card) }}"
                           class="pill pill-blue"
                           style="display:inline-block;margin-top:4px;font-size:11px;text-decoration:none"
                           title="View the invoices that make up this payable">
                            {{ $card->invoices_count }} invoice{{ (int) $card->invoices_count === 1 ? '' : 's' }} →
                        </a>
                    </td>
                    <td>{{ $card->currency }}</td>
                    <td>
                        <div style="display:flex;align-items:center;gap:8px">
                            <div style="flex:1;background:#f3f4f6;border-radius:6px;height:6px;overflow:hidden"><div style="background:{{ $barColor }};height:100%;width:{{ min($cardUtil, 100) }}%"></div></div>
                            <span style="font-weight:600;min-width:42px">{{ number_format($cardUtil, 0) }}%</span>
                        </div>
                    </td>
                    <td>
                        {{ $card->due_date ? $card->due_date->format('d M Y') : '-' }}
                        <span class="pill {{ $statusClass }}">{{ $statusText }}</span>
                    </td>
                    <td class="actions">
                        <a href="{{ route('finance.liabilities.cards.edit', $card) }}" class="btn btn-sm">Edit</a>
                        <form method="POST" action="{{ route('finance.liabilities.cards.destroy', $card) }}" style="display:inline">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger" style="padding:4px 8px" onclick="return confirm('Delete this card?')">×</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="10" style="text-align:center;color:var(--muted);padding:32px 10px">No credit cards yet · click <span class="pill">+ Add Card</span> to create one</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="flex items-center justify-between p-4">
        <h3 class="font-semibold">Other Debts (Loans, Lines of Credit)</h3>
        <a class="btn btn-primary" href="{{ route('finance.liabilities.debts.create') }}">+ Add Debt</a>
    </div>
    <div class="scrollbar" style="overflow:auto">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Lender</th>
                    <th style="width:120px">Created Date</th>
                    <th style="width:130px">Outstanding</th>
                    <th style="width:90px">Cur.</th>
                    <th>Interest Rate</th>
                    <th style="width:130px">Monthly Payment</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            @forelse($liabilityRows as $row)
                <tr class="row-hover">
                    <td>{{ $row['name'] }}</td>
                    <td>{{ $row['type'] }}</td>
                    <td>{{ $row['lender'] }}</td>
                    <td style="white-space:nowrap;color:var(--muted);font-size:12px">
                        {{ $row['created_at']?->format('d M Y') ?? '-' }}
                    </td>
                    <td>{{ $metrics->money($row['outstanding'], $row['currency']) }}</td>
                    <td>{{ $row['currency'] }}</td>
                    <td>{{ $row['interest_rate'] }}</td>
                    <td>{{ $row['monthly_payment'] }}</td>
                    <td class="actions">
                        @if($row['kind'] === 'credit-card')
                            <a href="{{ $row['invoices_url'] }}" class="btn btn-sm">Invoices</a>
                            <a href="{{ $row['edit_url'] }}" class="btn btn-sm">Edit</a>
                        @elseif($row['kind'] === 'credit-card-transaction-debt')
                            <a href="{{ $row['view_url'] }}" class="btn btn-sm">View</a>
                            <a href="{{ $row['edit_url'] }}" class="btn btn-sm">Edit</a>
                        @else
                            <a href="{{ $row['edit_url'] }}" class="btn btn-sm">Edit</a>
                            <form method="POST" action="{{ $row['delete_url'] }}" style="display:inline">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger" style="padding:4px 8px" onclick="return confirm('Delete this debt?')">×</button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="9" style="text-align:center;color:var(--muted);padding:32px 10px">No debts yet · click <span class="pill">+ Add Debt</span> to create one</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection