@extends('layouts.finance')

@section('title', 'Transactions')
@section('subtitle', 'All deposits, withdrawals, transfers and payments')

@section('content')
@php
    $tiles = [
        'examism' => [
            'title' => 'EXAMISM to BANKS',
            'subtitle' => 'All activity on Examism entity accounts',
            'pill' => 'pill-blue',
            'iconBg' => 'ico-bg-indigo',
            'icon' => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V10l7-5 7 5v11"/><circle cx="12" cy="14" r="2.5"/></svg>',
        ],
        'pakBanks' => [
            'title' => 'PAK BANKS',
            'subtitle' => 'Pakistan bank transactions',
            'pill' => 'pill-amber',
            'iconBg' => 'ico-bg-amber',
            'icon' => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V10l7-5 7 5v11M9 21V13M15 21V13"/></svg>',
        ],
        'wallets' => [
            'title' => 'WALLETS',
            'subtitle' => 'JazzCash, EasyPaisa, Stripe, PayPal, Wise',
            'pill' => 'pill-cyan',
            'iconBg' => 'ico-bg-cyan',
            'icon' => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1"/><path d="M16 12h5v3h-5a1.5 1.5 0 0 1 0-3z"/></svg>',
        ],
        'usBanks' => [
            'title' => 'US BANKS',
            'subtitle' => 'United States bank transactions',
            'pill' => 'pill-blue',
            'iconBg' => 'ico-bg-purple',
            'icon' => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V10l7-5 7 5v11M9 21V13M15 21V13"/></svg>',
        ],
        'invoices' => [
            'title' => 'INVOICES',
            'subtitle' => 'Issued invoices and aging',
            'pill' => 'pill-rose',
            'iconBg' => 'ico-bg-rose',
            'icon' => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>',
        ],
    ];
    $activeTile = $tiles[$bucket] ?? null;
@endphp

@if(! $activeTile)
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
        @foreach($tiles as $key => $tile)
            <a class="tx-tile" href="{{ $key === 'invoices' ? route('finance.invoices') : route('finance.transactions', ['bucket' => $key]) }}">
                <div class="kpi-icon {{ $tile['iconBg'] }} tile-icon">{!! $tile['icon'] !!}</div>
                <div class="tile-title">{{ $tile['title'] }}</div>
                <div class="tile-arrow">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
                </div>
            </a>
        @endforeach
    </div>
    <div class="mt-6 text-center text-xs" style="color:var(--muted)">
        Click any card to view, edit, or add transactions
    </div>
@else
    @php
        $rows = $transactions->getCollection();
        $totalIn = $rows->filter(fn($t) => in_array($t->metadata['tx_kind'] ?? ($t->type === 'income' ? 'Deposit' : 'Payment'), ['Deposit', 'Receipt'], true))
            ->sum(fn($t) => $metrics->usd($t->amount, $t->metadata['currency'] ?? $t->bankAccount?->currency ?? 'USD'));
        $totalOut = $rows->reject(fn($t) => in_array($t->metadata['tx_kind'] ?? ($t->type === 'income' ? 'Deposit' : 'Payment'), ['Deposit', 'Receipt'], true))
            ->sum(fn($t) => $metrics->usd($t->amount, $t->metadata['currency'] ?? $t->bankAccount?->currency ?? 'USD'));
        $net = $totalIn - $totalOut;
    @endphp
    <div class="flex items-center gap-3 mb-4">
        <a class="btn" href="{{ route('finance.transactions') }}">
            <span style="display:inline-flex;align-items:center;gap:6px">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
                Back
            </span>
        </a>
        <div class="text-sm" style="color:var(--muted)">Transactions / <span style="color:var(--text);font-weight:600">{{ $activeTile['title'] }}</span></div>
    </div>

    <div class="card p-5" style="display:flex;flex-direction:column;min-height:380px">
        <div class="flex items-start justify-between mb-3">
            <div class="flex items-center gap-3">
                <div class="kpi-icon {{ $activeTile['iconBg'] }}" style="margin:0">{!! $activeTile['icon'] !!}</div>
                <div>
                    <div class="font-bold text-base">{{ $activeTile['title'] }}</div>
                    <div class="text-xs" style="color:var(--muted)">{{ $activeTile['subtitle'] }}</div>
                </div>
            </div>
            <span class="pill {{ $activeTile['pill'] }}">{{ $transactions->total() }} tx</span>
        </div>

        <div class="grid grid-cols-3 gap-2 mb-3">
            <div class="card p-2" style="background:var(--green-soft);border-color:#a7f3d0">
                <div class="section-title" style="color:#065f46">In</div>
                <div class="font-bold text-sm" style="color:#10b981">{{ $metrics->money($totalIn) }}</div>
            </div>
            <div class="card p-2" style="background:var(--red-soft);border-color:#fecaca">
                <div class="section-title" style="color:#991b1b">Out</div>
                <div class="font-bold text-sm" style="color:#ef4444">{{ $metrics->money($totalOut) }}</div>
            </div>
            <div class="card p-2" style="background:var(--bg-2)">
                <div class="section-title">Net</div>
                <div class="font-bold text-sm" style="color:{{ $net >= 0 ? '#10b981' : '#ef4444' }}">{{ $metrics->money($net) }}</div>
            </div>
        </div>

        <div class="scrollbar" style="flex:1;max-height:340px;overflow:auto;border:1px solid var(--border-2);border-radius:10px">
            <table>
                <thead><tr><th>Date</th><th>Type</th><th>Account</th><th>Description</th><th style="text-align:right">Amount</th><th>Cur</th><th>Status</th><th></th></tr></thead>
                <tbody>
                @forelse($transactions as $transaction)
                    @php
                        $txKind = $transaction->metadata['tx_kind'] ?? ($transaction->type === 'income' ? 'Deposit' : 'Payment');
                        $txCurrency = $transaction->metadata['currency'] ?? $transaction->bankAccount?->currency ?? 'USD';
                        $txStatus = $transaction->metadata['status'] ?? 'Cleared';
                        $isIn = in_array($txKind, ['Deposit', 'Receipt'], true);
                        $amountColor = $isIn ? '#10b981' : '#ef4444';
                    @endphp
                    <tr class="row-hover">
                        <form id="tx-{{ $transaction->id }}" method="POST" action="{{ route('finance.transactions.update', $transaction) }}">@csrf @method('PUT')</form>
                        <td style="width:110px"><input form="tx-{{ $transaction->id }}" type="date" name="transaction_date" value="{{ $transaction->transaction_date?->toDateString() }}" style="font-size:12px"></td>
                        <td style="width:120px"><select form="tx-{{ $transaction->id }}" name="tx_kind" style="font-size:12.5px">@foreach(['Deposit','Withdrawal','Transfer','Payment','Receipt'] as $kind)<option @selected($txKind === $kind)>{{ $kind }}</option>@endforeach</select></td>
                        <td><select form="tx-{{ $transaction->id }}" name="bank_account_id" style="font-size:12.5px">@foreach($bankAccounts as $a)<option value="{{ $a->id }}" @selected($transaction->bank_account_id === $a->id)>{{ $a->name }}</option>@endforeach</select></td>
                        <td><input form="tx-{{ $transaction->id }}" name="description" value="{{ $transaction->description }}" style="font-size:12.5px"></td>
                        <td style="width:130px;color:{{ $amountColor }};font-weight:600;text-align:right;white-space:nowrap">{{ $isIn ? '+' : '-' }}<input form="tx-{{ $transaction->id }}" type="number" step="0.01" min="0.01" name="amount" value="{{ $transaction->amount }}" style="color:{{ $amountColor }};font-weight:600;width:80px;text-align:right"></td>
                        <td style="width:62px"><select form="tx-{{ $transaction->id }}" name="currency" style="font-size:12px">@foreach(['USD','PKR','AUD'] as $cur)<option @selected($txCurrency === $cur)>{{ $cur }}</option>@endforeach</select></td>
                        <td style="width:90px"><select form="tx-{{ $transaction->id }}" name="status" style="font-size:12px">@foreach(['Cleared','Pending','Failed'] as $status)<option @selected($txStatus === $status)>{{ $status }}</option>@endforeach</select></td>
                        <td style="width:90px" class="actions">
                            <button form="tx-{{ $transaction->id }}" class="btn btn-sm">Save</button>
                            <form method="POST" action="{{ route('finance.transactions.destroy', $transaction) }}">@csrf @method('DELETE')<button class="btn btn-sm btn-danger" onclick="return confirm('Delete this transaction?')">×</button></form>
                        </td>
                        <input form="tx-{{ $transaction->id }}" type="hidden" name="source" value="{{ $transaction->source }}">
                        <input form="tx-{{ $transaction->id }}" type="hidden" name="voucher_product_id" value="{{ $transaction->voucher_product_id }}">
                        <input form="tx-{{ $transaction->id }}" type="hidden" name="reference" value="{{ $transaction->reference }}">
                        <input form="tx-{{ $transaction->id }}" type="hidden" name="counterparty" value="{{ $transaction->counterparty }}">
                    </tr>
                @empty
                    <tr><td colspan="8" style="text-align:center;color:var(--muted);padding:32px 10px">No transactions yet · click <span class="pill">+ Add Transaction</span> to create one</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="flex justify-end mt-3">
            <form method="POST" action="{{ route('finance.transactions.store') }}" class="flex items-center gap-2 flex-wrap">
                @csrf
                <input type="hidden" name="transaction_date" value="{{ now()->toDateString() }}">
                <input type="hidden" name="tx_kind" value="Deposit">
                <input type="hidden" name="source" value="{{ $bucket }}">
                <input type="hidden" name="amount" value="1">
                <input type="hidden" name="currency" value="USD">
                <input type="hidden" name="status" value="Pending">
                <input type="hidden" name="description" value="New transaction">
                <input type="hidden" name="voucher_product_id" value="">
                <input type="hidden" name="reference" value="">
                <input type="hidden" name="counterparty" value="">
                <select class="tag-input" name="bank_account_id" style="width:220px">
                    @foreach($bankAccounts as $a)<option value="{{ $a->id }}">{{ $a->name }}</option>@endforeach
                </select>
                <button class="btn btn-primary">+ Add Transaction</button>
            </form>
        </div>
        <div class="card-pad">{{ $transactions->links() }}</div>
    </div>
@endif
@endsection