@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Exam</title>
<style>
    .edit:hover {
        color: #fff !important;
        background-color: blue !important;
        border-color: #696cff !important;
        border-radius: 5px !important;
    }

    .delete:hover {
        color: #fff !important;
        background-color: #E3242B !important;
        border-color: #E3242B !important;
        border-radius: 5px !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .ans_div .ans_strong {
        margin: 0 0 13px;
        display: block;
    }

    .ans_div .ans_p {
        margin: 0;
    }

    .ans_options_ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ans_options_ul li {
        padding: 0 8px;
        margin-left: 0.5%;
    }

    .ans_div {
        padding-top: 0 !important;
    }

    .ch_ohd {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    .delete-icon {
        color: red;
    }

    .delete-icon i {
        font-size: 23px;
    }

    .error-text {
        color: red;
    }

    .onlyhd {
        display: flex;
        gap: 7px;
        flex-wrap: wrap; /* Allow items to wrap to the next line */
    }

    .onlyhd strong {
        white-space: nowrap; /* Prevent the <strong> element from wrapping */
    }

    .action_divs {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .action_divs .edit-icon {
        padding: 0 6px;
        height: 100%;
    }

    .action_divs a i,
    .action_divs button i {
        font-size: 18px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color:#697a8d !important;
    }
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@section('main-content')
<div class="{{(Session::has('success')||Session::has('error'))?'':'d-none'}} hide_msg_class" style="position: absolute; top:15%; margin-left:1%;">
    <div id="alert">
        @if(Session::has('success'))
            <div class="alert {{Session::get('success')=="Question deleted successfully."?"alert-danger":"alert-success"}}" role="alert">
                {{Session::get('success')}}
            </div>
        @endif

        @if(Session::has('error'))
            <div class="alert alert-danger" role="alert">
                {{Session::get('error')}}
            </div>
        @endif
    </div>
</div>
<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl container-p-y row">
        <div class="col-6">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Records /</span> Exam Details</h4>
        </div>

        <!-- Check if there are exam questions available -->
        @if($examQuestions->isNotEmpty())
        <!-- Basic Bootstrap Table -->
        <!-- Loop through each question -->
            @foreach($examQuestions as $question)
                <div class="card mb-4">
                    <h5 class="card-header ch_ohd">
                        <div class="onlyhd">
                            <strong>Q{{ $loop->iteration }}.</strong>
                            {{ $question->question_text }}
                        </div>
                        <div class="action_divs">
                            <a href="#" class="delete-icon" data-question-id="{{ $question->id }}" onclick="return confirmDeletion('{{ $question->exam_id }}', '{{ $question->id }}');">
                                <i class="bx bx-trash"></i> <!-- Replace with your delete icon -->
                            </a>
                            <button class="edit-icon btn btn-link" data-toggle="modal" data-target="#editQuestionModal" data-question-id="{{ $question->id }}">
                                <i class="bx bx-edit"></i> <!-- Replace with your edit icon -->
                            </button>
                            <div>

                    </h5>
                    <div class="table dataTable text-nowrap dtbl_dropdown">
                        <!-- Display answer options -->
                        <ul class="ans_options_ul">
                            <ul class="ans_options_ul">
                                <li><strong>a)</strong> {{ $question->question_option1 }}</li>
                                <li><strong>b)</strong> {{ $question->question_option2 }}</li>
                                <li><strong>c)</strong> {{ $question->question_option3 }}</li>
                                <li><strong>d)</strong> {{ $question->question_option4 }}</li>
                            </ul>
                    </div>
                    
                    <hr>
                    <div class="card-header ans_div">
                        <h5 class="ans_h5">Marks Schema</h5>
                        <h6>Correct Answer: +{{$question->question_marks}}</h6>
                        <h6>Wrong Answer: - </h6>
                    </div>
                    <hr>
                    <div class="card-header ans_div">
                        <h5 class="ans_h5">Chosen Correct Option:<br/><br/>
                            <p class="ans_p fs-6">
                                <strong>
                                    @foreach(['a', 'b', 'c', 'd'] as $optionLabel)
                                        @php
                                            $optionKey = 'question_option' . $loop->iteration;
                                        @endphp
                                        @if($question->correct_answer === $optionKey)
                                            {{ $optionLabel }})
                                        @endif
                                    @endforeach
                                </strong>
                                <span>
                                    @foreach(['a', 'b', 'c', 'd'] as $optionLabel)
                                        @php
                                            $optionKey = 'question_option' . $loop->iteration;
                                        @endphp
                                        @if($question->correct_answer === $optionKey)
                                            {{ $question->$optionKey }}
                                        @endif
                                    @endforeach
                                </span>
                            </p>
                        </h5>
                    </div>

                </div>
            @endforeach
        <!-- / Basic Bootstrap Table -->
        @else
            <p>No questions available for this exam.</p>
        @endif
    </div>
    <!-- / Content -->
</div>

<!-- Modal for Editing Question -->
<div class="modal fade" id="editQuestionModal" tabindex="-1" role="dialog" aria-labelledby="editQuestionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editQuestionModalLabel">Edit Question</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Form for editing question text -->
                <form id="editQuestionForm" method="POST">
                    @csrf
                    <div class="form-group">
                        <label class="form-label" for="question_text">Question</label>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bxl-quora'></i></span>
                            <input type="text" name="question_text" class="form-control" placeholder="Enter your question">
                        </div>
                        <div id="errorContainer"></div>
                    </div><br/>
                    <div class="form-group questionoption">
                        <label class="form-label" for="options">Options</label><br>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-1' ></i></span>
                            <input type="text" name="options[0]" class="form-control" placeholder="Option 1">
                        </div>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-2' ></i></span>    
                            <input type="text" name="options[1]" class="form-control" placeholder="Option 2">
                        </div>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-3' ></i></span>    
                            <input type="text" name="options[2]" class="form-control" placeholder="Option 3">
                        </div>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-4' ></i></span>    
                            <input type="text" name="options[3]" class="form-control" placeholder="Option 4">
                        </div>
                    </div><br/>
                    <div class="form-group">
                        <label class="form-label" for="marks">Marks</label>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-message-square-check'></i></span>
                            <input type="text" id="marks" name="marks" maxlength="1" class="form-control" placeholder="Enter your question marks" onkeydown="allowNumberOnly(event)">
                        </div>    
                        <div id="errorContainer"></div>
                    </div><br/>
                    <div class="form-group">
                        <label class="form-label" for="correct_answer">Correct Option</label><br>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-message-square-add'></i></span>
                            <select name="correct_answer" class="form-select">
                                <option value="question_option1">Option 1</option>
                                <option value="question_option2">Option 2</option>
                                <option value="question_option3">Option 3</option>
                                <option value="question_option4">Option 4</option>
                            </select>
                        </div>    
                    </div>
            </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="saveEditedQuestion" >Save changes</button>
            </div>

        </div>
    </div>
</div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> --}}
<script>
    function allowNumberOnly(evt) {
        var theEvent = evt || window.event;
        // Handle paste
        if (theEvent.type === 'paste') {
            key = event.clipboardData.getData('text/plain');
        } else {
        // Handle key press
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode(key);
        }
        
        var regex = /[0-9]|\./;
        if( !regex.test(key) && evt.keyCode!=8 ) {
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }
    }
    function confirmDeletion(examId, questionId) {
        $.ajax({
            url: '/checkAttempts/' + examId,
            method: 'GET',
            success: function(response) {
                if (response.attempts > 0) {
                    window.location.href=response["redirectUrl"];
                } else {
                    // If no attempts, confirm deletion
                    if (confirm('Are you sure you want to remove this question?')) {
                        window.location.href = '/deleteQuestion/' + questionId;
                    }
                }
            },
            error: function(error) {
                console.error('Error occurred while checking attempts:', error);
                alert('Error occurred while checking attempts. Please try again.');
            }
        });

        // Prevent default link behavior
        return false;
    }
</script>
<script>
    $(document).ready(function() {
        $('.edit-icon').click(function() {
            var questionId = $(this).data('question-id');
            $.ajax({
                url: '/fetchQuestion/' + questionId,
                method: 'GET',
                success: function(questionData) {
                    if (questionData && questionData.question_text && questionData.question_option1 && questionData.question_option2 && questionData.question_option3 && questionData.question_option4 && questionData.correct_answer) {
                        $('#editQuestionModal').find('[name="question_text"]').val(questionData.question_text);
                        $('#editQuestionModal').find('[name="options[0]"]').val(questionData.question_option1);
                        $('#editQuestionModal').find('[name="options[1]"]').val(questionData.question_option2);
                        $('#editQuestionModal').find('[name="options[2]"]').val(questionData.question_option3);
                        $('#editQuestionModal').find('[name="options[3]"]').val(questionData.question_option4);
                        $('#editQuestionModal').find('[name="correct_answer"]').val(questionData.correct_answer);
                        $('#editQuestionModal').find('[name="marks"]').val(questionData.question_marks);

                        $('#editQuestionModal').modal('show');
                        $('#saveEditedQuestion').data('question-id', questionId);
                    } else {
                        console.error('Invalid question data:', questionData);
                    }
                },
                error: function(error) {
                    console.error('Error fetching question details:', error);

                }
            });
        });
        
        // Save changes button within the modal
        $('#saveEditedQuestion').click(function() {
            var questionId = $(this).data('question-id');
            $("#saveEditedQuestion").prop('disabled',true);

            const formData = new FormData(document.getElementById('editQuestionForm')); // Initialize FormData with the form

            $.ajax({
                type: "POST",
                url: '/save-edited-question/' + questionId,
                processData: false,
                contentType: false,
                data: formData,
                success: function(data) {
                    if (data.success) {
                        window.location.href=data["redirectUrl"];
                    } else {
                        if (data.hasOwnProperty('error')) {
                            // Remove previous error messages
                            $('.text-danger').remove();
                            var optionsErrorDisplayed = false; // Flag to track if options error message has been displayed

                            $.each(data.error, function(field_name, errors) {
                                if (Array.isArray(errors)) {
                                    var errorMessage = errors.join('<br>'); // Join multiple error messages if present
                                    if (field_name.startsWith('options.') && !optionsErrorDisplayed) {
                                        $('[name^="options["]').closest('.questionoption').append('<span id="options-error" class="text-danger">' + errorMessage + '</span>');
                                        optionsErrorDisplayed = true; // Set the flag to true after displaying the error once
                                    } else {
                                        // Handle other fields' error messages
                                        $('[name="' + field_name + '"]').closest('.form-group').append('<span id="' + field_name + '-error" class="text-danger">' + errorMessage + '</span>');
                                    }
                                } else {
                                    $('#' + field_name + '-error').remove(); // Remove existing error message for the field
                                    $('[name="' + field_name + '"]').closest('.form-group').append('<span id="' + field_name + '-error" class="text-danger">' + errors + '</span>');
                                }
                            });
                        }
                    }
                    $("#saveEditedQuestion").prop('disabled',false);
                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any AJAX errors to the console
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                    $("#saveEditedQuestion").prop("disabled",false);
                }
            });
        });
    });
</script>