@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Enter Marks')
@section('page-title', 'Enter Marks')

@section('content')
{{-- Filter card --}}
<div class="card card-outline card-primary shadow-sm learner-card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-pen mr-1"></i> Enter Marks: {{ $exam->name }} — {{ $subject->name ?? '' }}</h3>
        <div class="card-tools">
            <a href="{{ route('exams.show', $exam) }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Back to exam</a>
        </div>
    </div>
    <form method="GET">
        <div class="card-body py-2">
            <div class="row">
                <div class="col-md-4">
                    <label class="fld-label">Class</label>
                    <select name="school_class_id" onchange="this.form.submit()" class="form-control form-control-sm">
                        <option value="">All</option>
                        @foreach($teacherClasses ?? [] as $c)
                            <option value="{{ $c->id }}" @selected((string) ($schoolClassId ?? '') === (string) $c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="fld-label">Grade</label>
                    <select name="grade_level_id" onchange="this.form.submit()" class="form-control form-control-sm">
                        <option value="">All</option>
                        @foreach($grades as $g)
                            <option value="{{ $g->id }}" @selected((string) ($gradeLevelId ?? '') === (string) $g->id)>{{ $g->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- Marks grid card --}}
<div class="card shadow-sm learner-card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-users mr-1"></i> Marks grid
            <small class="text-muted ml-1">{{ count($learners) }} learner(s)</small>
        </h3>
        <div class="card-tools">
            @if($aiReady ?? false)
                <button type="button" class="btn btn-sm btn-outline-primary" id="aiAllBtn" title="Generate remarks with AI for every row that has a score"><i class="fas fa-robot mr-1"></i> Generate all with AI</button>
            @endif
        </div>
    </div>
    <div id="aiNotice" class="mx-3 mt-2" style="display:none;"></div>
    <form method="POST" action="{{ route('exams.store-marks', [$exam, $subject->id ?? 0]) }}">
        @csrf
        <div class="card-body table-responsive p-0">
            <table class="table learner-table table-hover text-nowrap mb-0">
                <thead>
                    <tr>
                        <th>Learner</th>
                        <th>Score /100</th>
                        <th>Level</th>
                        <th>Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($learners as $l)
                        @php $ex = $existing[$l->id] ?? null; @endphp
                        <tr>
                            <td>
                                <div class="learner-name">{{ $l->first_name }} {{ $l->last_name }}</div>
                                <div class="learner-meta"><span class="adm-chip"><i class="fas fa-id-card"></i> {{ $l->admission_no }}</span></div>
                            </td>
                            <td style="min-width:130px">
                                <input type="number" step="0.01" min="0" max="100" name="scores[{{ $l->id }}][score]" value="{{ $ex->score ?? '' }}"
                                       class="form-control form-control-sm score-input" data-learner="{{ $l->id }}" placeholder="0–100">
                            </td>
                            <td>
                                @if(!empty($ex->performance_level))
                                    @php
                                        $lvl = $ex->performance_level;
                                        $lvlPill = str_starts_with($lvl, 'EE') ? 'ok' : (str_starts_with($lvl, 'ME') ? 'warn' : 'muted');
                                    @endphp
                                    <span class="status-pill {{ $lvlPill }}"><span class="dot"></span>{{ $lvl }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td style="min-width:180px">
                                <div class="input-group input-group-sm">
                                    <input name="scores[{{ $l->id }}][remarks]" value="{{ $ex->remarks ?? '' }}"
                                           class="form-control remark-input" data-learner="{{ $l->id }}" placeholder="Optional remark" maxlength="255">
                                    @if($aiReady ?? false)
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-primary ai-remark-btn" data-learner="{{ $l->id }}" data-name="{{ $l->first_name }} {{ $l->last_name }}"
                                                    title="Generate remark with AI Assistant (uses this score + previous {{ $subject->name ?? 'subject' }} performances)"><i class="fas fa-robot"></i></button>
                                        </div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                <p class="font-weight-bold mb-1">No learners found</p>
                                <p class="text-muted small mb-0">Try a different class filter.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center flex-wrap">
            <small class="text-muted">Levels: EE1 (90+), EE2 (75–89) Exceeding Expectation · ME1 (60–74), ME2 (40–59) Meeting Expectation · BE (&lt;40) Below Expectation.</small>
            <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-check mr-1"></i> Save Marks</button>
        </div>
    </form>
</div>
@if($aiReady ?? false)
@push('scripts')
<script>
/* AI Assistant: generate CBE remarks from the row score + previous performances. */
(function () {
    var url = @json(route('exams.ai-remark', [$exam, $subject->id ?? 0]));
    var csrf = (document.querySelector('input[name="_token"]') || {}).value || '';
    var idleIcon = '<i class="fas fa-robot"></i>';
    var busyIcon = '<span class="spinner-border spinner-border-sm"></span>';

    function notice(html, cls) {
        var n = document.getElementById('aiNotice');
        n.innerHTML = '<div class="alert alert-' + (cls || 'info') + ' py-2 small mb-0">' + html + '</div>';
        n.style.display = 'block';
    }
    function scoreOf(learnerId) {
        var el = document.querySelector('.score-input[data-learner="' + learnerId + '"]');
        return el ? el.value : '';
    }
    function remarkInput(learnerId) {
        return document.querySelector('.remark-input[data-learner="' + learnerId + '"]');
    }
    function generate(btn, learnerId) {
        var score = scoreOf(learnerId);
        if (score === '' || score === null || isNaN(Number(score))) {
            notice('Enter a score first for the highlighted learner, then tap the <i class="fas fa-robot"></i> icon again.', 'warning');
            var s = document.querySelector('.score-input[data-learner="' + learnerId + '"]');
            if (s) s.focus();
            return Promise.resolve(false);
        }
        btn.disabled = true;
        btn.innerHTML = busyIcon;
        return fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify({ learner_id: learnerId, score: score })
        })
        .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
        .then(function (res) {
            btn.disabled = false;
            btn.innerHTML = idleIcon;
            if (!res.ok || !res.d.remark) {
                notice('<i class="fas fa-times-circle mr-1"></i> ' + ((res.d && res.d.message) || 'Could not generate the remark.'), 'danger');
                return false;
            }
            var input = remarkInput(learnerId);
            if (input) input.value = res.d.remark;
            if (res.d.ai === false) {
                notice('<i class="fas fa-info-circle mr-1"></i> AI was unreachable — a standard remark was filled instead.' + (res.d.warning ? ' <small class="text-muted">' + res.d.warning + '</small>' : ''), 'warning');
            }
            return true;
        })
        .catch(function () {
            btn.disabled = false;
            btn.innerHTML = idleIcon;
            notice('Network error while generating the remark.', 'danger');
            return false;
        });
    }

    document.querySelectorAll('.ai-remark-btn').forEach(function (btn) {
        btn.addEventListener('click', function () { generate(btn, btn.getAttribute('data-learner')); });
    });

    var allBtn = document.getElementById('aiAllBtn');
    if (allBtn) {
        allBtn.addEventListener('click', function () {
            var btns = Array.prototype.slice.call(document.querySelectorAll('.ai-remark-btn'));
            var withScore = btns.filter(function (b) {
                var s = scoreOf(b.getAttribute('data-learner'));
                return s !== '' && s !== null && !isNaN(Number(s));
            });
            if (!withScore.length) { notice('Enter at least one score first, then use Generate all with AI.', 'warning'); return; }
            if (!confirm('Generate AI remarks for ' + withScore.length + ' learner(s)? Existing remarks will be replaced.')) return;
            allBtn.disabled = true;
            notice('<span class="spinner-border spinner-border-sm mr-1"></span> Generating remarks…', 'info');
            (function next(i) {
                if (i >= withScore.length) {
                    allBtn.disabled = false;
                    notice('<i class="fas fa-check-circle mr-1"></i> Remarks generated for ' + withScore.length + ' learner(s). Review them before saving.', 'success');
                    return;
                }
                generate(withScore[i], withScore[i].getAttribute('data-learner')).then(function () {
                    setTimeout(function () { next(i + 1); }, 400);
                });
            })(0);
        });
    }
})();
</script>
@endpush
@endif
@endsection