@extends('backend.layout.exposcale')

@section('page_title', 'Wallet Withdraw Requests')

@section('content')
<div class="page-body" style="padding: 20px;">

  <!-- Wallet Withdrawals -->
  <div style="background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;">
    <div style="overflow-x: auto;">
      <table style="width: 100%; border-collapse: collapse; font-size: 12px; text-align: left;">
        <thead>
          <tr style="background: var(--card2); border-bottom: 1px solid var(--border);">
            <th style="padding: 12px 16px; font-weight: 600; color: var(--muted2);">ID</th>
            <th style="padding: 12px 16px; font-weight: 600; color: var(--muted2);">Date</th>
            <th style="padding: 12px 16px; font-weight: 600; color: var(--muted2);">Client</th>
            <th style="padding: 12px 16px; font-weight: 600; color: var(--muted2);">Amount</th>
            <th style="padding: 12px 16px; font-weight: 600; color: var(--muted2);">Status</th>
            <th style="padding: 12px 16px; font-weight: 600; color: var(--muted2);">Actions</th>
          </tr>
        </thead>
        <tbody>
          @forelse($withdrawals as $wd)
          <tr style="border-bottom: 1px solid var(--border);">
            <td style="padding: 12px 16px; font-family: monospace; color: var(--pl);">#{{ $wd->id }}</td>
            <td style="padding: 12px 16px; color: var(--text);">
              {{ $wd->created_at ? $wd->created_at->format('d M Y H:i') : '—' }}
            </td>
            <td style="padding: 12px 16px; color: var(--text); font-weight: 500;">
              {{ $wd->user ? trim($wd->user->first_name . ' ' . $wd->user->last_name) : 'Unknown' }}
            </td>
            <td style="padding: 12px 16px; font-weight: 700; color: var(--red);">
              {{ $wd->currency }} {{ number_format($wd->amount, 2) }}
            </td>
            <td style="padding: 12px 16px;">
              @php
                $statusColor = match(strtolower($wd->status)) {
                  'completed', 'approved' => 'var(--green)',
                  'pending', 'processing' => 'var(--amber)',
                  'failed', 'rejected'    => 'var(--red)',
                  default                 => 'var(--muted2)'
                };
              @endphp
              <span style="padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; background: {{ $statusColor }}22; color: {{ $statusColor }}; text-transform: uppercase;">
                {{ $wd->status }}
              </span>
            </td>
            <td style="padding: 12px 16px;">
              <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                <button onclick="openUserModal({{ $wd->user_id }})" style="padding: 6px 10px; background: var(--card2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer;">👤 User Details</button>
                <button onclick="openBankModal({{ $wd->bank_account_id }})" style="padding: 6px 10px; background: var(--card2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer;">🏦 Bank Account</button>
                @if(!in_array(strtolower($wd->status), ['rejected', 'completed', 'approved']))
                <button onclick="rejectWithdrawal({{ $wd->id }}, this)" style="padding: 6px 10px; background: #dc262618; border: 1px solid var(--red); color: var(--red); border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer;">✕ Reject</button>
                <button onclick="approveWithdrawal({{ $wd->id }}, this)" style="padding: 6px 10px; background: #16a34a18; border: 1px solid var(--green); color: var(--green); border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer;">✓ Approve</button>
                @endif
              </div>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="6" style="text-align: center; padding: 30px; color: var(--muted);">No withdrawal requests found.</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <!-- Pagination -->
    @if($withdrawals->hasPages())
    <div style="padding: 14px 20px; border-top: 1px solid var(--border);">
      {{ $withdrawals->links('pagination::bootstrap-4') }}
    </div>
    @endif
  </div>

</div>

<!-- ── Modals ────────────────────────────────────────────────────────────── -->
<!-- Modal Backdrop -->
<div id="wr-modal-backdrop" style="display:none; position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.5);" onclick="closeWrModals()"></div>

<!-- User Details Modal -->
<div id="wr-user-modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9999; background:var(--card); border:1px solid var(--border); border-radius:12px; width:400px; max-width:96vw; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.4);">
  <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
    <span style="font-size:16px; font-weight:700;">User Details</span>
    <button onclick="closeWrModals()" style="background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;">✕</button>
  </div>
  <div id="wr-user-loading" style="text-align:center; padding:20px; color:var(--muted);">Loading...</div>
  <div id="wr-user-content" style="display:none; font-size:13px;">
    <div style="display:grid; gap:12px;">
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">Name:</span><strong id="um-name"></strong>
      </div>
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">Email:</span><strong id="um-email"></strong>
      </div>
      <div style="display:flex; justify-content:space-between;">
        <span style="color:var(--muted);">Joined:</span><strong id="um-joined"></strong>
      </div>
    </div>
  </div>
</div>

<!-- Bank Account Details Modal -->
<div id="wr-bank-modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9999; background:var(--card); border:1px solid var(--border); border-radius:12px; width:440px; max-width:96vw; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.4);">
  <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
    <span style="font-size:16px; font-weight:700;">Bank Account Details</span>
    <button onclick="closeWrModals()" style="background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;">✕</button>
  </div>
  <div id="wr-bank-loading" style="text-align:center; padding:20px; color:var(--muted);">Loading...</div>
  <div id="wr-bank-content" style="display:none; font-size:13px;">
    <div style="display:grid; gap:12px;">
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">Account Holder:</span><strong id="bm-holder"></strong>
      </div>
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">Bank Name:</span><strong id="bm-bank"></strong>
      </div>
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">Currency:</span><strong id="bm-currency" style="color:var(--pl);"></strong>
      </div>
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">IBAN:</span><strong id="bm-iban" style="font-family:monospace;"></strong>
      </div>
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">SWIFT/BIC:</span><strong id="bm-swift" style="font-family:monospace;"></strong>
      </div>
      <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px;">
        <span style="color:var(--muted);">Account Number:</span><strong id="bm-acc"></strong>
      </div>
      <div style="display:flex; justify-content:space-between;">
        <span style="color:var(--muted);">Routing Number:</span><strong id="bm-routing"></strong>
      </div>
    </div>
  </div>
</div>
@endsection

@section('page_scripts')
<script>
  function closeWrModals() {
    document.getElementById('wr-modal-backdrop').style.display = 'none';
    document.getElementById('wr-user-modal').style.display     = 'none';
    document.getElementById('wr-bank-modal').style.display     = 'none';
  }

  function rejectWithdrawal(id, btn) {
    if (!confirm('Reject this withdrawal request?')) return;
    btn.disabled = true;
    btn.textContent = 'Rejecting…';

    fetch(`/wallet-requests/${id}/reject`, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Accept': 'application/json',
      },
    })
    .then(r => r.json())
    .then(res => {
      if (res.success) {
        // Update the status badge in the same row
        const row   = btn.closest('tr');
        const badge = row.querySelector('span[style*="text-transform:uppercase"]');
        if (badge) {
          badge.textContent = 'REJECTED';
          badge.style.background = '#dc262622';
          badge.style.color      = 'var(--red)';
        }
        // Hide the Reject & Approve buttons
        btn.closest('div').querySelectorAll('button[onclick*="rejectWithdrawal"], button[onclick*="approveWithdrawal"]').forEach(b => b.remove());
      } else {
        btn.disabled = false;
        btn.textContent = '✕ Reject';
        alert(res.message || 'Failed to reject.');
      }
    })
    .catch(() => {
      btn.disabled = false;
      btn.textContent = '✕ Reject';
      alert('Error connecting to server.');
    });
  }

  function approveWithdrawal(id, btn) {
    if (!confirm('Approve this withdrawal and process the Airwallex payout?')) return;
    btn.disabled = true;
    btn.textContent = 'Processing…';

    fetch(`/wallet-requests/${id}/approve`, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Accept': 'application/json',
      },
    })
    .then(r => r.json())
    .then(res => {
      if (res.success) {
        const row   = btn.closest('tr');
        const badge = row.querySelector('span[style*="text-transform:uppercase"]');
        if (badge) {
          badge.textContent      = 'APPROVED';
          badge.style.background = '#16a34a22';
          badge.style.color      = 'var(--green)';
        }
        btn.closest('div').querySelectorAll('button[onclick*="rejectWithdrawal"], button[onclick*="approveWithdrawal"]').forEach(b => b.remove());
      } else {
        btn.disabled    = false;
        btn.textContent = '✓ Approve';
        alert(res.message || 'Payment failed.');
      }
    })
    .catch(() => {
      btn.disabled    = false;
      btn.textContent = '✓ Approve';
      alert('Error connecting to server.');
    });
  }


  function openUserModal(id) {
    if(!id) { alert("No user associated."); return; }
    document.getElementById('wr-modal-backdrop').style.display  = 'block';
    document.getElementById('wr-user-modal').style.display      = 'block';
    document.getElementById('wr-user-loading').style.display    = 'block';
    document.getElementById('wr-user-content').style.display    = 'none';

    fetch(`/wallet-requests/user/${id}`)
      .then(r => r.json())
      .then(res => {
        if(res.success) {
          document.getElementById('um-name').textContent   = res.data.name;
          document.getElementById('um-email').textContent  = res.data.email;
          document.getElementById('um-joined').textContent = res.data.created_at;
          document.getElementById('wr-user-loading').style.display = 'none';
          document.getElementById('wr-user-content').style.display = 'block';
        } else {
          document.getElementById('wr-user-loading').textContent = res.message || 'Error loading data';
        }
      })
      .catch(() => {
        document.getElementById('wr-user-loading').textContent = 'Error connecting to server';
      });
  }

  function openBankModal(id) {
    if(!id) { alert("No bank account associated."); return; }
    document.getElementById('wr-modal-backdrop').style.display  = 'block';
    document.getElementById('wr-bank-modal').style.display      = 'block';
    document.getElementById('wr-bank-loading').style.display    = 'block';
    document.getElementById('wr-bank-content').style.display    = 'none';

    fetch(`/wallet-requests/bank/${id}`)
      .then(r => r.json())
      .then(res => {
        if(res.success) {
          document.getElementById('bm-holder').textContent   = res.data.account_holder;
          document.getElementById('bm-bank').textContent     = res.data.bank_name;
          document.getElementById('bm-currency').textContent = res.data.currency;
          document.getElementById('bm-iban').textContent     = res.data.iban;
          document.getElementById('bm-swift').textContent    = res.data.swift_bic;
          document.getElementById('bm-acc').textContent      = res.data.account_number;
          document.getElementById('bm-routing').textContent  = res.data.routing_number;
          document.getElementById('wr-bank-loading').style.display = 'none';
          document.getElementById('wr-bank-content').style.display = 'block';
        } else {
          document.getElementById('wr-bank-loading').textContent = res.message || 'Error loading data';
        }
      })
      .catch(() => {
        document.getElementById('wr-bank-loading').textContent = 'Error connecting to server';
      });
  }
</script>
@endsection