@extends('layouts.app')
@section('title', 'Evaluate Student - Supervisor')

@section('content')
<div class="page-header">
    <h2>Evaluate Student</h2>
    <p style="font-size: 0.8rem; color: #64748b; margin: 0;">
        <a href="{{ route('supervisor.evaluations.index') }}">Evaluations</a> / {{ $student->fullname }}
    </p>
</div>

@if($existing)
<div class="alert alert-warning" style="font-size: 0.8rem;">
    An evaluation already exists (Total: {{ $existing->total_score }} / 100).
    Submitting again will update the existing record.
</div>
@endif

<div class="form-card">
    <div class="card-header">
        Rubric-Based Evaluation
        <span style="font-weight:400;font-size:0.8rem;">Student: {{ $student->fullname }} ({{ $student->user_id }})</span>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('supervisor.evaluations.store', $student) }}" id="evalForm">
            @csrf

            <table class="table table-bordered" style="font-size:0.85rem; margin-bottom:0.75rem;">
                <thead>
                    <tr style="background:#f8fafc;">
                        <th style="width: 40px;">No</th>
                        <th>Rubric</th>
                        <th style="width: 130px;">Points</th>
                        <th style="width: 50px;"></th>
                    </tr>
                </thead>
                <tbody id="rubricRows">
                    {{-- Always start blank — supervisor adds rows one by one --}}
                </tbody>
                <tfoot>
                    <tr style="background:#f8fafc; font-weight:600;">
                        <td class="text-center" colspan="2">Total Marks</td>
                        <td>
                            <span id="totalMarks" style="font-size:1rem;">0</span>
                            <span style="font-size:0.75rem; color:#64748b;"> / </span>
                            <span id="maxTotalMarks" style="font-size:0.75rem; color:#64748b;">0</span>
                            <span id="totalWarning" style="display:none; font-size:0.75rem; color:#dc3545; margin-left:0.5rem;">
                                Total exceeds maximum!
                            </span>
                        </td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>

            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRow()">+ Add Row</button>
                <button type="submit" class="btn btn-primary" id="submitBtn">Save</button>
                @if($existing)
                <a href="{{ route('supervisor.evaluations.pdf', $existing) }}" class="btn btn-outline-primary" target="_blank">Print PDF</a>
                @else
                <button type="button" class="btn btn-outline-primary" onclick="window.print()">Print</button>
                @endif
                <a href="{{ route('supervisor.evaluations.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
// All available rubrics from backend
const allRubrics = @json($rubrics);

// Get all currently selected rubric IDs
function getSelectedRubricIds(excludeRow) {
    const ids = [];
    document.querySelectorAll('.rubric-select').forEach(function(sel) {
        if (sel !== excludeRow && sel.value) {
            ids.push(parseInt(sel.value));
        }
    });
    return ids;
}

// Get rubric data by ID
function getRubricById(id) {
    return allRubrics.find(function(r) { return r.id == id; });
}

// Populate score options for a rubric select
function populateScoreOptions(scoreSelect, rubricId, selectedValue) {
    const rubric = getRubricById(rubricId);
    scoreSelect.innerHTML = '<option value="0">--</option>';
    if (rubric) {
        for (let p = 1; p <= rubric.max_score; p++) {
            const opt = document.createElement('option');
            opt.value = p;
            opt.textContent = p;
            if (p == selectedValue) opt.selected = true;
            scoreSelect.appendChild(opt);
        }
    }
}

// When rubric selection changes
function onRubricChange(rubricSelect) {
    const row = rubricSelect.closest('tr');
    const scoreSelect = row.querySelector('.score-select');

    if (rubricSelect.value) {
        populateScoreOptions(scoreSelect, parseInt(rubricSelect.value), 0);
    } else {
        scoreSelect.innerHTML = '<option value="0">--</option>';
    }
    // Update other rubric dropdowns to disable already-selected options
    updateRubricOptions();
    calcTotal();
}

// Disable already-selected rubric options across all rows
function updateRubricOptions() {
    const selectedIds = getSelectedRubricIds(null);
    document.querySelectorAll('.rubric-select').forEach(function(sel) {
        for (let i = 0; i < sel.options.length; i++) {
            const opt = sel.options[i];
            if (opt.value === '') continue;
            const optId = parseInt(opt.value);
            // Disable if selected elsewhere, but keep enabled for this select's own value
            opt.disabled = (selectedIds.includes(optId) && optId !== parseInt(sel.value));
        }
    });
}

// Add a new empty row
function addRow(rubricId, scoreValue) {
    rubricId = rubricId || null;
    scoreValue = scoreValue || 0;

    const tbody = document.getElementById('rubricRows');
    const rowCount = tbody.querySelectorAll('.rubric-row').length;
    const tr = document.createElement('tr');
    tr.className = 'rubric-row';

    let rubricOptions = '<option value="">-- Select Rubric --</option>';
    allRubrics.forEach(function(r) {
        rubricOptions += '<option value="' + r.id + '" data-max="' + r.max_score + '">'
            + r.rubric_name + ' (Max: ' + r.max_score + ')</option>';
    });

    tr.innerHTML =
        '<td class="text-center row-no">' + (rowCount + 1) + '</td>' +
        '<td>' +
            '<select name="rubric_ids[]" class="form-select form-select-sm rubric-select" onchange="onRubricChange(this)">' +
                rubricOptions +
            '</select>' +
        '</td>' +
        '<td>' +
            '<select name="scores[]" class="form-select form-select-sm score-select" onchange="calcTotal()">' +
                '<option value="0">--</option>' +
            '</select>' +
        '</td>' +
        '<td class="text-center">' +
            '<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)" title="Remove">&times;</button>' +
        '</td>';

    tbody.appendChild(tr);

    // If rubricId provided, set it and populate scores
    if (rubricId) {
        const rubricSelect = tr.querySelector('.rubric-select');
        rubricSelect.value = rubricId;
        populateScoreOptions(tr.querySelector('.score-select'), rubricId, scoreValue);
    }

    updateRubricOptions();
    renumberRows();
    calcTotal();
}

// Remove a row
function removeRow(btn) {
    const tbody = document.getElementById('rubricRows');
    if (tbody.querySelectorAll('.rubric-row').length <= 1) {
        // Don't remove if it's the only row — just clear it
        const row = btn.closest('tr');
        row.querySelector('.rubric-select').value = '';
        row.querySelector('.score-select').innerHTML = '<option value="0">--</option>';
        updateRubricOptions();
        calcTotal();
        return;
    }
    btn.closest('tr').remove();
    updateRubricOptions();
    renumberRows();
    calcTotal();
}

// Renumber rows after add/remove
function renumberRows() {
    document.querySelectorAll('#rubricRows .row-no').forEach(function(td, i) {
        td.textContent = i + 1;
    });
}

// Calculate total score
function calcTotal() {
    let total = 0;
    let maxTotal = 0;
    document.querySelectorAll('.rubric-row').forEach(function(row) {
        const rubricSelect = row.querySelector('.rubric-select');
        const scoreSelect = row.querySelector('.score-select');
        if (rubricSelect && rubricSelect.value) {
            const selectedOption = rubricSelect.options[rubricSelect.selectedIndex];
            const maxScore = parseInt(selectedOption.getAttribute('data-max')) || 0;
            maxTotal += maxScore;
        }
        total += parseInt(scoreSelect ? scoreSelect.value : 0) || 0;
    });
    document.getElementById('totalMarks').textContent = total;
    document.getElementById('maxTotalMarks').textContent = maxTotal;

    const warning = document.getElementById('totalWarning');
    const submitBtn = document.getElementById('submitBtn');
    if (maxTotal > 0 && total > maxTotal) {
        warning.style.display = 'inline';
        submitBtn.disabled = true;
        submitBtn.title = 'Total marks cannot exceed ' + maxTotal;
    } else {
        warning.style.display = 'none';
        submitBtn.disabled = false;
        submitBtn.title = '';
    }
}

// Form submit validation
document.getElementById('evalForm').addEventListener('submit', function(e) {
    let total = 0;
    let maxTotal = 0;
    document.querySelectorAll('.rubric-row').forEach(function(row) {
        const rubricSelect = row.querySelector('.rubric-select');
        const scoreSelect = row.querySelector('.score-select');
        if (rubricSelect && rubricSelect.value) {
            const selectedOption = rubricSelect.options[rubricSelect.selectedIndex];
            maxTotal += parseInt(selectedOption.getAttribute('data-max')) || 0;
        }
        total += parseInt(scoreSelect ? scoreSelect.value : 0) || 0;
    });

    if (maxTotal > 0 && total > maxTotal) {
        e.preventDefault();
        alert('Total marks cannot exceed ' + maxTotal + ' points. Current total: ' + total);
        return false;
    }

    if (total === 0) {
        e.preventDefault();
        alert('Please assign at least one score before saving.');
        return false;
    }
});

// Init
document.addEventListener('DOMContentLoaded', function() {
    updateRubricOptions();
    calcTotal();
});
</script>
@endpush
@endsection