@extends('layouts.app')
@section('title', 'Marks Entry')
@section('page-title', 'Marks Entry')
@section('sidebar-nav')
<div class="nav-item"><a href="{{ route('admin.dashboard') }}"><i class="bi bi-grid"></i> Dashboard</a></div>
<div class="nav-item"><a href="{{ route('admin.exams.index') }}"><i class="bi bi-journal-text"></i> Exams</a></div>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>Marks Entry</h1>
        <p>{{ $exam->name }} &mdash; {{ $stream->schoolClass->name }} {{ $stream->name }} &mdash; {{ $subject->name }}</p>
    </div>
    <a href="{{ route('admin.exams.index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.exams.marks-save', [$exam, $stream, $subject]) }}">
            @csrf
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>#</th><th>Admission No</th><th>Student Name</th>
                            <th>Score (out of 100)</th><th>Grade</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($students as $i => $student)
                        @php $existingMark = $student->marks->first(); @endphp
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $student->admission_no }}</td>
                            <td>{{ $student->user->name }}</td>
                            <td>
                                <input type="number" name="marks[{{ $student->id }}]"
                                    value="{{ $existingMark?->score }}"
                                    min="0" max="100" step="0.5"
                                    style="width:100px;padding:6px 10px;"
                                    class="mark-input" data-row="{{ $i }}">
                            </td>
                            <td>
                                <span class="badge badge-info grade-display" id="grade-{{ $i }}">
                                    {{ $existingMark?->grade ?? '-' }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div style="margin-top:20px;display:flex;gap:12px;">
                <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save Marks</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
const grades = [
    [80,'A'],[75,'A-'],[70,'B+'],[65,'B'],[60,'B-'],
    [55,'C+'],[50,'C'],[45,'C-'],[40,'D+'],[35,'D'],[30,'D-'],[0,'E']
];
function getGrade(score) {
    for (const [min, g] of grades) if (score >= min) return g;
    return 'E';
}
document.querySelectorAll('.mark-input').forEach(input => {
    input.addEventListener('input', function() {
        const row = this.dataset.row;
        const grade = this.value !== '' ? getGrade(parseFloat(this.value)) : '-';
        document.getElementById('grade-' + row).textContent = grade;
    });
});
</script>
@endpush
@endsection
