@extends('admin.layout')
@section('title','Dashboard Admin')
@section('content')

<div class="page-header">
  <div>
    <h1>Dashboard PPDB</h1>
    <p>Pantau dan kelola seluruh proses penerimaan peserta didik baru</p>
  </div>
  <div style="display:flex;gap:8px;">
    <a href="{{ route('admin.pendaftar.index') }}" class="btn btn-primary">
      <i data-lucide="users" style="width:15px;height:15px;"></i> Lihat Semua Pendaftar
    </a>
  </div>
</div>

<!-- STATS -->
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon green"><i data-lucide="users" style="width:22px;height:22px;color:var(--primary);"></i></div>
    <div><div class="stat-label">Total Pendaftar</div><div class="stat-value">{{ $total }}</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon purple"><i data-lucide="shield" style="width:22px;height:22px;color:#7C3AED;"></i></div>
    <div><div class="stat-label">Total Admin</div><div class="stat-value">{{ $totalAdmin }}</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon yellow"><i data-lucide="clock" style="width:22px;height:22px;color:#D97706;"></i></div>
    <div><div class="stat-label">Menunggu Verifikasi</div><div class="stat-value">{{ $menunggu }}</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon blue"><i data-lucide="check-circle-2" style="width:22px;height:22px;color:#2563EB;"></i></div>
    <div><div class="stat-label">Diterima</div><div class="stat-value">{{ $diterima }}</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon red"><i data-lucide="x-circle" style="width:22px;height:22px;color:#DC2626;"></i></div>
    <div><div class="stat-label">Tidak Diterima</div><div class="stat-value">{{ $ditolak }}</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon teal"><i data-lucide="credit-card" style="width:22px;height:22px;color:#0F766E;"></i></div>
    <div><div class="stat-label">Pembayaran Disetujui</div><div class="stat-value">{{ $approved }}</div></div>
  </div>
</div>
<div class="stats-grid" style="margin-top:16px;">
  <div class="stat-card">
    <div class="stat-icon gray"><i data-lucide="trending-up" style="width:22px;height:22px;color:#334155;"></i></div>
    <div><div class="stat-label">Total Pembayaran</div><div class="stat-value">Rp {{ number_format($paymentValue,0,',','.') }}</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon indigo"><i data-lucide="award" style="width:22px;height:22px;color:#4338CA;"></i></div>
    <div><div class="stat-label">Tingkat Diterima</div><div class="stat-value">{{ $acceptanceRate }}%</div></div>
  </div>
</div>


<div style="display:grid;grid-template-columns:1fr 340px;gap:20px;">

  <!-- TABEL PENDAFTAR TERBARU -->
  <div class="card">
    <div class="card-header">
      <div class="card-title"><i data-lucide="list" style="width:16px;height:16px;"></i> Pendaftar Terbaru</div>
      <a href="{{ route('admin.pendaftar.index') }}" class="btn btn-outline btn-sm">Lihat Semua</a>
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>Nama Ortu</th><th>Nama Anak</th><th>Status</th><th>Bayar</th><th>Aksi</th></tr>
        </thead>
        <tbody>
          @forelse($pendaftar as $p)
          <tr>
            <td><div class="td-name">{{ $p->nama_pendaftar }}</div><div class="td-sub">{{ $p->email }}</div></td>
            <td>{{ $p->nama_anak ?? '—' }}</td>
            <td>
              @php
                $smap=['bayar_pendaftaran'=>['yellow','Bayar Formulir'],'verifikasi_pendaftaran'=>['yellow','Verifikasi'],'isi_formulir'=>['blue','Isi Formulir'],'bayar_uang_pangkal'=>['yellow','Bayar Pangkal'],'tes_online'=>['blue','Tes Online'],'tes_offline'=>['blue','Tes Offline'],'sesi_verifikasi'=>['purple','Sesi Verif'],'selesai'=>['green','Selesai']];
                $s=$smap[$p->status_langkah??'']??['gray',ucfirst($p->status_langkah??'')];
              @endphp
              <span class="badge badge-{{ $s[0] }}">{{ $s[1] }}</span>
            </td>
            <td>
              @if($p->bayar_status==='disetujui') <span class="badge badge-green">✓ Lunas</span>
              @elseif($p->bayar_status==='pending') <span class="badge badge-yellow">⏳ Pending</span>
              @else <span class="badge badge-gray">—</span> @endif
            </td>
            <td>
              <div style="display:flex;gap:6px;">
                <a href="{{ route('admin.pendaftar.detail',$p->id_user) }}" class="btn btn-outline btn-sm">Detail</a>
                @if($p->bayar_status==='pending' && $p->id_pembayaran)
                <form method="POST" action="{{ route('admin.keuangan.setuju',$p->id_pembayaran) }}" style="display:inline;">@csrf
                  <button type="submit" class="btn btn-primary btn-sm">Setujui</button>
                </form>
                @endif
              </div>
            </td>
          </tr>
          @empty
          <tr><td colspan="5" style="text-align:center;padding:28px;color:var(--gray-600);">Belum ada pendaftar</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <!-- SIDEBAR KANAN -->
  <div>

    <!-- TAHAPAN PPDB -->
    <div class="card" style="margin-bottom:16px;">
      <div class="card-header">
        <div class="card-title"><i data-lucide="git-branch" style="width:16px;height:16px;"></i> Tahapan PPDB</div>
        <a href="{{ route('admin.tahapan.index') }}" class="btn btn-outline btn-sm">Kelola</a>
      </div>
      <div class="card-body" style="padding:14px 16px;">
        @foreach($tahapan as $t)
        <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--gray-100);">
          <div style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:{{ $t->status==='berlangsung' ? '#16A34A' : ($t->status==='selesai' ? '#2563EB' : '#DDE3D8') }};{{ $t->status==='berlangsung' ? 'box-shadow:0 0 0 3px rgba(22,163,74,0.2);' : '' }}"></div>
          <div style="flex:1;font-size:13px;font-weight:{{ $t->status==='berlangsung' ? '700' : '500' }};color:{{ $t->status==='berlangsung' ? 'var(--primary)' : 'var(--gray-600)' }};">{{ $t->nama_tahapan }}</div>
          <span class="badge badge-{{ $t->status==='berlangsung' ? 'green' : ($t->status==='selesai' ? 'blue' : 'gray') }}" style="font-size:10px;">{{ $t->status==='berlangsung' ? 'Aktif' : ($t->status==='selesai' ? 'Selesai' : 'Belum Dimulai') }}</span>
        </div>
        @endforeach
      </div>
    </div>

    <!-- GELOMBANG -->
    <div class="card" style="margin-bottom:16px;">
      <div class="card-header"><div class="card-title"><i data-lucide="bar-chart-3" style="width:16px;height:16px;"></i> Per Gelombang</div></div>
      <div class="card-body" style="padding:14px 16px;">
        @forelse($gelombang as $g)
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
          <span style="font-size:13px;color:var(--gray-600);">Gelombang {{ $g->gelombang }}</span>
          <div style="display:flex;align-items:center;gap:8px;">
            <div style="width:80px;height:6px;background:var(--gray-200);border-radius:99px;overflow:hidden;">
              <div style="height:100%;background:var(--primary);border-radius:99px;width:{{ min(100,($g->total/max(1,$total))*100) }}%;"></div>
            </div>
            <span style="font-size:13px;font-weight:700;">{{ $g->total }}</span>
          </div>
        </div>
        @empty
        <div style="font-size:13px;color:var(--gray-600);text-align:center;padding:12px 0;">Belum ada data</div>
        @endforelse
      </div>
    </div>

  </div>
</div>

@endsection