@extends('layouts.app')

@section('title', 'Cetak Rapor | E-Rapor GTech')

@section('content')
<div class="mb-8 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Cetak Rapor PTS</h1>
        <p class="text-gray-600">Pilih kelas untuk melihat daftar siswa dan mencetak rapor.</p>
    </div>
</div>

<div class="glass-panel rounded-2xl shadow-sm mb-8 overflow-hidden">
    <div class="bg-white/50 p-6 border-b border-gray-200/50">
        <form method="GET" action="/cetak-rapor" class="flex flex-col md:flex-row gap-4 items-end">
            <div class="w-full md:w-1/2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Kelas</label>
                <select name="class_id" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 p-2.5 border bg-white" required>
                    <option value="">-- Pilih Kelas --</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ ($selectedClass->id ?? '') == $class->id ? 'selected' : '' }}>
                            {{ $class->nama_kelas }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="w-full md:w-auto">
                <button type="submit" class="w-full md:w-auto bg-brand-600 hover:bg-brand-700 text-white font-medium py-2.5 px-6 rounded-lg shadow-sm transition-colors flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    Tampilkan Siswa
                </button>
            </div>
        </form>
    </div>
</div>

@if($selectedClass)
    <div class="glass-panel rounded-2xl shadow-sm overflow-hidden">
        <div class="bg-white/70 p-4 border-b border-gray-200/50 flex justify-between items-center">
            <h2 class="text-lg font-bold text-gray-800">
                Daftar Siswa Kelas {{ $selectedClass->nama_kelas }}
            </h2>
            <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200">
                {{ $students->count() }} Siswa
            </span>
        </div>

        @if($students->isEmpty())
            <div class="p-12 text-center text-gray-500">
                <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" 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>
                <p>Belum ada data siswa untuk kelas ini.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left text-gray-600">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50/80">
                        <tr>
                            <th scope="col" class="px-6 py-4 font-semibold w-16">No</th>
                            <th scope="col" class="px-6 py-4 font-semibold">NISN / NIS</th>
                            <th scope="col" class="px-6 py-4 font-semibold">Nama Siswa</th>
                            <th scope="col" class="px-6 py-4 font-semibold text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($students as $index => $siswa)
                            <tr class="bg-white/40 border-b border-gray-100 hover:bg-white/60 transition-colors">
                                <td class="px-6 py-4">{{ $index + 1 }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $siswa->nisn_formatted }} / {{ $siswa->nis ?? '-' }}</td>
                                <td class="px-6 py-4 font-medium text-gray-900">{{ $siswa->nama }}</td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ url('/cetak-rapor/' . $selectedClass->id . '/' . $siswa->id_siswa) }}" target="_blank" class="inline-flex items-center gap-1 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-brand-600 font-medium py-1.5 px-3 rounded shadow-sm text-xs transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                                        Cetak
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
@endif
@endsection