{# location: admin/view #}
{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="form-inline pull-right">
                {% if (stores) %}
                    <select id="store" onChange="location = '{{ module_link }}&store_id=' + $('#store').val()"
                            class="form-control">
                        {% for store in stores %}
                            <option value="{{ store['store_id'] }}" {{ store['store_id'] == store_id ? 'selected="selected"' : '' }}>{{ store['name'] }}</option>
                        {% endfor %}
                    </select>
                {% endif %}
                <button id="save_and_stay" data-toggle="tooltip" title="{{ button_save_and_stay }}"
                        class="btn btn-success"><i class="fa fa-save"></i></button>
                <button type="submit" form="form" data-toggle="tooltip" title="{{ button_save }}"
                        class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i
                            class="fa fa-reply"></i></a></div>
            <h1>{{ heading_title }} {{ version }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="container-fluid">
        {% if setup %}
        {% if not pro %}
            <div class="notify alert alert-info">{{ text_pro }}</div>
        {% endif %}
        {% if  d_shopunity %}
            <div class="d_shopunity_update"></div>
            <script src="view/javascript/d_shopunity/d_shopunity_widget.js" type="text/javascript"></script>
            <script type="text/javascript">
                var d_shopunity_update = jQuery.extend(true, {}, d_shopunity_widget);
                d_shopunity_update.init({
                    class: '.d_shopunity_update',
                    token: '{{ token }}',
                    extension_id: '{{ codename }}',
                    action: 'loadUpdate'
                });
            </script>
        {% endif %}
        {% endif %}
        {% if (error_warning) %}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        {% if success %}
            <div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> {{ success }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}

        {% if not pro %}
        <div class="row">
            <div class="col-md-9">
                {% endif %}

                <div class="panel panel-default panel-resizable">
                    <div class="panel-heading">
                        <h3 class="panel-title "><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
                    </div>
                    {% if setup %}
                        <div class="panel-body ">
                            <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form"
                                  class="form-horizontal">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#social_login" data-toggle="tab">
                                            <i class="fa fa-bullhorn"></i>
                                            {{ text_social_login }}
                                        </a></li>
                                    <li><a href="#tab_setting" data-toggle="tab">
                                            <i class="fa fa-cog"></i>
                                            {{ text_setting }}
                                        </a></li>
                                    <li><a href="#registration_field" data-toggle="tab">
                                            <i class="fa fa-bars"></i>
                                            {{ text_registration_field }}
                                        </a></li>
                                    <li><a href="#instruction" data-toggle="tab">
                                            <i class="fa fa-graduation-cap"></i>
                                            {{ text_instruction }}
                                        </a></li>
                                    <li><a id="debug_btn" href="#debug" data-toggle="tab"
                                           class="{{ not setting['debug_mode']? 'hide' }}">
                                            <i class="fa fa-bug"></i>
                                            {{ text_debug }}
                                        </a></li>
                                </ul>

                                <div class="tab-content">

                                    <div id="social_login" class="tab-pane active">
                                        <div class="form-group tour-step tour-step-one">
                                            <label class="col-sm-2 control-label"
                                                   for="input_status">{{ entry_status }}</label>
                                            <div class="col-sm-10">
                                                <input type="hidden" name="{{ codename }}_status" value="0"/>
                                                <input type="checkbox" name="{{ codename }}_status" class="switcher"
                                                       id="input_status" {{ d_social_login_status ? 'checked="checked"' : '' }}
                                                       value="1"/>
                                            </div>
                                        </div>
                                        <div class="bs-callout bs-callout-warning">{{ entry_sort_order }}</div>
                                        <div class="panel-group sortable" role="tablist" aria-multiselectable="true">
                                            {% for key,provider in setting['providers'] %}
                                                <div
                                                        class="panel panel-default sort-item"
                                                        data-sort="{{ provider['sort_order'] }}">
                                                    <input type="hidden"
                                                           name="{{ codename }}_setting[providers][{{ key }}][id]"
                                                           value="{{ provider['id'] }}"/>
                                                    <input type="hidden"
                                                           name="{{ codename }}_setting[providers][{{ key }}][sort_order]"
                                                           class="sort-value"
                                                           value="{{ provider['sort_order'] }}"/>
                                                    <input type="hidden"
                                                           name="{{ codename }}_setting[providers][{{ key }}][enabled]"
                                                           value="0"/>
                                                    <input type="hidden"
                                                           name="{{ codename }}_setting[providers][{{ key }}][icon]"
                                                           value="{{ provider['icon'] }}"/>
                                                    <div
                                                            class="panel-heading collapse"
                                                            role="tab"
                                                            id="tab_{{ key }}">
                                                        <h4 class="panel-title">
                                                            <i class="fa fa-bars"></i> {{ provider['name'] }}
                                                            <span class="api-title label label-success" role="button"
                                                                  data-toggle="collapse"
                                                                  data-parent="#accordion"
                                                                  href="#{{ key }}"
                                                                  aria-expanded="true"> {{ text_api }}</span>
                                                            <span class="api-title label label-default" role="button"
                                                                  data-toggle="collapse"
                                                                  data-parent="#accordion"
                                                                  href="#{{ key }}"
                                                                  aria-expanded="true"> {{ text_no_api }}</span>
                                                        </h4>
                                                        <div class="status pull-right">
                                                            <strong role="button"
                                                                    data-toggle="collapse"
                                                                    data-parent="#accordion"
                                                                    href="#{{ key }}"
                                                                    aria-expanded="true"
                                                            ><i class="fa fa-caret-down"></i> {{ text_expend_to_edit }}
                                                            </strong>
                                                            <span for="d_social_login_modules_providers_{{ key }}_enabled">
                                                    <input type="checkbox"
                                                           name="{{ codename }}_setting[providers][{{ key }}][enabled]" {{ provider['enabled']? 'checked="checked"':'' }}
                                                           value="1"
                                                           id="{{ codename }}_setting_providers_{{ key }}_enabled"/>
                                                </span>
                                                        </div>

                                                    </div>
                                                    <div id="{{ key }}"
                                                         class="panel-collapse collapse"
                                                         role="tabpanel"
                                                         aria-labelledby="tab_{{ key }}">
                                                        <div class="panel-body">
                                                            <div class="row provider-design">
                                                                <div class="col-sm-3">
                                                                    <label>{{ text_background_color }}</label>
                                                                    <div class="input-group color-picker">
                                                                        <input type="text"
                                                                               name="{{ codename }}_setting[providers][{{ key }}][background_color]"
                                                                               class=" form-control"
                                                                               value="{{ provider['background_color'] }}"/>
                                                                        <span class="input-group-addon"><i></i></span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-3">
                                                                    <label>{{ text_background_color_active }}</label>
                                                                    <div class="input-group color-picker">
                                                                        <input type="text"
                                                                               name="{{ codename }}_setting[providers][{{ key }}][background_color_active]"
                                                                               class="form-control"
                                                                               value="{{ provider['background_color_active'] }}"/>
                                                                        <span class="input-group-addon"><i></i></span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-3">
                                                                    <label>{{ text_background_color_hover }}</label>
                                                                    <div class="input-group color-picker">
                                                                        <input type="text"
                                                                               name="{{ codename }}_setting[providers][{{ key }}][background_color_hover]"
                                                                               class="form-control"
                                                                               value="{{ provider['background_color_hover'] }}"/>
                                                                        <span class="input-group-addon"><i></i></span>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <br/>
                                                            <div class="provider-api">
                                                                <label><i class="{{ provider['icon'] }}"></i> {{ provider['name'] ~ ' ' ~ text_app_settings }}
                                                                    <span class="info-window-item"
                                                                          data-href="https://doc.99logins.com/{{ provider['id'] }}"><i
                                                                                class="fa fa-question"
                                                                                data-toggle="tooltip"
                                                                                title="{{ text_instruction }}"></i></span>
                                                                </label>
                                                                <div id="api_setting_{{ provider['id'] }}">
                                                                    {% for k,v in provider['keys'] %}
                                                                        <div class="input-group clearfix">
                                                                            <label class="input-group-addon">
                                                                                {{ attribute(_context, 'text_app_' ~ k) }}
                                                                            </label>
                                                                            <input type="text"
                                                                                   placeholder="{{ attribute(_context, 'text_app_' ~ k) }}"
                                                                                   name="{{ codename }}_setting[providers][{{ key }}][keys][{{ k }}]"
                                                                                   value="{{ v }}"
                                                                                   class="form-control credentials"/>

                                                                        </div>
                                                                    {% endfor %}

                                                                    {% if (provider['scope']) %}
                                                                        <div class="input-group clearfix">
                                                                            <label class="input-group-addon">
                                                                                {{ text_app_scope }}
                                                                            </label>
                                                                            <input type="text"
                                                                                   placeholder="{{ text_app_scope }}"
                                                                                   name="{{ codename }}_setting[providers][{{ key }}][scope]"
                                                                                   value="{{ provider['scope'] }}"
                                                                                   class="form-control"/>

                                                                        </div>
                                                                    {% endif %}

                                                                    <script>
                                                                        $("#api_setting_{{ provider['id'] }} .credentials").each(function (key, item) {
                                                                            if (item.value) {
                                                                                $('#tab_{{ key }}').addClass('api-active');
                                                                            }
                                                                        })
                                                                    </script>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                            <script>
                                                $(function () {
                                                    $('.color-picker').colorpicker();
                                                });
                                            </script>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_status">{{ entry_support }}</label>
                                            <div class="col-sm-10">
                                                <a class="btn btn-success" href="https://dreamvention.ee/support"
                                                   target="_blank">{{ text_support }}</a>
                                            </div>
                                        </div><!-- //support -->
                                        {% for key,size in setting['sizes'] %}
                                            {% for keyattr,attrs in size %}
                                                <input type="hidden"
                                                       name="{{ codename }}_setting[sizes][{{ key }}][{{ keyattr }}]"
                                                       value="{{ attrs }}"/>
                                            {% endfor %}
                                        {% endfor %}
                                    </div>

                                    <div id="tab_setting" class="tab-pane ">

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_title"><span data-toggle="tooltip"
                                                                           title="{{ help_title }}">{{ entry_title }}</span></label>
                                            <div class="col-sm-10">
                                                {% for language in languages %}
                                                    <div class="input-group clearfix">
                                                        <label class="input-group-addon">
                                                            <img src="{{ language.flag }}"/>
                                                        </label>
                                                        <input type="text" id="input_title"
                                                               name="{{ codename }}_setting[title][{{ language.language_id }}]"
                                                                {% if (setting['title'][language.language_id]) %}
                                                                    value="{{ setting['title'][language.language_id] }}"
                                                                {% else %}
                                                                    value="{{ text_sign_in }}"
                                                                {% endif %} class="form-control"/>

                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="select_size">{{ entry_size }}</label>
                                            <div class="col-sm-10">
                                                <select name="{{ codename }}_setting[size]" class="form-control">
                                                    {% for size in setting['sizes'] %}
                                                        <option value="{{ size }}"
                                                                {% if size == setting['size'] %}selected="selected" {% endif %}>{{ attribute(_context, 'text_' ~ size) }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="select_customer_group">{{ entry_customer_group }}</label>
                                            <div class="col-sm-10">
                                                <select id="select_customer_group"
                                                        name="{{ codename }}_setting[customer_group]"
                                                        class="form-control">
                                                    {% for customer_group in customer_groups %}
                                                        <option value="{{ customer_group['customer_group_id'] }}" {{ customer_group['customer_group_id'] == setting['customer_group'] ? 'selected="selected"' : '' }}>{{ customer_group['name'] }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_newsletter">{{ entry_newsletter }}</label>
                                            <div class="col-sm-10">
                                                <input type="hidden" name="{{ codename }}_setting[newsletter]"
                                                       value="0"/>
                                                <input type="checkbox"
                                                       name="{{ codename }}_setting[newsletter]" {{ setting['newsletter']? 'checked="checked"' : '' }}
                                                       value="1" id="input_newsletter"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_header">{{ entry_header }}</label>
                                            <div class="col-sm-2">
                                                <input type="hidden" name="{{ codename }}_setting[header]" value="0"/>
                                                <input type="checkbox"
                                                       name="{{ codename }}_setting[header]" {{ setting['header']? 'checked="checked"' : '' }}
                                                       value="1" id="input_header"/>
                                            </div>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <label class="input-group-addon">
                                                        {{ text_header_placeholder }}
                                                    </label>
                                                    <input class="form-control" type="text"
                                                           value="{{ text_header_value }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_return_page_url"><span data-toggle="tooltip"
                                                                                     title="{{ help_return_page_url }}">{{ entry_return_page_url }}</span></label>
                                            <div class="col-sm-10">
                                                <input type="text" id="input_return_page_url"
                                                       name="{{ codename }}_setting[return_page_url]"
                                                       value="{{ setting['return_page_url'] }}" class="form-control"
                                                       placeholder="{{ placeholder_return_page_url }}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_debug_mode">{{ entry_debug_mode }}</label>
                                            <div class="col-sm-10">
                                                <input type="hidden" name="{{ codename }}_setting[debug_mode]"
                                                       value="0"/>
                                                <input type="checkbox"
                                                       name="{{ codename }}_setting[debug_mode]" {{ setting['debug_mode']? 'checked="checked"' : '' }}
                                                       value="1" id="input_debug_mode"/>
                                            </div>
                                        </div>

                                    </div>

                                    <div id="registration_field" class="tab-pane">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"
                                                   for="input_iframe">{{ entry_iframe }}</label>
                                            <div class="col-sm-10">
                                                <input type="hidden" name="{{ codename }}_setting[iframe]" value="0"/>
                                                <input type="checkbox"
                                                       name="{{ codename }}_setting[iframe]" {{ setting['iframe'] ? 'checked="checked"' : '' }}
                                                       value="1" id="input_iframe"/>
                                            </div>
                                        </div>
                                        <div id="iframe-img" class="form-group  {{ setting['iframe'] ? 'hide' }}">
                                            <label class="col-sm-2 control-label"
                                                   for="select_return_url">{{ entry_background_img }}</label>
                                            <div class="col-sm-10">
                                                <a href="" id="thumb-image" data-toggle="image"
                                                   class="img-thumbnail"><img
                                                            src="{{ background_img_thumb }}" alt="" title=""/></a>
                                                <input type="hidden" name="{{ codename }}_setting[background_img]"
                                                       value="{{ setting['background_img'] }}" id="input-image"/>
                                            </div>
                                        </div>
                                        <div class="bs-callout bs-callout-warning">{{ entry_fields_sort_order }}</div>
                                        <div class="sortable tour-step tour-step-three">
                                            {% for field in setting['fields'] %}
                                                <div class="panel panel-default clearfix sort-item"
                                                     data-sort="{{ field['sort_order'] }}">
                                                    <div class="panel-heading">

                                                        <input type="hidden"
                                                               name="{{ codename }}_setting[fields][{{ field['id'] }}][id]"
                                                               value="{{ field['id'] }}"/>
                                                        <input type="hidden"
                                                               name="{{ codename }}_setting[fields][{{ field['id'] }}][enabled]"
                                                               value="0"/>
                                                        <input type="hidden"
                                                               name="{{ codename }}_setting[fields][{{ field['id'] }}][required]"
                                                               value="0"/>
                                                        <input type="hidden"
                                                               name="{{ codename }}_setting[fields][{{ field['id'] }}][sort_order]"
                                                               class="sort-value"
                                                               value="{{ field['sort_order'] }}"/>
                                                        <input type="hidden"
                                                               name="{{ codename }}_setting[fields][{{ field['id'] }}][type]"
                                                               value="{{ field['type'] }}"/>

                                                        <label class="col-sm-3"
                                                               for="{{ codename }}_setting_fields_{{ field['id'] }}_enabled">
                                                            <span class="fa fa-bars"></span>
                                                            {{ attribute(_context, 'text_' ~ field['id']) }}</label>

                                                        <div class="col-sm-5">
                                                            <input type="checkbox"
                                                                   class="col-sm-3"
                                                                   name="{{ codename }}_setting[fields][{{ field['id'] }}][enabled]" {{ field['enabled']? 'checked="checked"':'' }}
                                                                   value="1"
                                                                   data-label-text="{{ text_display }}"
                                                                   id="{{ codename }}_setting_fields_{{ field['id'] }}_enabled"/>
                                                            <input type="checkbox"
                                                                   class="col-sm-3"
                                                                   name="{{ codename }}_setting[fields][{{ field['id'] }}][required]" {{ field['required']? 'checked="checked"':'' }}
                                                                   value="1"
                                                                   data-label-text="{{ text_required }}"
                                                                   id="{{ codename }}_setting_fields_{{ field['id'] }}_required"/>
                                                        </div>

                                                        <div class="col-sm-4">
                                                            {% if (field['mask'] is defined) %}
                                                                <div class="input-group clearfix">
                                                                    <label class="input-group-addon">
                                                                        {{ text_mask }}
                                                                    </label>
                                                                    <input type="text"
                                                                           name="{{ codename }}_setting[fields][{{ field['id'] }}][mask]"
                                                                           value="{{ field['mask'] }}"
                                                                           class="form-control">
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="tab-pane " id="instruction">
                                        <div class="tab-body">
                                            <h1>{{ text_instruction_social_login }}</h1>

                                            <div>
                                                <!-- Nav tabs -->
                                                <ul class="nav nav-tabs" role="tablist">

                                                    <li role="presentation" class="instruction-provider active">
                                                        <a href="#instruction_{{ text_instruction }}"
                                                           aria-controls="home" role="tab" data-toggle="tab">
                                                            {{ text_instruction }}
                                                        </a>
                                                    </li>

                                                    {% for key,provider in setting['providers'] %}
                                                        <li role="presentation" class="instruction-provider"><a
                                                                    href="#instruction_{{ key }}" aria-controls="home"
                                                                    role="tab" data-toggle="tab"
                                                                    data-href="{{ provider['documentation_url'] }}">{{ key }}</a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>

                                                <!-- Tab panes -->
                                                <div class="tab-content">

                                                    <div role="tabpanel" class="tab-pane active"
                                                         id="instruction_{{ text_instruction }}">
                                                        <div class="instruction_full"></div>
                                                    </div>

                                                    {% for key,provider in setting['providers'] %}
                                                        <div role="tabpanel" class="tab-pane"
                                                             id="instruction_{{ key }}">...
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="tab-pane" id="debug">
                                        <div class="tab-body">
                                            <div class="bs-callout bs-callout-warning">{{ text_debug_file_into }}</div>
                                            <textarea wrap="off" rows="15" readonly="readonly"
                                                      class="form-control">{{ debug }}</textarea>
                                            <br/>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label"
                                                       for="input_debug_file">{{ entry_debug_file }}</label>
                                                <div class="col-sm-10">
                                                    <input type="text" id="input_debug_file"
                                                           name="{{ codename }}_setting[debug_file]"
                                                           value="{{ setting['debug_file'] }}" class="form-control"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-10 col-sm-offset-2">
                                                    <a class="btn btn-danger"
                                                       id="clear_debug_file"
                                                       data-value="{{ clear_debug_file }}">{{ button_clear_debug_file }}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div style="text-align: center; padding: 30px;">{{ text_powered_by }}</div>
                            </form>
                        </div>
                    {% else %}
                        {{ text_setup }}
                    {% endif %}
                </div>
                <div class="info-window">
                    <div class="info-window-wrap">
                        <div class="info-window-block">
                            <div class="info-window-close"><i class="fa fa-close"></i></div>
                            <div class="info-window-description"></div>
                        </div>
                    </div>
                </div>
                {% if not pro %}
            </div>
            <div class="col-sm-3">
                <div class="d_shopunity_widget"></div>
                <script src="view/javascript/d_shopunity/d_shopunity_widget.js" type="text/javascript"></script>
                <script type="text/javascript">
                    setTimeout(function () {
                        var d_shopunity_widget1 = jQuery.extend(true, {}, d_shopunity_widget);
                        d_shopunity_widget1.init({
                            class: '.d_shopunity_widget',
                            token: '{{ token }}',
                            extension_id: 'd_social_login_pro'
                        })
                    }, 1000);
                </script>
            </div>
        </div>
        {% endif %}

    </div>
</div>

<style>
    .instruction-provider.active {
        background: #d6d8e2;
    }

    /*.instruction-provider.active > a:after {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    display: block;*/
    /*    background-color: #3573ee;*/
    /*    width: 25px;*/
    /*    height: 3px;*/
    /*    bottom: 10px;*/
    /*    left: 50%;*/
    /*    transform: translateX(-50%);*/
    /*}*/
</style>

<script type="text/javascript">
    $(document).on('click', '.setup', function () {
        window.location.href = '{{ setup_link }}';
    });

    $(function () {
        {% if setup %}

        var tour = new Tour({
            //storage : false
        });

        tour.addSteps([
            {
                element: "",
                placement: "top",
                orphan: true,
                backdrop: true,
                title: "{{ text_tour_title_1 }}",
                content: "{{ text_tour_content_1 }}",
                template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-default' data-role='end'>{{ text_end }}</button><button class='btn btn-success' data-role='next'>{{ text_start }}</button></div></div>"

            },
            {
                element: ".tour-step.tour-step-one",
                placement: "auto bottom",
                backdrop: true,
                title: "{{ text_tour_title_2 }}",
                content: "{{ text_tour_content_2 }}"

            },
            {
                element: "#tab_Google .status",
                placement: "auto top",
                backdrop: true,
                backdropPadding: 15,
                title: "{{ text_tour_title_3 }}",
                content: "{{ text_tour_content_3 }}",
                onNext: function (tour) {
                    $('#Google').collapse('show')
                }
            },
            {
                element: "#Google .provider-design",
                placement: "top",
                backdrop: true,
                backdropPadding: 15,
                title: "{{ text_tour_title_4 }}",
                content: "{{ text_tour_content_4 }}"
            },
            {
                element: "#Google .provider-api",
                placement: "top",
                backdrop: true,
                backdropPadding: 15,
                title: "{{ text_tour_title_5 }}",
                content: "{{ text_tour_content_5 }}",
                onNext: function (tour) {
                    $('.nav-tabs li:eq(1) a').tab('show')
                }
            },
            {
                element: "#tab_setting",
                placement: "top",
                backdrop: true,
                backdropPadding: 15,
                title: "{{ text_tour_title_6 }}",
                content: "{{ text_tour_content_6 }}",
                onNext: function (tour) {
                    $('.nav-tabs li:eq(2) a').tab('show')
                }
            },
            {
                element: "#registration_field",
                placement: "top",
                backdrop: true,
                backdropPadding: 15,
                title: "{{ text_tour_title_7 }}",
                content: "{{ text_tour_content_7 }}",
                onNext: function (tour) {
                    $('.nav-tabs li:eq(3) a').tab('show')
                }
            },
            {
                element: "#instruction",
                placement: "top",
                backdrop: true,
                backdropPadding: 15,
                title: "{{ text_tour_title_8 }}",
                content: "{{ text_tour_content_8 }}",
                onNext: function (tour) {
                    $('.nav-tabs li:eq(0) a').tab('show')
                }
            },
            {
                element: "",
                placement: "top",
                orphan: true,
                backdrop: true,
                title: "{{ text_tour_title_9 }}",
                content: "{{ text_tour_content_9 }}"
            }

        ]);

        // Initialize the tour
        tour.init();

        // Start the tour
        tour.start();

        {% endif %}

        // sorting fields
        $('#social_login .sortable > .sort-item').tsort({attr: 'data-sort'});
        $('#registration_field .sortable > .sort-item').tsort({attr: 'data-sort'});

        $("[type='checkbox']").bootstrapSwitch({
            'onColor': 'success',
            'onText': 'YES',
            'offText': 'NO',
        });
        $("#input_debug_mode").on('switchChange.bootstrapSwitch', function (event, state) {
            if (state) {
                $('#debug_btn').removeClass('hide');
            } else {
                $('#debug_btn').addClass('hide');
            }
        });
        $("#input_iframe").on('switchChange.bootstrapSwitch', function (event, state) {
            if (!state) {
                $('#iframe-img').removeClass('hide');
            } else {
                $('#iframe-img').addClass('hide');
            }
        });

        $(".sortable").sortable({
            itemPath: '',
            itemSelector: '.sort-item',
            distance: '1',
            pullPlaceholder: true,
            placeholder: '<div class="clearfix placeholder"> </div>',
            onDragStart: function (item, container, _super) {
                var offset = item.offset(),
                    pointer = container.rootGroup.pointer;

                adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                };

                _super(item, container);
            },
            onDrag: function (item, position) {
                item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                });
            },
            onDrop: function (item, container, _super) {
                item.closest('.sortable').find('.sort-item').each(function (i, row) {
                    console.log($(row).find('.sort-value'));
                    $(row).find('.sort-value').val(i);

                });

                _super(item);
            }
        });
    });

    var info_window = {
        'item': new Array(),
        'current_url': ''
    }

    $.each($('.info-window-item'), function (key, value) {
        var url = $(this).attr('data-href');

        if (url) {
            $.getJSON(url + '?format=json&callback=?', function (data) {
                info_window.item[url] = data['description'];
            });
        }
    });

    $('.info-window-item').on('click', function () {
        var url = $(this).attr('data-href');
        if (url == info_window.current_url) {
            info_window.current_url = '';
            $('.info-window .info-window-description').html('');
            $('.info-window').removeClass('resized');
            $('.panel-resizable').removeClass('resized');
        } else {
            info_window.current_url = url;
            $('.info-window .info-window-description').html(info_window.item[url]);
            $('.panel-resizable').addClass('resized');
            $('.info-window').addClass('resized');
        }
    });

    $('.instruction-provider').on('click', function () {
        var url = $(this).find('a').attr('data-href');
        var id = $(this).find('a').attr('href');
        var active = $(this).hasClass('active') && $(id).html();
        if (active) {
            $(id).html('');
        } else {
            $(id).html(info_window.item[url]);
        }

    });

    $('.info-window .info-window-close').on('click', function () {
        info_window.current_url = '';
        $('.info-window .info-window-description').html('');
        $('.info-window').removeClass('resized');
        $('.panel-resizable').removeClass('resized');
    });

    $(function () {
        $.getJSON('https://doc.99logins.com/documentation?format=json&callback=?', function (data) {
            $('.instruction_full').html(data['description']);
        });
        $('body').on('click', '#save_and_stay', function () {
            $.ajax({
                type: 'post',
                url: $('#form').attr('action') + '&save',
                data: $('#form').serialize(),
                beforeSend: function () {
                    $('#form').fadeTo('slow', 0.5);
                },
                complete: function () {
                    $('#form').fadeTo('slow', 1);
                },
                success: function (response) {
                    //console.log(response);
                }
            });
        });

        $('body').on('click', '#clear_debug_file', function (e) {
            console.log(e)
            $.ajax({
                url: e.currentTarget.dataset.value,
                type: 'post',
                dataType: 'json',
                data: 'debug_file={{ debug_file }}',
                beforeSend: function () {
                    $('#form').fadeTo('slow', 0.5);
                },
                complete: function () {
                    $('#form').fadeTo('slow', 1);
                },
                success: function (json) {
                    $('.alert').remove();
                    if (json['error']) {
                        $('#debug .tab-body').prepend('<div class="alert alert-danger">' + json['error'] + '</div>');
                    }
                    if (json['success']) {
                        $('#debug .tab-body').prepend('<div class="alert alert-success">' + json['success'] + '</div>');
                        $('#debug textarea').empty();
                    }
                },
            }).error(function (xth, e) {
                alert(e)
            });
        });
    });
</script>
{{ footer }}
