@extends('layouts.admin.app')

@section('content')
<div class="space-y-6">

    {{-- Page Header --}}
    <div class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 shadow-lg">
        <div class="text-white">
            <div class="flex items-center gap-3 mb-2">
                <div class="bg-white/20 p-3 rounded-lg backdrop-blur-sm">
                    <i class="bi bi-clipboard2-check-fill text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold">Input Nilai Siswa</h2>
                    <p class="text-indigo-100 mt-1">Kelola data nilai siswa per guru, kelas, dan mata pelajaran</p>
                </div>
            </div>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.nilai-siswa.export') }}"
               class="px-6 py-3 rounded-xl bg-green-500 text-white hover:bg-green-600 shadow-lg font-semibold flex items-center gap-2 transition-all duration-300 hover:scale-105">
                <i class="bi bi-file-earmark-excel-fill"></i>
                <span>Export Excel</span>
            </a>
        </div>
    </div>

    {{-- Notifikasi --}}
    @if(session('success'))
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-xl shadow-md flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-green-500 text-white p-2 rounded-full">
                    <i class="bi bi-check-circle-fill text-xl"></i>
                </div>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
            <button type="button" class="text-green-600 hover:text-green-800 transition" onclick="this.parentElement.remove()">
                <i class="bi bi-x-lg text-xl"></i>
            </button>
        </div>
    @endif

    {{-- Filter --}}
    <div class="bg-white shadow-lg rounded-2xl p-6 border border-gray-100">
        <div class="flex items-center gap-2 mb-4 pb-4 border-b border-gray-200">
            <div class="bg-indigo-100 p-2 rounded-lg">
                <i class="bi bi-funnel text-indigo-600 text-lg"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Filter & Pencarian</h3>
        </div>
        <form action="{{ route('admin.nilai-siswa.index') }}" method="GET" class="grid md:grid-cols-4 gap-4">
            <div>
                <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    <i class="bi bi-door-closed text-indigo-600"></i> Kelas
                </label>
                <select name="kelas" class="form-select w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                    <option value="">Semua Kelas</option>
                    @foreach($kelas as $k)
                        <option value="{{ $k->id_kelas }}" {{ request('kelas') == $k->id_kelas ? 'selected' : '' }}>
                            {{ $k->nama_kelas }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    <i class="bi bi-book text-indigo-600"></i> Mata Pelajaran
                </label>
                <select name="mapel" class="form-select w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                    <option value="">Semua Mapel</option>
                    @foreach($mapel as $m)
                        <option value="{{ $m }}" {{ request('mapel') == $m ? 'selected' : '' }}>
                            {{ $m }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    <i class="bi bi-person text-indigo-600"></i> Guru
                </label>
                <select name="guru" class="form-select w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                    <option value="">Semua Guru</option>
                    @foreach($guru as $g)
                        <option value="{{ $g->id_guru }}" {{ request('guru') == $g->id_guru ? 'selected' : '' }}>
                            {{ $g->nama_guru }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white shadow-md transition-all duration-300 hover:scale-105 font-semibold">
                    <i class="bi bi-search"></i> Terapkan
                </button>
            </div>
        </form>
    </div>

    {{-- Tabel Guru --}}
    <div class="bg-white shadow-lg rounded-2xl overflow-hidden border border-gray-100">
        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="bg-indigo-100 p-2 rounded-lg">
                    <i class="bi bi-table text-indigo-600 text-lg"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">Daftar Guru & Mata Pelajaran</h3>
            </div>
            <span class="text-sm text-gray-600 font-medium">Total: {{ $nilaiList->count() }} data</span>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm text-left text-gray-600">
                <thead class="bg-gradient-to-r from-indigo-50 to-purple-50 text-gray-700 text-sm font-semibold border-b-2 border-indigo-200">
                    <tr>
                        <th class="px-6 py-4 text-center">No</th>
                        <th class="px-6 py-4">Guru</th>
                        <th class="px-6 py-4">Kelas</th>
                        <th class="px-6 py-4">Mata Pelajaran</th>
                        <th class="px-6 py-4 text-center">Jumlah Siswa</th>
                        <th class="px-6 py-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($nilaiList as $index => $item)
                        <tr class="hover:bg-indigo-50/50 transition-colors duration-200">
                            <td class="px-6 py-4 text-center">
                                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 font-bold text-sm">
                                    {{ $index + 1 }}
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-bold">
                                        {{ strtoupper(substr($item->guru->nama_guru, 0, 2)) }}
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800">{{ $item->guru->nama_guru }}</p>
                                        <p class="text-xs text-gray-400">NIP: {{ $item->guru->nip ?? '-' }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-violet-100 to-purple-100 text-purple-700 border border-purple-200">
                                    <i class="bi bi-bookmark-fill"></i>
                                    {{ $item->kelas_siswa->nama_kelas ?? '-' }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-100 to-sky-100 text-blue-700 border border-blue-200">
                                    <i class="bi bi-book-fill"></i>
                                    {{ $item->guru->mata_pelajaran ?? '-' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-bold text-indigo-700">
                                {{ $item->jumlah_siswa }}
                            </td>
                            <td class="px-6 py-4 text-center">
                                <a href="{{ route('admin.nilai-siswa.kelola', $item->id_guru) }}"
                                   class="inline-flex items-center gap-1 px-4 py-2 rounded-lg bg-gradient-to-r from-amber-400 to-yellow-500 hover:from-amber-500 hover:to-yellow-600 text-white shadow-md transition-all duration-300 hover:scale-105 font-medium text-sm">
                                    <i class="bi bi-list-ul"></i> Kelola
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center">
                                <div class="flex flex-col items-center gap-3">
                                    <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center">
                                        <i class="bi bi-inbox text-4xl text-gray-400"></i>
                                    </div>
                                    <p class="text-gray-600 font-medium text-lg">Belum ada data nilai</p>
                                    <p class="text-gray-400 text-sm">Silakan tambahkan data nilai terlebih dahulu</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection