@extends('public.layouts.public')

@section('title', 'Detail Wisudawan - ' . $wisudawan->nama_lengkap)

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8">

    <!-- Navigation Header / Back Button -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <a href="{{ route('public.home') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-indigo-400 font-bold text-xs border border-slate-800 transition-all">
            <i class="fas fa-arrow-left"></i> Kembali ke Daftar Wisudawan
        </a>

        <div class="flex items-center gap-3">
            <a href="{{ route('public.tracer.login', ['nim' => $wisudawan->nim]) }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs shadow-lg shadow-indigo-600/30 transition-all">
                <i class="fas fa-edit"></i> Isi Tracer Study
            </a>
            <span class="px-3 py-1 rounded-full text-xs font-bold uppercase bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                Terverifikasi Resmi
            </span>
        </div>
    </div>

    <!-- 1. Data Pribadi Wisudawan -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6 shadow-xl">
        <div class="flex items-center gap-4 border-b border-slate-800 pb-4">
            <img src="{{ asset('assets/images/uncen.ico') }}" alt="Logo UNCEN" class="w-12 h-12 object-contain drop-shadow">
            <div>
                <h2 class="text-xl font-bold text-white tracking-tight">Data Pribadi & Profil Alumni</h2>
                <p class="text-xs text-slate-400">Pangkalan Data Terpadu Universitas Cenderawasih</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
            <div class="space-y-4">
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">No. Alumni</span>
                    <span class="font-mono font-bold text-indigo-400 text-base">{{ $wisudawan->no_alumni }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">NIM</span>
                    <span class="font-mono text-white text-base">{{ $wisudawan->nim }}</span>
                </div>
            </div>

            <div class="space-y-4">
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Nama Lengkap</span>
                    <span class="font-extrabold text-white text-lg">{{ $wisudawan->nama_lengkap }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Jenis Kelamin</span>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-800 text-slate-200 mt-1">
                        {{ $wisudawan->jenis_kelamin == 'L' || $wisudawan->jenis_kelamin == 'Laki-laki' ? 'Laki-laki' : 'Perempuan' }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- 2. Data Akademik -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6 shadow-xl">
        <div class="flex items-center gap-3 border-b border-slate-800 pb-4">
            <div class="w-10 h-10 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center font-bold">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <div>
                <h3 class="text-xl font-bold text-white">Data Akademik</h3>
                <p class="text-xs text-slate-400">Riwayat studi dan kelulusan</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
            <div class="space-y-4">
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Program Studi</span>
                    <span class="font-bold text-white text-base block">{{ $wisudawan->prodi->nama_prodi ?? '-' }}</span>
                    <div class="flex gap-2 mt-1">
                        <span class="px-2 py-0.5 rounded text-xs font-bold bg-slate-800 text-slate-300">{{ $wisudawan->prodi->jenjang ?? '-' }}</span>
                        @if ($wisudawan->prodi->akreditasi ?? false)
                            <span class="px-2 py-0.5 rounded text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                Akreditasi {{ $wisudawan->prodi->akreditasi }}
                            </span>
                        @endif
                    </div>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Fakultas</span>
                    <span class="font-semibold text-slate-200">{{ $wisudawan->prodi->fakultas->nama_fakultas ?? '-' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Angkatan / Tahun</span>
                    <span class="font-mono text-slate-200">{{ $wisudawan->tahun }}</span>
                </div>
            </div>

            <div class="space-y-4">
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">IPK Kelulusan</span>
                    <span class="text-2xl font-black text-indigo-400 block mt-1">{{ number_format($wisudawan->ipk, 2) }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Predikat Kelulusan</span>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 mt-1">
                        {{ $wisudawan->predikat ?? 'Tidak Ada Predikat' }}
                    </span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Periode Wisuda</span>
                    <span class="font-semibold text-slate-200">{{ $wisudawan->periodeWisuda->nama_periode ?? $wisudawan->kode_periode ?? 'Data tidak tersedia' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. Data Ijazah & Yudisium -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6 shadow-xl">
        <div class="flex items-center gap-3 border-b border-slate-800 pb-4">
            <div class="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center font-bold">
                <i class="fas fa-file-alt"></i>
            </div>
            <div>
                <h3 class="text-xl font-bold text-white">Data Ijazah & Yudisium</h3>
                <p class="text-xs text-slate-400">Verifikasi dokumen kelulusan</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
            <div class="space-y-4">
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Nomor Ijazah</span>
                    @if ($wisudawan->nomor_ijasah)
                        <span class="font-mono font-bold text-emerald-400 text-base block mt-1">{{ $wisudawan->nomor_ijasah }}</span>
                    @else
                        <span class="px-2.5 py-1 rounded text-xs bg-slate-800 text-slate-400 italic mt-1 inline-block">Belum Terbit</span>
                    @endif
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Tanggal Ijazah</span>
                    <span class="font-semibold text-slate-200">{{ $wisudawan->tanggal_ijasah ? date('d/m/Y', strtotime($wisudawan->tanggal_ijasah)) : 'Data tidak tersedia' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Status Ijazah</span>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {{ $wisudawan->status_ijasah == 'sudah' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-amber-500/10 text-amber-400 border border-amber-500/20' }} mt-1">
                        {{ ucfirst($wisudawan->status_ijasah ?? 'Proses') }}
                    </span>
                </div>
            </div>

            <div class="space-y-4">
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">Tanggal Yudisium</span>
                    <span class="font-semibold text-slate-200">{{ $wisudawan->tanggal_yudisium ? date('d/m/Y', strtotime($wisudawan->tanggal_yudisium)) : 'Data tidak tersedia' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold text-slate-500 uppercase tracking-wider">SK Yudisium</span>
                    <span class="font-mono text-slate-300 font-semibold">{{ $wisudawan->sk_yudisium ?? 'Data tidak tersedia' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 4. Informasi Tambahan (If exists) -->
    @if ($wisudawan->keterangan)
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-3">
            <h4 class="text-sm font-bold text-slate-300 uppercase tracking-wider">Informasi Tambahan</h4>
            <p class="text-sm text-slate-300 bg-slate-950 p-4 rounded-xl border border-slate-800">{{ $wisudawan->keterangan }}</p>
        </div>
    @endif

    <div class="text-center pt-4 flex justify-center gap-3">
        <a href="{{ route('public.tracer.login', ['nim' => $wisudawan->nim]) }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm transition-all shadow-lg shadow-indigo-600/30">
            <i class="fas fa-edit"></i> Isi Kuesioner Tracer Study Alumni
        </a>
        <a href="{{ route('public.home') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold text-sm transition-all">
            <i class="fas fa-arrow-left"></i> Kembali ke Daftar
        </a>
    </div>

</div>
@endsection