@extends('layouts.app')
@section('title', 'Dashboard ' . strtoupper(auth()->user()->role))

@section('styles')
<style>
    .badge-status {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    .badge-status.pending { background: #fef3c7; color: #92400e; }
    .badge-status.verifying { background: #dbeafe; color: #1e40af; }
    .badge-status.approved { background: #c6f6d5; color: #22543d; }
    .badge-status.rejected { background: #fed7d7; color: #9b2c2c; }
    .detail-pemohon { font-size: 12px; color: #718096; margin-top: 4px; }
    .detail-pemohon i { margin-right: 4px; font-size: 10px; }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <h2>Dashboard {{ auth()->user()->role_label }}</h2>
    <p>Kelola tugas pemeriksaan dokumen Anda</p>
</div>

<!-- Stat Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['ditugaskan'] ?? 0 }}</div>
                    <div class="stat-label">Tugas Baru</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <i class="bi bi-bell-fill"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in" style="animation-delay: 0.1s">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['diperiksa'] ?? 0 }}</div>
                    <div class="stat-label">Sedang Diperiksa</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
                    <i class="bi bi-search"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in" style="animation-delay: 0.2s">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['diverifikasi'] ?? 0 }}</div>
                    <div class="stat-label">Diverifikasi</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in" style="animation-delay: 0.3s">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['total'] ?? 0 }}</div>
                    <div class="stat-label">Total Tugas</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a, #fee140);">
                    <i class="bi bi-folder-fill"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Active Tasks with more detail -->
<div class="content-card animate-in" style="animation-delay: 0.4s">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-clipboard-check-fill me-2"></i>Tugas Aktif (5 Terbaru)</span>
        <a href="{{ route('pemeriksa.index') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>No. Pengajuan</th>
                        <th>Pemohon</th>
                        <th>Data Pemohon</th>
                        <th>Bangunan</th>
                        <th>Lokasi</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengajuan as $p)
                    <tr>
                        <td>
                            <strong>{{ $p->nomor_pengajuan }}</strong>
                            <div class="detail-pemohon">
                                <i class="bi bi-calendar"></i> {{ $p->created_at->format('d/m/Y') }}
                            </div>
                        </td>
                        <td>
                            <strong>{{ $p->nama_lengkap ?? $p->pemohon->name ?? '-' }}</strong>
                        </td>
                        <td>
                            <div class="detail-pemohon">
                                <i class="bi bi-card-text"></i> {{ $p->jenis_tanda_pengenal ?? 'KTP' }}: {{ substr($p->nomor_tanda_pengenal ?? '-', 0, 8) }}...
                            </div>
                            <div class="detail-pemohon">
                                <i class="bi bi-telephone"></i> {{ $p->nomor_kontak ?? '-' }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_bangunan }}</strong></div>
                            <div class="detail-pemohon">
                                <i class="bi bi-building"></i> {{ $p->jenis_bangunan ?? '-' }}
                            </div>
                            <div class="detail-pemohon">
                                <i class="bi bi-aspect-ratio"></i> {{ $p->luas_bangunan ?? 0 }} m² / {{ $p->jumlah_lantai ?? 1 }} lt
                            </div>
                        </td>
                        <td>
                            <div><i class="bi bi-geo-alt"></i> {{ $p->kecamatan ?? '-' }}</div>
                            <div class="detail-pemohon">{{ $p->kelurahan ?? '-' }}</div>
                        </td>
                        <td>
                            <span class="badge-status {{ $p->status }}">{{ $p->status_label ?? ucfirst($p->status) }}</span>
                        </td>
                        <td>
                            <a href="{{ route('pemeriksa.show', $p->id) }}" class="btn btn-sm btn-accent">
                                <i class="bi bi-pencil-square me-1"></i> Periksa
                            </a>
                        </td>
                    </tr>
                    @empty
                        <tr><td colspan="7" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            Tidak ada tugas aktif.
                        </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection