@extends('simaju.layouts.main')
@section('title', 'Dashboard Wali Kelas')
@section('page-title', 'Dashboard Wali Kelas')
@section('content')
<!-- Header -->
<div class="mb-6">
    <div class="flex items-center gap-4">
        <a href="{{ route('simaju.guru-wali.index') }}" 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">Dashboard Wali Kelas</h2>
            <p class="text-sm text-gray-500">{{ $kelas->nama_kelas }} - {{ $kelas->waliKelas->nama ?? '-' }}</p>
        </div>
    </div>
</div>

<!-- Quick Links -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <a href="{{ route('simaju.guru-wali.siswa', $kelas->waliKelas->id) }}" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition card-hover">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ $jumlahSiswa }}</p>
                <p class="text-sm text-gray-500">Siswa Aktif</p>
            </div>
        </div>
    </a>
    <a href="{{ route('simaju.guru-wali.rekap-absensi', $kelas->waliKelas->id) }}" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition card-hover">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ $absensi->sum() ?? 0 }}</p>
                <p class="text-sm text-gray-500">Data Absensi</p>
            </div>
        </div>
    </a>
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ number_format($nilaiRataRata, 1) }}</p>
                <p class="text-sm text-gray-500">Rata-rata Nilai</p>
            </div>
        </div>
    </div>
    <a href="{{ route('simaju.guru-wali.rekap-nilai', $kelas->waliKelas->id) }}" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition card-hover">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">Lihat</p>
                <p class="text-sm text-gray-500">Detail Nilai</p>
            </div>
        </div>
    </a>
</div>

<!-- Class Info & Stats -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Class Info -->
    <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">Informasi Kelas</h3>
        <div class="space-y-3">
            <div class="flex justify-between">
                <span class="text-gray-500">Kelas</span>
                <span class="font-medium text-gray-800">{{ $kelas->nama_kelas }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Jurusan</span>
                <span class="font-medium text-gray-800">{{ $kelas->jurusan->nama_jurusan ?? '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Tingkat</span>
                <span class="font-medium text-gray-800">Kelas {{ $kelas->tingkat }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Tahun Ajaran</span>
                <span class="font-medium text-gray-800">{{ $kelas->tahun_ajaran }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Wali Kelas</span>
                <span class="font-medium text-gray-800">{{ $kelas->waliKelas->nama ?? '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Kapasitas</span>
                <span class="font-medium text-gray-800">{{ $kelas->kapasitas }} siswa</span>
            </div>
        </div>
    </div>

    <!-- Attendance Summary -->
    <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">Ringkasan Absensi ({{ now()->format('F Y') }})</h3>
        <div class="space-y-3">
            <div class="flex justify-between items-center">
                <span class="text-gray-500">Hadir</span>
                <span class="font-medium text-green-600">{{ $absensi['hadir'] ?? 0 }}x</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-500">Sakit</span>
                <span class="font-medium text-yellow-600">{{ $absensi['sakit'] ?? 0 }}x</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-500">Izin</span>
                <span class="font-medium text-blue-600">{{ $absensi['izin'] ?? 0 }}x</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-500">Alpha</span>
                <span class="font-medium text-red-600">{{ $absensi['alpha'] ?? 0 }}x</span>
            </div>
        </div>
        <a href="{{ route('simaju.guru-wali.rekap-absensi', $kelas->waliKelas->id) }}" class="mt-4 inline-flex items-center text-primary hover:text-blue-600 text-sm font-medium">
            Lihat Selengkapnya
            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
    </div>
</div>

<!-- Student List Preview -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mt-6">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">Daftar Siswa</h3>
        <a href="{{ route('simaju.guru-wali.siswa', $kelas->waliKelas->id) }}" class="text-primary hover:text-blue-600 text-sm font-medium">Lihat Semua</a>
    </div>
    <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">No</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Nama</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">NIS</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">JK</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($kelas->siswas->take(5) as $i => $s)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-2 text-sm">{{ $i + 1 }}</td>
                    <td class="px-4 py-2 text-sm font-medium text-gray-900">{{ $s->nama }}</td>
                    <td class="px-4 py-2 text-sm text-gray-500">{{ $s->nis }}</td>
                    <td class="px-4 py-2 text-sm text-gray-500">{{ $s->jk }}</td>
                    <td class="px-4 py-2">
                        <a href="{{ route('simaju.guru-wali.siswa-detail', [$kelas->waliKelas->id, $s->id]) }}" class="text-primary hover:text-blue-600 text-sm">Detail</a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">Belum ada siswa di kelas ini</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection