@extends('layouts.app')
@section('title', 'Enter Marks')
@section('page-title', 'Enter Marks')
@section('sidebar-nav')
<div class="nav-item"><a href="{{ route('teacher.dashboard') }}"><i class="bi bi-grid"></i> Dashboard</a></div>
<div class="nav-item"><a href="{{ route('teacher.marks') }}"><i class="bi bi-pencil-square"></i> Enter Marks</a></div>
@endsection

@section('content')
<div class="page-header"><div><h1>Enter Marks</h1></div></div>

<div class="card" style="margin-bottom:20px;">
    <div class="card-body">
        <form method="GET" style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;">
            <div class="form-group" style="margin:0;flex:1;min-width:160px;">
                <label>Exam</label>
                <select name="exam_id">
                    <option value="">Select Exam</option>
                    @foreach($exams as $exam)
                        <option value="{{ $exam->id }}" {{ request('exam_id') == $exam->id ? 'selected' : '' }}>{{ $exam->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group" style="margin:0;flex:1;min-width:160px;">
                <label>Stream</label>
                <select name="stream_id">
                    <option value="">Select Stream</option>
                    @foreach($streams as $s)
                        <option value="{{ $s->stream_id }}" {{ request('stream_id') == $s->stream_id ? 'selected' : '' }}>
                            {{ $s->stream->schoolClass->name }} {{ $s->stream->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group" style="margin:0;flex:1;min-width:160px;">
                <label>Subject</label>
                <select name="subject_id">
                    <option value="">Select Subject</option>
                    @foreach($streams as $s)
                        <option value="{{ $s->subject_id }}" {{ request('subject_id') == $s->subject_id ? 'selected' : '' }}>
                            {{ $s->subject->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Load Students</button>
        </form>
    </div>
</div>

@if($students->count())
<div class="card">
    <div class="card-header">
        <h5>{{ $selectedExam->name }} &mdash; {{ $selectedStream->schoolClass->name }} {{ $selectedStream->name }} &mdash; {{ $selectedSubject->name }}</h5>
    </div>
    <div class="card-body" style="padding:0;">
        <form method="POST" action="{{ route('teacher.marks.save') }}">
            @csrf
            <input type="hidden" name="exam_id" value="{{ $selectedExam->id }}">
            <input type="hidden" name="stream_id" value="{{ $selectedStream->id }}">
            <input type="hidden" name="subject_id" value="{{ $selectedSubject->id }}">
            <div class="table-wrap">
                <table>
                    <thead><tr><th>#</th><th>Student</th><th>Score (/100)</th><th>Grade</th></tr></thead>
                    <tbody>
                        @foreach($students as $i => $student)
                        @php $mark = $student->marks->first(); @endphp
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>
                                <div style="font-weight:500;">{{ $student->user->name }}</div>
                                <div style="font-size:12px;color:var(--gray);">{{ $student->admission_no }}</div>
                            </td>
                            <td>
                                <input type="number" name="marks[{{ $student->id }}]" value="{{ $mark?->score }}"
                                    min="0" max="100" step="0.5" style="width:90px;" class="mark-input" data-row="{{ $i }}">
                            </td>
                            <td><span class="badge badge-info" id="grade-{{ $i }}">{{ $mark?->grade ?? '-' }}</span></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div style="padding:16px;border-top:1px solid var(--border);">
                <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save Marks</button>
            </div>
        </form>
    </div>
</div>
@endif

@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(s) { for (const [m,g] of grades) if (s >= m) return g; return 'E'; }
document.querySelectorAll('.mark-input').forEach(input => {
    input.addEventListener('input', function() {
        const g = this.value !== '' ? getGrade(parseFloat(this.value)) : '-';
        document.getElementById('grade-' + this.dataset.row).textContent = g;
    });
});
</script>
@endpush
@endsection
