@extends('layouts.finance')

@section('title', 'Transaction Detail')
@section('subtitle', 'Full details for transaction #' . $transaction->id)

@section('content')
@php
    $txKind     = $transaction->metadata['tx_kind'] ?? ($transaction->type === 'income' ? 'Deposit' : 'Payment');
    $txCurrency = $transaction->bankAccount?->currency ?? $transaction->metadata['currency'] ?? 'USD';
    $txStatus   = $transaction->metadata['status']   ?? 'Cleared';
    $displayConversionRate = $transaction->metadata['bank_fx_rate'] ?? $transaction->conversion_rate;
    $displayRateLabel = isset($transaction->metadata['bank_fx_rate'])
        ? 'Conversion Rate'
        : 'Conversion Rate';
    $isIn       = in_array($txKind, ['Deposit', 'Receipt'], true);
    $isOut      = in_array($txKind, ['Withdrawal', 'Payment'], true);
    $amtColor   = $isIn ? '#10b981' : ($isOut ? '#ef4444' : '#6b7280');
    $sign       = $isIn ? '+' : ($isOut ? '−' : '');
    $statusPill = match($txStatus) {
        'Cleared' => 'pill-green',
        'Pending' => 'pill-amber',
        default   => 'pill-red',
    };
    $fmtAmount  = number_format((float) $transaction->amount, 2);
    // Fee applied to this receipt (inline "+ Fee" or the edit form). The stored
    // amount is already net of it, so show gross → fee → net to explain the gap.
    $feeAmount  = isset($transaction->metadata['fee_amount']) && is_numeric($transaction->metadata['fee_amount'])
        ? (float) $transaction->metadata['fee_amount']
        : 0.0;
    $feeGross   = isset($transaction->metadata['gross_amount']) && is_numeric($transaction->metadata['gross_amount'])
        ? (float) $transaction->metadata['gross_amount']
        : (float) $transaction->amount;
    $feeBaseRate = isset($transaction->metadata['base_conversion_rate']) && is_numeric($transaction->metadata['base_conversion_rate'])
        ? (float) $transaction->metadata['base_conversion_rate']
        : null;
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-3 mb-5">
    <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>
            Transactions
        </span>
    </a>
    <div class="text-sm" style="color:var(--muted)">
        Transactions / <span style="color:var(--text);font-weight:600">Detail #{{ $transaction->id }}</span>
    </div>
</div>

<div style="max-width:680px">

    {{-- Amount hero card — matches Figma gradient amount block --}}
    <div style="background:linear-gradient(135deg,{{ $amtColor }}15,#ffffff);border:1px solid {{ $amtColor }}40;border-radius:12px;padding:20px 22px;margin-bottom:20px">
        <div class="section-title">Amount</div>
        <div style="font-size:28px;font-weight:800;color:{{ $amtColor }};margin-top:4px;letter-spacing:-.5px">
            {{ $sign }}{{ $txCurrency }} {{ $fmtAmount }}
        </div>
        <div class="text-xs" style="color:var(--muted);margin-top:4px">
            {{ $txKind }} &middot; {{ $txCurrency }}
        </div>
        @if($feeAmount > 0)
            <div class="text-xs" style="color:var(--muted);margin-top:8px;line-height:1.7">
                Received (gross): <strong>{{ $txCurrency }} {{ number_format($feeGross, 2) }}</strong><br>
                Fee: <strong>&minus; {{ $txCurrency }} {{ number_format($feeAmount, 2) }}</strong><br>
                Net credited: <strong>{{ $txCurrency }} {{ $fmtAmount }}</strong>
                @if($feeBaseRate)
                    <br>Rate before fee: <strong>{{ number_format($feeBaseRate, 4, '.', '') }}</strong>
                @endif
            </div>
        @endif
    </div>

    {{-- Detail card --}}
    <div class="card p-0" style="overflow:hidden">

        @php
            /**
             * Renders a detail row only when $value is non-empty.
             * All values are passed through Blade's {{ }} escaping —
             * never {!! !!} on user-supplied data.
             */
            $detailRow = function(string $label, $value) {
                if ($value === null || $value === '' || $value === '—') {
                    return '';
                }
                return $label . '|||' . $value;
            };

            $rows = array_filter([
                ['Date',        $transaction->transaction_date?->format('d M Y')],
                ['Type',        $txKind],
                ['Transaction ID', $transaction->transaction_id],
                ['Account',     $transaction->bankAccount
                    ? $transaction->bankAccount->name . ' · ' . $transaction->bankAccount->bank_name
                    : null],
                ['Currency',    $txCurrency],
                [$displayRateLabel, $displayConversionRate !== null && $displayConversionRate !== ''
                    ? number_format((float) $displayConversionRate, 2, '.', '')
                    : null],
                ['Reference',   $transaction->reference],
                ['Counterparty',$transaction->counterparty],
                ['Description', $transaction->description],
                ['Source',      $transaction->source],
                ['Voucher',     $transaction->voucherProduct?->name],
                ['Recorded by', $transaction->creator
                    ? $transaction->creator->name . ' on ' . $transaction->created_at->format('d M Y H:i')
                    : null],
            ], fn($r) => ! empty($r[1]));
        @endphp

        <div style="padding:0">
            @foreach($rows as [$label, $value])
                <div style="display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border-2)">
                    <div class="section-title" style="margin:0;padding-top:1px">{{ $label }}</div>
                    <div style="font-weight:500;font-size:13.5px;color:var(--text)">{{ $value }}</div>
                </div>
            @endforeach

            {{-- Status row --}}
            <div style="display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 20px">
                <div class="section-title" style="margin:0;padding-top:1px">Status</div>
                <div><span class="pill {{ $statusPill }}">{{ $txStatus }}</span></div>
            </div>
        </div>
    </div>

    {{-- Delete action — CSRF-protected form --}}
    <div style="margin-top:20px;display:flex;gap:10px;align-items:center">
        <a href="{{ route('finance.transactions') }}" class="btn">
            Back to list
        </a>
        @if($txStatus === 'Pending')
            <form method="POST" action="{{ route('finance.transactions.approve', $transaction) }}" style="display:inline">
                @csrf
	                @if($transaction->source === 'linked_bank_transfer' || $transaction->source === 'credit_card_payment')
	                    <input class="field" name="approve_amount" type="number" min="0.01" step="0.01" placeholder="Approval amount (blank = all)" style="width:210px;height:38px;display:inline-block">
	                @endif
                    <input class="field" name="approve_date" type="date" required style="width:160px;height:38px;display:inline-block">
	                <button type="submit"
                        class="btn btn-primary"
                        onclick="return confirm('Approve and post this transaction? Linked entries will be approved together.')">
                    Approve Transaction
                </button>
            </form>
        @endif
        <form method="POST" action="{{ route('finance.transactions.destroy', $transaction) }}" style="display:inline">
            @csrf
            @method('DELETE')
            <button type="submit"
                    class="btn btn-danger"
                    onclick="return confirm('Permanently delete transaction #{{ $transaction->id }}? This cannot be undone.')">
                Delete Transaction
            </button>
        </form>
    </div>

</div>
@endsection