@extends('layouts.app')
@section('title', $transaction->reference)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $transaction->reference }}</h1>
            <p>
                <a href="{{ route('customers.show', $transaction->customer) }}">{{ $transaction->customer->display_name }}</a>
                &middot; <span class="badge {{ status_color($transaction->status === 'success' ? 'paid' : $transaction->status) }}">
                    <span class="dot"></span>{{ $transaction->status }}</span>
            </p>
        </div>
        <div class="page-actions">
            <a href="{{ route('payments.receipt', $transaction) }}" class="btn secondary" target="_blank">Receipt</a>
            @if ($transaction->status === 'success')
                <form method="POST" action="{{ route('payments.reverse', $transaction) }}"
                      data-confirm="Reverse this payment? All invoice allocations will be unwound.">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn danger">Reverse payment</button>
                </form>
            @endif
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Amount received', 'value' => money($transaction->amount, $transaction->currency), 'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Allocated', 'value' => money($transaction->amount_allocated, $transaction->currency), 'variant' => 'info', 'href' => '#allocations'])
        @include('components.kpi', ['label' => 'Unallocated', 'value' => money($transaction->unallocated_amount, $transaction->currency),
            'variant' => $transaction->unallocated_amount > 0 ? 'warn' : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Gateway fee', 'value' => money($transaction->fee_amount, $transaction->currency),
            'delta' => $transaction->net_amount.' net', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Transaction detail</h3></div>
            <div class="card-body">
                <dl class="dl">
                    <dt>Reference</dt><dd class="mono">{{ $transaction->reference }}</dd>
                    <dt>Paid at</dt><dd>{{ $transaction->paid_at?->format('d M Y H:i') ?: 'Not confirmed' }}</dd>
                    <dt>Method</dt><dd>{{ title_case_words($transaction->method) }}</dd>
                    <dt>Payer reference</dt><dd class="mono">{{ $transaction->payer_reference ?: '—' }}</dd>
                    <dt>Gateway</dt><dd>{{ $transaction->gateway?->name ?: 'Manual entry' }}</dd>
                    <dt>Gateway reference</dt><dd class="mono">{{ $transaction->gateway_reference ?: '—' }}</dd>
                    <dt>Status</dt><dd><span class="badge {{ status_color($transaction->status === 'success' ? 'paid' : $transaction->status) }}">{{ $transaction->status }}</span></dd>
                    <dt>Net of fees</dt><dd>{{ money($transaction->net_amount, $transaction->currency) }}</dd>
                    <dt>Recorded by</dt><dd>{{ $transaction->collector?->name ?? 'Gateway webhook' }}</dd>
                    <dt>Refunded</dt><dd>{{ $transaction->refunds->count() > 0 ? money($transaction->refunds->sum('amount'), $transaction->currency) : 'None' }}</dd>
                </dl>
                @if ($transaction->notes)
                    <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                    <div class="small muted mb-1"><strong>Notes</strong></div>
                    <p class="mb-0" style="white-space:pre-wrap;">{{ $transaction->notes }}</p>
                @endif
            </div>
        </div>

        <div class="card" id="allocations">
            <div class="card-head"><h3>Invoice allocations</h3>
                <span class="sub">{{ $transaction->allocations->count() }} invoice(s)</span></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Invoice</th><th>Amount applied</th><th>Invoice status</th></tr></thead>
                        <tbody>
                        @forelse ($transaction->allocations as $allocation)
                            <tr>
                                <td class="mono"><a href="{{ route('invoices.show', $allocation->invoice) }}">{{ $allocation->invoice->invoice_number }}</a></td>
                                <td class="num strong">{{ money($allocation->amount_allocated, $transaction->currency) }}</td>
                                <td><span class="badge {{ status_color($allocation->invoice->status) }}">{{ $allocation->invoice->status }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="3">
                                @include('components.empty-state', ['icon' => '&#128179;', 'title' => 'Not allocated',
                                    'message' => 'This payment is held as account credit.'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @if ($transaction->raw_response)
        <div class="card">
            <div class="card-head"><h3>Raw gateway payload</h3></div>
            <div class="card-body">
                <pre class="mono" style="font-size:.72rem;background:var(--ink-50);padding:.9rem;border-radius:8px;overflow:auto;max-height:320px;margin:0;">{{ is_string($transaction->raw_response) ? $transaction->raw_response : json_encode($transaction->raw_response, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        </div>
    @endif
@endsection