<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 
  <title>Bean Drivin | Record</title> 
  <link rel="stylesheet" href="/static/home/css/reset.css"> 
  <link rel="stylesheet" href="/static/home/css/style.css"> 
  <link rel="stylesheet" href="/static/home/layui/css/layui.css"> 
  <style>
    .list-bot { display: flex; justify-content: space-between; align-items: center; }
    .list-bot-left { flex: 1; }
    .list-bot-right { text-align: right; }
    .status-success { color: #00A478; font-weight: bold; }  /* Green for success */
    .status-pending { color: #E6A23C; font-weight: bold; }  /* Orange for pending */
    .status-failed  { color: #F56C6C; font-weight: bold; }  /* Red for failed */
  </style>
</head> 
<body class="huiBg"> 
  <!-- Top Bar -->
  <div class="top"> 
    <a href="{{route('dashboard')}}" class="topLeft"> 
      <i class="layui-icon layui-icon-left"></i> 
    </a> 
    <div class="topTit">Record</div> 
  </div> 

  <div class="history-main"> 
    <!-- Tabs -->
    <div class="record-tab"> 
      <a href="javascript:void(0);" class="active" data-tab="account">Account</a> 
      <a href="javascript:void(0);" data-tab="recharge">Recharge</a> 
      <a href="javascript:void(0);" data-tab="withdraw">Withdraw</a> 
    </div> 

    <!-- Account Records -->
    <div class="history-list" id="account">
      @foreach(\App\Models\UserLedger::where('user_id', auth()->id())->orderByDesc('id')->get() as $element)
      <div class="list-info">
        <div class="list-bot">
          <div class="list-bot-left">
            <h3>{{ $element->remark }}</h3>
            <h2>
              {{ $element->amount >= 0 ? '+' : '-' }}{{ price(abs($element->amount)) }}
            </h2>
            <p>{{ $element->created_at }}</p>
          </div>
        </div>
      </div>
      @endforeach
    </div> 

    <!-- Recharge Records -->
    <div class="history-list" id="recharge" style="display:none;">
      @foreach(\App\Models\Deposit::where('user_id', auth()->id())->orderByDesc('id')->get() as $element)
      <div class="list-info">
        <div class="list-bot">
          <div class="list-bot-left">
            <h3>Deposit</h3>
            <h2>+{{ price($element->amount) }}</h2>
            <p>{{ $element->created_at }}</p>
          </div>
          <div class="list-bot-right">
            <span class="
              @if($element->status == 'success') status-success
              @elseif($element->status == 'pending') status-pending
              @else status-failed
              @endif
            ">
              {{ ucfirst($element->status) }}
            </span>
          </div>
        </div>
      </div>
      @endforeach
    </div> 

    <!-- Withdraw Records -->
    <div class="history-list" id="withdraw" style="display:none;">
      @foreach(\App\Models\Withdrawal::where('user_id', auth()->id())->orderByDesc('id')->get() as $element)
      <div class="list-info">
        <div class="list-bot">
          <div class="list-bot-left">
            <h3>Withdraw</h3>
            <h2>-{{ price($element->amount) }}</h2>
            <p>{{ $element->created_at }}</p>
          </div>
          <div class="list-bot-right">
            <span class="
              @if($element->status == 'success') status-success
              @elseif($element->status == 'pending') status-pending
              @else status-failed
              @endif
            ">
              {{ ucfirst($element->status) }}
            </span>
          </div>
        </div>
      </div>
      @endforeach
    </div> 

    <!-- Footer -->
    <div class="dropload-down">
      <div class="dropload-nodata">none more</div>
    </div>
  </div> 

  <!-- Minimal Tab Switch -->
  <script>
    document.querySelectorAll('.record-tab a').forEach(tab => {
      tab.addEventListener('click', function() {
        document.querySelectorAll('.record-tab a').forEach(a => a.classList.remove('active'));
        document.querySelectorAll('.history-list').forEach(list => list.style.display = "none");
        this.classList.add('active');
        document.getElementById(this.dataset.tab).style.display = "block";
      });
    });
  </script>
</body>
</html>
