@extends('layouts.finance')

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

@section('content')
@php
    $ccBal = $cards->sum(fn($c) => $metrics->usd($c->payable_balance, $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>
        <form method="POST" action="{{ route('finance.liabilities.cards.store') }}">
            @csrf
            <input type="hidden" name="issuer" value="New Issuer">
            <input type="hidden" name="card_name" value="New Card">
            <input type="hidden" name="holder" value="Examism">
            <input type="hidden" name="short_name" value="NEW">
            <input type="hidden" name="color" value="linear-gradient(135deg,#6366f1,#8b5cf6)">
            <input type="hidden" name="credit_limit" value="0">
            <input type="hidden" name="opening_balance" value="0">
            <input type="hidden" name="payable_balance" value="0">
            <input type="hidden" name="currency" value="USD">
            <input type="hidden" name="due_date" value="{{ now()->toDateString() }}">
            <input type="hidden" name="is_active" value="1">
            <button class="btn btn-primary">+ Add Card</button>
        </form>
    </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
                    $cardUtil = (float) $card->credit_limit > 0 ? ((float) $card->payable_balance / (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">
                    <form id="card-{{ $card->id }}" method="POST" action="{{ route('finance.liabilities.cards.update', $card) }}">
                        @csrf
                        @method('PUT')
                    </form>
                    <td><input form="card-{{ $card->id }}" value="{{ $card->issuer }}" name="issuer"></td>
                    <td><input form="card-{{ $card->id }}" value="{{ $card->card_name }}" name="card_name"></td>
                    <td><input form="card-{{ $card->id }}" value="{{ $card->holder }}" name="holder"></td>
                    <td><input form="card-{{ $card->id }}" type="number" value="{{ $card->credit_limit }}" name="credit_limit"></td>
                    <td><input form="card-{{ $card->id }}" type="number" value="{{ $card->opening_balance ?? 0 }}" name="opening_balance"></td>
                    <td><input form="card-{{ $card->id }}" type="number" value="{{ $card->payable_balance }}" name="payable_balance"></td>
                    <td>
                        <select form="card-{{ $card->id }}" name="currency">
                            <option @selected($card->currency === 'USD')>USD</option>
                            <option @selected($card->currency === 'PKR')>PKR</option>
                            <option @selected($card->currency === 'AUD')>AUD</option>
                        </select>
                    </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>
                        <input form="card-{{ $card->id }}" type="date" value="{{ $card->due_date?->toDateString() }}" name="due_date">
                        <span class="pill {{ $statusClass }}">{{ $statusText }}</span>
                    </td>
                    <td>
                        <input form="card-{{ $card->id }}" type="hidden" name="short_name" value="{{ $card->short_name }}">
                        <input form="card-{{ $card->id }}" type="hidden" name="color" value="{{ $card->color }}">
                        <input form="card-{{ $card->id }}" type="hidden" name="is_active" value="{{ $card->is_active ? 1 : 0 }}">
                        <input form="card-{{ $card->id }}" type="hidden" name="notes" value="{{ $card->notes }}">
                        <button form="card-{{ $card->id }}" class="btn" style="padding:4px 10px;font-size:12px">Save</button>
                        <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>
        <form method="POST" action="{{ route('finance.liabilities.debts.store') }}">
            @csrf
            <input type="hidden" name="name" value="New Debt">
            <input type="hidden" name="debt_type" value="Loan">
            <input type="hidden" name="lender" value="Lender">
            <input type="hidden" name="outstanding_balance" value="0">
            <input type="hidden" name="currency" value="USD">
            <input type="hidden" name="interest_rate" value="0">
            <input type="hidden" name="monthly_payment" value="0">
            <input type="hidden" name="is_active" value="1">
            <button class="btn btn-primary">+ Add Debt</button>
        </form>
    </div>
    <div class="scrollbar" style="overflow:auto">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Lender</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($debts as $debt)
                <tr class="row-hover">
                    <form id="debt-{{ $debt->id }}" method="POST" action="{{ route('finance.liabilities.debts.update', $debt) }}">
                        @csrf
                        @method('PUT')
                    </form>
                    <td><input form="debt-{{ $debt->id }}" value="{{ $debt->name }}" name="name"></td>
                    <td><input form="debt-{{ $debt->id }}" value="{{ $debt->debt_type }}" name="debt_type"></td>
                    <td><input form="debt-{{ $debt->id }}" value="{{ $debt->lender }}" name="lender"></td>
                    <td><input form="debt-{{ $debt->id }}" type="number" value="{{ $debt->outstanding_balance }}" name="outstanding_balance"></td>
                    <td>
                        <select form="debt-{{ $debt->id }}" name="currency">
                            <option @selected($debt->currency === 'USD')>USD</option>
                            <option @selected($debt->currency === 'PKR')>PKR</option>
                            <option @selected($debt->currency === 'AUD')>AUD</option>
                        </select>
                    </td>
                    <td><input form="debt-{{ $debt->id }}" type="number" step="0.01" value="{{ $debt->interest_rate }}" name="interest_rate"> %</td>
                    <td>
                        {{ $metrics->money($debt->monthly_payment, $debt->currency) }}
                        <input form="debt-{{ $debt->id }}" type="number" value="{{ $debt->monthly_payment }}" name="monthly_payment" style="display:none">
                    </td>
                    <td>
                        <input form="debt-{{ $debt->id }}" type="hidden" name="is_active" value="{{ $debt->is_active ? 1 : 0 }}">
                        <input form="debt-{{ $debt->id }}" type="hidden" name="notes" value="{{ $debt->notes }}">
                        <button form="debt-{{ $debt->id }}" class="btn" style="padding:4px 10px;font-size:12px">Save</button>
                        <form method="POST" action="{{ route('finance.liabilities.debts.destroy', $debt) }}" style="display:inline">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger" style="padding:4px 8px" onclick="return confirm('Delete this debt?')">×</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" 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