{% extends 'base.html.twig' %}

{% block content %}

    <div class="container-fluid">

        <div class="row pt-3">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <h2 class="pt-2">
                    Survey Setup
                </h2>
            </div>
        </div>

        <div class="card">
            <div class="card-header">

            </div>
            <div class="card-body">
                <div class="row">
                    <div class="container">

                        <div class="stepwizard">
                            <div class="stepwizard-row setup-panel">
                                <div class="stepwizard-step">
                                    <a href="#step-1" type="button" class="btn btn-default btn-circle"
                                       disabled="disabled">1</a>
                                    <p>Survey</p>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-2" type="button" class="btn btn-default btn-circle"
                                       disabled="disabled">2</a>
                                    <p>Survey Categories</p>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-3" type="button" class="btn btn-default btn-circle"
                                       disabled="disabled">3</a>
                                    <p>Survey Questions</p>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-5" type="button" class="btn btn-default btn-circle"
                                       disabled="disabled">4</a>
                                    <p>Survey Answers</p>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-5" type="button" class="btn btn-default btn-circle"
                                       disabled="disabled">5</a>
                                    <p>Complete</p>
                                </div>
                            </div>
                        </div>

                        <form role="form" method="post">
                            <div class="panel panel-primary setup-content" id="step-1">
                                <div class="panel-heading">
                                </div>
                                <div class="panel-body border-bottom mt-3 pt-3 pb-3">
                                    <div class="row">
                                        <div class="col-md-12 clearfix">
                                            <a href="#" id="create-survey" title="Create Survey"
                                               class="btn btn-primary pull-right float-right">
                                                Create Survey
                                            </a>
                                        </div>
                                    </div>

                                    <div class='row mt-4 mb-4'>
                                        <div class="col-md-12">
                                            {% if surveys is defined %}

                                                <p>Please select at least one survey</p>

                                                {% set required = ' required=required ' %}
                                                {% for survey in surveys %}

                                                    <div class="form-check mb-3">
                                                        <input class="form-check-input" type="radio" name="survey"
                                                               id="survey_{{ survey.id }}"
                                                               value="{{ survey.id }}" {{ required }}>
                                                        <label class="form-check-label" for="survey_{{ survey.id }}">
                                                            {{ survey.name }}
                                                        </label>
                                                    </div>
                                                    {% set required = ' ' %}
                                                {% endfor %}
                                            {% else %}
                                                <p>No survey has been configured yet. Please create at least one survey
                                                    to continue</p>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <button class="btn btn-primary nextBtn float-right" type="button">Next</button>
                                    <br/>
                                </div>
                            </div>

                            <div class="panel panel-primary setup-content" id="step-2">
                                <div class="panel-heading">
                                </div>
                                <div class="panel-body border-bottom mt-3 pt-3 pb-3">

                                    <div class="row">
                                        <div class="col-md-12 clearfix">
                                            <a href="#" id="create-survey-category" title="Create Survey Category"
                                               class="btn btn-primary pull-right float-right">
                                                Create Survey Category
                                            </a>
                                        </div>
                                    </div>

                                    <div class='row mt-4 mb-4'>
                                        <div class="col-md-12 survey-categories-container">
                                            <p>Please select a survey before coming to this step</p>
                                        </div>
                                    </div>

                                    <button class="btn btn-secondary prevBtn pull-left float-left" type="button">
                                        Previous
                                    </button>
                                    <button class="btn btn-primary nextBtn pull-right float-right" type="button">
                                        Next
                                    </button>

                                    <br/>
                                </div>
                            </div>

                            <div class="panel panel-primary setup-content" id="step-3">
                                <div class="panel-heading">
                                </div>
                                <div class="panel-body border-bottom mt-3 pt-3 pb-3">

                                    <div class="row">
                                        <div class="col-md-12 clearfix">
                                            <a href="#" id="create-survey-question" title="Create Survey Question"
                                               class="btn btn-primary pull-right float-right">
                                                Create Survey Question
                                            </a>
                                        </div>
                                    </div>

                                    <div class='row mt-4 mb-4'>
                                        <div class="col-md-12 survey-questions-container">
                                            <p>Please select a survey category before coming to this step</p>
                                        </div>
                                    </div>

                                    <button class="btn btn-secondary prevBtn pull-left float-left" type="button">
                                        Previous
                                    </button>
                                    <button class="btn btn-primary nextBtn pull-right float-right" type="button">
                                        Next
                                    </button>

                                    <br/>
                                </div>
                            </div>


                            <div class="panel panel-primary setup-content" id="step-5">
                                <div class="panel-heading">
                                </div>
                                <div class="panel-body">

                                    <div class="row">
                                        <div class="col-md-12 clearfix">
                                            <a href="#" id="create-survey-answer" title="Create Survey Answer"
                                               class="btn btn-primary pull-right float-right">
                                                Create Survey Answer
                                            </a>
                                        </div>
                                    </div>

                                    <div class='row mt-4 mb-4'>
                                        <div class="col-md-12 survey-answers-container">
                                            <p>Please select a survey question before coming to this step</p>
                                        </div>
                                    </div>

                                    <button class="btn btn-secondary prevBtn pull-left float-left" type="button">
                                        Previous
                                    </button>
                                    <button class="btn btn-success pull-right float-right" type="submit">
                                        Finish!
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts_post_body %}
    <script>

        // let htmlRadiosTemplate = window.customFieldsGenerator.checkboxTemplate;
        let htmlRadiosTemplate = '<div class="form-check mb-3">' +
            '<input class="form-check-input" type="radio" name="__element_name__"' +
            'id="__element_name_____item_id__" value="__item_id__" __required_item__>' +
            '<label class="form-check-label" for="__element_name_____item_id__">' +
            '__item_name__' +
            '</label>' +
            '</div>';

        $(document).ready(function () {

            let wizardSelector = document.querySelector('.stepwizard');
            let saveSelectedValue = (key, value) => {
                localStorage.setItem(key, value);
            }

            let getSavedValue = (key, dataType) => {
                let savedValue = localStorage.getItem(key);
                if (dataType !== undefined && dataType === 'int') {
                    if (savedValue) {
                        savedValue = parseInt(savedValue);
                    } else {
                        savedValue = 0;
                    }
                }
                return savedValue;
            }


            let surveyId = getSavedValue('surveyId', 'int'),
                surveySelector = $('input[name="survey"]'),
                surveyCategories = '',
                surveyCategoriesContainer = $('.survey-categories-container'),
                surveyCategoryId = getSavedValue('surveyCategoryId', 'int'),
                surveyQuestionId = getSavedValue('surveyQuestionId', 'int'),
                surveyQuestions = '',
                surveyQuestionsContainer = $('.survey-questions-container'),
                surveyAnswerId = 0,
                surveyAnswers = '',
                surveyAnswersContainer = $('.survey-answers-container')
            ;


            window.surveyId = surveyId;
            window.surveyCategoryId = surveyCategoryId;
            window.surveyQuestionId = surveyQuestionId;

            let getData = (dataUrl) => {
                $.ajaxSetup({async: false});
                let data = {};
                $.getJSON(dataUrl, function (response) {
                    if (response['data'] && response['data'].length > 0) {
                        data = response['data'];
                    }
                });

                $.ajaxSetup({async: true});
                return data;
            };

            let getOptions = (data, elementName, elementLabel, requiredOption) => {
                if (undefined === requiredOption) {
                    requiredOption = true;
                }

                let requiredText = ' ';
                if (requiredOption) {
                    requiredText = ' required="require" ';
                }
                let optionsHtml = '<p>No ' + elementLabel + ' has been configured yet. Use the create button to create a ' + elementLabel + ' for your survey</p>';

                if (data && data.length > 0) {
                    optionsHtml = ' <p>Please select at least 1 ' + elementLabel + ' to continue</p> ';
                    $.each(data, function (elementKey, element) {
                        let fieldLabel = element.name;
                        if (element.title) {
                            fieldLabel = element.title;
                        }

                        optionsHtml = optionsHtml +
                            htmlRadiosTemplate.replaceAll('__element_name__', elementName)

                                .replaceAll('__item_id__', element.id)
                                .replaceAll('__item_name__', fieldLabel).replaceAll('__required_item__', requiredText)
                        ;
                        requiredText = '';
                    });
                }
                return optionsHtml;
            }

            let setSurveyCategories = () => {
                let categoriesPath = "{{ path('survey_setup_get_survey_categories', {'surveyId': 999999}) }}".replaceAll('999999', window.surveyId);
                let surveyCategoriesData = getData(categoriesPath);
                surveyCategories = getOptions(surveyCategoriesData, 'survey_categories', 'category');
                surveyCategoriesContainer.empty().html(surveyCategories);
            }

            let setSurveyQuestions = () => {
                let questionsPath = "{{ path('survey_setup_get_survey_questions', {'categoryId': 999999}) }}".replaceAll('999999', window.surveyCategoryId);
                let surveyQuestionsData = getData(questionsPath);
                surveyQuestions = getOptions(surveyQuestionsData, 'survey_questions', 'question');
                surveyQuestionsContainer.empty().html(surveyQuestions);
            }

            let setSurveyAnswers = () => {
                let answersPath = "{{ path('survey_setup_get_survey_answers', {'questionId': 999999}) }}".replaceAll('999999', window.surveyQuestionId);
                let surveyAnswersData = getData(answersPath);
                surveyAnswers = getOptions(surveyAnswersData, 'survey_answers', 'answer', false);
                surveyAnswersContainer.empty().html(surveyAnswers);
            }

            let reselectPreviouslySelected = () => {

                if (window.surveyId) {
                    window.customBootstrap.openProcessingLoader(document.getElementsByTagName("body")[0]);

                    let selectedSurveyIdElement = $('input[name="survey"][value="' + window.surveyId + '"]');
                    if (selectedSurveyIdElement && selectedSurveyIdElement.length > 0) {
                        selectedSurveyIdElement.prop('checked', true);
                        setSurveyCategories();

                        if (window.surveyCategoryId) {
                            let selectedSurveyCategoryIdElement = $('input[name="survey_categories"][value="' + window.surveyCategoryId + '"]');
                            if (selectedSurveyCategoryIdElement && selectedSurveyCategoryIdElement.length > 0) {
                                selectedSurveyCategoryIdElement.prop('checked', true);
                                setSurveyQuestions();

                                if (window.surveyQuestionId) {
                                    let selectedSurveyQuestionIdElement = $('input[name="survey_questions"][value="' + window.surveyQuestionId + '"]');
                                    if (selectedSurveyQuestionIdElement && selectedSurveyQuestionIdElement.length > 0) {
                                        selectedSurveyQuestionIdElement.prop('checked', true);
                                        setSurveyAnswers();
                                    }
                                }
                            }
                        }
                    }
                    window.customBootstrap.closeProcessingLoader(document.getElementsByTagName("body")[0]);
                }
            }

            reselectPreviouslySelected();

            $('#create-survey').on('click', function (e) {
                e.preventDefault();
                let content = "{{ path('settings_create_entity_data', {'entity':'surveys', 'entityId':0}) }}";
                window.customBootstrap.generateEntityModalForm(content, 'Create Survey', true, '');
            });

            $('#create-survey-category').on('click', function (e) {
                $.ajaxSetup({async: false});
                e.preventDefault();
                let categoriesFormUrl = "{{ path('settings_create_entity_data', {'entity':'survey-categories', 'entityId':0}) }}";
                window.customBootstrap.generateEntityModalForm(categoriesFormUrl, 'Create Survey Category', false, '');
                $(document).on('submit', 'form[name="survey_category"]', setSurveyQuestions);
                $.ajaxSetup({async: true});

            });

            $('#create-survey-question').on('click', function (e) {
                e.preventDefault();
                let questionsFormUrl = "{{ path('survey_setup_create_survey_wizard_questions', {'categoryId':'999999', 'questionId':0}) }}".replaceAll('999999', window.surveyCategoryId);
                window.customBootstrap.generateEntityModalForm(questionsFormUrl, 'Create Survey Question', false, '');
                $(document).on('submit', 'form[name="survey_question_wizard"]', setSurveyCategories);
            })

            $('#create-survey-answer').on('click', function (e) {
                e.preventDefault();
                let questionsFormUrl = "{{ path('survey_setup_create_survey_wizard_answer', {'questionId':'999999', 'answerId':0}) }}".replaceAll('999999', window.surveyQuestionId);
                window.customBootstrap.generateEntityModalForm(questionsFormUrl, 'Create Survey Answer', false, '');
                $(document).on('submit', 'form[name="survey_answer_wizard"]', setSurveyCategories);
            })

            surveySelector.on('change', () => {
                window.customBootstrap.openProcessingLoader(wizardSelector);
                window.surveyId = $('input[name="survey"]:checked').val();
                saveSelectedValue('surveyId', window.surveyId);
                setSurveyCategories();
                window.customBootstrap.closeProcessingLoader(wizardSelector);
            });

            $(document).on('change', 'input[name="survey_categories"]', () => {
                window.customBootstrap.openProcessingLoader(wizardSelector);
                window.surveyCategoryId = $('input[name="survey_categories"]:checked').val();

                saveSelectedValue('surveyCategoryId', window.surveyCategoryId);

                setSurveyQuestions();
                window.customBootstrap.closeProcessingLoader(wizardSelector);
            });

            $(document).on('change', 'input[name="survey_questions"]', () => {
                window.customBootstrap.openProcessingLoader(wizardSelector);
                window.surveyQuestionId = $('input[name="survey_questions"]:checked').val();
                saveSelectedValue('surveyQuestionId', window.surveyQuestionId);
                setSurveyAnswers();
                window.customBootstrap.closeProcessingLoader(wizardSelector);
            });

        })
    </script>
{% endblock %}