@extends('admin.layout.app')
@section('title', 'Add Exam Result')

@section('body')
<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-4">
    <div>
        <h3 class="fw-bold mb-1">Add Exam Result</h3>
        <p class="text-muted mb-0">Choose faculty, department, subject, and exam type before entering marks.</p>
    </div>
    <a href="{{ route('exam.index') }}" class="btn btn-outline-secondary px-4 py-2">
        <i class="fas fa-arrow-left me-2"></i> Back to List
    </a>
</div>

@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger">
        <div class="fw-semibold mb-1">Please correct the highlighted fields.</div>
        {{ $errors->first() }}
    </div>
@endif

<div class="card card-page p-3 shadow-sm mb-4">
    <div class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label">Faculty</label>
            <select id="facultySelect" class="form-select">
                <option value="">Select faculty</option>
                @foreach($faculties as $faculty)
                    <option value="{{ $faculty->id }}" @selected((string) $selectedFacultyId === (string) $faculty->id)>{{ $faculty->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">Department</label>
            <select id="departmentSelect" class="form-select">
                <option value="">Select department</option>
                @foreach($departments as $department)
                    <option value="{{ $department->id }}" @selected((string) $selectedDepartmentId === (string) $department->id)>{{ $department->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">Subject / Course</label>
            <select id="courseSelect" class="form-select">
                <option value="">Select subject</option>
                @foreach($courses as $item)
                    <option value="{{ $item->id }}" @selected((string) $selectedCourseId === (string) $item->id)>
                        {{ $item->code ? $item->code.' - ' : '' }}{{ $item->title }} @if($item->semester) - {{ $item->semester->name }} @endif
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">Exam Type</label>
            <select id="examTypeSelect" class="form-select" @disabled(! $course)>
                <option value="">Select exam type</option>
                @foreach($examTypes as $type)
                    <option value="{{ $type->id }}" @selected((string) $selectedExamTypeId === (string) $type->id)>
                        {{ $type->name }} ({{ rtrim(rtrim(number_format((float) $type->weight, 2), '0'), '.') }}%)
                    </option>
                @endforeach
            </select>
        </div>
    </div>
</div>

@if($course && $selectedExamType)
    <form method="POST" action="{{ route('exam.store') }}">
        @csrf
        <input type="hidden" name="course_id" value="{{ $course->id }}">
        <input type="hidden" name="exam_type_id" value="{{ $selectedExamType->id }}">

        <div class="card card-page p-3 shadow-sm">
            <div class="d-flex flex-column flex-lg-row align-items-start justify-content-between gap-3 mb-3">
                <div>
                    <h4 class="mb-1">{{ $course->title }}</h4>
                    <div class="text-muted">
                        {{ $course->code ? $course->code.' / ' : '' }}
                        {{ $course->semester?->program?->department?->faculty?->name ?? '-' }}
                        /
                        {{ $course->semester?->program?->department?->name ?? '-' }}
                        /
                        {{ $course->semester?->name ?? '-' }}
                    </div>
                    <div class="mt-2">
                        <span class="badge bg-primary">{{ $selectedExamType->name }}</span>
                        <span class="badge bg-light text-dark border">Weight: {{ rtrim(rtrim(number_format((float) $selectedExamType->weight, 2), '0'), '.') }}%</span>
                    </div>
                </div>
                <div class="d-flex flex-column align-items-lg-end gap-2">
                    <span class="badge bg-light text-dark border px-3 py-2">{{ $students->count() }} enrolled students</span>
                    <label class="form-label mb-0 small text-muted" for="maxMarksInput">Max Marks</label>
                    <input id="maxMarksInput" type="number" name="max_marks" min="0.01" step="0.01" class="form-control form-control-sm" style="width: 120px;" value="{{ old('max_marks', $existingMarks->first()?->max_marks ?? 100) }}" required>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 80px;">#</th>
                            <th>Student</th>
                            <th>Contact</th>
                            <th style="width: 180px;">{{ $selectedExamType->name }} Marks</th>
                            <th style="width: 160px;">Current Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($students as $index => $enrollment)
                            @php
                                $student = $enrollment->student;
                                $existing = $existingMarks->get($enrollment->student_user_id);
                                $existingResult = $existingResults->get($enrollment->student_user_id);
                            @endphp
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $student?->name ?? '-' }}</div>
                                    <div class="small text-muted">{{ $student?->studentRecord?->student_no ?? 'Student ID not set' }}</div>
                                </td>
                                <td>
                                    <div class="small">{{ $student?->email ?? '-' }}</div>
                                    <div class="small text-muted">{{ $student?->phone ?? '-' }}</div>
                                </td>
                                <td>
                                    <input
                                        type="number"
                                        name="marks[{{ $enrollment->student_user_id }}]"
                                        value="{{ old('marks.'.$enrollment->student_user_id, $existing?->marks_obtained) }}"
                                        min="0"
                                        step="0.01"
                                        class="form-control"
                                        placeholder="Marks">
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border">
                                        {{ $existingResult ? number_format((float) $existingResult->total_marks, 2).'%' : '-' }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">No active students are enrolled in this subject.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex flex-wrap gap-2 mt-3">
                <button type="submit" class="btn btn-primary px-4" @disabled($students->isEmpty())>
                    <i class="fas fa-save me-2"></i> Save Results
                </button>
                <a href="{{ route('exam.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>
    </form>
@elseif($course)
    <div class="card card-page p-4 shadow-sm text-center text-muted">
        Select an exam type to display the mark sheet for this subject.
    </div>
@else
    <div class="card card-page p-4 shadow-sm text-center text-muted">
        Select a subject to display the enrolled students.
    </div>
@endif

<script>
document.addEventListener('DOMContentLoaded', function () {
    const facultySelect = document.getElementById('facultySelect');
    const departmentSelect = document.getElementById('departmentSelect');
    const courseSelect = document.getElementById('courseSelect');
    const examTypeSelect = document.getElementById('examTypeSelect');
    const createUrl = @json(route('exam.create'));
    const departmentsUrl = @json(url('exam/departments/by-faculty'));
    const coursesUrl = @json(url('exam/courses/by-department'));

    function fillSelect(select, placeholder, items) {
        select.innerHTML = `<option value="">${placeholder}</option>`;
        items.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.name;
            select.appendChild(option);
        });
    }

    function openSelectedCourse() {
        if (! courseSelect.value) return;
        const params = new URLSearchParams({
            faculty_id: facultySelect.value,
            department_id: departmentSelect.value,
            course_id: courseSelect.value
        });
        if (examTypeSelect && examTypeSelect.value) {
            params.set('exam_type_id', examTypeSelect.value);
        }
        window.location.href = `${createUrl}?${params.toString()}`;
    }

    facultySelect.addEventListener('change', async function () {
        fillSelect(departmentSelect, 'Select department', []);
        fillSelect(courseSelect, 'Select subject', []);
        if (examTypeSelect) examTypeSelect.value = '';
        if (! this.value) return;
        const response = await fetch(`${departmentsUrl}/${this.value}`);
        fillSelect(departmentSelect, 'Select department', await response.json());
    });

    departmentSelect.addEventListener('change', async function () {
        fillSelect(courseSelect, 'Select subject', []);
        if (examTypeSelect) examTypeSelect.value = '';
        if (! this.value) return;
        const response = await fetch(`${coursesUrl}/${this.value}`);
        fillSelect(courseSelect, 'Select subject', await response.json());
    });

    courseSelect.addEventListener('change', openSelectedCourse);
    if (examTypeSelect) {
        examTypeSelect.addEventListener('change', openSelectedCourse);
    }
});
</script>
@endsection