@extends('admin.layout')

@section('title', 'Withdrawals')

@section('content')
<div class="pg-title">Withdrawals</div>
<div class="pg-sub">Manage user withdrawal requests.</div>

@if(session('success'))
<div style="background:var(--green-faint);border:1px solid rgba(26,158,85,.2);border-radius:12px;padding:14px 18px;margin-bottom:24px;display:flex;align-items:center;gap:12px;">
  <svg style="width:20px;height:20px;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
  <span style="font-size:14px;color:var(--green);flex:1;">{{ session('success') }}</span>
</div>
@endif

@if(session('error'))
<div style="background:#f8d7da;border:1px solid rgba(220,53,69,.2);border-radius:12px;padding:14px 18px;margin-bottom:24px;display:flex;align-items:center;gap:12px;">
  <svg style="width:20px;height:20px;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
  <span style="font-size:14px;color:#721c24;flex:1;">{{ session('error') }}</span>
</div>
@endif

<!-- Stats Cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:24px;">
  <div class="card">
    <div class="card-body">
      <div style="font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Total Withdrawals</div>
      <div style="font-size:28px;font-weight:700;color:var(--text);">{{ $stats['total'] }}</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div style="font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Pending</div>
      <div style="font-size:28px;font-weight:700;color:var(--orange);">{{ $stats['pending'] }}</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div style="font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Completed</div>
      <div style="font-size:28px;font-weight:700;color:var(--green);">{{ $stats['completed'] }}</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div style="font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Rejected</div>
      <div style="font-size:28px;font-weight:700;color:var(--red);">{{ $stats['rejected'] }}</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div style="font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Total Amount</div>
      <div style="font-size:28px;font-weight:700;color:var(--text);">¥{{ number_format($stats['total_amount'], 2) }}</div>
    </div>
  </div>
</div>

<!-- Desktop Table View -->
<div class="card desktop-table">
  <div class="card-head">
    <div class="card-title">Withdrawal Requests</div>
    <div style="font-size:13px;color:var(--text-soft);">{{ $withdrawals->total() }} total</div>
  </div>
  <div class="card-body" style="padding:0;overflow-x:auto;">
    <table class="data-table" style="width:100%;min-width:1000px;">
      <thead>
        <tr>
          <th style="width:15%;">Reference</th>
          <th style="width:15%;">User</th>
          <th style="width:12%;">Amount</th>
          <th style="width:20%;">Alipay Account</th>
          <th style="width:10%;">Status</th>
          <th style="width:13%;">Date</th>
          <th style="width:15%;text-align:right;">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($withdrawals as $withdrawal)
        @php
          $alipayData = json_decode($withdrawal->notes, true);
          $alipayAccount = $alipayData['alipay_account'] ?? 'N/A';
          $alipayName = $alipayData['alipay_name'] ?? 'N/A';
        @endphp
        <tr>
          <td>
            <div style="font-family:'Courier New',monospace;font-size:13px;font-weight:600;color:var(--text);">{{ $withdrawal->reference }}</div>
          </td>
          <td>
            <div style="font-weight:600;color:var(--text);">{{ $withdrawal->user->name }}</div>
            <div style="font-size:12px;color:var(--text-soft);">{{ $withdrawal->user->email }}</div>
          </td>
          <td>
            <div style="font-weight:700;color:var(--text);">¥{{ number_format($withdrawal->amount, 2) }}</div>
          </td>
          <td>
            <div style="font-size:13px;color:var(--text);">{{ $alipayName }}</div>
            <div style="font-size:12px;color:var(--text-soft);font-family:'Courier New',monospace;">{{ $alipayAccount }}</div>
          </td>
          <td>
            @if($withdrawal->status === 'pending')
            <span class="badge badge-warning">Pending</span>
            @elseif($withdrawal->status === 'completed')
            <span class="badge badge-success">Completed</span>
            @else
            <span class="badge badge-danger">Rejected</span>
            @endif
          </td>
          <td>
            <div style="font-size:13px;color:var(--text-soft);">{{ $withdrawal->created_at->format('M d, Y') }}</div>
            <div style="font-size:11px;color:var(--text-softer);">{{ $withdrawal->created_at->format('g:i A') }}</div>
          </td>
          <td style="text-align:right;">
            @if($withdrawal->status === 'pending')
            <form action="{{ route('admin.withdrawals.approve', $withdrawal->id) }}" method="POST" style="display:inline-block;margin-right:8px;">
              @csrf
              <button type="submit" style="padding:6px 12px;font-size:13px;font-weight:600;color:#fff;background:var(--green);border:none;border-radius:6px;cursor:pointer;transition:all .2s;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                Approve
              </button>
            </form>
            <form action="{{ route('admin.withdrawals.reject', $withdrawal->id) }}" method="POST" style="display:inline-block;">
              @csrf
              <button type="submit" style="padding:6px 12px;font-size:13px;font-weight:600;color:#fff;background:var(--red);border:none;border-radius:6px;cursor:pointer;transition:all .2s;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'" onclick="return confirm('Are you sure you want to reject this withdrawal?')">
                Reject
              </button>
            </form>
            @else
            <span style="font-size:12px;color:var(--text-soft);">No actions</span>
            @endif
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="7" style="text-align:center;padding:40px 20px;color:var(--text-soft);">
            <svg style="width:48px;height:48px;margin:0 auto 12px;opacity:0.3;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div style="font-size:14px;font-weight:600;margin-bottom:4px;">No withdrawals found</div>
            <div style="font-size:13px;">Withdrawal requests will appear here</div>
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
  @if($withdrawals->hasPages())
  <div class="card-body" style="border-top:1px solid var(--border);">
    {{ $withdrawals->links() }}
  </div>
  @endif
</div>

<!-- Mobile Card View -->
<div class="mobile-cards">
  @forelse($withdrawals as $withdrawal)
  @php
    $alipayData = json_decode($withdrawal->notes, true);
    $alipayAccount = $alipayData['alipay_account'] ?? 'N/A';
    $alipayName = $alipayData['alipay_name'] ?? 'N/A';
  @endphp
  <div class="card" style="margin-bottom:16px;">
    <div class="card-body">
      <!-- Header -->
      <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:12px;">
        <div style="flex:1;">
          <div style="font-family:'Courier New',monospace;font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;">{{ $withdrawal->reference }}</div>
          <div style="font-size:12px;color:var(--text-soft);">{{ $withdrawal->created_at->format('M d, Y g:i A') }}</div>
        </div>
        @if($withdrawal->status === 'pending')
        <span class="badge badge-warning">Pending</span>
        @elseif($withdrawal->status === 'completed')
        <span class="badge badge-success">Completed</span>
        @else
        <span class="badge badge-danger">Rejected</span>
        @endif
      </div>

      <!-- User Info -->
      <div style="padding:12px;background:var(--bg-soft);border-radius:8px;margin-bottom:12px;">
        <div style="font-size:11px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">User</div>
        <div style="font-weight:600;color:var(--text);margin-bottom:2px;">{{ $withdrawal->user->name }}</div>
        <div style="font-size:12px;color:var(--text-soft);">{{ $withdrawal->user->email }}</div>
      </div>

      <!-- Amount -->
      <div style="padding:12px;background:var(--blue-faint);border-radius:8px;margin-bottom:12px;">
        <div style="font-size:11px;color:var(--blue);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Amount</div>
        <div style="font-size:24px;font-weight:700;color:var(--blue);">¥{{ number_format($withdrawal->amount, 2) }}</div>
      </div>

      <!-- Alipay Info -->
      <div style="padding:12px;background:var(--bg-soft);border-radius:8px;margin-bottom:12px;">
        <div style="font-size:11px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Alipay Account</div>
        <div style="font-size:13px;color:var(--text);margin-bottom:2px;">{{ $alipayName }}</div>
        <div style="font-size:12px;color:var(--text-soft);font-family:'Courier New',monospace;">{{ $alipayAccount }}</div>
      </div>

      <!-- Actions -->
      @if($withdrawal->status === 'pending')
      <div style="display:flex;gap:8px;">
        <form action="{{ route('admin.withdrawals.approve', $withdrawal->id) }}" method="POST" style="flex:1;">
          @csrf
          <button type="submit" style="width:100%;padding:10px;font-size:13px;font-weight:600;color:#fff;background:var(--green);border:none;border-radius:8px;cursor:pointer;transition:all .2s;">
            Approve
          </button>
        </form>
        <form action="{{ route('admin.withdrawals.reject', $withdrawal->id) }}" method="POST" style="flex:1;">
          @csrf
          <button type="submit" style="width:100%;padding:10px;font-size:13px;font-weight:600;color:#fff;background:var(--red);border:none;border-radius:8px;cursor:pointer;transition:all .2s;" onclick="return confirm('Are you sure you want to reject this withdrawal?')">
            Reject
          </button>
        </form>
      </div>
      @endif
    </div>
  </div>
  @empty
  <div class="card">
    <div class="card-body" style="text-align:center;padding:40px 20px;">
      <svg style="width:48px;height:48px;margin:0 auto 12px;opacity:0.3;color:var(--text-soft);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <div style="font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;">No withdrawals found</div>
      <div style="font-size:13px;color:var(--text-soft);">Withdrawal requests will appear here</div>
    </div>
  </div>
  @endforelse

  @if($withdrawals->hasPages())
  <div style="margin-top:20px;">
    {{ $withdrawals->links() }}
  </div>
  @endif
</div>

<style>
.desktop-table { display: block; }
.mobile-cards { display: none; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  white-space: nowrap;
}

.badge-success {
  background: var(--green-faint);
  color: var(--green);
}

.badge-warning {
  background: #fff3cd;
  color: #856404;
}

.badge-danger {
  background: #f8d7da;
  color: #721c24;
}

.data-table {
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  background: var(--bg-soft);
}

.data-table tbody tr {
  transition: background 0.2s;
}

.data-table tbody tr:hover {
  background: var(--bg-soft);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 900px) {
  .desktop-table { display: none; }
  .mobile-cards { display: block; }
}
</style>
@endsection