{% extends 'home/base.html' %}
{% load static %}

{% block content %}
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center mt-3">
            <div class="col-lg-10 grid-margin stretch-card">
                <div class="card">
                    <div class="card-header bg-dark">
                        <h3 class="text-light">{{ current_poll.title }}</h3>
                        <p class="card-description text-light">{{ current_poll.description }}</p>
                    </div>
                    <div class="card-body">
                        <div class="mt-2">
                            {% if current_poll.questions.all|length > 0 %}
                                <div class="accordion" id="accordion" role="tablist">
                                    {% for question in current_poll.questions.all %}
                                        <div class="card question" id="question-{{ forloop.counter }}">
                                            <div class="card-header" role="tab" id="heading-{{ forloop.counter }}">
                                                <div class="d-flex justify-content-start align-items-center border p-3">
                                                    <h6 class="mb-0">
                                                        <a class="collapsed" data-toggle="collapse" href="#collapse-{{ question.id }}" aria-expanded="false" aria-controls="collapse-{{ question.id }}" data-abc="true">
                                                            <p>
                                                                {{ forloop.counter }} - {{ question.label }}
                                                            </p>
                                                        </a>
                                                    </h6>
                                                    <p class="fs-6">Type: {{ question.type.label | lower }}</p>
                                                </div>
                                                <div class="d-flex justify-content-center mt-2">
                                                    <button class="btn btn-secondary" id="question-edit-modal-btn" onclick="editQuestion({{ question.id }})"><i class="bx bx-pencil"></i></button>
                                                    <button class="btn btn-danger mx-3" onclick="deleteQuestion({{ question.id }})"><i class="bx bx-trash"></i></button>
                                                    
                                                </div>
                                            </div>
                                            {% if question.type.label != 'Libre' %}
                                                <div id="collapse-{{ question.id }}" class="collapse" role="tabpanel" aria-labelledby="heading-{{ forloop.counter }}" data-parent="#accordion">
                                                    <div class="card-body">
                                                        <div class="d-flex justify-content-center">
                                                            {% if question.possibilities.all|length > 0 %}
                                                                <ul class="list-group list-group w-50">
                                                                    {% for possibility in question.possibilities.all %}
                                                                        <li class="list-group-item text-center">
                                                                            {{ forloop.counter }} - {{ possibility.label }}
                                                                        </li>
                                                                    {% endfor %}
                                                                </ul>
                                                            {% else %}
                                                                <div class="alert alert-warning" role="alert">Pas encore de possibilités choisies</div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="alert alert-warning text-center" role="alert">Pas encore de questions enregistrées</div>
                            {% endif %}
                        </div>
                    </div>
                    <!-- Pagination Controls -->
                    <div class="d-flex justify-content-end m-3">
                        <div>
                            <span id="info"></span>
                            <button type="button" id="prevPageButton" class="btn btn-dark" onclick="showPreviousPage()"><i class="bx bx-chevron-left"></i></button>
                            <button type="button" id="nextPageButton" class="btn btn-dark" onclick="showNextPage()"> <i class="bx bx-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-center align-items-center">
                <!-- Add a button to open the modal -->
                <button type="button" id="question-modal-btn" class="btn btn-dark btn-lg mt-5 p-5" data-toggle="modal" data-target="#create-question-modal">
                    <i class='bx bx-plus mr-2 p-2'></i>AJOUTER UNE QUESTION<i class='ml-2 bx bx-plus p-2'></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Create Question Modal -->
    <div class="modal fade" id="create-question-modal" tabindex="-1" aria-labelledby="createQuestionModalLabel" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h4 class="modal-title text-light" id="createQuestionModalLabel">ENREGISTRER UNE QUESTION</h4>
                    <button type="button" class="btn-close bg-light" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" id="question-modal-form" data-id="{{ current_poll.id }}" data-qid="">
                        {% csrf_token %}
                        <div class="mb-3">
                            <input type="text" class="form-control" id="label" name="label" placeholder="Entrer le libellé de la question" required>
                        </div>
                        <div class="mb-3">
                            <select id="question-type-select" class="form-control" name="type" data-search="true" required>
                                <option value="" selected disabled></option>
                                {% for type in types %}
                                    <option value="{{ type.id }}">{{ type.label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-3" id="possibilities-container" style="display: none;">
                                <select id="question-possibilities-select" class="form-control" name="possibilities" multiple data-search="true">
                                    {% for possibility in possibilities %}
                                        <option value="{{ possibility.id }}">{{ possibility.label }}</option>
                                    {% endfor %}
                                </select>
                            <!-- <div class="text-center form-control" data-toggle="tooltip" title="Enregistrer une option de réponse">
                                <a class="btn btn-secondary" href="javascript:void(0)" data-toggle="modal" data-target="#create-possibility-modal">
                                    <i class='bx bx-plus'></i>
                                </a>
                            </div> -->
                        </div>
                        <button type="submit" class="btn btn-dark w-100" id="save-btn" name="store">Enregistrer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Possibility Modal -->
    <div class="modal fade" id="create-possibility-modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-secondary">
                    <button type="button" class="btn-close bg-light" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="form-container">
                            <h3 class="text-center fw-bold">Nouvel option de reponse</h2>
                            <form id="possibility-modal-form" method="POST">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="lab" class="form-label fw-bold">Libellé</label>
                                    <input type="text" class="form-control" id="lab" placeholder="Entrer le libellé">
                                </div>
                                <button type="submit" class="btn btn-secondary w-100">Enregistrer</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <!-- VirtualSelect initialization -->
    <script>
        VirtualSelect.init({
            ele: '#question-type-select',
            placeholder: '--- Choisir le type de la question ---',
            maxWidth: '100%',
        });
        VirtualSelect.init({
            ele: '#question-possibilities-select',
            placeholder: '--- Choisir les possibilités de réponse ---',
            maxWidth: '100%',
            allowNewOption: true,
            showSelectedOptionsFirst: true,
            optionsSelectedText : 'possibilités de réponse choisies',
            showValueAsTags: true
        });
    </script>

    <!-- Questions managing with ajax script -->
    <script>
        $(document).ready(function(){

            // reset modal input when we click add button
            $('#question-modal-btn').on('click', function(){
                $('#label').val('');
                document.querySelector('#question-type-select').setValue();
                document.querySelector('#question-possibilities-select').setValue();
            });

            // hide and show possibilities container
            const type_select = $('#question-type-select');
            const p_container = $('#possibilities-container');

            function hide_possibilities() {
                if (type_select.val() == 1){
                    p_container.hide();
                } else {
                    p_container.show();
                    p_container.css('display', 'flex');
                    p_container.css('justify-content', 'space-between');
                }
            }

            // Initial check
            hide_possibilities();
            type_select.on('change', function() {
                hide_possibilities();
            });

            // save questions
            $('#question-modal-form').on('submit', function(e){
                e.preventDefault();
                console.log('submitted');
                let form_data = {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    'label': $('#label').val(),
                    'type': $('#question-type-select').val(),
                    'possibilities': $('#question-possibilities-select').val()
                };

                if($('#save-btn').attr('name') === 'update')
                    form_data['qid'] = $('#question-modal-form').data('qid');

                console.log(form_data);
                $.ajax({
                    type: 'POST',
                    url: '/polls/' + $('#question-modal-form').data('id') + '/questions/save',
                    data: form_data,
                    success: function(response){
                        console.log(response);
                        window.location.reload();
                    },
                    error: function(error){
                        console.log(error);
                    }
                })
            });


            // edit questions
            window.editQuestion = function(id) {
                $.ajax({
                    url: '/polls/' + $('#question-modal-form').data('id') +'/questions/' + id + '/edit',
                    method: 'GET',
                    success: function(data) {
                        $('#label').val(data.label);
                        document.querySelector('#question-type-select').setValue(data.type);
                        document.querySelector('#question-possibilities-select').setValue(data.possibilities);
                        if(data.type === 1)
                            hide_possibilities();
                        $('#create-question-modal').modal('show');
                        console.log('before : ' ,$('#save-btn').attr('name'));
                        $('#save-btn').attr('name', 'update');
                        $('#question-modal-form').attr('data-qid', id);
                        console.log('after : ' ,$('#save-btn').attr('name'));
                    },
                    error: function(error) {
                        console.error('Error fetching question data:', error);
                    }
                });
            };

            window.deleteQuestion = function(id) {
                if (confirm('Êtes-vous sûr de vouloir supprimer cette question ?')) {
                    $.ajax({
                        url: '/polls/' + $('#question-modal-form').data('id') + '/questions/' + id + '/delete',
                        method: 'POST',
                        data: {
                            csrfmiddlewaretoken: '{{ csrf_token }}',
                        },
                        success: function(response) {
                            window.location.reload();
                        },
                        error: function(error) {
                            console.error('Error deleting question:', error);
                        }
                    });
                }
            };


        });
    </script>

    <!-- Accordion with pagination js script -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const questionsPerPage = 1;
            let currentPage = 1;
            const totalQuestions = document.querySelectorAll('.question').length;
            const totalPages = Math.ceil(totalQuestions / questionsPerPage);

            function updateQuestionDisplay() {
                if (totalPages == 0)
                    document.getElementById('info').innerText = `Page 0 sur ${totalPages}`;
                else
                    document.getElementById('info').innerText = `Page ${currentPage} sur ${totalPages}`;
                document.querySelectorAll('.question').forEach((element, index) => {
                    element.style.display = 'none';
                    if (index >= (currentPage - 1) * questionsPerPage && index < currentPage * questionsPerPage) {
                        element.style.display = 'block';
                    }
                });

                if (totalPages == 0) {
                    document.getElementById('nextPageButton').disabled = true;
                    document.getElementById('prevPageButton').disabled = true;
                }else {
                    document.getElementById('prevPageButton').disabled = currentPage === 1;
                    document.getElementById('nextPageButton').disabled = currentPage === totalPages;
                }
            }

            window.showNextPage = function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    updateQuestionDisplay();

                }
            };
            window.showPreviousPage = function() {
                if (currentPage > 1) {
                    currentPage--;
                    updateQuestionDisplay();
                }
            };

            // Initial display update
            updateQuestionDisplay();
        });
    </script>
{% endblock %}