@extends('layouts.app')

@section('title', 'Dasbor')
@section('page-title', 'Dasbor')
@section('plain-content', true)

@php
    $user = Auth::user();
    $isAdmin = $user->role === 'admin';

    if ($isAdmin) {
        $pendingCount = \App\Models\User::where('role', 'alumni')->where('status', 'pending')->count();
        $approvedCount = \App\Models\User::where('role', 'alumni')->where('status', 'approved')->count();
        $rejectedCount = \App\Models\User::where('role', 'alumni')->where('status', 'rejected')->count();
        $activeSurveysCount = \App\Models\Survei::where('aktif', true)->count();
        $recentAlumni = \App\Models\AlumniProfile::with('programStudi')->latest()->take(6)->get();
        $prodiLabels = $alumniPerProdi->pluck('nama')->values();
        $prodiCounts = $alumniPerProdi->pluck('alumni_profiles_count')->values();
        $approvalLabels = [
            __('static_ui.Menunggu'),
            __('static_ui.Disetujui'),
            __('static_ui.Ditolak'),
        ];
    } else {
        $profile = $profile ?? null;
        $pekerjaan = $pekerjaan ?? collect();
        $profileChecklist = $profileChecklist ?? collect();
        $profileCompletion = $profileCompletion ?? 0;
        $isProfileComplete = $profileCompletion >= 100;
        $workCount = $profile ? $pekerjaan->count() : 0;
        $pendidikanCount = $pendidikanCount ?? 0;
        $activeSurveys = $activeSurveys ?? collect();
        $availableSurveyCount = $availableSurveyCount ?? 0;
        $recommendedJobs = $recommendedJobs ?? collect();
        $pekerjaanTerkini = $pekerjaanTerkini ?? null;
        $statusLabels = [
            'approved' => 'Disetujui',
            'pending' => 'Menunggu Persetujuan',
            'rejected' => 'Ditolak',
        ];
        $statusBadgeClass = $user->status === 'approved'
            ? 'bg-emerald-100 text-emerald-800'
            : ($user->status === 'pending' ? 'bg-amber-100 text-amber-800' : 'bg-rose-100 text-rose-800');
    }
@endphp

@section('content')
    @if($isAdmin)
        <div class="space-y-6">
            <section class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
                <div class="grid gap-0 lg:grid-cols-2 xl:grid-cols-5">
                    <div class="flex min-h-[252px] flex-col justify-center bg-slate-900 px-6 py-7 text-white lg:px-8 xl:col-span-3">
                        <div class="mb-4 inline-flex items-center rounded-md border border-emerald-300/30 bg-emerald-300/10 px-3 py-1 text-sm font-semibold text-emerald-100">
                            Panel Pengelola
                        </div>
                        <h2 class="text-3xl font-bold leading-tight">Ringkasan operasional tracer study</h2>
                        <div class="mt-6 flex flex-wrap gap-3">
                            <a href="{{ route('admin.alumni-approval.index') }}" class="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-900 shadow-sm hover:bg-slate-100">
                                <i class="fas fa-user-check mr-2 text-emerald-600"></i>
                                Persetujuan Alumni
                            </a>
                            <a href="{{ route('admin.alumni.index') }}" class="inline-flex items-center rounded-md border border-white/30 px-4 py-2 text-sm font-semibold text-white hover:bg-white/10">
                                <i class="fas fa-users mr-2 text-sky-200"></i>
                                Data Alumni
                            </a>
                        </div>
                    </div>
                    <div class="flex min-h-[252px] flex-col justify-center bg-white px-6 py-7 lg:px-8 xl:col-span-2">
                        <p class="text-sm font-semibold uppercase text-slate-500">Status akun alumni</p>
                        <div class="mt-5 space-y-4">
                            <div>
                                <div class="mb-1 flex items-center justify-between text-sm">
                                    <span class="font-semibold text-slate-700">Disetujui</span>
                                    <span class="font-bold text-emerald-700">{{ $approvedCount }}</span>
                                </div>
                                <div class="h-2 rounded-full bg-slate-100">
                                    <div class="h-2 rounded-full bg-emerald-500" style="width: {{ max(6, min(100, ($approvedCount / max(1, $approvedCount + $pendingCount + $rejectedCount)) * 100)) }}%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="mb-1 flex items-center justify-between text-sm">
                                    <span class="font-semibold text-slate-700">Menunggu</span>
                                    <span class="font-bold text-amber-700">{{ $pendingCount }}</span>
                                </div>
                                <div class="h-2 rounded-full bg-slate-100">
                                    <div class="h-2 rounded-full bg-amber-400" style="width: {{ max(6, min(100, ($pendingCount / max(1, $approvedCount + $pendingCount + $rejectedCount)) * 100)) }}%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="mb-1 flex items-center justify-between text-sm">
                                    <span class="font-semibold text-slate-700">Ditolak</span>
                                    <span class="font-bold text-rose-700">{{ $rejectedCount }}</span>
                                </div>
                                <div class="h-2 rounded-full bg-slate-100">
                                    <div class="h-2 rounded-full bg-rose-500" style="width: {{ max(6, min(100, ($rejectedCount / max(1, $approvedCount + $pendingCount + $rejectedCount)) * 100)) }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-slate-500">Profil Alumni</p>
                        <span class="grid h-10 w-10 place-items-center rounded-md bg-sky-50 text-sky-700">
                            <i class="fas fa-id-card"></i>
                        </span>
                    </div>
                    <p class="mt-5 text-3xl font-bold text-slate-900">{{ number_format($totalAlumni, 0, ',', '.') }}</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-slate-500">Pengguna Alumni</p>
                        <span class="grid h-10 w-10 place-items-center rounded-md bg-emerald-50 text-emerald-700">
                            <i class="fas fa-user-graduate"></i>
                        </span>
                    </div>
                    <p class="mt-5 text-3xl font-bold text-slate-900">{{ number_format($totalUser, 0, ',', '.') }}</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-slate-500">Program Studi</p>
                        <span class="grid h-10 w-10 place-items-center rounded-md bg-indigo-50 text-indigo-700">
                            <i class="fas fa-graduation-cap"></i>
                        </span>
                    </div>
                    <p class="mt-5 text-3xl font-bold text-slate-900">{{ number_format($totalProdi, 0, ',', '.') }}</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-slate-500">Riwayat Kerja</p>
                        <span class="grid h-10 w-10 place-items-center rounded-md bg-amber-50 text-amber-700">
                            <i class="fas fa-briefcase"></i>
                        </span>
                    </div>
                    <p class="mt-5 text-3xl font-bold text-slate-900">{{ number_format($riwayatPekerjaan, 0, ',', '.') }}</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-slate-500">Survei Aktif</p>
                        <span class="grid h-10 w-10 place-items-center rounded-md bg-rose-50 text-rose-700">
                            <i class="fas fa-poll"></i>
                        </span>
                    </div>
                    <p class="mt-5 text-3xl font-bold text-slate-900">{{ number_format($activeSurveysCount, 0, ',', '.') }}</p>
                </div>
            </section>

            <section class="grid grid-cols-1 gap-6 xl:grid-cols-5">
                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm xl:col-span-3">
                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <p class="text-sm font-semibold uppercase text-slate-500">Validasi akun</p>
                            <h3 class="mt-1 text-xl font-bold text-slate-900">Status pendaftaran alumni</h3>
                        </div>
                        <a href="{{ route('admin.alumni-approval.index') }}" class="inline-flex items-center rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-800">
                            Kelola
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>

                    <div class="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
                        <a href="{{ route('admin.alumni-approval.index') }}" class="rounded-lg border border-amber-200 bg-amber-50 p-4 hover:bg-amber-100">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-bold text-amber-900">Menunggu</span>
                                <span class="rounded-md bg-amber-200 px-2 py-1 text-sm font-bold text-amber-900">{{ $pendingCount }}</span>
                            </div>
                        </a>
                        <a href="{{ route('admin.alumni-approval.approved') }}" class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 hover:bg-emerald-100">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-bold text-emerald-900">Disetujui</span>
                                <span class="rounded-md bg-emerald-200 px-2 py-1 text-sm font-bold text-emerald-900">{{ $approvedCount }}</span>
                            </div>
                        </a>
                        <a href="{{ route('admin.alumni-approval.rejected') }}" class="rounded-lg border border-rose-200 bg-rose-50 p-4 hover:bg-rose-100">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-bold text-rose-900">Ditolak</span>
                                <span class="rounded-md bg-rose-200 px-2 py-1 text-sm font-bold text-rose-900">{{ $rejectedCount }}</span>
                            </div>
                        </a>
                    </div>

                    <div class="mt-6 h-72">
                        <canvas id="alumniApprovalChart"></canvas>
                    </div>
                </div>

                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm xl:col-span-2">
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <p class="text-sm font-semibold uppercase text-slate-500">Sebaran data</p>
                            <h3 class="mt-1 text-xl font-bold text-slate-900">Alumni per program studi</h3>
                        </div>
                        <span class="rounded-md bg-sky-50 px-3 py-2 text-sm font-bold text-sky-800">{{ $totalProdi }} prodi</span>
                    </div>
                    <div class="mt-6 h-80">
                        <canvas id="alumniPerProdiChart"></canvas>
                    </div>
                </div>
            </section>

            <section class="rounded-lg border border-slate-200 bg-white shadow-sm">
                <div class="flex flex-col gap-4 border-b border-slate-200 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm font-semibold uppercase text-slate-500">Data terbaru</p>
                        <h3 class="mt-1 text-xl font-bold text-slate-900">Alumni terbaru</h3>
                    </div>
                    <a href="{{ route('admin.alumni.index') }}" class="inline-flex items-center rounded-md border border-slate-300 px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">
                        Lihat semua
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>

                <div class="grid gap-3 p-4 sm:hidden">
                    @forelse($recentAlumni as $alumni)
                        @php
                            $fotoName = $alumni->foto ? basename($alumni->foto) : null;
                            $fotoPath = $fotoName ? 'alumni/' . $fotoName : null;
                            $fotoUrl = $fotoPath && \Illuminate\Support\Facades\Storage::disk('public')->exists($fotoPath)
                                ? asset('storage/' . $fotoPath)
                                : null;
                        @endphp
                        <article class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
                            <div class="flex items-start gap-3">
                                @if($fotoUrl)
                                    <img src="{{ $fotoUrl }}" alt="Foto {{ $alumni->nama_lengkap }}" class="h-12 w-12 shrink-0 rounded-lg object-cover">
                                @else
                                    <span class="grid h-12 w-12 shrink-0 place-items-center rounded-lg bg-slate-100 text-slate-700">
                                        <i class="fas fa-user"></i>
                                    </span>
                                @endif
                                <div class="min-w-0 flex-1">
                                    <h4 class="break-words text-sm font-extrabold leading-5 text-slate-900">{{ $alumni->nama_lengkap }}</h4>
                                    <p class="mt-1 text-xs font-semibold text-slate-500">ID Profil #{{ $alumni->id }}</p>
                                </div>
                            </div>

                            <div class="mt-4 grid grid-cols-2 gap-2 text-xs">
                                <div class="rounded-lg bg-slate-50 p-3">
                                    <p class="font-bold uppercase text-slate-400">NIM</p>
                                    <p class="mt-1 break-words font-extrabold text-slate-700">{{ $alumni->nim ?: '-' }}</p>
                                </div>
                                <div class="rounded-lg bg-slate-50 p-3">
                                    <p class="font-bold uppercase text-slate-400">Tahun</p>
                                    <p class="mt-1 font-extrabold text-slate-700">{{ $alumni->tahun_lulus ?: '-' }}</p>
                                </div>
                                <div class="col-span-2 rounded-lg bg-slate-50 p-3">
                                    <p class="font-bold uppercase text-slate-400">Program Studi</p>
                                    <p class="mt-1 break-words font-extrabold text-slate-700">{{ $alumni->programStudi->nama ?? 'Belum diisi' }}</p>
                                </div>
                            </div>

                            <a href="{{ route('admin.alumni.show', $alumni->id) }}" class="mt-4 inline-flex w-full items-center justify-center rounded-lg bg-sky-50 px-4 py-2.5 text-sm font-extrabold text-sky-700 hover:bg-sky-100">
                                Detail
                                <i class="fas fa-arrow-right ml-2 text-xs"></i>
                            </a>
                        </article>
                    @empty
                        <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-center text-sm font-semibold text-slate-500">
                            Belum ada data alumni.
                        </div>
                    @endforelse
                </div>

                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-bold uppercase text-slate-500">Nama</th>
                                <th class="px-6 py-3 text-left text-xs font-bold uppercase text-slate-500">NIM</th>
                                <th class="px-6 py-3 text-left text-xs font-bold uppercase text-slate-500">Program Studi</th>
                                <th class="px-6 py-3 text-left text-xs font-bold uppercase text-slate-500">Tahun Lulus</th>
                                <th class="px-6 py-3 text-right text-xs font-bold uppercase text-slate-500">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse($recentAlumni as $alumni)
                                @php
                                    $fotoName = $alumni->foto ? basename($alumni->foto) : null;
                                    $fotoPath = $fotoName ? 'alumni/' . $fotoName : null;
                                    $fotoUrl = $fotoPath && \Illuminate\Support\Facades\Storage::disk('public')->exists($fotoPath)
                                        ? asset('storage/' . $fotoPath)
                                        : null;
                                @endphp
                                <tr class="hover:bg-slate-50">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-3">
                                            @if($fotoUrl)
                                                <img src="{{ $fotoUrl }}" alt="Foto {{ $alumni->nama_lengkap }}" class="h-10 w-10 rounded-md object-cover">
                                            @else
                                                <span class="grid h-10 w-10 place-items-center rounded-md bg-slate-100 text-slate-700">
                                                    <i class="fas fa-user"></i>
                                                </span>
                                            @endif
                                            <div>
                                                <p class="font-semibold text-slate-900">{{ $alumni->nama_lengkap }}</p>
                                                <p class="text-xs text-slate-500">ID Profil #{{ $alumni->id }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-slate-600">{{ $alumni->nim ?: '-' }}</td>
                                    <td class="px-6 py-4 text-sm text-slate-600">{{ $alumni->programStudi->nama ?? 'Belum diisi' }}</td>
                                    <td class="px-6 py-4 text-sm text-slate-600">{{ $alumni->tahun_lulus ?: '-' }}</td>
                                    <td class="px-6 py-4 text-right">
                                        <a href="{{ route('admin.alumni.show', $alumni->id) }}" class="inline-flex items-center rounded-md bg-sky-50 px-3 py-2 text-sm font-semibold text-sky-700 hover:bg-sky-100">
                                            Detail
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-10 text-center text-sm text-slate-500">Belum ada data alumni.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    @else
        <div class="space-y-6">
            @php
                $profileFotoName = $profile && $profile->foto ? basename($profile->foto) : null;
                $profileFotoPath = $profileFotoName ? 'alumni/' . $profileFotoName : null;
                $profileFotoUrl = $profileFotoPath && \Illuminate\Support\Facades\Storage::disk('public')->exists($profileFotoPath)
                    ? asset('storage/' . $profileFotoPath)
                    : null;
                $profileActionUrl = $profile ? route('alumni.profile') : route('alumni.profile.create');
                $profileActionLabel = $profile ? 'Perbarui Profil' : 'Buat Profil';
            @endphp

            <section class="theme-panel rounded-lg p-6 text-white shadow-sm">
                <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
                    <div class="min-w-0">
                        <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                            @if($profileFotoUrl)
                                <img src="{{ $profileFotoUrl }}" alt="Foto Profil" class="h-20 w-20 rounded-lg border border-white/20 object-cover shadow-sm">
                            @else
                                <span class="grid h-20 w-20 shrink-0 place-items-center rounded-lg bg-white/10 text-3xl text-white ring-1 ring-white/20">
                                    <i class="fas fa-user-graduate"></i>
                                </span>
                            @endif
                            <div class="min-w-0">
                                <div class="mb-2 inline-flex items-center rounded-md bg-white/10 px-3 py-1 text-xs font-bold uppercase tracking-wide text-white/85">
                                    <i class="fas fa-id-card mr-2"></i>
                                    Dasbor Mahasiswa
                                </div>
                                <h1 class="truncate text-2xl font-extrabold leading-tight text-white md:text-3xl">{{ $profile ? $profile->nama_lengkap : $user->name }}</h1>
                                <div class="mt-3 flex flex-wrap items-center gap-2 text-sm font-semibold text-white/85">
                                    <span class="inline-flex items-center rounded-md bg-white/10 px-3 py-1.5">
                                        <i class="fas fa-hashtag mr-2"></i>
                                        {{ $profile ? ($profile->nim ?: ($user->nim ?: 'NIM belum diisi')) : ($user->nim ?: 'NIM belum diisi') }}
                                    </span>
                                    <span class="inline-flex items-center rounded-md bg-white/10 px-3 py-1.5">
                                        <i class="fas fa-graduation-cap mr-2"></i>
                                        {{ $profile && $profile->programStudi ? $profile->programStudi->nama : 'Program studi belum diisi' }}
                                    </span>
                                    <span class="inline-flex items-center rounded-md px-3 py-1.5 text-sm font-extrabold {{ $statusBadgeClass }}">
                                        <i class="fas fa-circle mr-2 text-[8px]"></i>
                                        {{ $statusLabels[$user->status] ?? ucfirst($user->status ?? 'pending') }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        @if($user->status === 'pending')
                            <div class="mt-5 rounded-lg border border-white/20 bg-white/10 p-4 text-sm font-semibold leading-6 text-white/90">
                                <i class="fas fa-hourglass-half mr-2"></i>
                                Akun Anda sedang menunggu persetujuan admin. Beberapa fitur akan terbuka setelah akun disetujui.
                            </div>
                        @elseif($user->status === 'rejected')
                            <div class="mt-5 rounded-lg border border-white/20 bg-white/10 p-4 text-sm font-semibold leading-6 text-white/90">
                                <i class="fas fa-circle-xmark mr-2"></i>
                                Pendaftaran Anda ditolak. Hubungi administrator untuk pengecekan data pendaftaran.
                            </div>
                        @endif

                        <div class="mt-6 flex flex-col gap-2 sm:flex-row sm:flex-wrap">
                            <a href="{{ $profileActionUrl }}" class="inline-flex items-center justify-center rounded-lg bg-white px-4 py-2.5 text-sm font-bold text-[#0d5b8f] shadow-sm transition hover:bg-slate-100">
                                <i class="fas fa-user-pen mr-2"></i>
                                {{ $profileActionLabel }}
                            </a>
                            <a href="{{ route('alumni.survei.index') }}" class="inline-flex items-center justify-center rounded-lg bg-white/10 px-4 py-2.5 text-sm font-bold text-white ring-1 ring-white/20 transition hover:bg-white/15">
                                <i class="fas fa-clipboard-list mr-2"></i>
                                Survei
                            </a>
                            <a href="{{ route('alumni.karir.index') }}" class="inline-flex items-center justify-center rounded-lg bg-white/10 px-4 py-2.5 text-sm font-bold text-white ring-1 ring-white/20 transition hover:bg-white/15">
                                <i class="fas fa-briefcase mr-2"></i>
                                Karir
                            </a>
                        </div>
                    </div>

                    <aside class="rounded-lg bg-white/10 p-5 ring-1 ring-white/15">
                        <div class="flex items-end justify-between gap-4">
                            <div>
                                <p class="text-xs font-bold uppercase tracking-wide text-white/70">Kelengkapan Profil</p>
                                <p class="mt-2 text-4xl font-extrabold text-white">{{ $profileCompletion }}%</p>
                            </div>
                            <span class="grid h-12 w-12 place-items-center rounded-lg bg-white/15 text-white">
                                <i class="fas fa-chart-simple"></i>
                            </span>
                        </div>
                        <div class="mt-4 h-2 overflow-hidden rounded-full bg-white/20">
                            <div class="h-full rounded-full bg-white" style="width: {{ min(100, $profileCompletion) }}%"></div>
                        </div>
                        <div class="mt-4 grid grid-cols-2 gap-2 text-xs font-bold text-white/85">
                            @foreach($profileChecklist as $label => $complete)
                                <span class="inline-flex items-center rounded-md bg-white/10 px-2.5 py-2">
                                    <i class="fas {{ $complete ? 'fa-check' : 'fa-minus' }} mr-2"></i>
                                    {{ $label }}
                                </span>
                            @endforeach
                        </div>
                    </aside>
                </div>
            </section>

            <section class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
                <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Profil</p>
                            <p class="mt-2 text-3xl font-extrabold text-slate-900">{{ $profileCompletion }}%</p>
                            <p class="mt-1 text-xs font-semibold text-slate-500">{{ $isProfileComplete ? 'Data utama lengkap' : 'Perlu dilengkapi' }}</p>
                        </div>
                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-blue-100 text-blue-700">
                            <i class="fas fa-user-check"></i>
                        </span>
                    </div>
                </article>

                <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Survei Perlu Diisi</p>
                            <p class="mt-2 text-3xl font-extrabold text-slate-900">{{ number_format($availableSurveyCount) }}</p>
                            <p class="mt-1 text-xs font-semibold text-slate-500">{{ number_format($activeSurveys->count()) }} survei aktif</p>
                        </div>
                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-amber-100 text-amber-700">
                            <i class="fas fa-clipboard-list"></i>
                        </span>
                    </div>
                </article>

                <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Riwayat Kerja</p>
                            <p class="mt-2 text-3xl font-extrabold text-slate-900">{{ number_format($workCount) }}</p>
                            <p class="mt-1 text-xs font-semibold text-slate-500">{{ $pekerjaanTerkini ? 'Pekerjaan terkini tersedia' : 'Belum ada data kerja' }}</p>
                        </div>
                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-emerald-100 text-emerald-700">
                            <i class="fas fa-briefcase"></i>
                        </span>
                    </div>
                </article>

                <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Pendidikan Lanjut</p>
                            <p class="mt-2 text-3xl font-extrabold text-slate-900">{{ number_format($pendidikanCount) }}</p>
                            <p class="mt-1 text-xs font-semibold text-slate-500">Data studi lanjutan</p>
                        </div>
                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-slate-100 text-slate-700">
                            <i class="fas fa-book-open"></i>
                        </span>
                    </div>
                </article>
            </section>

            <section class="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(340px,0.85fr)]">
                <div class="space-y-6">
                    <section class="rounded-lg border border-slate-200 bg-white shadow-sm">
                        <div class="flex flex-col gap-3 border-b border-slate-200 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Survei</p>
                                <h2 class="mt-1 text-xl font-extrabold text-slate-900">Survei Aktif</h2>
                            </div>
                            <a href="{{ route('alumni.survei.index') }}" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">
                                Semua Survei
                                <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>

                        <div class="p-6">
                            @if($user->status === 'approved' && $profile)
                                <div class="space-y-3">
                                    @forelse($activeSurveys as $survei)
                                        <article class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                                            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                                                <div class="min-w-0">
                                                    <div class="flex flex-wrap items-center gap-2">
                                                        <span class="rounded-md bg-blue-100 px-2.5 py-1 text-xs font-extrabold text-blue-700">{{ number_format($survei->pertanyaan_survei_count) }} pertanyaan</span>
                                                        <span class="rounded-md {{ $survei->selesai_diisi ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }} px-2.5 py-1 text-xs font-extrabold">
                                                            {{ $survei->selesai_diisi ? 'Selesai' : 'Perlu diisi' }}
                                                        </span>
                                                    </div>
                                                    <h3 class="mt-3 text-base font-extrabold leading-6 text-slate-900">{{ $survei->judul }}</h3>
                                                    <p class="mt-1 text-sm font-medium leading-6 text-slate-500">{{ \Illuminate\Support\Str::limit($survei->deskripsi ?: 'Tidak ada deskripsi.', 120) }}</p>
                                                    <div class="mt-4 h-2 overflow-hidden rounded-full bg-slate-200">
                                                        <div class="h-full rounded-full {{ $survei->selesai_diisi ? 'bg-emerald-600' : 'bg-blue-600' }}" style="width: {{ $survei->progress_pengisian }}%"></div>
                                                    </div>
                                                    <p class="mt-2 text-xs font-bold text-slate-500">
                                                        {{ $survei->jawaban_count }}/{{ $survei->pertanyaan_survei_count }} jawaban
                                                        <span class="mx-1">.</span>
                                                        Batas {{ \Carbon\Carbon::parse($survei->tanggal_selesai)->format('d M Y') }}
                                                    </p>
                                                </div>
                                                <a href="{{ route('alumni.survei.show', $survei->id) }}" class="inline-flex shrink-0 items-center justify-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white hover:bg-slate-800">
                                                    {{ $survei->selesai_diisi ? 'Lihat' : 'Isi Survei' }}
                                                </a>
                                            </div>
                                        </article>
                                    @empty
                                        <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
                                            <div class="mx-auto grid h-12 w-12 place-items-center rounded-lg bg-white text-slate-500">
                                                <i class="fas fa-clipboard-check"></i>
                                            </div>
                                            <p class="mt-4 font-extrabold text-slate-900">Tidak ada survei aktif saat ini.</p>
                                            <p class="mt-1 text-sm font-medium text-slate-500">Survei baru akan tampil otomatis ketika periode dibuka.</p>
                                        </div>
                                    @endforelse
                                </div>
                            @else
                                <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
                                    <div class="mx-auto grid h-12 w-12 place-items-center rounded-lg bg-white text-slate-500">
                                        <i class="fas fa-lock"></i>
                                    </div>
                                    <p class="mt-4 font-extrabold text-slate-900">Survei belum tersedia</p>
                                    <p class="mt-1 text-sm font-medium text-slate-500">Akses survei terbuka setelah akun disetujui dan profil alumni dibuat.</p>
                                </div>
                            @endif
                        </div>
                    </section>

                    <section class="rounded-lg border border-slate-200 bg-white shadow-sm">
                        <div class="flex flex-col gap-3 border-b border-slate-200 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Lowongan</p>
                                <h2 class="mt-1 text-xl font-extrabold text-slate-900">Rekomendasi Karir</h2>
                            </div>
                            <a href="{{ route('alumni.karir.index') }}" class="inline-flex items-center justify-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">
                                Lihat Lowongan
                                <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                        <div class="grid gap-3 p-6 md:grid-cols-3">
                            @forelse($recommendedJobs as $lowongan)
                                <a href="{{ route('alumni.karir.show', $lowongan->id) }}" class="rounded-lg border border-slate-200 bg-slate-50 p-4 transition hover:bg-slate-100">
                                    <p class="text-sm font-extrabold leading-6 text-slate-900">{{ $lowongan->judul }}</p>
                                    <p class="mt-1 text-xs font-bold text-slate-500">{{ $lowongan->perusahaan ?: 'Perusahaan belum diisi' }}</p>
                                    <div class="mt-3 flex flex-wrap gap-2 text-xs font-bold text-slate-500">
                                        <span class="rounded-md bg-white px-2 py-1">{{ $lowongan->lokasi ?: 'Lokasi fleksibel' }}</span>
                                        <span class="rounded-md bg-white px-2 py-1">{{ $lowongan->tipe_pekerjaan ?: 'Tipe belum diisi' }}</span>
                                    </div>
                                </a>
                            @empty
                                <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-center md:col-span-3">
                                    <p class="font-extrabold text-slate-900">Belum ada lowongan relevan.</p>
                                    <p class="mt-1 text-sm font-medium text-slate-500">Lowongan baru akan tampil ketika admin membuka publikasi karir.</p>
                                </div>
                            @endforelse
                        </div>
                    </section>
                </div>

                <aside class="space-y-6">
                    <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Karir</p>
                                <h2 class="mt-1 text-xl font-extrabold text-slate-900">Pekerjaan Terkini</h2>
                            </div>
                            <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-emerald-100 text-emerald-700">
                                <i class="fas fa-building"></i>
                            </span>
                        </div>

                        @if($pekerjaanTerkini)
                            <div class="mt-6 rounded-lg border border-slate-200 bg-slate-50 p-5">
                                <h3 class="text-lg font-extrabold text-slate-900">{{ $pekerjaanTerkini->posisi }}</h3>
                                <p class="mt-1 font-bold text-slate-700">{{ $pekerjaanTerkini->nama_perusahaan }}</p>
                                <div class="mt-4 space-y-2 text-sm font-semibold text-slate-600">
                                    <p><i class="fas fa-map-marker-alt mr-2 text-slate-400"></i>{{ $pekerjaanTerkini->lokasi ?: 'Lokasi belum diisi' }}</p>
                                    <p><i class="fas fa-layer-group mr-2 text-slate-400"></i>{{ $pekerjaanTerkini->bidang_pekerjaan ?: 'Bidang belum diisi' }}</p>
                                    <p>
                                        <i class="far fa-calendar-alt mr-2 text-slate-400"></i>
                                        {{ \Carbon\Carbon::parse($pekerjaanTerkini->tanggal_mulai)->format('M Y') }}
                                        -
                                        {{ $pekerjaanTerkini->tanggal_selesai ? \Carbon\Carbon::parse($pekerjaanTerkini->tanggal_selesai)->format('M Y') : 'Sekarang' }}
                                    </p>
                                    @if($pekerjaanTerkini->gaji)
                                        <p><i class="fas fa-wallet mr-2 text-slate-400"></i>Rp {{ number_format($pekerjaanTerkini->gaji, 0, ',', '.') }}</p>
                                    @endif
                                </div>
                            </div>
                            <a href="{{ route('alumni.riwayat-pekerjaan.index') }}" class="mt-5 inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">
                                Lihat Riwayat Kerja
                            </a>
                        @else
                            <div class="mt-6 rounded-lg border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
                                <div class="mx-auto grid h-12 w-12 place-items-center rounded-lg bg-white text-slate-500">
                                    <i class="fas fa-briefcase"></i>
                                </div>
                                <p class="mt-4 font-extrabold text-slate-900">Riwayat pekerjaan belum diisi.</p>
                                <a href="{{ route('alumni.riwayat-pekerjaan.create') }}" class="mt-4 inline-flex items-center justify-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white hover:bg-slate-800">
                                    Tambah Pekerjaan
                                </a>
                            </div>
                        @endif
                    </section>

                    <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Aksi Cepat</p>
                        <div class="mt-4 grid gap-2">
                            <a href="{{ $profileActionUrl }}" class="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-bold text-slate-700 hover:bg-slate-100">
                                <span><i class="fas fa-user-pen mr-2 text-blue-700"></i>{{ $profileActionLabel }}</span>
                                <i class="fas fa-chevron-right text-xs text-slate-400"></i>
                            </a>
                            <a href="{{ route('alumni.riwayat-pekerjaan.create') }}" class="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-bold text-slate-700 hover:bg-slate-100">
                                <span><i class="fas fa-briefcase mr-2 text-blue-700"></i>Tambah Pekerjaan</span>
                                <i class="fas fa-chevron-right text-xs text-slate-400"></i>
                            </a>
                            <a href="{{ route('alumni.pendidikan.index') }}" class="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-bold text-slate-700 hover:bg-slate-100">
                                <span><i class="fas fa-book mr-2 text-blue-700"></i>Pendidikan Lanjut</span>
                                <i class="fas fa-chevron-right text-xs text-slate-400"></i>
                            </a>
                            <a href="{{ route('alumni.karir.index') }}" class="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-bold text-slate-700 hover:bg-slate-100">
                                <span><i class="fas fa-search mr-2 text-blue-700"></i>Cari Lowongan</span>
                                <i class="fas fa-chevron-right text-xs text-slate-400"></i>
                            </a>
                        </div>
                    </section>
                </aside>
            </section>
        </div>
    @endif
@endsection

@if($isAdmin)
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const prodiCanvas = document.getElementById('alumniPerProdiChart');
                const approvalCanvas = document.getElementById('alumniApprovalChart');
                const isMobileChart = window.matchMedia('(max-width: 640px)').matches;
                const shortenChartLabel = function(value) {
                    const label = this.getLabelForValue(value);

                    if (!isMobileChart || label.length <= 16) {
                        return label;
                    }

                    return label.slice(0, 16) + '...';
                };

                if (prodiCanvas) {
                    new Chart(prodiCanvas.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: @json($prodiLabels),
                            datasets: [{
                                label: 'Jumlah Alumni',
                                data: @json($prodiCounts),
                                backgroundColor: ['#0d5b8f', '#1473b7', '#8ec4e9', '#083b61', '#0b5181', '#c8e1f3'],
                                borderRadius: 8,
                                maxBarThickness: 34
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    backgroundColor: '#083b61',
                                    padding: 12
                                }
                            },
                            scales: {
                                x: {
                                    beginAtZero: true,
                                    ticks: { precision: 0 },
                                    grid: { color: '#cbddec' }
                                },
                                y: {
                                    ticks: {
                                        callback: shortenChartLabel,
                                        font: {
                                            size: isMobileChart ? 10 : 12
                                        }
                                    },
                                    grid: { display: false }
                                }
                            }
                        }
                    });
                }

                if (approvalCanvas) {
                    new Chart(approvalCanvas.getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: @json($approvalLabels),
                            datasets: [{
                                data: [{{ $pendingCount }}, {{ $approvedCount }}, {{ $rejectedCount }}],
                                backgroundColor: ['#8ec4e9', '#0d5b8f', '#083b61'],
                                borderColor: '#ffffff',
                                borderWidth: 4,
                                hoverOffset: 8
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            cutout: '68%',
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        usePointStyle: true,
                                        boxWidth: 8,
                                        padding: 18
                                    }
                                },
                                tooltip: {
                                    backgroundColor: '#083b61',
                                    padding: 12
                                }
                            }
                        }
                    });
                }
            });
        </script>
    @endpush
@endif