@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title])
    <div class="container">
        {{-- Card-1: Subject and Lesson Selection --}}
        <div class="card mb-2">
            <div class="card-header">
                <h4>Filter Your Questions</h4>
            </div>
            <div class="card-body">
                <div class="row align-items-center">
                    {{-- Subject Dropdown --}}
                    <div class="col-lg-4">
                        <label for="subject_sid">Subject</label>
                        <select name="subject_sid" id="subject_sid" class="form-select select2">
                            <option value="" disabled selected>Select Subject</option>
                            @foreach ($subject as $item)
                                <option
                                    value="{{ isset($item->subject) ? $item->subject->cms_subject_sid : $item->cms_subject_sid }}">
                                    {{ isset($item->subject) ? $item->subject->subject_name : $item->subject_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Lesson Dropdown --}}
                    <div class="col-lg-4">
                        <label for="lesson_sid">Lesson</label>
                        <select name="lesson_sid" id="lesson_sid" class="form-select select2">
                            <option value="" disabled selected>Select Lesson</option>
                        </select>
                    </div>

                    {{-- Show Button --}}
                    <div class="col-lg-4 mt-5">
                        <button class="btn btn-primary" id="showQuestions">Show</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Card-2: MCQ Questions --}}
        <div class="card mb-4">
            <div class="card-header">
                <h4>MCQ Questions</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-sm" id="mcqQuestionsTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Lesson</th>
                                <th>Question</th>
                                <th>Right Answer</th>
                                <th>Mark</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Card-3: Written Questions --}}
        <div class="card mb-4">
            <div class="card-header">
                <h4>Written Questions</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-sm" id="writtenQuestionsTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Lesson</th>
                                <th>Question</th>
                                <th>Mark</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {{-- View MCQ Modal --}}
    <div class="modal fade" id="ViewMcqModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit MCQ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- Left container: Question, Default-Mark, and Description -->
                        <div class="col-lg-6">
                            <div class="col-lg-12 mb-3">
                                <label>Question</label>
                                <textarea class="form-control" name="mcq" id="mcq" rows="6" disabled></textarea>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Default-Mark</label>
                                <input type="text" class="form-control" name="mcq_default_mark" id="mcq_default_mark"
                                    disabled>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Description</label>
                                <textarea class="form-control" id="mcq_description" name="mcq_description" rows="1"
                                    disabled></textarea>
                            </div>
                        </div>

                        <!-- Right container: Options and Right Answer -->
                        <div class="col-lg-6">
                            <div class="col-lg-12 mb-3">
                                <label>Option-1</label>
                                <div class="d-flex align-items-center">
                                    <div class="form-check-inline ml-2">
                                        <input type="radio" class="form-check" name="right_answer_radio" value="1"
                                            id="right_answer_radio1" disabled>
                                    </div>
                                    <input type="text" class="form-control" name="option1" disabled>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Option-2</label>
                                <div class="d-flex align-items-center">
                                    <div class="form-check-inline ml-2">
                                        <input type="radio" class="form-check" name="right_answer_radio" value="2"
                                            id="right_answer_radio2" disabled>
                                    </div>
                                    <input type="text" class="form-control" name="option2" disabled>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Option-3</label>
                                <div class="d-flex align-items-center">
                                    <div class="form-check-inline ml-2">
                                        <input type="radio" class="form-check" name="right_answer_radio" value="3"
                                            id="right_answer_radio3" disabled>
                                    </div>
                                    <input type="text" class="form-control" name="option3" disabled>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Option-4</label>
                                <div class="d-flex align-items-center">
                                    <div class="form-check-inline ml-2">
                                        <input type="radio" class="form-check" name="right_answer_radio" value="4"
                                            id="right_answer_radio4" disabled>
                                    </div>
                                    <input type="text" class="form-control" name="option4" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {{-- View Question Modal --}}
    <div class="modal fade" id="ViewQuestionModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Question</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6 mb-3">
                            <div class="col-lg-12 mb-3">
                                <label>Question</label>
                                <textarea rows="5" class="form-control" id="edit_question" name="edit_question"
                                    disabled></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <div class="col-lg-12 mb-3">
                                <label>Default Mark</label>
                                <input type="text" class="form-control" id="edit_default_mark" name="edit_default_mark"
                                    value="" disabled>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Description</label>
                                <textarea class="form-control" id="edit_description" name="edit_description" rows="1"
                                    disabled></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#subject_sid').change(function () {
                var subjectSid = $(this).val();

                if (subjectSid) {
                    $.ajax({
                        url: '{{ route('fetchLessons') }}',
                        method: 'GET',
                        data: {
                            subject_sid: subjectSid
                        },
                        success: function (data) {
                            var lessonSelect = $('#lesson_sid');
                            lessonSelect.empty().append(
                                '<option value="" disabled selected>Select Lesson</option>');

                            $.each(data.lessons, function (index, lesson) {

                                lessonSelect.append('<option value="' + lesson
                                    .staff_subject_lessons_sid + '">' + lesson
                                        .title +
                                    '</option>');
                            });
                        }
                    });
                }
            });

            // Fetch questions on clicking the Show button
            $('#showQuestions').click(function () {
                var lessonSid = $('#lesson_sid').val();

                if (lessonSid) {
                    $.ajax({
                        url: '{{ route('fetchQuestions') }}', // Route to fetch questions
                        method: 'GET',
                        data: {
                            lesson_sid: lessonSid
                        },
                        success: function (data) {
                            // Populate MCQ Questions Table
                            var mcqTableBody = $('#mcqQuestionsTable tbody');
                            mcqTableBody.empty();
                            $.each(data.mcq_questions, function (index, question) {
                                console.log(question);
                                mcqTableBody.append(`
                                                        <tr>
                                                            <td>${index + 1}</td>
                                                            <td>${question.lesson.title}</td>
                                                            <td>${truncateText(question.question, 50)}</td>                                   
                                                            <td>${question.right_answer}</td>
                                                            <td>${question.default_mark}</td>
                                                             <td>
                                                                <a href="#" class="btn btn-link p-0" data-bs-toggle="modal" data-bs-target="#ViewMcqModal"
                                                                data-id="${question.cms_mcq_sid}" 
                                                                data-question="${question.question}" 
                                                                data-description="${question.description}" 
                                                                data-mark="${question.default_mark}" 
                                                                data-option_1="${question.option_1}" 
                                                                data-option_2="${question.option_2}" 
                                                                data-option_3="${question.option_3}" 
                                                                data-option_4="${question.option_4}" 
                                                                data-right_answer="${question.right_answer}">
                                                                    <i class="fa-solid fa-eye"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    `);
                            });

                            // Populate Written Questions Table
                            var writtenTableBody = $('#writtenQuestionsTable tbody');
                            writtenTableBody.empty();

                            $.each(data.written_questions, function (index, question) {

                                writtenTableBody.append(`
                                                        <tr>
                                                            <td>${index + 1}</td>
                                                             <td>${question.lesson.title}</td>
                                                            <td>${truncateText(question.question, 50)}</td>                                   
                                                             <td>${question.default_mark}</td>
                                                           <td> <a href="#" 
                                                                class="btn btn-link p-0" 
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#ViewQuestionModal"
                                                                data-id="${question.cms_question_sid}"
                                                                data-question="${question.question}"
                                                                data-description="${question.description}"
                                                                data-mark="${question.default_mark}">
                                                                    <i class="fa-solid fa-eye"></i>
                                                                </a>
                                                                </td>
                                                        </tr>
                                                    `);
                            });
                        }
                    });
                }
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#mcqQuestionsTable').DataTable({});
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#writtenQuestionsTable').DataTable({});
        });
    </script>
    <script>
        function truncateText(text, maxLength) {
            if (text.length > maxLength) {
                return text.substring(0, maxLength) + '...';
            }
            return text;
        }
    </script>
    <script>
        $('#ViewMcqModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var question = button.data('question');
            var description = button.data('description');
            var mark = button.data('mark');
            var question_sid = button.data('id');
            var option_1 = button.data('option_1');
            var option_2 = button.data('option_2');
            var option_3 = button.data('option_3');
            var option_4 = button.data('option_4');
            var right_answer = button.data('right_answer');
            console.log(right_answer);

            $('#mcq').val(question);
            $('#mcq_description').val(description);
            $('#mcq_default_mark').val(mark);

            $('#right_answer_radio' + right_answer).prop('checked', true);

            $('input[name="option1"]').val(option_1);
            $('input[name="option2"]').val(option_2);
            $('input[name="option3"]').val(option_3);
            $('input[name="option4"]').val(option_4);

            // Set the hidden input field for question sid (if needed)
            $('input[name="cms_mcq_sid"]').val(question_sid);
        });
    </script>
    <script>
        $('#ViewQuestionModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal         
            var question = button.data('question');
            var description = button.data('description');
            var mark = button.data('mark');
            var question_sid = button.data('id');

            $('#edit_question').val(question);
            $('#edit_description').val(description);
            $('#edit_default_mark').val(mark);
            $('#question_sid').val(question_sid);
        });
    </script>
@endpush