@extends('teacher.teacher_dashboard')

@section('customcss')
<style>
    .student-row {
        transition: all 0.2s ease;
    }
    .student-row.row-active {
        background-color: #eff6ff !important;
        box-shadow: inset 3px 0 0 #3b82f6;
    }
    .student-row.row-completed {
        background-color: #f0fdf4 !important;
    }
    .student-row.row-locked {
        opacity: 0.55;
        background-color: #f8fafc !important;
        pointer-events: none;
    }
    .mark-input {
        width: 120px;
        font-size: 1.1rem;
        font-weight: 700;
        text-align: center;
    }
    .mark-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }
    .mark-input.is-invalid-mark {
        border-color: #ef4444 !important;
        background-color: #fef2f2 !important;
    }
    .kpi-badge {
        padding: 6px 14px;
        font-weight: 600;
        font-size: 0.85rem;
    }
    .sticky-actions-bar {
        position: sticky;
        bottom: 15px;
        z-index: 100;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 12px 20px;
    }
</style>
@endsection

@section('admin')

<!--**********************************
    Content body start
***********************************-->
<div class="content-body default-height">
    <div class="container-fluid">

        <!-- Breadcrumb -->
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('teacher.unofficial-exams.index') }}">Class Test</a></li>
                <li class="breadcrumb-item"><a href="{{ route('teacher.unofficial-exams.show', $unofficialExam->id) }}">{{ $unofficialExam->exam_title }}</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Marks Entry</a></li>
            </ol>
        </div>

        <!-- Back Button -->
        <div class="mb-4 pb-3">
            <a href="{{ route('teacher.unofficial-exams.show', $unofficialExam->id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="fa fa-arrow-left me-1"></i> Back to Exam
            </a>
        </div>

        <!-- Flash Messages -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fa fa-exclamation-circle me-2"></i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Row -->
        <div class="row">
            <div class="col-xl-12">

                <!-- Exam Overview Info Box -->
                <div class="filter cm-content-box box-primary mb-4">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-solid fa-pen-nib me-2"></i> {{ $unofficialExam->exam_title }} - Marks Entry
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>
                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <div class="row g-3 align-items-center">
                                <div class="col-md-8">
                                    <div class="d-flex flex-wrap gap-2 mb-2">
                                        <span class="badge bg-primary">
                                            {{ $unofficialExam->subject->name ?? 'Subject' }}
                                        </span>
                                        <span class="badge bg-light text-dark border">
                                            {{ $unofficialExam->classModel->name ?? '-' }} (Sec: {{ $unofficialExam->section->name ?? 'All' }})
                                        </span>
                                        @if($unofficialExam->group)
                                            <span class="badge bg-light text-dark border">
                                                Group: {{ $unofficialExam->group->name }}
                                            </span>
                                        @endif
                                    </div>
                                    <h4 class="fw-bold text-dark mb-1">{{ $unofficialExam->exam_title }}</h4>
                                    <p class="mb-0 text-muted small">
                                        <i class="far fa-calendar-alt me-1"></i> Exam Date: <strong>{{ $unofficialExam->exam_date ? $unofficialExam->exam_date->format('d M, Y') : '-' }}</strong> |
                                        <i class="fa fa-layer-group me-1"></i> Session: <strong>{{ $unofficialExam->academicSession->name ?? '-' }}</strong>
                                    </p>
                                </div>
                                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                                    <div class="d-inline-block border p-3 rounded text-center bg-light">
                                        <div class="small text-uppercase text-muted fw-bold">Max Marks</div>
                                        <div class="fs-3 fw-bold text-primary">{{ $unofficialExam->total_marks }}</div>
                                        <div class="small text-muted">Pass: {{ $unofficialExam->pass_marks ?? round($unofficialExam->total_marks * 0.33, 1) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($unofficialExam->is_published)
                    <div class="alert alert-danger d-flex align-items-center mb-4">
                        <i class="fa fa-lock fa-2x me-3"></i>
                        <div>
                            <h5 class="fw-bold mb-0">Marks Entry Locked</h5>
                            <p class="mb-0 small">This exam is published. To edit or enter marks, please unpublish the exam first.</p>
                        </div>
                    </div>
                @else
                    <!-- Progress & Counter Bar Box -->
                    <div class="filter cm-content-box box-primary mb-4">
                        <div class="cm-content-body form excerpt">
                            <div class="card-body p-3">
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                                    <div class="d-flex flex-wrap align-items-center gap-2">
                                        <span class="badge bg-primary kpi-badge">
                                            <i class="fa fa-users me-1"></i> Total: <span id="statTotal">{{ count($eligibleStudents) }}</span>
                                        </span>
                                        <span class="badge bg-success kpi-badge">
                                            <i class="fa fa-check-circle me-1"></i> Present: <span id="statPresent">0</span>
                                        </span>
                                        <span class="badge bg-danger kpi-badge">
                                            <i class="fa fa-user-times me-1"></i> Absent: <span id="statAbsent">0</span>
                                        </span>
                                        <span class="badge bg-secondary kpi-badge">
                                            <i class="fa fa-hourglass-half me-1"></i> Pending: <span id="statPending">{{ count($eligibleStudents) }}</span>
                                        </span>
                                    </div>

                                    <!-- Quick Shortcuts Toolbar -->
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-outline-warning" id="btnMarkRemainingAbsent">
                                            <i class="fa fa-user-slash me-1"></i> Mark Remaining Absent
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnClearAll">
                                            <i class="fa fa-eraser me-1"></i> Reset Fields
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Marks Entry Form Table Box -->
                    <form action="{{ route('teacher.unofficial-exams.marks.store', $unofficialExam->id) }}" method="POST" id="marksForm">
                        @csrf

                        <div class="filter cm-content-box box-primary mb-4">
                            <div class="content-title SlideToolHeader">
                                <div class="cpa">
                                    <i class="fa-solid fa-list-ol me-2"></i> Student Marks Register
                                    <span class="small text-muted ms-2">(Sequential entry: 0 to {{ $unofficialExam->total_marks }}. Press <strong>Enter</strong> to go to next row)</span>
                                </div>
                                <div class="tools">
                                    <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                                </div>
                            </div>
                            <div class="cm-content-body form excerpt">
                                <div class="card-body pb-4">
                                    <div class="table-responsive">
                                        <table class="table align-middle mb-0" id="marksTable">
                                            <thead>
                                                <tr>
                                                    <th class="ps-3" style="width: 50px;">#</th>
                                                    <th style="width: 80px;">Roll</th>
                                                    <th>Student Name</th>
                                                    <th class="text-center" style="width: 130px;">Attendance</th>
                                                    <th class="text-center" style="width: 170px;">Obtained Mark</th>
                                                    <th class="text-center" style="width: 100px;">% Score</th>
                                                    <th class="text-center" style="width: 110px;">Status</th>
                                                    <th style="width: 250px;">Teacher Comment</th>
                                                    <th class="text-center" style="width: 60px;">State</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($eligibleStudents as $index => $student)
                                                    @php
                                                        $existingMark = $existingMarks->get($student->id);
                                                        $initialAbsent = $existingMark ? (bool)$existingMark->is_absent : false;
                                                        $initialMark = $existingMark && !$initialAbsent ? $existingMark->obtained_marks : '';
                                                        $initialComment = $existingMark ? $existingMark->teacher_comment : '';
                                                    @endphp
                                                    <tr class="student-row" id="row_{{ $index }}" data-index="{{ $index }}">
                                                        <td class="ps-3 text-muted fw-semibold">{{ $index + 1 }}</td>
                                                        <td>
                                                            <span class="badge bg-light text-dark border">{{ $student->roll }}</span>
                                                        </td>
                                                        <td>
                                                            <span class="fw-bold text-dark">{{ $student->name }}</span>
                                                            <input type="hidden" name="marks[{{ $index }}][student_id]" value="{{ $student->id }}">
                                                        </td>
                                                        <td class="text-center">
                                                            <div class="form-check form-switch d-inline-block">
                                                                <input class="form-check-input absent-toggle" type="checkbox" role="switch" 
                                                                       name="marks[{{ $index }}][is_absent]" value="1" id="absent_{{ $index }}" 
                                                                       {{ $initialAbsent ? 'checked' : '' }} title="Toggle Absent">
                                                                <label class="form-check-label small fw-bold ms-1 absent-label {{ $initialAbsent ? 'text-danger' : 'text-success' }}" for="absent_{{ $index }}">
                                                                    {{ $initialAbsent ? 'Absent' : 'Present' }}
                                                                </label>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <div class="input-group input-group-sm justify-content-center">
                                                                <input type="number" step="0.25" min="0" max="{{ $unofficialExam->total_marks }}" 
                                                                       name="marks[{{ $index }}][obtained_marks]" 
                                                                       class="form-control mark-input" 
                                                                       id="mark_{{ $index }}" 
                                                                       placeholder="0 - {{ $unofficialExam->total_marks }}" 
                                                                       value="{{ $initialMark }}"
                                                                       {{ $initialAbsent ? 'disabled' : '' }}
                                                                       autocomplete="off">
                                                            </div>
                                                            <small class="text-danger mark-error-msg d-none"></small>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="fw-bold percentage-badge" id="percent_{{ $index }}">-</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="badge status-badge" id="status_{{ $index }}">-</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" name="marks[{{ $index }}][teacher_comment]" 
                                                                   class="form-control form-control-sm comment-input" 
                                                                   id="comment_{{ $index }}" 
                                                                   placeholder="Optional comment / note" 
                                                                   value="{{ $initialComment }}">
                                                        </td>
                                                        <td class="text-center state-cell">
                                                            <i class="fa fa-lock text-muted state-icon" id="state_{{ $index }}"></i>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="9" class="text-center py-5 text-muted">
                                                            <i class="fa fa-user-slash fa-3x mb-3 text-muted opacity-50 d-block"></i>
                                                            <p class="fw-bold mb-0">No eligible registered students found for this class and subject.</p>
                                                            <small>Please verify student enrollments in Class Registration or Subject Assignment.</small>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Sticky Bottom Action Bar -->
                        @if(count($eligibleStudents) > 0)
                            <div class="sticky-actions-bar d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="fw-bold text-dark small"><i class="fa fa-shield-alt text-success me-1"></i> Auto-Rank & Audit History Enabled</span>
                                </div>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('teacher.unofficial-exams.show', $unofficialExam->id) }}" class="btn btn-danger light">Cancel</a>
                                    <button type="submit" class="btn btn-primary" id="btnSaveMarks">
                                        <i class="fa fa-save me-1"></i> Save Marks & Calculate Ranks
                                    </button>
                                </div>
                            </div>
                        @endif
                    </form>
                @endif

            </div>
        </div>

    </div>
</div>
<!--**********************************
    Content body end
***********************************-->

@endsection

@section('customjs')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const totalMarks = parseFloat("{{ $unofficialExam->total_marks }}") || 100;
        const passMarks = parseFloat("{{ $unofficialExam->pass_marks ?? round($unofficialExam->total_marks * 0.33, 2) }}");
        const rows = document.querySelectorAll('.student-row');
        const form = document.getElementById('marksForm');

        if (!rows.length) return;

        function updateRowState(rowIndex) {
            const row = rows[rowIndex];
            if (!row) return;

            const markInput = row.querySelector('.mark-input');
            const absentToggle = row.querySelector('.absent-toggle');
            const absentLabel = row.querySelector('.absent-label');
            const percentBadge = row.querySelector('.percentage-badge');
            const statusBadge = row.querySelector('.status-badge');
            const stateIcon = row.querySelector('.state-icon');
            const errorMsg = row.querySelector('.mark-error-msg');

            const isAbsent = absentToggle.checked;
            const markValStr = markInput.value.trim();
            const markVal = parseFloat(markValStr);

            if (isAbsent) {
                absentLabel.textContent = 'Absent';
                absentLabel.className = 'form-check-label small fw-bold ms-1 absent-label text-danger';
                markInput.disabled = true;
                markInput.value = '';
                markInput.classList.remove('is-invalid-mark');
                errorMsg.classList.add('d-none');

                percentBadge.textContent = '0%';
                percentBadge.className = 'fw-bold percentage-badge text-danger';
                statusBadge.textContent = 'Absent';
                statusBadge.className = 'badge status-badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25';

                stateIcon.className = 'fa fa-check-circle text-success state-icon';
                row.classList.remove('row-active', 'row-locked');
                row.classList.add('row-completed');
                return true;
            } else {
                absentLabel.textContent = 'Present';
                absentLabel.className = 'form-check-label small fw-bold ms-1 absent-label text-success';
                markInput.disabled = false;

                if (markValStr === '') {
                    percentBadge.textContent = '-';
                    percentBadge.className = 'fw-bold percentage-badge text-muted';
                    statusBadge.textContent = 'Pending';
                    statusBadge.className = 'badge status-badge bg-light text-muted border';
                    stateIcon.className = 'fa fa-clock text-warning state-icon';
                    row.classList.remove('row-completed');
                    return false;
                }

                if (isNaN(markVal) || markVal < 0 || markVal > totalMarks) {
                    markInput.classList.add('is-invalid-mark');
                    errorMsg.textContent = `Max: ${totalMarks}`;
                    errorMsg.classList.remove('d-none');
                    percentBadge.textContent = 'Invalid';
                    percentBadge.className = 'fw-bold percentage-badge text-danger';
                    statusBadge.textContent = 'Error';
                    statusBadge.className = 'badge status-badge bg-danger text-white';
                    stateIcon.className = 'fa fa-exclamation-triangle text-danger state-icon';
                    row.classList.remove('row-completed');
                    return false;
                }

                // Valid mark
                markInput.classList.remove('is-invalid-mark');
                errorMsg.classList.add('d-none');

                const percent = ((markVal / totalMarks) * 100).toFixed(1);
                percentBadge.textContent = `${percent}%`;

                if (markVal >= passMarks) {
                    percentBadge.className = 'fw-bold percentage-badge text-success';
                    statusBadge.textContent = 'Passed';
                    statusBadge.className = 'badge status-badge bg-success bg-opacity-10 text-success border border-success border-opacity-25';
                } else {
                    percentBadge.className = 'fw-bold percentage-badge text-danger';
                    statusBadge.textContent = 'Failed';
                    statusBadge.className = 'badge status-badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25';
                }

                stateIcon.className = 'fa fa-check-circle text-success state-icon';
                row.classList.remove('row-active', 'row-locked');
                row.classList.add('row-completed');
                return true;
            }
        }

        // Sequential Unlocking Algorithm
        function recalculateSequence() {
            let unlockNext = true;
            let presentCount = 0;
            let absentCount = 0;
            let pendingCount = 0;

            rows.forEach((row, idx) => {
                const markInput = row.querySelector('.mark-input');
                const absentToggle = row.querySelector('.absent-toggle');
                const commentInput = row.querySelector('.comment-input');
                const stateIcon = row.querySelector('.state-icon');

                if (unlockNext) {
                    row.classList.remove('row-locked');
                    markInput.removeAttribute('disabled');
                    absentToggle.removeAttribute('disabled');
                    commentInput.removeAttribute('disabled');

                    const isCompleted = updateRowState(idx);

                    if (absentToggle.checked) {
                        absentCount++;
                    } else if (markInput.value.trim() !== '' && !isNaN(parseFloat(markInput.value))) {
                        presentCount++;
                    } else {
                        pendingCount++;
                    }

                    if (isCompleted) {
                        unlockNext = true;
                    } else {
                        row.classList.add('row-active');
                        unlockNext = false; // Next rows will remain locked until this one is completed
                    }
                } else {
                    // Locked row
                    row.classList.remove('row-active', 'row-completed');
                    row.classList.add('row-locked');
                    markInput.setAttribute('disabled', 'disabled');
                    absentToggle.setAttribute('disabled', 'disabled');
                    commentInput.setAttribute('disabled', 'disabled');
                    stateIcon.className = 'fa fa-lock text-muted state-icon';
                    pendingCount++;
                }
            });

            document.getElementById('statPresent').textContent = presentCount;
            document.getElementById('statAbsent').textContent = absentCount;
            document.getElementById('statPending').textContent = pendingCount;
        }

        // Attach event listeners to all rows
        rows.forEach((row, idx) => {
            const markInput = row.querySelector('.mark-input');
            const absentToggle = row.querySelector('.absent-toggle');

            markInput.addEventListener('input', function() {
                recalculateSequence();
            });

            markInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const nextRow = rows[idx + 1];
                    if (nextRow && !nextRow.classList.contains('row-locked')) {
                        const nextInput = nextRow.querySelector('.mark-input');
                        if (nextInput && !nextInput.disabled) {
                            nextInput.focus();
                            nextInput.select();
                        }
                    }
                }
            });

            absentToggle.addEventListener('change', function() {
                if (this.checked) {
                    markInput.value = '';
                }
                recalculateSequence();
            });
        });

        // Quick helper: Mark remaining absent
        document.getElementById('btnMarkRemainingAbsent')?.addEventListener('click', function() {
            if (!confirm('Mark all remaining pending students as Absent?')) return;
            rows.forEach((row) => {
                const markInput = row.querySelector('.mark-input');
                const absentToggle = row.querySelector('.absent-toggle');
                if (!absentToggle.checked && markInput.value.trim() === '') {
                    absentToggle.checked = true;
                }
            });
            recalculateSequence();
        });

        // Quick helper: Clear all marks
        document.getElementById('btnClearAll')?.addEventListener('click', function() {
            if (!confirm('Clear all entered marks on this form?')) return;
            rows.forEach((row) => {
                const markInput = row.querySelector('.mark-input');
                const absentToggle = row.querySelector('.absent-toggle');
                const commentInput = row.querySelector('.comment-input');
                markInput.value = '';
                absentToggle.checked = false;
                commentInput.value = '';
            });
            recalculateSequence();
        });

        // Initial sequence evaluation
        recalculateSequence();

        // Focus first editable input
        const firstEditableInput = document.querySelector('.mark-input:not([disabled])');
        if (firstEditableInput) {
            firstEditableInput.focus();
        }

        // Enable all inputs before submit so FormData includes all student rows
        form.addEventListener('submit', function(e) {
            rows.forEach(row => {
                const markInput = row.querySelector('.mark-input');
                const absentToggle = row.querySelector('.absent-toggle');
                const commentInput = row.querySelector('.comment-input');
                markInput.removeAttribute('disabled');
                absentToggle.removeAttribute('disabled');
                commentInput.removeAttribute('disabled');
            });
        });
    });
</script>
@endsection