@extends('simaju.layouts.main')
@section('title', 'Detail Siswa')
@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-center justify-between">
            <div><h2 class="font-heading font-bold text-xl">{{ $siswa->nama }}</h2><p class="text-gray-500">{{ $siswa->nis }} / {{ $siswa->nisn }}</p></div>
            <div class="flex items-center gap-2">
                <a href="{{ route('simaju.kartu-pelajar.print-single', $siswa) }}" target="_blank" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    <i class="fas fa-id-card mr-1"></i>Cetak Kartu
                </a>
                <a href="{{ route('simaju.siswa.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="font-heading font-semibold mb-4 pb-2 border-b">Data Pribadi</h3>
            <dl class="space-y-2">
                <div class="flex"><dt class="w-28 text-gray-500">JK</dt><dd>{{ $siswa->jk == 'L' ? 'Laki-laki' : 'Perempuan' }}</dd></div>
                <div class="flex"><dt class="w-28 text-gray-500">TTL</dt><dd>{{ $siswa->tempat_lahir }}, {{ $siswa->tanggal_lahir?->format('d/m/Y') ?? '-' }}</dd></div>
                <div class="flex"><dt class="w-28 text-gray-500">Agama</dt><dd>{{ $siswa->agama }}</dd></div>
                <div class="flex"><dt class="w-28 text-gray-500">Alamat</dt><dd>{{ $siswa->alamat ?? '-' }}</dd></div>
            </dl>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="font-heading font-semibold mb-4 pb-2 border-b">Data Akademik</h3>
            <dl class="space-y-2">
                <div class="flex"><dt class="w-28 text-gray-500">Kelas</dt><dd>{{ $siswa->kelas?->nama_kelas ?? '-' }}</dd></div>
                <div class="flex"><dt class="w-28 text-gray-500">Tahun Masuk</dt><dd>{{ $siswa->tahun_masuk }}</dd></div>
                <div class="flex"><dt class="w-28 text-gray-500">Status</dt><dd><span class="px-2 py-1 text-xs rounded-full {{ $siswa->status_badge_class }}">{{ $siswa->status_label }}</span></dd></div>
            </dl>
        </div>
    </div>
</div>
@endsection