@extends('admin.layout.app')
@section('title', 'Quizzes')
@section('content')
    <style>
        table tbody tr td {
            border-bottom: 1px solid #dee2e6;
        }
    </style>
    <div class="content container-fluid">

        <div class="page-header">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Quizzes</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lesson-quizzes.index') }}">Quizzes</a></li>
                            <li class="breadcrumb-item active">All Quizzes</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <form method="GET" action="{{ route('lesson-quizzes.index') }}" class="mb-4 row g-3">

                <div class="col-md-4 local-forms">
                    <label for="">Course</label>
                    <select name="course_id" id="course_id" class="form-control">
                        <option value="">--Select Course--</option>
                        @foreach ($courses as $course)
                            <option value="{{ $course->id }}" {{ request('course_id') == $course->id ? 'selected' : '' }}>
                                {{ $course->name }}
                            </option>
                        @endforeach
                    </select>
                </div>


                <div class="col-md-4 local-forms">
                    <label for="">Unit</label>
                    <select name="unit_id" id="unit_id" class="form-control" disabled>
                        <option value="">--Select Unit--</option>
                    </select>
                </div>

                <div class="col-md-4 local-forms">
                    <label for="">Lesson Type</label>
                    <select name="lesson_type_id" class="form-select form-control">
                        <option value="">-- Select Lesson Type --</option>
                        @foreach ($lessonTypes as $type)
                            <option value="{{ $type->id }}"
                                {{ request('lesson_type_id') == $type->id ? 'selected' : '' }}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                </div>



                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('lesson-quizzes.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>

            @if (request()->filled(['course_id', 'unit_id', 'quiz_type_id']) && $quizzes->isEmpty())
                <div class="alert alert-info d-flex justify-content-between align-items-center">
                    <span>No quizzes found for the selected filters.</span>
                    <a href="{{ route('lesson-quizzes.create') }}" class="btn btn-sm btn-success">Create Quiz</a>
                </div>
            @endif

            <div class="container" style="max-width: 1500px !important">
                <div class="p-3 card">
                    <div class="card-title">
                        <h3>Quizzes</h3>
                    </div>
                    <div class="card-body">
                        @if ($quizzes->isNotEmpty())
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Question Text</th>
                                            <th>Type</th>
                                            <th>Course</th>
                                            <th>Unit</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($quizzes as $quiz)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    {{ $quiz->question_text }}
                                                    <div class="row">
                                                        @if ($quiz->type == 'mcq')
                                                            @foreach ($quiz->options as $opt => $value)
                                                                <div class="col-md-3">
                                                                    <span class="text-muted">
                                                                        {{ chr(65 + $loop->index) }}.</span>
                                                                    <span class="fs-6">{{ $value }}</span>
                                                                </div>
                                                            @endforeach
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>
                                                    @switch($quiz->type)
                                                        @case('mcq')
                                                            <span class="badge badge-danger">MCQ</span>
                                                        @break

                                                        @case('tf')
                                                            <span class="badge bg-success">T/F</span>
                                                        @break

                                                        @case('blank')
                                                            <span class="badge bg-warning">Blank</span>
                                                        @break

                                                        @case('audio')
                                                            <span class="badge bg-info">Audio</span>
                                                        @break

                                                        @case('matching')
                                                            <span class="badge bg-secondary">Matching</span>
                                                        @break

                                                        @default
                                                            <span class="badge bg-success">{{ ucfirst($quiz->type) }}</span>
                                                    @endswitch
                                                </td>
                                                <td>{{ $quiz->course->name ?? '-' }}</td>
                                                <td>{{ $quiz->unit->name ?? '-' }}</td>
                                                <td>
                                                    <a href="{{ route('lesson-quizzes.edit', $quiz->id) }}"
                                                        class="btn btn-sm btn-primary">Edit</a>
                                                    <form action="{{ route('lesson-quizzes.destroy', $quiz->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Delete this quiz?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="p-2 d-flex flex-column flex-md-row justify-content-between align-items-center">
                                <div class="mb-2 mb-md-0 text-muted">
                                    Showing {{ $quizzes->firstItem() }} to {{ $quizzes->lastItem() }} of
                                    {{ $quizzes->total() }}
                                    entries
                                </div>

                                <div class="mt-3">
                                    {{ $quizzes->withQueryString()->links() }}
                                </div>
                            </div>
                        @else
                            <div class="alert alert-info d-flex justify-content-between align-items-center">
                                <span>No quizzes found.</span>
                                <a href="{{ route('lesson-quizzes.create') }}" class="btn btn-sm btn-success">Create
                                    Quiz</a>
                            </div>
                        @endif
                    </div>

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

@push('scripts')
    <script>
        $(document).ready(function() {
            const courseId = $('#course_id').val();
            const unitSelect = $('#unit_id');

            if (courseId && unitSelect.children('option').length === 1) {
                $.ajax({
                    url: `/get-units-by-course/${courseId}`,
                    type: 'GET',
                    success: function(res) {
                        unitSelect.empty().append('<option value="">Select Unit</option>');
                        $.each(res.units, function(key, unit) {
                            const isSelected = unit.id == '{{ request('unit_id') }}' ?
                                'selected' : '';
                            unitSelect.append(
                                `<option value="${unit.id}" ${isSelected}>${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                            );
                        });
                        unitSelect.prop('disabled', false);
                    },
                    error: function() {
                        unitSelect.html('<option value="">Error loading</option>');
                    }
                });
            }

            $('#course_id').on('change', function() {
                let courseId = $(this).val();
                unitSelect.prop('disabled', true).html('<option value="">Loading...</option>');

                if (courseId) {
                    $.ajax({
                        url: `/get-units-by-course/${courseId}`,
                        type: 'GET',
                        success: function(res) {
                            unitSelect.empty().append('<option value="">Select Unit</option>');
                            $.each(res.units, function(key, unit) {
                                unitSelect.append(
                                    `<option value="${unit.id}">${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                                );
                            });
                            unitSelect.prop('disabled', false);
                        },
                        error: function() {
                            unitSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    unitSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                }
            });


        });
    </script>
@endpush