@extends('layouts.app')
@section('title','Card Transactions')
@section('content')
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;">
  <div class="page-header" style="margin:0;">
    <h1>💳 Card Transactions</h1>
    <p>{{ $card->masked_pan }} · ₦{{ number_format($card->user->getCoins() * 10) }} balance</p>
  </div>
  <a href="{{ route('debit-card.index') }}" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> Back to Card</a>
</div>

<div class="card">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Merchant</th>
          <th>Category</th>
          <th>Amount</th>
          <th>NC Debited</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        @forelse($transactions as $txn)
        <tr>
          <td style="font-size:.78rem;color:var(--muted);white-space:nowrap;">{{ $txn->created_at->format('d M Y, H:i') }}</td>
          <td style="font-weight:600;font-size:.875rem;">{{ $txn->merchant_name ?? '—' }}</td>
          <td style="font-size:.78rem;color:var(--muted);">{{ $txn->merchant_category ?? '—' }}</td>
          <td style="font-weight:800;color:{{ $txn->isCompleted() ? '#f87171' : '#9ca3af' }};">
            {{ $txn->isCompleted() ? '-' : '' }}₦{{ number_format($txn->amount_naira) }}
          </td>
          <td style="font-size:.82rem;color:var(--muted);">{{ $txn->coins_debited }} NC</td>
          <td>
            <span class="badge badge-{{ $txn->isCompleted() ? 'confirmed' : ($txn->isFailed() ? 'rejected' : 'pending') }}">
              {{ ucfirst($txn->status) }}
            </span>
          </td>
        </tr>
        @empty
        <tr><td colspan="6" style="text-align:center;color:var(--muted);padding:3rem;">No card transactions yet.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
  <div style="margin-top:1rem;">{{ $transactions->links() }}</div>
</div>
@endsection