@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title])
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4>{{ $title }}</h4>
                        <div>
                            <a href="#" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#McqModal">
                                <i class="fa-solid fa-plus"></i> &nbsp; Add MCQ Question
                            </a>
                            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#QuestionModal">
                                <i class="fa-solid fa-plus"></i> &nbsp; Add Written Question
                            </a>

                            <button class="btn btn-secondary" onclick="window.history.back()">Back</button>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="myTable0">
                                <thead>
                                    <tr>

                                        <th>Type</th>
                                        <th>Lesson</th>
                                        <th>Question</th>
                                        <th>Mark</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($questions as $item)
                                        <tr>

                                            <td>Question</td>
                                            <td>{{ $item->lesson->title ?? '' }}</td>
                                            <td>{{ \Illuminate\Support\Str::words($item->question ?? '', 10) }}</td>
                                            <td> {{ $item->default_mark ?? '' }} </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <a href="#" class="btn  btn-link p-0" data-bs-toggle="modal"
                                                        data-bs-target="#EditQuestionModal"
                                                        data-id="{{ $item->cms_question_sid }}"
                                                        data-question="{{ $item->question }}"
                                                        data-description="{{ $item->description }}"
                                                        data-mark="{{ $item->default_mark }}">


                                                        <i class="fa-solid fa-pen-to-square text-success"></i></a>
                                                    &nbsp;
                                                    <form action="{{ route('question_delete') }}" method="POST"
                                                        class="delete-form ps-2">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="cms_question_id" id="cms_question_id"
                                                            value="{{ $item->cms_question_sid }}">
                                                        <input type="hidden" name="lesson" id="lesson" value="{{ $id }}">
                                                        <button type="button" class="btn  btn-link p-0 btn-delete"> <i
                                                                class="fas fa-trash text-danger"></i></button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    @foreach ($mcq as $item)
                                        <td>MCQ</td>
                                        <td>{{ $item->lesson->title ?? '' }}</td>
                                        <td>{{ \Illuminate\Support\Str::words($item->question ?? '', 10) }}</td>
                                        <td> {{ $item->default_mark ?? '' }} </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="#" class="btn  btn-link p-0" data-bs-toggle="modal"
                                                    data-bs-target="#EditMcqModal" data-id="{{ $item->cms_mcq_sid }}"
                                                    data-question="{{ $item->question }}"
                                                    data-description="{{ $item->description }}"
                                                    data-mark="{{ $item->default_mark }}" data-option_1="{{ $item->option_1 }}"
                                                    data-option_2="{{ $item->option_2 }}" data-option_3="{{ $item->option_3 }}"
                                                    data-option_4="{{ $item->option_4 }}"
                                                    data-right_answer="{{ $item->right_answer }}">
                                                    <i class="fa-solid fa-pen-to-square text-success"></i></a>
                                                &nbsp;
                                                <form action="{{ route('mcq_delete') }}" method="POST" class="delete-form ps-2">
                                                    @csrf
                                                    @method('DELETE')
                                                    <input type="hidden" name="cms_mcq_id" id="cms_mcq_id"
                                                        value="{{ $item->cms_mcq_sid }}">
                                                    <input type="hidden" name="lesson" id="lesson" value="{{ $id }}">
                                                    <button type="button" class="btn  btn-link p-0 btn-delete"> <i
                                                            class="fas fa-trash text-danger"></i></button>
                                                </form>
                                            </div>
                                        </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- MCQ Modal --}}
    <div class="modal fade" id="McqModal" 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">MCQ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('mcq_save') }}" method="POST">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $id }}">

                    <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" rows="6"></textarea>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label>Default-Mark</label>
                                    <input type="text" class="form-control" name="default_mark">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label>Description</label>
                                    <textarea class="form-control" name="description" rows="1"></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_radio_1">
                                        </div>
                                        <input type="text" class="form-control" name="option1">
                                    </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_radio_2">
                                        </div>
                                        <input type="text" class="form-control" name="option2">
                                    </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_radio_3">
                                        </div>
                                        <input type="text" class="form-control" name="option3">
                                    </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_radio_4">
                                        </div>
                                        <input type="text" class="form-control" name="option4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Edit MCQ Modal --}}
    <div class="modal fade" id="EditMcqModal" 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>
                <form action="{{ route('mcq_edit') }}" method="POST">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $id }}">
                    <input type="hidden" name="cms_mcq_sid" id="cms_mcq_sid">
                    <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"></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">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label>Description</label>
                                    <textarea class="form-control" id="mcq_description" name="mcq_description"
                                        rows="1"></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">
                                        </div>
                                        <input type="text" class="form-control" name="option1">
                                    </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">
                                        </div>
                                        <input type="text" class="form-control" name="option2">
                                    </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">
                                        </div>
                                        <input type="text" class="form-control" name="option3">
                                    </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">
                                        </div>
                                        <input type="text" class="form-control" name="option4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Question Modal --}}
    <div class="modal fade" id="QuestionModal" 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">Question</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('question_save') }}" method="POST">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $id }}">

                    <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" name="question"></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" name="default_mark">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label>Description</label>
                                    <textarea class="form-control" name="description" rows="1"></textarea>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Edit Question Modal --}}
    <div class="modal fade" id="EditQuestionModal" 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>
                <form action="{{ route('question_edit') }}" method="POST">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $id }}">
                    <input type="hidden" id="question_sid" name="question_sid">
                    <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"></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="">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label>Description</label>
                                    <textarea class="form-control" id="edit_description" name="edit_description"
                                        rows="1"></textarea>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this Question?<br>
                    Please note, if you proceed with the deletion. This action cannot be undone.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#myTable0').DataTable({});
        });
    </script>
    <script>
        $('#EditQuestionModal').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>
    <script>
        $('#EditMcqModal').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>
        document.querySelectorAll('.btn-delete').forEach(button => {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
                const form = button.closest('.delete-form');
                document.getElementById('confirmDelete').addEventListener('click', function () {
                    form.submit(); // Submit the correct form
                });
            });
        });
    </script>
@endpush