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

@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">Exam Results</h3>
        <p class="text-muted mb-0">Select a subject from the create page, enter marks for enrolled students, then review results here.</p>
    </div>
    <a href="{{ route('exam.create') }}" class="btn btn-primary px-4 py-2">
        <i class="fas fa-plus me-2"></i> Add New Result
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

<div class="card card-page p-3 shadow-sm">
    <form method="GET" class="row g-3 align-items-end mb-4" id="examFilterForm">
        <div class="col-lg-3">
            <label class="form-label">Search</label>
            <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Student, email, subject">
        </div>
        <div class="col-md-4 col-lg-3">
            <label class="form-label">Faculty</label>
            <select name="faculty_id" id="filterFaculty" class="form-select">
                <option value="">All faculties</option>
                @foreach($faculties as $faculty)
                    <option value="{{ $faculty->id }}" @selected((string) $facultyId === (string) $faculty->id)>{{ $faculty->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 col-lg-3">
            <label class="form-label">Department</label>
            <select name="department_id" id="filterDepartment" class="form-select">
                <option value="">All departments</option>
                @foreach($departments as $department)
                    <option value="{{ $department->id }}" @selected((string) $departmentId === (string) $department->id)>{{ $department->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 col-lg-3">
            <label class="form-label">Subject / Course</label>
            <select name="course_id" id="filterCourse" class="form-select">
                <option value="">All subjects</option>
                @foreach($courses as $course)
                    <option value="{{ $course->id }}" @selected((string) $courseId === (string) $course->id)>
                        {{ $course->code ? $course->code.' - ' : '' }}{{ $course->title }} @if($course->semester) - {{ $course->semester->name }} @endif
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-12 d-flex flex-wrap gap-2">
            <button type="submit" class="btn btn-outline-primary">
                <i class="fas fa-filter me-1"></i> Filter
            </button>
            <a href="{{ route('exam.index') }}" class="btn btn-outline-secondary">Reset</a>
        </div>
    </form>

    <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>Faculty / Department</th>
                    <th>Subject</th>
                    <th style="width: 130px;">Marks</th>
                    <th style="width: 130px;">Grade</th>
                    <th style="width: 130px;">Status</th>
                    <th style="width: 150px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($results as $result)
                    @php
                        $course = $result->course;
                        $department = $course?->semester?->program?->department;
                        $faculty = $department?->faculty;
                    @endphp
                    <tr>
                        <td>{{ $result->id }}</td>
                        <td>
                            <div class="fw-semibold">{{ $result->student?->name ?? '-' }}</div>
                            <div class="small text-muted">{{ $result->student?->email ?? '' }}</div>
                        </td>
                        <td>
                            <div>{{ $faculty?->name ?? '-' }}</div>
                            <div class="small text-muted">{{ $department?->name ?? '-' }}</div>
                        </td>
                        <td>
                            <div class="fw-semibold">{{ $course?->title ?? '-' }}</div>
                            <div class="small text-muted">
                                @if($course?->code) {{ $course->code }} @endif
                                @if($course?->semester) {{ $course?->code ? ' / ' : '' }}{{ $course->semester->name }} @endif
                            </div>
                        </td>
                        <td>{{ number_format((float) $result->total_marks, 2) }}%</td>
                        <td>{{ $result->gradeScale?->name ?? '-' }}</td>
                        <td>
                            <span class="badge bg-{{ $result->is_passed ? 'success' : 'danger' }}">
                                {{ $result->is_passed ? 'Passed' : 'Failed' }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('exam.show', [$result->course_id, $result->student_user_id]) }}" class="btn btn-sm btn-outline-info">
                                    <i class="far fa-eye"></i>
                                </a>
                                <a href="{{ route('exam.edit', [$result->course_id, $result->student_user_id]) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="far fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">No exam results found. Use Add New Result to enter marks for a subject.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-3">{{ $results->links('pagination::bootstrap-4') }}</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const facultySelect = document.getElementById('filterFaculty');
    const departmentSelect = document.getElementById('filterDepartment');
    const courseSelect = document.getElementById('filterCourse');
    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);
        });
    }

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

    departmentSelect.addEventListener('change', async function () {
        fillSelect(courseSelect, 'All subjects', []);
        if (! this.value) return;
        const response = await fetch(`${coursesUrl}/${this.value}`);
        fillSelect(courseSelect, 'All subjects', await response.json());
    });
});
</script>
@endsection