@extends('theme.master')
@section('title', 'Show Faculty Student Performance')
<style>
.custom-dropdown {
    height: 50px !important;
    padding: 10px !important;
}
.table-responsive {
    margin-top: 20px;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th, .table td {
    padding: 12px;
    text-align: left;
    vertical-align: middle;
}
.table th {
    background-color: #f8f9fa;
    font-weight: bold;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}
.table-hover tbody tr:hover {
    background-color: #e9ecef;
}
</style>

@section('content')
    @include('admin.message')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section id="blog-home" class="blog-home-main-block profile_had">
        <div class="container">
            <h1 class="blog-home-heading text-white">Show Student Performance</h1>
        </div>
    </section>

    <section class="profile-item-block homepad p-5">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 col-lg-8">

                    {{-- 🔽 Class Filter Form --}}
                    <form method="GET" action="{{ url()->current() }}" class="row mb-4">
                        <div class="col-md-3 mt-3">
                            <label class="text-dark" for="classnumber">Class: <sup class="text-danger">*</sup></label>
                            <select class="form-control select2 custom-dropdown" name="classnumber" id="classnumber" onchange="this.form.submit()">
                                <option value="">All Classes</option>
                                <option value="8" {{ request('classnumber') == '8' ? 'selected' : '' }}>8</option>
                                <option value="9" {{ request('classnumber') == '9' ? 'selected' : '' }}>9</option>
                                <option value="10" {{ request('classnumber') == '10' ? 'selected' : '' }}>10</option>
                                <option value="11" {{ request('classnumber') == '11' ? 'selected' : '' }}>11</option>
                                <option value="12" {{ request('classnumber') == '12' ? 'selected' : '' }}>12</option>
                            </select>
                        </div>
                    </form>
                    {{-- 🔼 End Filter --}}

                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th width="150">Date</th>
                                            <th width="150">Class</th>
                                            <th width="150">Course</th>
                                            <th width="150">User</th>
                                            <th width="150">Mark Obtained</th>
                                            <th width="150">View Score Card</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        @if ($quizAnswers->count() > 0)
                                            @foreach ($quizAnswers as $quizAnswer)
                                                <tr>
                                                    <td><span>{{ date('d-m-Y', strtotime($quizAnswer->created_at)) }}</span></td>
                                                    <td><span>{{ $quizAnswer->classnumber ?? '' }}</span></td>
                                                    <td><span>{{ json_decode($quizAnswer->course_title, true)['en'] ?? '-' }}</span></td>
                                                    <td><span>{{ $quizAnswer->user_name ?? '' }}</span></td>
                                                    <td><p>{{ $quizAnswer->score_card ?? '0' }}</p></td>
                                                    <td><a href="{{ route('start.quiz.show', [$quizAnswer->topic_id, $quizAnswer->user_id ?? '']) }}" class="btn btn-primary">View Score Card</a></td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="6">No records found.</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                                {{ $quizAnswers->appends(request()->query())->links() }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });
    </script>
@endsection