<style>
    .d_social_login .pre_loader.hide{
        display: none;
    }

    .d_social_login #dsl_form{
        z-index: 16000011;
        position: relative;
    }

    .d_social_login .modal-backdrop.in{
        opacity: 0;
    }

    .d_social_login #dsl_form .form-group input{
        width: 278px;
        max-width: 100%;
    }

    .d_social_login #dsl_form label.error{
        width: 100%;
    }

    .d_social_login #dsl_form label.help{
        width: 100%;
    }

    .d_social_login .wrapper-spinner-refresh{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

    .d_social_login span.wait{
        position: unset;
        padding: 0;
        margin: 0;
    }
</style>



<script>
    function log(text) {
        {% if(debug) %}
        console.log(text);
        {% endif %}
    }
    function sendForm(e) {
        e.preventDefault();
        log($('#dsl_form').serialize());
        $.ajax({
            url: 'index.php?route=extension/module/d_social_login/register',
            type: 'post',
            data: $('#dsl_form').serialize(),
            dataType: 'json',
            beforeSend: function () {
                $('#dsl_submit').prop('disabled', true);
                $('#dsl_submit').after('<span class="wait fa fa-refresh fa-spin"></span>');
                $('.pre_loader').toggleClass('hide');
                $('#d_social_login .modal-content').css('transform', 'scale(0)')
            },
            complete: function () {
                $('#dsl_submit').prop('disabled', false);
                $('.wait').remove();
                $('.pre_loader').toggleClass('hide');
                $('#d_social_login .modal-content').css('transform', 'scale(1)')
            },
            success: function (json) {
                log(json);
                $('#dsl_error').remove();
                $('.error').removeClass('error');
                if (!json['error']) {
                    if (json['success']) {
                        $(".d_social_login .popup").html(json['success']);
                        setTimeout(function () {
                            location.reload();
                        }, 1000)
                    }
                } else {
                    $.each(json['error'], function (id, error) {
                        $("#" + id).addClass('has-error');
                        $("#" + id).after('<div class="dsl_error">' + error + '</div>');
                    });
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                // $("#d_social_login .popup").html(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                location.reload();
            }
        });
    }

</script>
{% if not islogged %}
    <div id="d_social_login">
        <div class="modal fade d_social_login d_social_login-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog " role="document">
                <div class="pre_loader hide">{{ pre_loader }}</div>
                <div class="modal-content">
                    <div class="modal-backdrop fade in hide"></div>
                    <div id="dsl_popup">
                        <div class="holder">
                            <div class="popup">
                            <form id="dsl_form" class="form-horizontal" method="post"
                                  action="index.php?route=extension/module/d_social_login/register">
                                {% if (authentication_data['photo_url']) %}
                                <div class="col-xs-12">
                                    <div class="img-wrap">
                                        <img    src="{{ authentication_data['photo_url'] }}"
                                                id="dsl_profile_image"/>
                                        <div class="log-small-icon"
                                             style="{{ log_style }}"></div>
                                    </div>
                                </div>
                                {% endif %}
                                <div id="dsl_intro" class="col-xs-12">{{ text_email_intro }}</div>
                                <div class="col-xs-12">
                                    {% for field in fields %}
                                        {% if (field['enabled']) %}
                                            <div class="form-group">
                                                <label for="{{ field['id'] }}_control"
                                                       class="control-label "> {{ labels_field[field['id']] }}{{ field['required'] ? '*' }} </label>
                                                {% if (field['type'] == "select") %}
                                                    <select id="{{ field['id'] }}" name="{{ field['id'] }}"
                                                            class="form-control">
                                                        {% if (field['id'] == 'country_id') %}
                                                            {% for country in countries %}
                                                                <option value="{{ country['country_id'] }}" {{ country['country_id'] == customer_data[field['id']] ? 'selected="selected"' : '' }}>{{ country['name'] }}</option>
                                                            {% endfor %}
                                                        {% endif %}
                                                    </select>
                                                {% elseif  (field['id'] == "confirm") %}
                                                <input class="form-control"
                                                       type="{{ field['type'] }}" id="{{ field['id'] }}"
                                                       name="{{ field['id'] }}"
                                                       value="{{ customer_data[field['id']]!='false' ? customer_data[field['id']] }}"
                                                        {{ field['required'] ? 'required' }}
                                                       placeholder=" {{ not mobile ? attribute(_context, 'text_' ~ field['id']) }}"
                                                       autocomplete="off"/>
                                                   <script type="text/javascript">
                                                       $( "#dsl_form" ).validate({
                                                           rules: {
                                                               password: "required",
                                                               confirm: {
                                                                   equalTo: "#password"
                                                               }
                                                           },
                                                           submitHandler: function (form, e) {
                                                               sendForm(e);
                                                           }, //errror highlight
                                                           highlight: function (element, errorClass, validClass) {
                                                               $(element).addClass(errorClass).removeClass(validClass);
                                                               $(element).parent().parent().addClass(errorClass);
                                                           },
                                                           unhighlight: function (element, errorClass, validClass) {
                                                               $(element).removeClass(errorClass).addClass(validClass);
                                                               $(element).parent().parent().removeClass(errorClass);
                                                           }
                                                       });
                                                   </script>
                                                {% else %}
                                                <input class="form-control"
                                                       type="{{ field['type'] }}" id="{{ field['id'] }}"
                                                       name="{{ field['id'] }}"

                                                        {% if field['type'] == 'email' and customer_data[field['id']] !='false' %}
                                                            readonly="readonly"
                                                        {% endif %}

                                                       value="{{ customer_data[field['id']]!='false' ? customer_data[field['id']] }}"

                                                        {{ field['required'] and field['type'] != 'email' and not customer_data[field['id']] ? 'required' }}

                                                       placeholder=" {{ not mobile ? attribute(_context, 'text_' ~ field['id']) }}"
                                                       autocomplete="off"/>
                                                {% endif %}

                                            </div>
                                            {% if (field['mask'] is defined and field['mask'] and not mobile) %}
                                            <script>
                                                $(document).ready(function () {
                                                    $("#{{ field['id'] }}").mask("{{ field['mask'] }}");
                                                })
                                            </script>
                                        {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    <div class="form-group"><label class="help control-label  ">{{ text_help_required }}</label>
                                    </div>
                                </div>
                                <input type="hidden" name="provider" value="{{ authentication_data['provider'] }}"/>
                                <input type="submit" id="dsl_submit" class="btn btn-primary"
                                       value=" {{ button_sign_in_mail }}"/>
                            </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            setTimeout(function(){
                var s = $('#d_social_login .d_social_login-modal').detach();
                console.log(s)
                s.appendTo('body');
                $('.d_social_login-modal').modal('show');
                $('.d_social_login-modal').on('hidden.bs.modal', function (e) {
                $.ajax({
                    url: 'index.php?route=extension/module/d_social_login/reset'
                }).done(function (res) {
                    $('.d_social_login-modal').detach();
                    $('#d_social_login').html(res);
                })
            })
            })

        })
    </script>
    <script>
        $(document).ready(function () {


            $("#dsl_form").validate({
                submitHandler: function (form, e) {
                    sendForm(e);
                },
                //errror highlight
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass(errorClass).removeClass(validClass);
                    $(element).parent().parent().addClass(errorClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass(errorClass).addClass(validClass);
                    $(element).parent().parent().removeClass(errorClass);
                }
            });

        });
        $('input').on('blur keyup', function() {
            if ($("#dsl_form").valid()) {
                $('#dsl_submit').prop('disabled', false);
            } else {
                $('#dsl_submit').prop('disabled', 'disabled');
            }
        });
        $('#dsl_form select[name=\'country_id\']').bind('change', function () {
            if (this.value == '') return;
            $.ajax({
                url: 'index.php?route=checkout/checkout/country&country_id=' + this.value,
                dataType: 'json',
                beforeSend: function () {
                    $('#dsl_form').after('<span class="wait fa fa-refresh fa-spin"></span>');
                },
                complete: function () {
                    $('.wait').remove();
                },
                success: function (json) {

                    html = '<option value="">{{ text_select }}</option>';

                    if (json['zone'] != '') {
                        for (i = 0; i < json['zone'].length; i++) {
                            html += '<option value="' + json['zone'][i]['zone_id'] + '"';
                            html += '>' + json['zone'][i]['name'] + '</option>';
                        }
                    } else {
                        html += '<option value="0" selected="selected">{{ text_none }}</option>';
                    }

                    $('#dsl_form select[name=\'zone_id\']').html(html);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        });
        $('#dsl_form select[name=\'country_id\']').trigger('change');
    </script>
    {% if (background) %}
        <script>
            $(document).ready(function () {
                $('.modal-backdrop.fade.in').css('background-image', "url('{{ background_img_thumb }}')");
                $('.modal-backdrop.fade.in').css('opacity', "1");
            });
        </script>
    {% endif %}
{% endif %}