@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('content')
<div class="mb-4">
    <h4 class="fw-bold" style="color: var(--primary-dark);">Dashboard Admin</h4>
    <p class="text-muted mb-0">Ringkasan data layanan masyarakat</p>
</div>

{{-- Stat Cards --}}
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card stat-card total p-3">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <i class="fas fa-users fa-2x text-info"></i>
                </div>
                <div>
                    <div class="text-muted" style="font-size: 0.85rem;">Total User</div>
                    <div class="fw-bold fs-4">{{ $total_users }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card pending p-3">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <i class="fas fa-folder-open fa-2x text-warning"></i>
                </div>
                <div>
                    <div class="text-muted" style="font-size: 0.85rem;">Total Pengajuan</div>
                    <div class="fw-bold fs-4">{{ $total_pengajuan }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card approved p-3">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <i class="fas fa-check-circle fa-2x text-success"></i>
                </div>
                <div>
                    <div class="text-muted" style="font-size: 0.85rem;">Disetujui</div>
                    <div class="fw-bold fs-4">{{ $total_disetujui }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card rejected p-3">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <i class="fas fa-times-circle fa-2x text-danger"></i>
                </div>
                <div>
                    <div class="text-muted" style="font-size: 0.85rem;">Ditolak</div>
                    <div class="fw-bold fs-4">{{ $total_ditolak }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Menunggu Verifikasi --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card p-4 text-center">
            <h6 class="text-muted mb-3">Menunggu Verifikasi</h6>
            <div class="fw-bold display-6 mb-2">{{ $total_pending }}</div>
            <span class="badge badge-pending px-3 py-2" style="font-size: 0.85rem;">Pending</span>
        </div>
    </div>
</div>

{{-- Pengajuan Terbaru --}}
<div class="card">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0 fw-semibold" style="color: var(--primary-dark);">
            <i class="fas fa-clock me-2"></i>Pengajuan Terbaru
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead style="background: #f8f9fa;">
                    <tr>
                        <th class="px-3" style="width: 50px;">No</th>
                        <th>Pemohon</th>
                        <th>Judul</th>
                        <th>Jenis Layanan</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengajuanTerbaru as $index => $item)
                        <tr>
                            <td class="px-3">{{ $index + 1 }}</td>
                            <td>{{ $item->user->name }}</td>
                            <td>{{ $item->judul }}</td>
                            <td>{{ $item->jenis_layanan }}</td>
                            <td>
                                @if($item->status === 'pending')
                                    <span class="badge badge-pending">Pending</span>
                                @elseif($item->status === 'disetujui')
                                    <span class="badge badge-disetujui">Disetujui</span>
                                @elseif($item->status === 'ditolak')
                                    <span class="badge badge-ditolak">Ditolak</span>
                                @endif
                            </td>
                            <td>{{ $item->created_at->format('d/m/Y') }}</td>
                            <td class="text-center">
                                <a href="{{ route('admin.pengajuan.show', $item) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye me-1"></i>Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">
                                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                Belum ada pengajuan
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if(isset($pengajuanTerbaru) && $pengajuanTerbaru->count() > 0)
        <div class="card-footer bg-white text-center py-3">
            <a href="{{ route('admin.pengajuan.index') }}" class="btn btn-sm btn-primary">
                <i class="fas fa-list me-1"></i>Lihat Semua
            </a>
        </div>
    @endif
</div>
@endsection