{% extends 'tbudddy/tbudddy.html.twig' %}

{% block body %}
    {% set selfMenu = 'account' %}
    {% include 'tbudddy/customer/menu-ini.html.twig' %}

    <style type="text/css">
        .customer-account-row {
            padding: 5px;
            border-radius: 5px;
            /*border: #ccc 1px solid;
            background-color: #eee;*/
        }

        .customer-account-row .form-group > label {
            font-weight: bold;
        }
    </style>

    <div class="w-100">
        <div id="customer_content" class="w-100 text-left" style="display: none">
            {{ form_start(form) }}

            <div id="tabs" style="border: 0px">
                <ul style="display: none">
                    <li><a href="#tabs-1">{% trans %}customer.Access Data{% endtrans %}</a></li>
                    <li><a href="#tabs-2">{% trans %}customer.Personal Data{% endtrans %}</a></li>
                    <li><a href="#tabs-3">{% trans %}customer.Address Data{% endtrans %}</a></li>
                    <li><a href="#tabs-4">{% trans %}customer.Contact Data{% endtrans %}</a></li>
                </ul>

                <div id="tabs-1">
                    <div class="row">
                        <div class="row ml-2"><h3>{% trans %}customer.Access Data{% endtrans %}</h3></div>
                    </div>
                    <div class="customer-account-row">
                        <div>
                            {{ form_row(form.name) }}
                            {{ form_row(form.email) }}
                        </div>
                    </div>
                </div>

                <div id="tabs-2">
                    <div class="row">
                        <div class="row ml-2"><h3>{% trans %}customer.Personal Data{% endtrans %}</h3></div>
                    </div>
                    <div class="customer-account-row">
                        <div>
                            {{ form_row(form.taxpayernr) }}
                        </div>
                    </div>
                </div>

                <div id="tabs-3">
                    <div class="row">
                        <div class="row ml-2"><h3>{% trans %}customer.Address Data{% endtrans %}</h3></div>
                    </div>
                    <div class="customer-account-row">
                        {{ form_row(formAddress.address_len) }}

                        {% for i in range(0, formAddressLength - 1) %}
                            {%  set field = 'address_id_' ~ i %}
                            {{ form_row(attribute(formAddress, field)) }}

                            {%  set field = 'address_line1_' ~ i %}
                            {{ form_row(attribute(formAddress, field)) }}

                            {%  set field = 'address_line2_' ~ i %}
                            {{ form_row(attribute(formAddress, field)) }}

                            <div class="row">
                                <div class="col">
                                    {%  set field = 'address_city_' ~ i %}
                                    {{ form_row(attribute(formAddress, field)) }}
                                </div>
                                <div class="col">
                                    {%  set field = 'address_state_' ~ i %}
                                    {{ form_row(attribute(formAddress, field)) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {%  set field = 'address_country_' ~ i %}
                                    {{ form_row(attribute(formAddress, field)) }}
                                </div>
                                <div class="col">
                                    {%  set field = 'address_postalCode_' ~ i %}
                                    {{ form_row(attribute(formAddress, field)) }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div id="tabs-4">
                    <div class="row">
                        <div class="row ml-2"><h3>{% trans %}customer.Contact Data{% endtrans %}</h3></div>
                    </div>
                    <div class="customer-account-row">
                        {{ form_row(formContact.contact_len) }}

                        {% for i in range(0, formContactLength - 1) %}
                            {%  set field = 'contact_id_' ~ i %}
                            {{ form_row(attribute(formContact, field)) }}
                            <div class="row">
                                <div class="col">
                                    {%  set field = 'contact_type_' ~ i %}
                                    {{ form_row(attribute(formContact, field)) }}
                                </div>
                                <div class="col">
                                    {%  set field = 'contact_value_' ~ i %}
                                    {{ form_row(attribute(formContact, field)) }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {{ form_end(form) }}
        </div>
    </div>
    <div class="form-group" style="width: 100%">
        <div class="float-right pr-4">
            <button type="button" id="form_submit" name="form[submit]" class="mt-3 btn-primary btn">{% trans %}save{% endtrans %}</button>
        </div>
    </div>

    {% include 'tbudddy/customer/menu-end.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        var jQ = jQuery.noConflict(); // use jQ instead of $ or Jquery.
    </script>

    <script>
        var submitOn = false;

        $(document).ready(function() {
            $(function() {
                jQ("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
                jQ("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
            });

            $('#customer_loading').hide();
            $('#customer_content').show();
        });

        $('#form_submit').click(function() {
            $("[name='form']").submit();
        });

        $("[name='form']").on('submit',function(e) {
            e.preventDefault();

            $('#form_submit').addClass('disabled');

            if (submitOn == true) {
                return false;
            }

            submitOn = true;

            $.ajax({
                url: '/customer/account',
                type: "POST",
                data: new FormData($(this)[0]),
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function() {
                    $("body").addClass("form_disabled");

                    $('#customer_content').addClass('disabled');
                    $('#customer_loading').show();
                },
                success: function(data) {
                    $("body").removeClass("form_disabled");

                    $('#customer_loading').hide();
                    $('#customer_content').removeClass('disabled');

                    if (typeof(data) == 'object') {
                        if (data.return == 'success') {
                            window.open('/customer', '_self');
                        } else if (data.return == 'msg') {
                            console.log('erro');
                        }
                    }
                },
                error:function(data) {
                    $("body").removeClass("form_disabled");
                    $('#customer_loading').hide();
                    $('#customer_content').removeClass('disabled');
                }
            });

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