@extends('layouts.app')

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

@section('content')
    <div class="page-heading">
        <div class="eyebrow">Kawalan operasi pilihanraya</div>
        <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mt-1">
            <div>
                <h1 class="h3 mb-1">Dashboard Admin</h1>
                <p class="text-secondary mb-0">Ringkasan setup, kekosongan petugas, dan modul pengurusan.</p>
            </div>
            <div class="d-flex gap-2 align-items-start">
                <a href="{{ route('admin.setup.index') }}" class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-gear me-1"></i>Setup
                </a>
                <a href="{{ route('admin.management.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-people me-1"></i>Pengurusan
                </a>
            </div>
        </div>
    </div>

    {{-- Stats --}}
    <div class="row g-3 mb-4">
        @foreach ($cards as $card)
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="stat-card h-100">
                    <div class="d-flex justify-content-between align-items-start gap-3">
                        <div>
                            <div class="text-secondary small">{{ $card['label'] }}</div>
                            <div class="fs-3 fw-bold mt-2">{{ $card['value'] }}</div>
                        </div>
                        <span class="stat-icon text-bg-{{ $card['tone'] }}">
                            <i class="bi {{ $card['icon'] }}"></i>
                        </span>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Vacancy table --}}
    <div class="content-panel p-0 overflow-hidden mb-4">
        <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
            <div>
                <h2 class="h5 mb-0">Pusat dengan Kekosongan Petugas</h2>
                <p class="text-secondary small mb-0 mt-1">Berdasarkan kuota jawatan berbanding tugasan aktif.</p>
            </div>
            @if ($pusatsWithVacancy->isEmpty())
                <span class="badge text-bg-success">Semua penuh</span>
            @else
                <span class="badge text-bg-warning">{{ $pusatsWithVacancy->count() }} pusat ada kekosongan</span>
            @endif
        </div>

        @if ($pusatsWithVacancy->isEmpty())
            <div class="p-4 text-center text-secondary">
                <i class="bi bi-check-circle fs-3 d-block mb-2 text-success"></i>
                Semua pusat mengundi telah penuh petugas mengikut kuota.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Pusat Mengundi</th>
                            <th>DUN</th>
                            <th>PPM</th>
                            <th class="text-center">Saluran</th>
                            <th class="text-center">Diisi / Kuota</th>
                            <th class="text-center">Kosong</th>
                            <th class="text-end no-sort">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pusatsWithVacancy as $pusat)
                            <tr>
                                <td>
                                    <div class="fw-semibold">{{ $pusat->code }}</div>
                                    <div class="small text-secondary">{{ $pusat->name }}</div>
                                </td>
                                <td class="small">{{ $pusat->dun?->code ?? '-' }}</td>
                                <td class="small text-secondary">{{ $pusat->ppm_name }}</td>
                                <td class="text-center">{{ $pusat->saluran_mengundis_count }}</td>
                                <td class="text-center">
                                    <span class="fw-semibold">{{ $pusat->filled }}</span>
                                    <span class="text-secondary"> / {{ $pusat->total_quota }}</span>
                                    @if ($pusat->total_quota > 0)
                                        <div class="progress mt-1" style="height:4px">
                                            <div class="progress-bar bg-success" style="width:{{ round($pusat->filled / $pusat->total_quota * 100) }}%"></div>
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge text-bg-warning fw-bold">{{ $pusat->vacant }}</span>
                                </td>
                                <td class="text-end">
                                    <a href="{{ route('admin.management.penempatan.show', $pusat) }}" class="btn btn-sm btn-primary">
                                        <i class="bi bi-people me-1"></i>Urus Penempatan
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Quick links --}}
    <div class="content-panel p-3 p-md-4">
        <h2 class="h5 mb-3">Modul Utama</h2>
        <div class="row g-2">
            <div class="col-12 col-md-6 col-xl-3">
                <a href="{{ route('admin.setup.index') }}" class="btn btn-outline-primary w-100 text-start">
                    <i class="bi bi-gear me-2"></i>Election Setup
                </a>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
                <a href="{{ route('admin.management.applications.index') }}" class="btn btn-outline-primary w-100 text-start">
                    <i class="bi bi-file-earmark-person me-2"></i>Senarai Permohonan
                </a>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
                <a href="{{ route('admin.management.assignments.index') }}" class="btn btn-outline-primary w-100 text-start">
                    <i class="bi bi-person-lines-fill me-2"></i>Senarai Tugasan
                </a>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
                <a href="{{ route('admin.attendance.index') }}" class="btn btn-outline-primary w-100 text-start">
                    <i class="bi bi-check2-circle me-2"></i>Kehadiran
                </a>
            </div>
        </div>
    </div>
@endsection