@extends('admin.layout')
@section('title','Verifikasi Pembayaran')
@section('content')

@php
  $queryParams = request()->except(['page','sort','direction']);
  $currentSort = request('sort');
  $currentDirection = request('direction', 'desc');
  $sortDirection = fn($column) => ($currentSort === $column && $currentDirection === 'asc') ? 'desc' : 'asc';
  $sortIcon = fn($column) => $currentSort === $column ? ($currentDirection === 'asc' ? '▲' : '▼') : '↕';
@endphp

<div class="page-header">
  <div>
    <h1>Verifikasi Pembayaran</h1>
    <p>Periksa dan verifikasi transaksi pembayaran dari calon peserta didik</p>
  </div>
</div>

<!-- FILTER -->
<div class="card">
  <div class="card-body" style="padding:18px 22px;">
    <form method="GET" style="display:grid;grid-template-columns:1fr 180px 180px 180px auto auto;gap:12px;align-items:center;">
      <div class="search-bar" style="width:100%;">
        <i data-lucide="search" style="width:16px;height:16px;color:var(--gray-400);"></i>
        <input type="text" name="search" placeholder="Cari kode bayar / nama orang tua / nama anak" class="search-input" value="{{ request('search') }}">
      </div>
      <input type="hidden" name="menu" value="pembayaran">
      <select name="jenis_pembayaran" class="form-select" style="width:100%;min-width:0;">
        <option value="">Semua Jenis</option>
        <option value="pendaftaran" {{ request('jenis_pembayaran')=='pendaftaran'?'selected':'' }}>Pendaftaran</option>
        <option value="uang_pangkal_spp" {{ request('jenis_pembayaran')=='uang_pangkal_spp'?'selected':'' }}>Uang Pangkal/SPP</option>
      </select>
      <select name="status_verifikasi" class="form-select" style="width:100%;min-width:0;">
        <option value="">Semua Status</option>
        <option value="pending" {{ request('status_verifikasi')=='pending'?'selected':'' }}>Menunggu</option>
        <option value="disetujui" {{ request('status_verifikasi')=='disetujui'?'selected':'' }}>Disetujui</option>
        <option value="ditolak" {{ request('status_verifikasi')=='ditolak'?'selected':'' }}>Ditolak</option>
      </select>
      <button type="submit" class="btn btn-primary">Terapkan Filter</button>
      <a href="{{ route('admin.pendaftar.index', ['menu'=>'pembayaran']) }}" class="btn btn-outline">Reset</a>
    </form>
  </div>
</div>

<div class="card">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>No.</th>
          <th>
            <a href="{{ route('admin.pendaftar.index', array_merge($queryParams, ['menu'=>'pembayaran','sort' => 'kode_pembayaran', 'direction' => $sortDirection('kode_pembayaran')])) }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px;">
              Kode Bayar <span style="font-size:10px;">{{ $sortIcon('kode_pembayaran') }}</span>
            </a>
          </th>
          <th>
            <a href="{{ route('admin.pendaftar.index', array_merge($queryParams, ['menu'=>'pembayaran','sort' => 'nama_pendaftar', 'direction' => $sortDirection('nama_pendaftar')])) }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px;">
              Nama Orang Tua/Wali <span style="font-size:10px;">{{ $sortIcon('nama_pendaftar') }}</span>
            </a>
          </th>
          <th>Nama Anak</th>
          <th>
            <a href="{{ route('admin.pendaftar.index', array_merge($queryParams, ['menu'=>'pembayaran','sort' => 'jenis_pembayaran', 'direction' => $sortDirection('jenis_pembayaran')])) }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px;">
              Jenis Pembayaran <span style="font-size:10px;">{{ $sortIcon('jenis_pembayaran') }}</span>
            </a>
          </th>
          <th>
            <a href="{{ route('admin.pendaftar.index', array_merge($queryParams, ['menu'=>'pembayaran','sort' => 'total_transfer', 'direction' => $sortDirection('total_transfer')])) }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px;">
              Nominal <span style="font-size:10px;">{{ $sortIcon('total_transfer') }}</span>
            </a>
          </th>
          <th>Bukti Transfer</th>
          <th>
            <a href="{{ route('admin.pendaftar.index', array_merge($queryParams, ['menu'=>'pembayaran','sort' => 'created_at', 'direction' => $sortDirection('created_at')])) }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px;">
              Tanggal Bayar <span style="font-size:10px;">{{ $sortIcon('created_at') }}</span>
            </a>
          </th>
          <th>
            <a href="{{ route('admin.pendaftar.index', array_merge($queryParams, ['menu'=>'pembayaran','sort' => 'status_verifikasi', 'direction' => $sortDirection('status_verifikasi')])) }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px;">
              Status <span style="font-size:10px;">{{ $sortIcon('status_verifikasi') }}</span>
            </a>
          </th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @forelse($pembayaran as $i => $p)
        <tr>
          <td style="color:var(--gray-600);">{{ $pembayaran->firstItem() + $i }}</td>
          <td style="font-family:monospace;color:var(--gray-700);font-size:12px;">{{ $p->kode_pembayaran }}</td>
          <td>
            <div class="td-name">{{ $p->nama_pendaftar }}</div>
          </td>
          <td>{{ $p->nama_anak ?? '—' }}</td>
          <td>
            @if($p->jenis_pembayaran === 'pendaftaran')
              <span class="badge badge-blue">Pendaftaran</span>
            @else
              <span class="badge badge-purple">Uang Pangkal</span>
            @endif
          </td>
          <td style="font-weight:600;">
            Rp {{ number_format($p->total_transfer, 0, ',', '.') }}
            @if($p->potongan > 0 || $p->angka_unik)
              <div style="font-size:11px;color:var(--gray-600);margin-top:2px;">
                @if($p->potongan > 0)
                  Potongan: Rp {{ number_format($p->potongan, 0, ',', '.') }}<br>
                @endif
                @if($p->angka_unik)
                  Unik: {{ $p->angka_unik }}
                @endif
              </div>
            @endif
          </td>
          <td>
            @if($p->bukti_transfer)
              <a href="{{ asset('uploads/bukti_bayar/' . $p->bukti_transfer) }}" target="_blank" class="btn btn-outline btn-sm" title="Download"><i data-lucide="download" style="width:12px;height:12px;"></i> Lihat</a>
            @else
              <span style="color:var(--gray-500);font-size:12px;">—</span>
            @endif
          </td>
          <td style="font-size:12px;color:var(--gray-600);">
            {{ \Carbon\Carbon::parse($p->tgl_pembayaran)->format('d M Y H:i') }}
          </td>
          <td>
            @php
              $statusClass = match($p->status_verifikasi) {
                'disetujui' => 'green',
                'ditolak' => 'red',
                default => 'yellow',
              };
              $statusLabel = match($p->status_verifikasi) {
                'disetujui' => '✓ Disetujui',
                'ditolak' => '✗ Ditolak',
                default => '⊙ Menunggu',
              };
            @endphp
            <span class="badge badge-{{ $statusClass }}">{{ $statusLabel }}</span>
          </td>
          <td>
            <div style="display:flex;gap:6px;flex-wrap:wrap;">
              @if($p->status_verifikasi === 'pending')
                <form method="POST" action="{{ route('admin.keuangan.setuju', $p->id_user) }}" style="display:inline;">
                  @csrf
                  <button type="submit" class="btn btn-success btn-sm" title="Setujui"><i data-lucide="check" style="width:12px;height:12px;"></i> Setujui</button>
                </form>
              @endif
              <a href="{{ route('admin.pendaftar.detail', $p->id_user) }}" class="btn btn-outline btn-sm" title="Lihat Detail"><i data-lucide="eye" style="width:12px;height:12px;"></i> Detail</a>
            </div>
          </td>
        </tr>
        @empty
        <tr><td colspan="10" style="text-align:center;padding:40px;color:var(--gray-600);">Tidak ada data pembayaran</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
  <div style="padding:16px 20px;border-top:1px solid var(--gray-200);">
    {{ $pembayaran->withQueryString()->links() }}
  </div>
</div>

@endsection