@extends('layouts.admin.app')

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

    {{-- 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-pencil-square text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold">Kelola Nilai</h2>
                    <p class="text-indigo-100 mt-1">
                        {{ $guru->nama_guru }} &mdash;
                        {{ $guru->mata_pelajaran ?? '-' }}
                    </p>
                </div>
            </div>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.nilai-siswa.index') }}"
               class="px-6 py-3 rounded-xl bg-white/20 hover:bg-white/30 text-white font-semibold flex items-center gap-2 transition-all duration-300">
                <i class="bi bi-arrow-left"></i> Kembali
            </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" onclick="this.parentElement.remove()" class="text-green-600 hover:text-green-800">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
    @endif

    {{-- Statistik --}}
    <div class="grid md:grid-cols-4 gap-4">
        <div class="bg-gradient-to-br from-green-50 to-emerald-50 shadow-lg rounded-2xl p-6 border border-green-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-4xl font-bold text-green-700">{{ $statistik['rata_kelas'] }}</p>
                    <p class="text-green-600 font-semibold mt-1">Rata-rata Kelas</p>
                </div>
                <div class="bg-green-100 p-4 rounded-xl">
                    <i class="bi bi-graph-up text-green-600 text-3xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-br from-blue-50 to-sky-50 shadow-lg rounded-2xl p-6 border border-blue-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-4xl font-bold text-blue-700">{{ $statistik['jumlah_tp'] }}</p>
                    <p class="text-blue-600 font-semibold mt-1">Jumlah TP</p>
                </div>
                <div class="bg-blue-100 p-4 rounded-xl">
                    <i class="bi bi-list-check text-blue-600 text-3xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-br from-yellow-50 to-amber-50 shadow-lg rounded-2xl p-6 border border-yellow-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-4xl font-bold text-yellow-700">{{ $statistik['belum_lengkap'] }}</p>
                    <p class="text-yellow-600 font-semibold mt-1">Belum Lengkap</p>
                </div>
                <div class="bg-yellow-100 p-4 rounded-xl">
                    <i class="bi bi-exclamation-circle-fill text-yellow-600 text-3xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-br from-violet-50 to-purple-50 shadow-lg rounded-2xl p-6 border border-violet-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-4xl font-bold text-violet-700">{{ $statistik['total_siswa'] }}</p>
                    <p class="text-violet-600 font-semibold mt-1">Total Siswa</p>
                </div>
                <div class="bg-violet-100 p-4 rounded-xl">
                    <i class="bi bi-people-fill text-violet-600 text-3xl"></i>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Nilai --}}
    <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">Input Nilai Siswa</h3>
            </div>
            <button type="button" onclick="document.getElementById('modal-tambah').classList.remove('hidden')"
                    class="px-4 py-2 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold flex items-center gap-2 hover:scale-105 transition-all">
                <i class="bi bi-plus-circle-fill"></i> Tambah Siswa
            </button>
        </div>

        <form action="{{ route('admin.nilai-siswa.simpanBulk', $guru->id_guru) }}" method="POST">
            @csrf
            <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 font-semibold border-b-2 border-indigo-200">
                        <tr>
                            <th class="px-4 py-4 text-center">No</th>
                            <th class="px-4 py-4">Siswa</th>
                            <th class="px-4 py-4 text-center">Kelas</th>
                            @for($i = 1; $i <= max($jumlahTp, 1); $i++)
                                <th class="px-4 py-4 text-center">TP {{ $i }}</th>
                            @endfor
                            <th class="px-4 py-4 text-center">PTS</th>
                            <th class="px-4 py-4 text-center">PAS</th>
                            <th class="px-4 py-4 text-center">Rata-rata</th>
                            <th class="px-4 py-4 text-center">Grade</th>
                            <th class="px-4 py-4 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($nilaiSiswa as $index => $nilai)
                            @php
                                $tpArr   = $nilai->tp->sortBy('urutan_tp')->pluck('nilai')->toArray();
                                $allNilai = array_merge($tpArr, array_filter([$nilai->pts, $nilai->pas]));
                                $rata    = count($allNilai) > 0 ? round(array_sum($allNilai) / count($allNilai), 1) : 0;
                                $grade   = $rata >= 90 ? 'A' : ($rata >= 80 ? 'B' : ($rata >= 70 ? 'C' : 'D'));
                                $gradeColor = match($grade) {
                                    'A' => 'bg-green-100 text-green-700',
                                    'B' => 'bg-blue-100 text-blue-700',
                                    'C' => 'bg-yellow-100 text-yellow-700',
                                    default => 'bg-red-100 text-red-700',
                                };
                            @endphp
                            <tr class="hover:bg-indigo-50/50 transition-colors duration-200">
                                <td class="px-4 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-4 py-4">
                                    <input type="hidden" name="nilai[{{ $index }}][id_nilai]" value="{{ $nilai->id_nilai }}">
                                    <div class="flex items-center gap-3">
                                        <div class="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-bold text-sm">
                                            {{ strtoupper(substr($nilai->siswa->nama_siswa, 0, 1)) }}
                                        </div>
                                        <div>
                                            <p class="font-semibold text-gray-800">{{ $nilai->siswa->nama_siswa }}</p>
                                            <p class="text-xs text-gray-400">{{ $nilai->siswa->nisn }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-4 text-center">
                                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold bg-violet-100 text-violet-700">
                                        {{ $nilai->siswa->kelas->nama_kelas ?? '-' }}
                                    </span>
                                </td>

                                {{-- TP Inputs --}}
                                @for($i = 0; $i < max($jumlahTp, 1); $i++)
                                    <td class="px-4 py-4 text-center">
                                        <input type="number"
                                               name="nilai[{{ $index }}][tp][{{ $i }}]"
                                               value="{{ $tpArr[$i] ?? '' }}"
                                               min="0" max="100" step="0.1"
                                               class="w-16 text-center border-2 border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none transition-all nilai-input"
                                               data-row="{{ $index }}">
                                    </td>
                                @endfor

                                {{-- PTS --}}
                                <td class="px-4 py-4 text-center">
                                    <input type="number"
                                           name="nilai[{{ $index }}][pts]"
                                           value="{{ $nilai->pts }}"
                                           min="0" max="100" step="0.1"
                                           class="w-16 text-center border-2 border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none transition-all nilai-input"
                                           data-row="{{ $index }}">
                                </td>

                                {{-- PAS --}}
                                <td class="px-4 py-4 text-center">
                                    <input type="number"
                                           name="nilai[{{ $index }}][pas]"
                                           value="{{ $nilai->pas }}"
                                           min="0" max="100" step="0.1"
                                           class="w-16 text-center border-2 border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none transition-all nilai-input"
                                           data-row="{{ $index }}">
                                </td>

                                <td class="px-4 py-4 text-center font-bold text-indigo-700" id="rata-{{ $index }}">
                                    {{ $rata > 0 ? $rata : '-' }}
                                </td>

                                <td class="px-4 py-4 text-center">
                                    <span id="grade-{{ $index }}" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {{ $gradeColor }}">
                                        {{ $rata > 0 ? $grade : '-' }}
                                    </span>
                                </td>

                                <td class="px-4 py-4 text-center">
                                    <form action="{{ route('admin.nilai-siswa.destroy', $nilai->id_nilai) }}" method="POST"
                                          onsubmit="return confirm('Hapus data nilai siswa ini?')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="inline-flex items-center gap-1 px-3 py-2 rounded-lg bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white text-sm font-medium transition-all hover:scale-105">
                                            <i class="bi bi-trash3-fill"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ max($jumlahTp, 1) + 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 siswa</p>
                                        <p class="text-gray-400 text-sm">Tambahkan siswa terlebih dahulu</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Tombol Simpan --}}
            @if($nilaiSiswa->count() > 0)
                <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-t border-gray-200 flex justify-end">
                    <button type="submit"
                            class="px-8 py-3 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg font-semibold flex items-center gap-2 transition-all duration-300 hover:scale-105">
                        <i class="bi bi-floppy-fill"></i> Simpan Semua Nilai
                    </button>
                </div>
            @endif
        </form>
    </div>

</div>

{{-- Modal Tambah Siswa --}}
<div id="modal-tambah" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md mx-4">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-bold text-gray-800">Tambah Siswa</h3>
            <button onclick="document.getElementById('modal-tambah').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600 transition">
                <i class="bi bi-x-lg text-xl"></i>
            </button>
        </div>
        <form action="{{ route('admin.nilai-siswa.store') }}" method="POST">
            @csrf
            <input type="hidden" name="id_guru" value="{{ $guru->id_guru }}">
            <div class="mb-4">
                <label class="text-sm font-medium text-gray-700 mb-2 block">Cari & Pilih Siswa</label>
                <select name="id_siswa" class="form-select w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:outline-none" required>
                    <option value="">-- Pilih Siswa --</option>
                    @foreach(\App\Models\Siswa::with('kelas')->orderBy('nama_siswa')->get() as $s)
                        <option value="{{ $s->id }}">
                            {{ $s->nama_siswa }} — {{ $s->kelas->nama_kelas ?? 'Tanpa Kelas' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-3 mt-6">
                <button type="button" onclick="document.getElementById('modal-tambah').classList.add('hidden')"
                        class="flex-1 px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-600 font-semibold hover:bg-gray-50 transition">
                    Batal
                </button>
                <button type="submit"
                        class="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold hover:scale-105 transition-all">
                    <i class="bi bi-plus-circle-fill"></i> Tambahkan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.querySelectorAll('.nilai-input').forEach(input => {
    input.addEventListener('input', function () {
        const row = this.dataset.row;
        const allInputs = document.querySelectorAll(`.nilai-input[data-row="${row}"]`);
        let sum = 0, count = 0;
        allInputs.forEach(i => {
            const v = parseFloat(i.value);
            if (!isNaN(v)) { sum += v; count++; }
        });
        const rata = count > 0 ? (sum / count).toFixed(1) : 0;
        document.getElementById(`rata-${row}`).textContent = rata > 0 ? rata : '-';

        const grade = rata >= 90 ? 'A' : rata >= 80 ? 'B' : rata >= 70 ? 'C' : 'D';
        const gradeEl = document.getElementById(`grade-${row}`);
        gradeEl.textContent = rata > 0 ? grade : '-';
        gradeEl.className = 'inline-flex items-center px-3 py-1 rounded-full text-xs font-bold ' + {
            'A': 'bg-green-100 text-green-700',
            'B': 'bg-blue-100 text-blue-700',
            'C': 'bg-yellow-100 text-yellow-700',
            'D': 'bg-red-100 text-red-700',
        }[grade];
    });
});
</script>
@endsection