@extends('eliteadmin::layouts.app')

@section('title', 'Transaction Details')

@section('content')
    <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
        <div><h1 class="page-title">Transaction #{{ $transaction->id }}</h1></div>
        <div class="d-flex gap-2">
            @can('finance.transactions.update')
                <a href="{{ route('finance.transactions.edit', $transaction) }}" class="btn btn-primary btn-sm">Edit</a>
            @endcan
            <a href="{{ route('finance.transactions.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <dl class="row mb-0">
                <dt class="col-sm-3">Type</dt>
                <dd class="col-sm-9"><span class="badge bg-{{ $transaction->type->value === 'income' ? 'success' : 'danger' }}">{{ ucfirst($transaction->type->value) }}</span></dd>
                <dt class="col-sm-3">Category</dt>
                <dd class="col-sm-9">{{ $transaction->categoryName() }}</dd>
                <dt class="col-sm-3">Amount</dt>
                <dd class="col-sm-9">{{ platform_money($transaction->amount) }}</dd>
                <dt class="col-sm-3">Date</dt>
                <dd class="col-sm-9">{{ $transaction->transaction_at->format('M j, Y H:i') }}</dd>
                <dt class="col-sm-3">Reference</dt>
                <dd class="col-sm-9">{{ $transaction->reference_number ?? '—' }}</dd>
                <dt class="col-sm-3">Note</dt>
                <dd class="col-sm-9">{{ $transaction->note ?? '—' }}</dd>
            </dl>
        </div>
    </div>
@endsection