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

{% block title %}Client Registration | {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        {# create arrow on right side of div #}
        .arrow span {
            content: "";
            position: absolute;
            top: 0;
            right: -1.625em;
            width: 2em;
            height: 2.5em;
            overflow: hidden;
            z-index: 10;
        }

        .arrow span:after {
            content: "";
            position: absolute;
            top: -3px;
            left: -1em;
            width: 2em;
            height: 2.5em;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            border: 1px solid #777;
            background: #28a745;
        }

        .rating:hover {
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>Client Registration</h1>
    <div class="registrationStep">{{ registrationStep|raw }}</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function () {

            $(document).on('submit', '.registrationStepForm', function (event) {
                event.preventDefault();

                $.ajax({
                    type: 'POST',
                    url: $('.nextPath').val(),
                    data: $('.registrationStepForm').serialize(),
                    dataType: 'json',
                    encode: true,
                    beforeSend: function () {
                        $('.registrationStepForm button').prop('disabled', true).html('Please wait.');
                    },
                    success: function (data) {
                        $('.registrationStep').html(data);
                    },
                    error: function (jqXHR) {
                        $('.registrationStep').html(jqXHR.responseText);
                        scrollToError();
                    },
                });
            });

            $(document).on('click', '.rating', function (event) {

                event.preventDefault();

                let question = $(this).data('input-selector');
                let rating_value = $(this).data('rating-value');

                $('#' + question).val(rating_value);

                for (i = 0; i < 5; i++) {
                    let select_this = $('.rating[data-input-selector="' + question + '"][data-rating-value="' + (i * 25) + '"]');
                    if ((i * 25) <= rating_value) {
                        select_this.removeClass('fa-star-o').addClass('fa-star').css('color', 'gold');
                    } else {
                        select_this.removeClass('fa-star').addClass('fa-star-o').css('color', 'gray');
                    }
                }

                let na_checkbox = $('div[data-input-selector="' + question + '"] :input');
                if (na_checkbox) {
                    na_checkbox.prop('checked', false);
                }
            });

            $(document).on('click', '.not_applicable_option :input', function (event) {
                if ($(this).is(':checked')) {
                    let div_wrapper = $(this).closest('.not_applicable_option');
                    let question = div_wrapper.data('input-selector');
                    $('#' + question).val('');
                    for (i = 0; i < 5; i++) {
                        $('i[data-input-selector="' + question + '"]').removeClass('fa-star').addClass('fa-star-o').css('color', 'gray');
                    }
                }
            });

        });
    </script>
{% endblock %}