@extends('layouts.app')

@section('title', 'Input Nilai — ' . $classRoom->class_name . ' — ' . $subject->name)

@section('content')
<div class="mb-6">
    <a href="{{ route('guru.nilai.index') }}" class="text-sm text-slate-500 dark:text-white/40 hover:text-emerald-600 dark:hover:text-emerald-400">&larr; Kembali</a>
</div>

<div class="mb-8">
    <h1 class="text-2xl font-bold tracking-tight">Input Nilai</h1>
    <p class="mt-1 text-sm text-slate-500 dark:text-white/40">{{ $classRoom->class_name }} &middot; {{ $subject->name }}</p>
</div>

<div id="status-banner" class="mb-4 hidden"></div>

<form method="POST" action="{{ route('guru.nilai.store') }}" id="grade-form">
    @csrf
    <input type="hidden" name="class_id" value="{{ $classRoom->id }}">
    <input type="hidden" name="subject_id" value="{{ $subject->id }}">

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div>
            <label class="block text-xs font-medium text-slate-500 dark:text-white/40 mb-1">Tanggal</label>
            <input type="date" id="date-input" name="date" value="{{ $date }}"
                class="w-full rounded-lg border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-emerald-500/20 dark:text-white/80">
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-500 dark:text-white/40 mb-1">Tipe Nilai</label>
            <select id="type-input" name="grade_type_id" class="w-full rounded-lg border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-emerald-500/20 dark:text-white/80">
                @foreach ($gradeTypes as $gt)
                <option value="{{ $gt->id }}" data-weight="{{ $gt->weight }}" {{ $gradeTypeId === $gt->id ? 'selected' : '' }}>{{ $gt->name }} ({{ $gt->weight }}%)</option>
                @endforeach
            </select>
        </div>
        <div class="flex items-end">
            <div id="ajax-status" class="text-xs text-slate-400 dark:text-white/30 hidden">
                <svg class="inline w-3 h-3 animate-spin mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                Memuat...
            </div>
        </div>
    </div>

    <div class="rounded-xl bg-white dark:bg-[#141414] border border-slate-200 dark:border-white/10 overflow-hidden mb-6">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-white/[0.02]">
                    <th class="px-4 py-3 text-left font-medium text-slate-500 dark:text-white/40 w-8">No</th>
                    <th class="px-4 py-3 text-left font-medium text-slate-500 dark:text-white/40">Nama Siswa</th>
                    <th class="px-4 py-3 text-center font-medium text-slate-500 dark:text-white/40 w-32">Nilai</th>
                    <th class="px-4 py-3 text-left font-medium text-slate-500 dark:text-white/40 w-64">Catatan</th>
                </tr>
            </thead>
            <tbody id="grade-body">
                @foreach ($students as $idx => $student)
                <tr class="border-b border-slate-50 dark:border-white/5 last:border-0 hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors">
                    <td class="px-4 py-2 text-slate-400 dark:text-white/30 text-xs">{{ $idx + 1 }}</td>
                    <td class="px-4 py-2 font-medium">
                        {{ $student->name }}
                        <input type="hidden" name="nilai[{{ $idx }}][student_id]" value="{{ $student->id }}" data-student-id="{{ $student->id }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="number" name="nilai[{{ $idx }}][score]"
                               value="{{ $existingGrades[$student->id] ?? '' }}"
                               min="0" max="100" step="0.01"
                               class="score-input w-full rounded-lg border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 px-3 py-2 text-center text-sm focus:border-emerald-500 focus:ring-emerald-500/20 dark:text-white/80"
                               placeholder="-"
                               data-student-id="{{ $student->id }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="nilai[{{ $idx }}][notes]" value=""
                               class="w-full rounded-lg border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-emerald-500/20 dark:text-white/80"
                               placeholder="Opsional">
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="flex items-center justify-end gap-3">
        <a href="{{ route('guru.nilai.index') }}" class="rounded-lg border border-slate-200 dark:border-white/10 px-4 py-2 text-sm font-medium hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">Batal</a>
        <button type="submit" class="rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 text-sm font-medium transition-colors">
            Simpan Nilai
        </button>
    </div>
</form>

@endsection

@push('scripts')
<script>
(function() {
    const classId = '{{ $classRoom->id }}';
    const subjectId = '{{ $subject->id }}';
    const ajaxUrl = '{{ route("guru.nilai.ajax") }}';
    const dateInput = document.getElementById('date-input');
    const typeInput = document.getElementById('type-input');
    const statusBanner = document.getElementById('status-banner');
    const ajaxStatus = document.getElementById('ajax-status');
    const form = document.getElementById('grade-form');
    let debounceTimer = null;
    let isDirty = false;

    document.querySelectorAll('.score-input').forEach(input => {
        input.addEventListener('input', () => { isDirty = true; });
    });

    function showBanner(type, msg) {
        statusBanner.className = 'mb-4 rounded-lg p-4 text-sm border ' +
            (type === 'success'
                ? 'bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-400'
                : type === 'info'
                ? 'bg-blue-50 dark:bg-blue-500/10 border-blue-200 dark:border-blue-500/20 text-blue-700 dark:text-blue-400'
                : 'bg-amber-50 dark:bg-amber-500/10 border-amber-200 dark:border-amber-500/20 text-amber-700 dark:text-amber-400');
        statusBanner.textContent = msg;
        statusBanner.classList.remove('hidden');
    }

    function hideBanner() { statusBanner.classList.add('hidden'); }

    function fetchGrades() {
        const date = dateInput.value;
        const gradeTypeId = typeInput.value;
        if (!date || !gradeTypeId) return;

        ajaxStatus.classList.remove('hidden');
        const params = new URLSearchParams({ class_id: classId, subject_id: subjectId, date: date, grade_type_id: gradeTypeId });

        fetch(ajaxUrl + '?' + params.toString(), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => {
            ajaxStatus.classList.add('hidden');
            document.querySelectorAll('.score-input').forEach(input => {
                const sid = input.dataset.studentId;
                input.value = data.grades[sid] ?? '';
            });
            isDirty = false;

            if (data.hasData) {
                showBanner('success', 'Data nilai sudah ada. Mengubah akan menimpa data sebelumnya.');
            } else {
                showBanner('info', 'Belum ada nilai untuk tanggal ini. Silakan isi nilai.');
            }
        })
        .catch(() => { ajaxStatus.classList.add('hidden'); });
    }

    dateInput.addEventListener('change', function() {
        if (isDirty && !confirm('Anda memiliki perubahan yang belum disimpan. Tetap ganti tanggal?')) {
            this.value = this.dataset.previousValue || this.value;
            return;
        }
        this.dataset.previousValue = this.value;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(fetchGrades, 300);
    });

    typeInput.addEventListener('change', function() {
        if (isDirty && !confirm('Anda memiliki perubahan yang belum disimpan. Tetap ganti tipe?')) {
            this.dataset.previousValue = this.value;
            return;
        }
        this.dataset.previousValue = this.value;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(fetchGrades, 300);
    });

    window.addEventListener('beforeunload', function(e) {
        if (isDirty) { e.preventDefault(); e.returnValue = ''; }
    });

    form.addEventListener('submit', function() { isDirty = false; });
})();
</script>
@endpush