{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-diamond"></i>{{ 'my_account.delete.title'|trans }}</h1>
            </div>
        </div>
    </div>
    {% if not error %}
        <div id="step1" class="cell small-12 mt-1 text-center">
            <p class="lead"><b>{{ 'my_account.delete.text.step_1.top'|trans|raw }}</b></p>
            <div class="grid-x grid-margin-x mt-2 mb-2">
                <div class="cell small-12 medium-3">
                    <div class="mb-1">
                        <i class="fa fa-users fa-3x text_primary_light"></i>
                    </div>
                    <div>{{ 'my_account.delete.text.step_1.users'|trans|raw }}</div>
                </div>
                <div class="cell small-12 medium-3">
                    <div class="mb-1">
                        <i class="fa fa-file-pdf-o fa-3x text_primary_light"></i>
                    </div>
                    <div>{{ 'my_account.delete.text.step_1.invoices'|trans|raw }}</div>
                </div>
                <div class="cell small-12 medium-3">
                    <div class="mb-1">
                        <i class="fa fa-exclamation-triangle fa-3x text_primary_light"></i>
                    </div>
                    <div>{{ 'my_account.delete.text.step_1.subscription'|trans|raw }}</div>
                </div>
                <div class="cell small-12 medium-3">
                    <div class="mb-1">
                        <i class="fa fa-database fa-3x text_primary_light"></i>
                    </div>
                    <div>{{ 'my_account.delete.text.step_1.data'|trans|raw }}</div>
                </div>
            </div>
            <div class="cell small-12 text-center mt-1 ">
                {{ form_start(form_i_agree, {'attr':{'id':'formIAgree', 'class':'grid-x grid-padding-x align-center not-monitored'}}) }}
                <div class="cell shrink">{{ form_widget(form_i_agree.iAgree) }}&nbsp;{{ form_label(form_i_agree.iAgree) }}</div>
                {{ form_end(form_i_agree) }}
                <button id="confirm_i_agree" type="button" class="button small red">{{ 'my_account.delete.button.confirm'|trans }}</button>
            </div>

        </div>
    {% else %}
        <div class="cell small-12 text-center text-red mb-1">{{ 'my_account.delete.text.step_2.error'|trans|raw }}</div>
    {% endif %}
    <div id="step2" class="cell small-12 text-center {% if not error %}hide{% endif %}">
        <p class="lead mb-1"><b>{{ 'my_account.delete.text.step_2.top'|trans|raw }}</b></p>
        {{ form_start(form_code, {'attr':{'id':'formCode', 'class':'grid-x grid-padding-x  align-center not-monitored'}}) }}
        <div class="cell small-6 medium-3">{{ form_row(form_code.code) }}</div>
        <div class="cell">
            <a href="javascript:void(0)" id="resend_confirm_code">{{ 'my_account.delete.text.step_2.link'|trans|raw }}</a>
        </div>
        {{ form_end(form_code) }}
        <button id="submit_code" type="button" class="button small red mt-2">{{ 'my_account.delete.button.confirm'|trans }}</button>
    </div>

{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
    $(document).ready(function(){
        let form_i_agree = $('#formIAgree'),
            btn_confirm_i_agree = $('#confirm_i_agree'),
            step1_container = $('#step1'),
            form_code = $('#formCode'),
            btn_submit_code = $('#submit_code'),
            step2_container = $('#step2');
        let form_i_agree_parsley = $(form_i_agree).parsley(parsley_options);
        let form_code_parsley = $(form_code).parsley(parsley_options);
        $(btn_confirm_i_agree).click(function(){
            form_i_agree_parsley.validate();
            form_i_agree_parsley
                .whenValid()
                .then(function () {
                    $(btn_confirm_i_agree).html(btn_spin);
                    $.get(
                        "{{ url('my_account_ajax_confirm_delete_account',{'token': csrf_token('my_account_ajax_confirm_delete_account')}) }}",
                        function(response){
                            if(response.hasOwnProperty('code') && response.code === 'sent'){
                                $(step1_container).addClass('hide');
                                $(step2_container).removeClass('hide');
                            }
                        });
                });
        });
        $(btn_submit_code).click(function(){
            form_code_parsley.validate();
            form_code_parsley
                .whenValid()
                .then(function () {
                    $(btn_submit_code).html(btn_spin);
                    $(form_code).submit();
                });
        });
        $('#resend_confirm_code').click(function(){
            $('body').addClass('cursor_progress');
            $.get(
                "{{ url('my_account_ajax_confirm_delete_account',{'token': csrf_token('my_account_ajax_confirm_delete_account')}) }}",
                function(response){
                    console.log(response);
                    $('body').removeClass('cursor_progress');
                    if(response.hasOwnProperty('code') && response.code === 'sent'){
                        toastr_success.success("{{ 'my_account.delete.text.step_2.send_email_ok'|trans }}");
                    }
                });
        })
    });
    </script>
{% endblock %}