@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  @if(session('status'))
    <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
      <i class="ti tabler-circle-check me-2"></i> {{ session('status') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <div class="row g-4">
    <div class="col-md-4">
      <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="text-muted mb-0">Wallet Balance</h6>
            <button type="button" class="btn btn-sm btn-primary rounded-pill px-3 fw-bold" data-bs-toggle="modal" data-bs-target="#rechargeWalletModal">
              <i class="ti tabler-plus me-1"></i> Recharge
            </button>
          </div>
          <h2 class="fw-bold mb-1 text-dark">${{ number_format($wallet->balance, 2) }}</h2>
          <span class="badge bg-label-primary">{{ $wallet->currency ?? 'USD' }}</span>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card shadow-sm border-0 rounded-4">
        <div class="card-header bg-transparent border-bottom d-flex align-items-center justify-content-between py-3">
          <h5 class="mb-0 fw-bold">Recent Transactions</h5>
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light"><tr><th>Type</th><th>Amount</th><th>Status</th><th>Description</th><th>Date</th></tr></thead>
            <tbody>
            @forelse($wallet->transactions as $tx)
              <tr>
                <td><span class="badge bg-label-{{ $tx->type === 'deposit' ? 'success' : 'info' }}">{{ ucfirst($tx->type) }}</span></td>
                <td class="fw-bold text-{{ $tx->type === 'deposit' ? 'success' : 'dark' }}">${{ number_format($tx->amount, 2) }}</td>
                <td><span class="badge bg-{{ $tx->status === 'completed' ? 'success' : 'warning' }}-subtle text-{{ $tx->status === 'completed' ? 'success' : 'warning' }}">{{ ucfirst($tx->status) }}</span></td>
                <td>{{ $tx->description }}</td>
                <td class="text-muted small">{{ $tx->created_at->format('Y-m-d H:i') }}</td>
              </tr>
            @empty
              <tr><td colspan="5" class="text-center py-4 text-muted">No transactions yet.</td></tr>
            @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Recharge Wallet Modal -->
<div class="modal fade" id="rechargeWalletModal" tabindex="-1" aria-labelledby="rechargeWalletModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
      <div class="modal-header border-bottom px-4 py-3 bg-light">
        <h5 class="modal-title fw-bold mb-0" id="rechargeWalletModalLabel"><i class="ti tabler-wallet text-primary me-2"></i>Recharge Wallet</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{ route('wallet.recharge') }}">
        @csrf
        <div class="modal-body p-4">
          <label class="form-label fw-semibold">Amount (USD) <span class="text-danger">*</span></label>
          <div class="input-group input-group-lg mb-3">
            <span class="input-group-text bg-white fw-bold">$</span>
            <input type="number" step="0.01" min="0.50" max="50000" name="amount" class="form-control form-control-lg fw-bold" value="10.00" required>
          </div>
          <div class="d-flex flex-wrap gap-2 mb-3">
            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill" onclick="this.form.amount.value='5.00'">+$5</button>
            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill" onclick="this.form.amount.value='10.00'">+$10</button>
            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill" onclick="this.form.amount.value='25.00'">+$25</button>
            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill" onclick="this.form.amount.value='50.00'">+$50</button>
          </div>
          <p class="text-muted small mb-0"><i class="ti tabler-info-circle me-1"></i>Funds will be credited to your wallet balance instantly.</p>
        </div>
        <div class="modal-footer border-top px-4 py-3">
          <button type="button" class="btn btn-light rounded-pill" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold">Recharge Now</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection