@extends('public.layouts.public')

@section('title', 'Verifikasi Ijazah & Data Wisudawan')

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

    <!-- Search Section Header -->
    <div class="text-center max-w-2xl mx-auto space-y-3">
        <h2 class="text-3xl font-extrabold text-white">Verifikasi Ijazah & Data Wisudawan</h2>
        <p class="text-sm text-slate-400">
            Masukkan NIM, Nama Alumni, atau Nomor Ijazah untuk memverifikasi keabsahan data kelulusan.
        </p>

        <!-- Search Form -->
        <form method="GET" action="{{ route('public.wisudawan') }}" class="pt-4 flex items-center gap-3">
            <input type="text" name="search" value="{{ $search }}" required placeholder="Ketik NIM, Nama, atau Nomor Ijazah..." class="flex-1 px-5 py-3.5 rounded-2xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-indigo-500 transition-all">
            <button type="submit" class="px-6 py-3.5 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm transition-all shadow-lg shadow-indigo-600/30">
                Verifikasi
            </button>
        </form>
    </div>

    <!-- Search Results -->
    @if ($search !== null)
        <div class="space-y-4">
            <h3 class="text-lg font-bold text-white">Hasil Verifikasi untuk "{{ $search }}"</h3>

            @if ($wisudawan && $wisudawan->count() > 0)
                <div class="grid grid-cols-1 gap-5">
                    @foreach ($wisudawan as $w)
                        <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4 relative overflow-hidden">
                            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-800 pb-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center font-bold">
                                        ✓
                                    </div>
                                    <div>
                                        <span class="px-2.5 py-0.5 rounded text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">DATA TERVERIFIKASI RESMI</span>
                                        <h4 class="text-xl font-extrabold text-white mt-1">{{ $w->nama_lengkap }}</h4>
                                    </div>
                                </div>
                                <span class="px-3 py-1 rounded-full text-xs font-bold uppercase bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">
                                    {{ $w->predikat }}
                                </span>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-sm text-slate-300">
                                <div>
                                    <span class="block text-xs font-semibold text-slate-500 uppercase">NIM</span>
                                    <span class="font-mono font-bold text-white">{{ $w->nim }}</span>
                                </div>
                                <div>
                                    <span class="block text-xs font-semibold text-slate-500 uppercase">Program Studi</span>
                                    <span class="font-semibold text-white">{{ $w->prodi->nama_prodi ?? '-' }}</span>
                                </div>
                                <div>
                                    <span class="block text-xs font-semibold text-slate-500 uppercase">Fakultas</span>
                                    <span class="font-semibold text-white">{{ $w->prodi->fakultas->nama_fakultas ?? '-' }}</span>
                                </div>
                                <div>
                                    <span class="block text-xs font-semibold text-slate-500 uppercase">IPK Kelulusan</span>
                                    <span class="font-bold text-indigo-400">{{ $w->ipk }}</span>
                                </div>
                                <div>
                                    <span class="block text-xs font-semibold text-slate-500 uppercase">Nomor Ijazah</span>
                                    <span class="font-mono text-white">{{ $w->nomor_ijasah ?? '-' }}</span>
                                </div>
                                <div>
                                    <span class="block text-xs font-semibold text-slate-500 uppercase">Status Ijazah</span>
                                    <span class="font-semibold text-emerald-400">{{ ucfirst($w->status_ijasah) }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="p-8 rounded-3xl bg-slate-900 border border-slate-800 text-center space-y-3">
                    <div class="w-12 h-12 rounded-full bg-rose-500/10 text-rose-400 flex items-center justify-center font-bold mx-auto text-xl">!</div>
                    <h4 class="text-lg font-bold text-white">Data Tidak Ditemukan</h4>
                    <p class="text-xs text-slate-400 max-w-md mx-auto">
                        Data dengan kata kunci "{{ $search }}" tidak terdaftar dalam basis data kelulusan wisudawan Universitas Cenderawasih. Pastikan penulisan NIM atau Nama sudah benar.
                    </p>
                </div>
            @endif
        </div>
    @endif

</div>
@endsection