@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    {{-- 1. WELCOME HEADER --}}
    <div class="row mb-4">
        <div class="col-12">
            {{-- Border-left diganti merah (danger) untuk identitas Superadmin --}}
            <div class="p-4 bg-white shadow-sm d-flex justify-content-between align-items-center" style="border-radius: 20px; border-left: 5px solid #dc3545;">
                <div>
                    <h4 class="fw-bold mb-1 text-dark">
                        Selamat Datang, {{ Auth::user()->name }} 👋 
                        <span class="badge bg-danger ms-2" style="font-size: 10px;">SUPERADMIN</span>
                    </h4>
                    <p class="text-muted mb-0 small">
                        <i class="fas fa-globe-asia me-1 text-danger"></i>
                        <strong>Panel Kontrol Pusat:</strong> Memantau {{ $calonWarga->count() }} antrean verifikasi dari seluruh wilayah RW.
                    </p>
                </div>
                <div class="d-none d-md-block text-end">
                    <p class="text-muted small mb-0"><i class="far fa-calendar-alt me-1"></i> {{ date('d M Y') }}</p>
                    <p class="fw-bold text-dark mb-0" id="clock"></p>
                </div>
            </div>
        </div>
    </div>

    {{-- 2. STATISTIC CARDS --}}
    <div class="row g-4 mb-4">
        {{-- Card 1: Warga Aktif --}}
        <div class="col-md-4">
            {{-- Gradien warna merah gelap ke merah terang --}}
            <div class="card border-0 shadow-sm h-100" style="border-radius: 20px; background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%); min-height: 130px;">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1 text-white">
                        <h6 class="text-white-50 small fw-bold text-uppercase">Total Warga Aktif</h6>
                        <h2 class="fw-bold mb-0">{{ $totalWargaAktif }}</h2>
                        <span class="small opacity-75">Seluruh Wilayah terverifikasi</span>
                    </div>
                    <div class="p-3 bg-white bg-opacity-25 rounded-circle">
                        <i class="fas fa-users fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- Card 2: Daftar Tunggu --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 20px; background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); min-height: 130px;">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1 text-white">
                        <h6 class="text-white-50 small fw-bold text-uppercase">Daftar Tunggu</h6>
                        <h2 class="fw-bold mb-0">{{ $calonWarga->count() }}</h2>
                        <span class="small opacity-75">Menunggu validasi pusat</span>
                    </div>
                    <div class="p-3 bg-white bg-opacity-25 rounded-circle">
                        <i class="fas fa-user-clock fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- Card 3: Total Draft --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 20px; background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%); min-height: 130px;">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1 text-white">
                        <h6 class="text-white-50 small fw-bold text-uppercase">Total Draft</h6>
                        <h2 class="fw-bold mb-0">{{ $totalDraft }}</h2>
                        <span class="small opacity-75">Data pendaftaran belum lengkap</span>
                    </div>
                    <div class="p-3 bg-white bg-opacity-25 rounded-circle">
                        <i class="fas fa-file-signature fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 3. MAIN TABLE: WAITING VERIFICATION --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
        <div class="card-header bg-white py-4 border-0 d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0 fw-bold text-dark">Verifikasi Pendaftar Global</h5>
                <p class="text-muted small mb-0">Daftar warga baru dari berbagai RW yang perlu divalidasi identitasnya.</p>
            </div>
            <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-2 rounded-pill fw-bold border border-danger border-opacity-25">
                {{ $calonWarga->count() }} Permohonan
            </span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="px-4 py-3 border-0 fw-bolder text-dark uppercase" style="font-size: 11px;">PENDAFTAR</th>
                            <th class="border-0 fw-bolder text-dark uppercase" style="font-size: 11px;">NIK</th>
                            <th class="border-0 fw-bolder text-dark uppercase text-center" style="font-size: 11px;">ASAL WILAYAH</th>
                            <th class="border-0 fw-bolder text-dark uppercase" style="font-size: 11px;">ALAMAT</th>
                            <th class="border-0 fw-bolder text-dark uppercase text-end px-4" style="font-size: 11px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($calonWarga as $warga)
                        <tr>
                            <td class="px-4 py-3">
                                <div class="d-flex align-items-center">
                                    <div class="position-relative">
                                        @if($warga->profile && $warga->profile->foto_path)
                                            <img src="{{ asset('storage/foto_user/' . ltrim($warga->profile->foto_path, '/')) }}" 
                                                 class="rounded-circle shadow-sm border border-2 border-white" width="45" height="45" style="object-fit: cover;">
                                        @else
                                            <img src="https://ui-avatars.com/api/?name={{ urlencode($warga->profile->nama_lengkap ?? $warga->name) }}&background=dc3545&color=fff" 
                                                 class="rounded-circle shadow-sm" width="45" height="45">
                                        @endif
                                    </div>
                                    <div class="ms-3">
                                        <div class="fw-bold text-dark text-uppercase small" style="letter-spacing: 0.5px;">{{ $warga->profile->nama_lengkap ?? $warga->name }}</div>
                                        <div class="text-muted" style="font-size: 10px;">Masuk: {{ $warga->created_at->format('d/m/Y H:i') }}</div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="small fw-bold text-secondary">{{ $warga->profile->nik ?? '-' }}</span></td>
                            <td class="text-center">
                                <span class="badge bg-primary px-3 rounded-pill" style="font-size: 10px;">RW {{ $warga->rw->kode_rw ?? '-' }}</span>
                                <div class="small text-muted fw-bold mt-1" style="font-size: 9px;">RT {{ $warga->ksk->rt ?? '00' }}</div>
                            </td>
                            <td class="small text-muted">{{ Str::limit($warga->profile->alamat ?? '-', 30) }}</td>
                            <td class="text-end px-4">
                                <a href="{{ route('adminrw.verifikasi.detail', $warga->id) }}" class="btn btn-dark btn-sm rounded-pill px-3 fw-bold border-0 shadow-sm" style="font-size: 11px;">
                                    <i class="fas fa-eye me-1"></i> DETAIL
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center py-5 text-muted small">Tidak ada antrean verifikasi saat ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- 4. NEW TABLE: DRAFT USERS --}}
    <div class="card border-0 shadow-sm" style="border-radius: 20px;">
        <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold text-dark"><i class="fas fa-edit me-2 text-secondary"></i>User Pendaftaran Belum Selesai (Draft)</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="px-4 py-2 border-0 text-muted uppercase" style="font-size: 10px;">ID USER</th>
                            <th class="border-0 text-muted uppercase" style="font-size: 10px;">NAMA LENGKAP</th>
                            <th class="border-0 text-muted uppercase text-center" style="font-size: 10px;">UNIT RW</th>
                            <th class="border-0 text-muted uppercase" style="font-size: 10px;">WAKTU DAFTAR</th>
                            <th class="border-0 text-muted uppercase text-end px-4" style="font-size: 10px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($draftWarga as $draft)
                        <tr>
                            <td class="px-4 py-2 small font-monospace text-primary">{{ $draft->name }}</td>
                            <td class="small fw-bold text-dark text-uppercase">{{ $draft->profile->nama_lengkap ?? 'DATA BELUM DISIMPAN' }}</td>
                            <td class="small text-muted text-center">RW {{ $draft->rw->kode_rw ?? '-' }}</td>
                            <td class="small text-muted">{{ $draft->created_at->diffForHumans() }}</td>
                            <td class="text-end px-4">
                                <form action="{{ route('adminrw.verifikasi.destroy', $draft->id) }}" method="POST" onsubmit="return confirm('Hapus permanen data draft ini dari server?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-link text-danger p-0 text-decoration-none small fw-bold" style="font-size: 10px;">
                                        <i class="fas fa-trash-alt me-1"></i> HAPUS
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center py-3 text-muted" style="font-size: 11px;">Tidak ada user dalam status draft.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
    body { background-color: #f8f9fc; font-family: 'Plus Jakarta Sans', sans-serif; }
    .card { transition: all 0.2s ease; border: none; }
    .card:hover { transform: translateY(-3px); }
    .uppercase { text-transform: uppercase; }
    .table thead th { letter-spacing: 0.5px; border-bottom: none; }
    /* Warna scrollbar supaya lebih estetik */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #dc3545; border-radius: 10px; }
</style>

<script>
    function updateClock() {
        const now = new Date();
        const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
        document.getElementById('clock').textContent = now.toLocaleTimeString('id-ID', options) + " WIB";
    }
    setInterval(updateClock, 1000); updateClock();
</script>
@endsection