@extends('layouts.app')
@section('title', 'Grade Entry')
@section('breadcrumb', 'Grades › Score Entry')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0" style="color:#0f3d23;">
            <i class="bi bi-journal-check me-2" style="color:#c9a94d;"></i>Score Entry Sheet
        </h4>
        <p class="text-muted mb-0" style="font-size:.85rem;">
            {{ $classSubject->classArm->full_name }} &bull;
            <strong>{{ $classSubject->subject->name }}</strong> &bull;
            {{ $term->name }} &bull;
            Teacher: {{ $classSubject->teacher?->name ?? 'Unassigned' }}
        </p>
    </div>
    <div class="d-flex gap-2">
        <button id="btnSaveAll" class="btn" style="background:#1a6b3c; color:#fff; border-radius:8px;">
            <i class="bi bi-cloud-check me-1"></i><span id="saveLabel">Save All Scores</span>
        </button>
    </div>
</div>

{{-- Legend --}}
<div class="alert" style="background:#e8f5ee; border-left:4px solid #c9a94d; font-size:.8rem; border-radius:8px;" role="alert">
    <i class="bi bi-info-circle me-1"></i>
    <strong>Score Weights:</strong>
    CA1 + CA2 (+ optional CA3) = 40% of total &nbsp;|&nbsp; Exam = 60% of total &nbsp;|&nbsp;
    Tick <strong>Absent</strong> to mark a student absent from exam (scores cleared).
    Grades compute automatically after saving — use <em>Compute Grades</em> from the main Grades page.
</div>

<div class="card table-card">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle" id="scoreTable">
            <thead>
                <tr>
                    <th style="width:30px;">#</th>
                    <th>Student Name</th>
                    <th>MCSS ID</th>
                    <th style="width:80px;">CA1 <small class="fw-normal">/20</small></th>
                    <th style="width:80px;">CA2 <small class="fw-normal">/20</small></th>
                    <th style="width:80px;">Exam <small class="fw-normal">/60</small></th>
                    <th style="width:80px;">Total</th>
                    <th style="width:70px;">Grade</th>
                    <th style="width:60px;">Absent</th>
                    <th>Comment</th>
                </tr>
            </thead>
            <tbody>
                @foreach($enrollments as $i => $enrollment)
                @php
                    $r = $existingResults[$enrollment->id] ?? null;
                @endphp
                <tr data-idx="{{ $i }}">
                    <td class="text-muted">{{ $i + 1 }}</td>
                    <td class="fw-semibold">{{ $enrollment->student->full_name }}</td>
                    <td><span class="badge bg-secondary" style="font-size:.72rem;">{{ $enrollment->student->mcss_student_id }}</span></td>

                    {{-- Hidden enrollment_id --}}
                    <input type="hidden" name="scores[{{ $i }}][enrollment_id]" value="{{ $enrollment->id }}">

                    <td>
                        <input type="number" class="form-control form-control-sm score-input ca1"
                               name="scores[{{ $i }}][ca1]"
                               value="{{ $r?->ca1_score }}"
                               min="0" max="20" step="0.5"
                               style="width:72px;">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm score-input ca2"
                               name="scores[{{ $i }}][ca2]"
                               value="{{ $r?->ca2_score }}"
                               min="0" max="20" step="0.5"
                               style="width:72px;">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm score-input exam"
                               name="scores[{{ $i }}][exam]"
                               value="{{ $r?->exam_score }}"
                               min="0" max="60" step="0.5"
                               style="width:72px;">
                    </td>
                    <td>
                        <span class="total-display fw-bold" style="color:#1a6b3c;">
                            {{ $r?->total_score ?? '—' }}
                        </span>
                    </td>
                    <td>
                        <span class="grade-display fw-bold">
                            {{ $r?->grade_letter ?? '—' }}
                        </span>
                    </td>
                    <td class="text-center">
                        <div class="form-check d-flex justify-content-center">
                            <input class="form-check-input absent-chk" type="checkbox"
                                   name="scores[{{ $i }}][absent]"
                                   value="1"
                                   {{ $r?->is_absent ? 'checked' : '' }}>
                        </div>
                    </td>
                    <td>
                        <input type="text" class="form-control form-control-sm"
                               name="scores[{{ $i }}][comment]"
                               value="{{ $r?->teacher_comment }}"
                               placeholder="Optional…"
                               style="min-width:120px;">
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- Compute grades button (admin/registrar only) --}}
@if(auth()->user()->isAdminLevel())
<div class="mt-3">
    <form action="{{ route('school.grades.compute') }}" method="POST" class="d-inline">
        @csrf
        <input type="hidden" name="class_arm_id" value="{{ $classSubject->class_arm_id }}">
        <input type="hidden" name="term_id" value="{{ $term->id }}">
        <button type="submit" class="btn btn-outline-secondary" style="border-radius:8px;"
                onclick="return confirm('Compute grades and update class positions for all students in this class?')">
            <i class="bi bi-calculator me-1"></i>Compute Grades & Positions
        </button>
    </form>
</div>
@endif
@endsection

@push('scripts')
<script>
const SAVE_URL    = "{{ route('school.grades.save') }}";
const CSRF_TOKEN  = document.querySelector('meta[name="csrf-token"]').content;
const TERM_ID     = {{ $term->id }};
const CLASS_SUB_ID= {{ $classSubject->id }};

// ── Live total preview ────────────────────────────────────────────────────────
// Grading scale (mirrors PHP default — no network call needed for preview)
const SCALE = [
    {min:90, letter:'A',  gpa:4.0},
    {min:80, letter:'B+', gpa:3.5},
    {min:70, letter:'B',  gpa:3.0},
    {min:60, letter:'C+', gpa:2.5},
    {min:50, letter:'C',  gpa:2.0},
    {min:40, letter:'D',  gpa:1.0},
    {min:0,  letter:'F',  gpa:0.0},
];

function getGrade(total) {
    for (const band of SCALE) {
        if (total >= band.min) return band;
    }
    return {letter:'F', gpa:0.0};
}

document.querySelectorAll('tbody tr').forEach(row => {
    const inputs = row.querySelectorAll('.score-input');
    const absent = row.querySelector('.absent-chk');

    function recalc() {
        if (absent.checked) {
            row.querySelectorAll('.score-input').forEach(i => { i.disabled = true; i.value = ''; });
            row.querySelector('.total-display').textContent = 'ABS';
            row.querySelector('.grade-display').textContent = '—';
            return;
        }
        row.querySelectorAll('.score-input').forEach(i => i.disabled = false);

        const ca1  = parseFloat(row.querySelector('.ca1').value)  || 0;
        const ca2  = parseFloat(row.querySelector('.ca2').value)  || 0;
        const exam = parseFloat(row.querySelector('.exam').value) || 0;
        const caTotal = ca1 + ca2;
        // CA weight: (caTotal/40)*40 + (exam/60)*60
        const total = parseFloat(((caTotal/40)*40 + (exam/60)*60).toFixed(2));
        row.querySelector('.total-display').textContent = total;

        const grade = getGrade(total);
        const gradeEl = row.querySelector('.grade-display');
        gradeEl.textContent = grade.letter;
        gradeEl.style.color = grade.letter === 'F' ? '#c62828' : '#1a6b3c';
    }

    inputs.forEach(i => i.addEventListener('input', recalc));
    absent.addEventListener('change', recalc);
    recalc(); // Run on load
});

// ── Save all scores ───────────────────────────────────────────────────────────
document.getElementById('btnSaveAll').addEventListener('click', async function () {
    const label = document.getElementById('saveLabel');
    label.textContent = 'Saving…';
    this.disabled = true;

    // Collect all score rows
    const scores = [];
    document.querySelectorAll('tbody tr').forEach((row, idx) => {
        const inputs = row.querySelectorAll('input[name]');
        const rowData = {};
        inputs.forEach(input => {
            const key = input.name.replace(`scores[${idx}][`, '').replace(']', '');
            rowData[key] = input.type === 'checkbox' ? (input.checked ? 1 : 0) : input.value;
        });
        scores.push(rowData);
    });

    try {
        const res = await fetch(SAVE_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN,
            },
            body: JSON.stringify({
                term_id: TERM_ID,
                class_subject_id: CLASS_SUB_ID,
                scores,
            }),
        });
        const data = await res.json();

        label.textContent = data.success ? '✓ Saved' : 'Save Failed';
        if (data.success) {
            setTimeout(() => { label.textContent = 'Save All Scores'; this.disabled = false; }, 2000);
        }
    } catch (e) {
        label.textContent = 'Error — Retry';
        this.disabled = false;
    }
}.bind(document.getElementById('btnSaveAll')));
</script>
@endpush