@extends('simaju.layouts.main')
@section('title', 'Detail Siswa')
@section('page-title', 'Detail Siswa')
@section('content')
<!-- Header -->
<div class="mb-6">
    <div class="flex items-center gap-4">
        <a href="{{ route('simaju.guru-wali.siswa', $kelas->waliKelas->id) }}" class="p-2 hover:bg-gray-100 rounded-lg">
            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <div>
            <h2 class="text-xl font-semibold text-gray-800">Detail Siswa</h2>
            <p class="text-sm text-gray-500">{{ $siswa->nama }} - {{ $kelas->nama_kelas }}</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Profile Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="text-center mb-4">
            <div class="w-24 h-24 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center text-white text-3xl font-bold mx-auto">
                {{ strtoupper(substr($siswa->nama, 0, 1)) }}
            </div>
            <h3 class="text-lg font-semibold text-gray-800 mt-4">{{ $siswa->nama }}</h3>
            <p class="text-gray-500">{{ $siswa->nis }}</p>
        </div>
        <div class="space-y-2 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Kelas</span><span class="font-medium">{{ $kelas->nama_kelas }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Jurusan</span><span class="font-medium">{{ $kelas->jurusan->nama_jurusan ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">JK</span><span class="font-medium">{{ $siswa->jk == 'L' ? 'Laki-laki' : 'Perempuan' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">TTL</span><span class="font-medium text-right text-xs">{{ $siswa->tempat_lahir }}, {{ $siswa->tanggal_lahir ? $siswa->tanggal_lahir->format('d/m/Y') : '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Agama</span><span class="font-medium">{{ $siswa->agama ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Status</span><span class="px-2 py-0.5 text-xs rounded-full {{ $siswa->status == 'aktif' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">{{ ucfirst($siswa->status) }}</span></div>
        </div>
    </div>

    <!-- Content -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Nilai -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Nilai Terbaru</h3>
            @if($nilais && $nilais->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Mapel</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Tipe</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Nilai</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($nilais as $n)
                        <tr>
                            <td class="px-4 py-2 text-sm">{{ $n->mataPelajaran->nama_mapel ?? '-' }}</td>
                            <td class="px-4 py-2 text-sm">{{ $n->tipe_label }}</td>
                            <td class="px-4 py-2 text-sm font-bold {{ $n->nilai >= 75 ? 'text-green-600' : 'text-red-600' }}">{{ $n->nilai }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <p class="text-gray-500 text-center py-4">Belum ada data nilai</p>
            @endif
        </div>

        <!-- Absensi -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Riwayat Absensi</h3>
            @if($absensis && $absensis->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Keterangan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($absensis as $a)
                        <tr>
                            <td class="px-4 py-2 text-sm">{{ $a->tanggal->format('d/m/Y') }}</td>
                            <td class="px-4 py-2 text-sm">
                                @php
                                    $badge = ['hadir' => 'bg-green-100 text-green-800', 'sakit' => 'bg-yellow-100 text-yellow-800', 'izin' => 'bg-blue-100 text-blue-800', 'alpha' => 'bg-red-100 text-red-800'];
                                    $label = ['hadir' => 'Hadir', 'sakit' => 'Sakit', 'izin' => 'Izin', 'alpha' => 'Alpha'];
                                @endphp
                                <span class="px-2 py-0.5 text-xs rounded-full {{ $badge[$a->status] ?? 'bg-gray-100' }}">{{ $label[$a->status] ?? $a->status }}</span>
                            </td>
                            <td class="px-4 py-2 text-sm">{{ $a->keterangan ?? '-' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <p class="text-gray-500 text-center py-4">Belum ada data absensi</p>
            @endif
        </div>
    </div>
</div>
@endsection