@extends('backend.layouts.app')
@section('content')
<div class="row">
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>           
        </div>
    @elseif (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if ($easyQuestions <= 10)
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>Danger!</strong> Easy Level Question less than 10!!!
        </div>
    @endif
    @if ($mediumQuestions <= 10)
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>Danger!</strong> Medium Level Question less than 10!!!
        </div>
    @endif
    @if ($hardQuestions <= 10)
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>Danger!</strong> Hard Level Question less than 10!!!
        </div>
    @endif

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="text-start">
                        <h1 class="card-title">{{translate('Select Questions')}}</h1>
                    </div>
                </div>
            </div>
            <div class="card-body">
                    <div class="row g-4 mb-3">
                        <div class="w3-container">
                            <div class="w3-row">
                                @if ($levels != null)
                                    @foreach($levels as $level)
                                        <a href="javascript:void(0);" onclick="openCategory(event, '{{$level}}');">
                                            <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding h4">
                                                @if($level == 1) {{translate('Easy')}} @elseif($level == 2) {{translate('Medium')}} @elseif($level == 3) {{translate('Hard')}} @else {{translate('Nothing To Show')}} @endif
                                            </div>
                                        </a>
                                    @endforeach
                                @endif
                            </div>                            
                        </div>                        
                    </div>
                    <div id="questions-for-category">
                        <div class="row mb-3">
                            <div class="col-sm-6">
                                <input type="text" id="question-filter" class="form-control search" placeholder="{{ translate('Search Questions...') }}">
                            </div>
                            <div class="col-sm-6 text-end">
                                <a href="javascript:void(0);" class="btn btn-outline-warning" onclick="confirmRandomSelection()" @if ($easyQuestions <= 4 && $mediumQuestions <= 3 && $hardQuestions <= 3) disabled @endif>Choose Random</a>
                            </div>
                        </div>
                        <div class="row">
                        @if ($levels != null)
                            @foreach($levels as $level)
                                <div class="w3-container city category-{{$level}}">
                                    <!-- Selected Questions -->
                                    @foreach($temp as $t)
                                        @if($t->question->level_type == $level)
                                            <div class="row question-container">
                                                <div class="col-sm-8">
                                                <input class="form-check-input small-checkbox question_checkbox" name="selected_questions[]" type="checkbox" data-id="{{$t->question->id}}" data-question="{{$t->question->question}}" id="selected_questions_{{$t->question->id}}" value="{{$t->question->id}}" checked>
                                                <span>{{$t->question->question}}</span>
                                            </div>
                                            </div>
                                        @endif
                                    @endforeach
                                    <!-- Unselected Questions -->
                                    @foreach($questionsByLevel[$level] as $que)
                                        @if(!$temp->contains('question_id', $que->id))
                                            <div class="row question-container">
                                                <div class="col-sm-8">
                                                    <input class="form-check-input small-checkbox question_checkbox" name="selected_questions[]" type="checkbox" data-id="{{$que->id}}" data-question="{{$que->question}}" id="selected_questions_{{$que->id}}" value="{{$que->id}}">
                                                    <span>{{$que->question}}</span>
                                                </div>
                                                {{-- <div class="col-sm-4">
                                                    <input type="number" name="question_quantity[{{$que->id}}]" id="myNumberBox" placeholder="#" min="1" max="10">
                                                </div> --}}
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            @endforeach
                        @endif
                        </div>
                        <div id="selected_questions_container">
                            <ul id="selected_questions_list">

                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="pagination pagination-sm">
                            @if(!isset($questionsByLevel))
                                {{ $questionsByLevel[$level->type]->links() }}
                            @endif
                        </div>
                    </div>
            </div>
        </div>
    </div>

    <!-- Question Temperory Table-->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col sm-6">
                        <h1 class="card-title mb-0">{{translate('Selected Questions')}}</h1>
                    </div>
                    <div class="col sm-6">
                        <input type="text" id="filter" class="form-control search" placeholder="{{ translate('Search Questions...') }}">
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="customerList">
                    <div class="table-responsive table-card">
                        <table class="table table-hover" id="myTable">
                            <thead class="table-light">
                                <tr>
                                <th>{{translate('Question Selected')}}</th>
                                <th>{{translate('Levels')}}</th>
                                <th>{{translate('Action')}}</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all" id="selected_questions_table">
                                @if ($temp != null)
                                    @foreach ($temp->sortBy('question.level.title') as $key => $t)
                                        <tr id="selected_question_row_{{ $t->question->id }}">
                                            <td><b>{{$key+1  .'. '}} {{ $t->question->question }}</b></td>
                                            <td><i>
                                                @if ($t->question->level_type == "1")
                                                    {{translate('Easy')}}
                                                @elseif ($t->question->level_type == "2")
                                                    {{translate('Medium')}}
                                                @elseif ($t->question->level_type == "3")
                                                    {{translate('Hard')}}
                                                @endif
                                            </i></td>
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <div class="remove">
                                                        <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" onclick="removeSelectedQuestion('{{ $t->question->id }}')">
                                                            <i class="las la-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                
                            </tbody>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-6">
                        <h4 class="card-title mb-0">{{translate('Create Quiz')}}</h4>
                    </div>
                    <div class="col-6 text-end">
                        <a href="#" class="btn btn-primary hhh" id="confirmButton">Create Random Quiz</a>
                    </div>
                </div>
            </div>
            <!-- end card header -->
            <div class="card-body">
                <form action="{{ route('quiz.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <label for="quiz_description">Quiz Description</label>
                            <textarea class="form-control @error('quiz_description') is-invalid @enderror" 
                                      id="quiz_description" name="quiz_description" 
                                      placeholder="{{ translate('Quiz Description') }}">{{ old('quiz_description') }}</textarea>
                            @error('quiz_description')
                            <div class="valid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label for="start_time">Quiz Time</label>
                            <input type="text" class="form-control @error('start_time') is-invalid @enderror" 
                                   id="start_time" name="start_time" 
                                   data-provider="flatpickr" 
                                   data-enable-time="true" 
                                   data-date-format="Y-m-d H:i" 
                                   placeholder="YYYY-MM-DD HH:MM"
                                   value="{{ old('start_time') }}">
                            @error('start_time')
                            <div class="valid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="start_time">Quiz Type</label>
                            <div class="form-group">
                                <select class="form-control rns-selectpicker @error('special') is-invalid @enderror" id="special" name="special">
                                    <option value="">{{ translate('All') }}</option>
                                    <option value="0">Normal</option>
                                    <option value="1">Special</option>
                                </select>
                                @error('special')
                                <div class="valid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Prize (Hidden) -->
                        <div class="col-md-4 mt-2" id="quizPrizeDiv" style="display: none;">
                            <label for="prize">Quiz Prize</label>
                            <input type="number" class="form-control @error('prize') is-invalid @enderror" 
                                   id="prize" name="prize" 
                                   placeholder="{{ translate('Quiz Description') }}" 
                                   value="{{ old('prize') }}">
                            @error('prize')
                                <div class="valid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                
                <!-- end card -->            
                    <div class="card-footer">
                        <div class="row justify-content-end">
                            <div class="col-sm-8"></div>
                            <div class="col-sm-2">
                                <button type="submit" class="btn btn-outline-warning">{{ translate('Create Quiz') }}</button>
                            </div>
                            <div class="col-sm-2">
                                <button type="reset" class="btn btn-outline-danger">{{ translate('Clear') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
        <!-- end col -->
        </div>
    </div>
</div>
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmationModalLabel">Please Confirm To Create Random Quiz</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if ($easyQuestions <= 4 && $mediumQuestions <= 3 && $hardQuestions <= 3)
                <div class="modal-body">
                    <div class="col-lg-12 mb-3 text-danger">Please Create Question!!! You do not have enough Questions!!</div>
                    <div class="col-lg-10 text-danger"><a type="button" href="{{ route('admin.questions') }}" class="btn btn-outline-warning" style="width: 112%">Create Questions</a></div>
                </div>
                @else
                    <div class="row">
                        <div class="col-lg-2">
                            <img src="{{static_asset('assets/backend/images/confirm.gif')}}" alt="Confirm" class="img-fluid">
                        </div>
                        <div class="col-lg-auto mt-3">
                            <p>Are you sure you want to create a Random Quiz?</p>
                            <p class="h6">Note : Random Quiz time is schedule Now</p>
                        </div>
                    </div>
                @endif
            </div>
            <div class="modal-footer">
                @if ($easyQuestions <= 4 && $mediumQuestions <= 3 && $hardQuestions <= 3)  
                    <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                @else
                    <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                    <a href="{{ route('create.random.quiz') }}" class="btn btn-outline-warning">Confirm</a>
                @endif
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmationRandom" tabindex="-1" aria-labelledby="confirmationRandomLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmationRandomLabel">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            @if ($easyQuestions <= 4 && $mediumQuestions <= 3 && $hardQuestions <= 3)
                <div class="modal-body">
                    <div class="col-lg-12 mb-3 text-danger">Please Create Question!!! You do not have enough Questions!!</div>
                    <div class="col-lg-10 text-danger"><a type="button" href="{{ route('admin.questions') }}" class="btn btn-outline-warning" style="width: 112%">Create Questions</a></div>
                </div>
            @else
                <div class="modal-body">
                    Are you sure you want to select random questions? 
                    <a type="button" href="#" class="btn btn-warning" onclick="selectRandomQuestions()">Confirm</a>
                </div>
            @endif
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>



@endsection
@section('script')
<script>
    document.getElementById('special').addEventListener('change', function () {
        var quizDiv = document.getElementById('quizPrizeDiv');
        if (this.value === "1") {
            quizDiv.style.display = "block";
        } else {
            quizDiv.style.display = "none";
        }
    });

    document.addEventListener("DOMContentLoaded", function () {
        var flatpickrElements = document.querySelectorAll("[data-provider='flatpickr']");
        
        flatpickrElements.forEach(function (item) {
            var options = {
                enableTime: item.hasAttribute("data-enable-time"),
                dateFormat: item.getAttribute("data-date-format") || "Y-m-d H:i",
                minDate: "today",
                disableMobile: true
            };

            flatpickr(item, options);
        });
    });

</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var confirmButton = document.getElementById("confirmButton");

        confirmButton.addEventListener("click", function(event) {
            event.preventDefault();
            var confirmationModal = new bootstrap.Modal(document.getElementById('confirmationModal'));
            confirmationModal.show();
        });
    });

    ///Search Box//
    $(document).ready(function() {
        $("#question-filter").on("input", function() {
            var value = $(this).val().toLowerCase();
            $(".question-container").each(function() {
                var questionText = $(this).find(".question_checkbox").data("question").toLowerCase();
                if (questionText.includes(value)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });

    //Search Filter
    $(document).ready(function (){
        $("#filter").on("keyup", function() {
            var value =$(this).val().toLowerCase();
            $("table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });

   
       /////tab grid
    function openCategory(evt, categoryId) {
       var i, x, tablinks;        
       x = document.getElementsByClassName("city");
       for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";
       }
       tablinks = document.getElementsByClassName("tablink");
       for (i = 0; i < tablinks.length; i++) {
           tablinks[i].classList.remove("w3-border-yellow");
       }
       var categoryElements = document.querySelectorAll('.category-' + categoryId);
       if (categoryElements) {
           categoryElements.forEach(function(element) {
               element.style.display = "block";
           });
       }
       evt.currentTarget.firstElementChild.classList.add("w3-border-yellow");
    }
   
   //////checked and unchecked 

    $(document).ready(function() {
        openCategory({ currentTarget: { firstElementChild: document.querySelector('.tablink') } }, 1);

        $(document).on("change", ".question_checkbox", function() {
            var obj = $(this);
            var questionId = obj.data('id');
            var question = obj.data('question');
            var tempId = questionId;

            if (obj.is(':checked')) {
                addSelectedQuestion(questionId);
            } else {
                removeSelectedQuestion(tempId);
            }
        });

        $(document).on("click", ".remove-question", function() {
            var questionId = $(this).data('id');
            removeSelectedQuestion(tempId);
        });

        function addSelectedQuestion(questionId) {
            var selectedQuestionIds = getSelectedQuestionIds();

            $.ajax({
                type: "POST",
                url: "{{ route('store.selected.questions') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    selected_questions: selectedQuestionIds,
                    action: 'update'
                },
                dataType: "json",
                success: function(response) {
                    $.each(response.data, function(index, temp) {
                        updateTable(temp.id, temp.question, temp.level);
                    });
                    RNS.plugins.notify('success', ("Questions Updates Successfully!"));
                },
                error: function(error) {
                    console.error(error);
                    RNS.plugins.notify('danger', ("Something Went Wrong!"));
                }
            });
        }


        function getSelectedQuestionIds() {
            var selectedQuestionIds = [];
            $(".question_checkbox:checked").each(function() {
                selectedQuestionIds.push($(this).data('id'));
            });
            return selectedQuestionIds;
        }
    });


    function removeSelectedQuestion(tempId) {
        $.ajax({
            type: "DELETE",
            url: "{{ route('temp.destroy', ['id' => '__tempId__']) }}".replace('__tempId__', tempId),

            data: {
                _token: "{{ csrf_token() }}",
                selected_questions: [tempId],
                action: 'remove'
            },
            dataType: "json",
            success: function(response) {
                if (response.status === 'success') {
                    // Remove the question from the UI
                    $('#selected_question_row_' + tempId).remove();
                    $('#selected_questions_' + tempId).prop('checked', false);
                    RNS.plugins.notify('success', ("Question Remove!"));
                }
            },
            error: function(error) {
                console.error(error);
                RNS.plugins.notify('danger', ("Something Went Wrong!"));
            }
        });
    }

   
   /////Random Picker//////
   function confirmRandomSelection() { 
        $('#confirmationRandom').modal('show');
   }
    function selectRandomQuestions() {
        var selectedQuestions = [];

        var easyQuestions = Array.from(document.querySelectorAll('.category-1 .question-container'));
        var mediumQuestions = Array.from(document.querySelectorAll('.category-2 .question-container'));
        var hardQuestions = Array.from(document.querySelectorAll('.category-3 .question-container'));

        var selectedQuestionIds = Array.from(document.querySelectorAll('#selected_questions_list [type="hidden"]')).map(function (input) {
            return input.value;
        });

        easyQuestions = easyQuestions.filter(function (question) {
            return !selectedQuestionIds.includes(question.querySelector('.question_checkbox').getAttribute('data-id'));
        });

        mediumQuestions = mediumQuestions.filter(function (question) {
            return !selectedQuestionIds.includes(question.querySelector('.question_checkbox').getAttribute('data-id'));
        });

        hardQuestions = hardQuestions.filter(function (question) {
            return !selectedQuestionIds.includes(question.querySelector('.question_checkbox').getAttribute('data-id'));
        });

        // Select 4 random questions from the easy level
        selectedQuestions = selectedQuestions.concat(selectRandomQuestionsFromLevel(easyQuestions, 4));

        // Select 3 random questions from the medium level
        selectedQuestions = selectedQuestions.concat(selectRandomQuestionsFromLevel(mediumQuestions, 3));

        // Select 3 random questions from the hard level
        selectedQuestions = selectedQuestions.concat(selectRandomQuestionsFromLevel(hardQuestions, 3));

        // Display the selected questions in the selected_questions_list
        var selectedQuestionsList = document.getElementById('selected_questions_list');

        selectedQuestionsList.innerHTML = '';
        selectedQuestions.forEach(function (question) {
            var questionId = question.querySelector('.question_checkbox').getAttribute('data-id');
            var questionText = question.querySelector('.question_checkbox').getAttribute('data-question');
            // var li = document.createElement('li');
            // li.innerHTML = questionText + '<input type="hidden" name="selected_questions[]" value="' + questionId + '">';
            // selectedQuestionsList.appendChild(li);
        });

        saveSelectedQuestions(selectedQuestions.map(function (question) {
            return question.querySelector('.question_checkbox').getAttribute('data-id');
        }));
    }

    function selectRandomQuestionsFromLevel(questions, count) {
        var selectedQuestions = [];

        for (var i = 0; i < count && questions.length > 0; i++) {
            var randomIndex = Math.floor(Math.random() * questions.length);
            var selectedQuestion = questions[randomIndex];
            selectedQuestions.push(selectedQuestion);
            questions.splice(randomIndex, 1);
        }

        return selectedQuestions;
    }

    function saveSelectedQuestions(questionIds) {
        $.ajax({
            type: "POST",
            url: "{{ route('store.selected.questions') }}",
            data: {
                _token: "{{ csrf_token() }}",
                selected_questions: questionIds,
            },
            dataType: "json",
            success: function (response) {
                if (response.message) {
                    RNS.plugins.notify('warning', (response.message));
                } else {
                    $.each(response.data, function(index, temp) {
                        updateTable(temp.id, temp.question, temp.level);
                    });
                    $('#confirmationRandom').modal('hide');
                    RNS.plugins.notify('success', ("Random Questions Are Selected!"));
                }
            },
            error: function (error) {
                console.error(error);
                RNS.plugins.notify('danger', ("Something Went Wrong!!"));
            }
        });
    }


   /////Add selected Questions to Question_temp Table///

    function addSelectedQuestions() {
        var selectedQuestionIds = [];
        $(".question_checkbox:checked").each(function () {
            selectedQuestionIds.push($(this).data('id'));
        });

        var existingQuestionIds = [];
        $(".question_checkbox:checked").each(function () {
            var questionId = $(this).data('id');
            if ($("#selected_question_row_" + questionId).length === 0) {
                existingQuestionIds.push(questionId);
            }
        });

        $.ajax({
            type: "POST",
            url: "{{ route('store.selected.questions') }}",
            data: {
                _token: "{{ csrf_token() }}",
                selected_questions: existingQuestionIds,
            },
            dataType: "json",
            success: function (response) {
                $.each(response.data, function(index, temp) {
                    updateTable(temp.id, temp.question, temp.level);
                });
                RNS.plugins.notify('success', ("Question Add Successfully!"));
            },
            error: function (error) {
                console.error(error);
                RNS.plugins.notify('danger', ("Something Went Wrong!"));
            }
        });
    }
    //////Table Update//
    function updateTable(id, question, level) {
        var existingRow = $("#selected_question_row_" + id);
        var levelName;
            if (level === "1") {
                levelName = "Easy";
            } else if (level === "2") {
                levelName = "Medium";
            } else if (level === "3") {
                levelName = "Hard";
            } else {
                levelName = "Unknown";
            }
        
        if (existingRow.length > 0) {
            existingRow.find('td:eq(0)').text(question);
            existingRow.find('td:eq(1)').text(levelName);
        } else {
            
            var newRow = '<tr id="selected_question_row_' + id + '">' +
                '<td><b>' + question + '</b></td>' +
                '<td><i>' + levelName + '</i></td>' +
                '<td><button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-id="' + id + '"><i class="las la-trash"></i></button></td>' +
                '</tr>';

            $("#selected_questions_table").append(newRow);
        }
        // Check the corresponding checkbox in the original list
        var originalCheckbox = $("#selected_questions_" + id);
        if (originalCheckbox.length > 0) {
            originalCheckbox.prop('checked', true);
        }
    }


    $(document).ready(function() {
        $('[data-toggle="popover"]').popover();
        $('[data-toggle="tooltip"]').tooltip();
    });



</script>
@endsection