@extends('layouts.main')
@section('content')
  <style>
    .wallet-header {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      border-radius: 12px;
    }

    .transaction-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
    }

    .credit {
      background-color: rgba(40, 167, 69, 0.1);
      color: #28a745;
    }

    .debit {
      background-color: rgba(220, 53, 69, 0.1);
      color: #dc3545;
    }

    .status-badge {
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .completed {
      background-color: rgba(40, 167, 69, 0.1);
      color: #28a745;
    }

    .pending {
      background-color: rgba(255, 193, 7, 0.1);
      color: #ffc107;
    }
  </style>

  <div class="container py-4">
    <!-- Wallet Balance Section -->
    <div class="wallet-header text-white p-4 mb-4 shadow">
      <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
          <p class="mb-1">Available Balance</p>
          <h2 class="mb-0 fw-bold">&#8377; {{ AmountFormat(Auth::user()->wallet) }}</h2>
        </div>

        <div class="d-flex justify-content-between mt-4">
          <a href="{{ route('wallet.topupForm') }}" class="btn btn-light rounded-pill px-4">
            <i class="fas fa-plus me-2"></i> Add Money
          </a>

        </div>

      </div>


    </div>


    <!-- Transaction History -->
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white border-0 py-3">
        <h5 class="mb-0"> Transactions</h5>
      </div>
      <div class="card-body p-0">
        <div class="list-group list-group-flush">
          <!-- Transaction Item 1 -->
          @forelse ($wallet as $w)
            @php
              $icon = '<div class="transaction-icon credit me-3">
                                    <i class="fas fa-plus"></i>
                                </div>';
              if ($w->type == 'credit' && $w->status == 'completed') {
                  $icon = '<div class="transaction-icon credit me-3">
                                    <i class="fas fa-plus"></i>
                                </div>';
              } elseif ($w->type == 'debit' && $w->status == 'completed') {
                  $icon = '  <div class="transaction-icon debit me-3">
                                    <i class="fas fa-minus"></i>
                                </div>';
              } else {
                  $icon = '  <div class="transaction-icon debit me-3">
                                    <i class="fas fa-x"></i>
                                </div>';
              }
            @endphp

            <div class="list-group-item border-0 py-3 px-4">
              <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                  {!! $icon !!}
                  <div>
                    <h6 class="mb-1">{{ config('constants.source_types.' . $w->source_type) ?? 'Unknown' }}</h6>
                    <p class="mb-0 small text-muted">{{ $w->formatted_created_at }}</p>
                  </div>
                </div>
                @if ($w->type == 'credit')
                  <div class="text-end">
                    <h6 class="mb-1 {{ $w->status == 'completed' ? 'text-success' : 'text-danger' }}">
                      &#8377;{{ $w->amount }}</h6>
                    <span
                      class="status-badge {{ $w->status == 'completed' ? 'completed' : 'pending' }}">{{ ucfirst($w->status) }}</span>
                  </div>
                @elseif($w->type == 'debit')
                  <div class="text-end">
                    <h6 class="mb-1 text-danger">-&#8377;{{ $w->amount }}</h6>
                    <span class="status-badge completed">{{ $w->status }}</span>
                  </div>
                @endif

              </div>
            </div>
          @empty
            <div class="d-flex flex-column align-items-center justify-content-center text-center p-5">
              <img src="https://cdn-icons-png.flaticon.com/512/4076/4076549.png" alt="No Transactions" width="120"
                class="mb-4" style="opacity: 0.8;">
              <h4 class="text-muted mb-2">No Transactions Yet</h4>
              <p class="text-secondary">
                Your wallet is currently empty. Add funds to your wallet.
              </p>
              <a href="{{ route('wallet.topupForm') }}" class="btn btn-primary mt-3">+ Add Money</a>
            </div>
          @endforelse

          <!-- View All Button -->

          {{ $wallet->links('pagination::bootstrap-5') }}





        </div>
      </div>
    </div>
  </div>
@endsection