@extends('layout.app')

@section('content')

<style>
    .card-custom {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .card-custom:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    }
    .info-stats4 {
        border: none !important;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        transition: transform 0.2s;
    }
    .info-stats4:hover {
        transform: translateY(-2px);
    }
    .table-modern td, .table-modern th {
        vertical-align: middle !important;
        border-top: none !important;
        border-bottom: 1px solid #f1f3f5;
        padding: 1rem 0.75rem;
    }
    .table-modern thead th {
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e9ecef !important;
    }
</style>

<div class="page-header">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item active text-primary font-weight-bold">Ruang Kerja Verifikator</li>
    </ol>
    <div class="ml-auto">
        <span class="badge badge-pill badge-primary px-3 py-2 shadow-sm">
            <i class="icon-user mr-1"></i> {{ Auth::user()->nama_lengkap ?? 'Verifikator' }}
        </span>
    </div>
</div>

{{-- KOTAK INDIKATOR TUGAS VERIFIKATOR --}}
<div class="row gutters mb-3">
    {{-- Card 1: Menunggu Verifikasi (Fokus Utama) --}}
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
        <div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center" style="{{ $countPending > 0 ? 'border-left: 4px solid #ffc107 !important;' : '' }}">
            <div class="d-flex align-items-center">
                <div class="info-icon bg-light text-warning rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
                    <i class="icon-clock"></i>
                </div>
                <div class="sale-num">
                    <h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countPending }}</h4>
                    <p class="text-muted m-0" style="font-size: 0.8rem;">Menunggu Dicek</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Card 2: Dokumen Disetujui --}}
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
        <div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center">
            <div class="d-flex align-items-center">
                <div class="info-icon bg-light text-success rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
                    <i class="icon-check-circle"></i>
                </div>
                <div class="sale-num">
                    <h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countVerif }}</h4>
                    <p class="text-muted m-0" style="font-size: 0.8rem;">Dokumen Valid</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Card 3: Dokumen Ditolak --}}
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
        <div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center">
            <div class="d-flex align-items-center">
                <div class="info-icon bg-light text-danger rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
                    <i class="icon-x-circle"></i>
                </div>
                <div class="sale-num">
                    <h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countTolak }}</h4>
                    <p class="text-muted m-0" style="font-size: 0.8rem;">Dokumen Ditolak</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Card 4: Total Warga --}}
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
        <div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center">
            <div class="d-flex align-items-center">
                <div class="info-icon bg-light text-info rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
                    <i class="icon-folder"></i>
                </div>
                <div class="sale-num">
                    <h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countWarga }}</h4>
                    <p class="text-muted m-0" style="font-size: 0.8rem;">Total Berkas Masuk</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row gutters mt-3">
    {{-- BAGIAN KIRI: Antrean Tugas Verifikasi --}}
    <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
        <div class="card card-custom h-100">
            <div class="card-header bg-white pt-4 pb-3 border-bottom d-flex justify-content-between align-items-center">
                <h6 class="card-title mb-0 font-weight-bold text-dark">
                    <i class="icon-clipboard text-warning mr-2"></i>Antrean Verifikasi Dokumen
                </h6>
                <a href="{{ route('verifikasi.index') }}" class="btn btn-sm btn-light text-primary font-weight-bold border shadow-sm px-3 rounded-pill">Lihat Detail</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-modern m-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="pl-4">Nama / NIK</th>
                                <th>Alamat Terdaftar</th>
                                <th>Waktu Pengajuan</th>
                                <th class="text-center">Aksi Cepat</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($wargaPendingList as $pending)
                            <tr>
                                <td class="pl-4">
                                    <strong class="d-block text-dark" style="font-size: 0.95rem;">{{ $pending->nama }}</strong>
                                    <small class="text-muted"><i class="icon-credit-card mr-1"></i>{{ $pending->nik }}</small>
                                </td>
                                <td>
                                    <span class="text-dark">{{ $pending->alamat }}</span><br>
                                    <small class="text-muted">RT {{ $pending->rt }} / RW {{ $pending->rw }}</small>
                                </td>
                                <td>
                                    <span class="badge badge-light text-muted border">
                                        {{ \Carbon\Carbon::parse($pending->created_at)->diffForHumans() }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    {{-- Ganti href ini sesuai dengan route halaman detail/edit warga milikmu --}}
                                    <a href="{{ route('verifikasi.show', $pending->id) }}" class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm">Review Data</a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center justify-content-center">
                                        <div class="bg-light rounded-circle d-flex justify-content-center align-items-center mb-3" style="width: 60px; height: 60px;">
                                            <i class="icon-check text-success" style="font-size: 2rem;"></i>
                                        </div>
                                        <h6 class="font-weight-bold text-dark">Luar Biasa!</h6>
                                        <p class="text-muted">Tidak ada antrean verifikasi saat ini. Semua dokumen warga sudah diproses.</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- BAGIAN KANAN: Grafik Progres Kerja Verifikator --}}
    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
        <div class="card card-custom h-100">
            <div class="card-header bg-white pt-4 pb-2 border-0">
                <h6 class="card-title mb-0 font-weight-bold text-dark">
                    <i class="icon-pie-chart text-info mr-2"></i>Progres Kinerja
                </h6>
            </div>
            <div class="card-body">
                @if($countWarga == 0)
                    <div class="text-center py-5 text-muted">Belum ada berkas masuk sama sekali.</div>
                @else
                    <div style="height: 250px; width: 100%; position: relative;">
                        <canvas id="kinerjaPieChart"></canvas>
                    </div>

                    {{-- Progress Bar Mini di Bawah Chart --}}
                    @php
                        $totalSelesai = $countVerif + $countTolak;
                        $persenSelesai = $countWarga > 0 ? round(($totalSelesai / $countWarga) * 100) : 0;
                    @endphp
                    <div class="mt-4 px-2">
                        <div class="d-flex justify-content-between mb-1">
                            <small class="font-weight-bold text-dark">Berkas Diproses</small>
                            <small class="text-success font-weight-bold">{{ $persenSelesai }}%</small>
                        </div>
                        <div class="progress progress-pill bg-light" style="height: 6px;">
                            <div class="progress-bar progress-pill bg-success" role="progressbar" style="width: {{ $persenSelesai }}%"></div>
                        </div>
                        <small class="text-muted d-block mt-2 text-center">{{ $totalSelesai }} dari {{ $countWarga }} berkas warga telah dicek.</small>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Chart: Doughnut Chart Khusus Verifikator
    const ctx = document.getElementById('kinerjaPieChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Valid', 'Menunggu', 'Ditolak'],
            datasets: [{
                data: [{{ $countVerif }}, {{ $countPending }}, {{ $countTolak }}],
                backgroundColor: [
                    'rgba(40, 167, 69, 0.85)', // Success (Valid)
                    'rgba(255, 193, 7, 0.85)', // Warning (Pending)
                    'rgba(220, 53, 69, 0.85)'  // Danger (Tolak)
                ],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '75%', // Donat lebih tipis dan modern
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 15, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } }
                }
            }
        }
    });
</script>
@endpush