{% extends 'admin/vacation-soup.twig' %}
{% block content %}
{% embed 'admin/form.twig' %}
{% block form_name %}connect{% endblock form_name %}
{% block form_content %}
    {% if soup.connected and soup.kitchen_sync %}
        {% set autoSync = soup.kitchen_sync %}
    {% else %}
        {% set autoSync = 0 %}
    {% endif %}

    <script>
    jQuery(function() {
        window.doAllServiceChecks = function(){
            jQuery(".servicecheck").each(function () {

                jQuery(this).addClass("checking").removeClass("ok nok fail")
                    .find('I')
                    .removeClass('fa-check fa-chain-broken fa-question');
                var ServiceAjaxCall = {
                    type: "post",
                    dataType: "json",
                    timeout: 30000,
                    context: this,
                    url: ajaxurl,
                    data: {
                        action: "servicecheck",
                        _vs_nonce: jQuery('INPUT[name="_vs_nonce"]').val(),
                        service: jQuery(this).data('service')
                    }
                };
                jQuery.ajax(ServiceAjaxCall)
                    .fail(function (jqXHR, status, error) {
                        if (document.unloading) return;
                        console.log('fail (vacation-soup) ' + status + ' ' + error);
                        jQuery(this).addClass('nok fail')
                            .find('I')
                            .removeClass('fa-question')
                            .addClass('fa-chain-broken');
                    })
                    .done(function (response) {
                        if (document.unloading) return;
                        var status,title;
                        if (response.success){
                            status = response.status;
                            title = response.message;
                        } else {
                            status = 'nok fail';
                            title = (response.error)?response.error.message:'Error connecting';
                        }
                        faIcon = (status==='ok')?'fa-check':'fa-chain-broken';
                        jQuery(this).addClass(status)
                            .find('I')
                            .removeClass('fa-question')
                            .addClass(faIcon)
                            .parent().prop('title',title);
                    })
                    .always(function(){
                        if (document.unloading) return;
                        jQuery(this).removeClass("checking");
                    });
            });
        }
        jQuery('.soup-icon').click(doAllServiceChecks);
        doAllServiceChecks();

        window.soup_get_progress = function(){
            var ajaxCall = {
                type: "get",
                url: ajaxurl,
                data: {
                    'action': 'soup_resync_progress',
                    _vs_nonce: jQuery('INPUT[name="_vs_nonce"]').val()
                }
            };
            jQuery.ajax(ajaxCall)
                .done(function(response){
                    if (response.total) {
                        window.soup_progress = response.progress;
                        var button=jQuery('#sync_kitchen');
                        if (button.prop('disabled')) {
                            if (100 !== response.progress) {
                                button.html(''+response.progress+'%');
                            }
                            if (response.total !== response.processed) {
                                jQuery('#sync-message-count').html(response.total-response.processed);
                            }
                            setTimeout(soup_get_progress,1000);
                        }
                    }
                });
        }
        window.doSync = function (is_init){
            var button=jQuery('#sync_kitchen');
            button.prop('disabled',true);
            if ('Re-Synch'===button.html()){
                button.html('connecting');
            }
            var ajaxCall = {
                type: "post",
                context: this,
                url: ajaxurl,
                data: {
                    'action': 'soup_resync',
                    'init': is_init,
                    _vs_nonce: jQuery('INPUT[name="_vs_nonce"]').val()
                }
            };
            jQuery.ajax(ajaxCall)
                .fail(function(jqXHR,status,error) {
                    console.log('fail (vacation-soup) '+status+' '+error);
                })
                .done(function(response) {
                    if (window.soup_progress && 100 > window.soup_progress){
                        setTimeout(window.doSync,100);
                    } else {
                        var button = jQuery('#sync_kitchen');
                        button.prop('disabled',false);
                        button.html('Re-Synch');
                        button.removeClass('required auto');
                        jQuery('#sync-message').addClass('hidden');
                    }
                });
            soup_get_progress();
            return false;
        };
        jQuery('#sync_kitchen').click(function(){
            window.doSync(true);
        });
        $passwd = jQuery('#kitchen_password');
        $passwd.on('focus',function(){
            jQuery('#done').prop('disabled',true);
        });
        $passwd.on('blur',function(){
            jQuery('#done').prop('disabled',false);
        });
    });
    </script>
<style>
    input[type="checkbox"].hidden {
        display: none;
    }
</style>
<div class="vs-content tab-connect row">
    <div class="col-xl-7 col-md-6 col-xs-12 center-xs">
        <div id="connect-params" class="vs-panel row field-container">
            <div id="title" class="col-sm-12">
                <h1>The Soup Settings</h1>
                {% if userType == "administrator" or ( soup.multiuser and not soup.host_authentication ) %}
                    <p>Please enter the username (email) and password you <a href="https://vacationsoup.com/owners-area/#login" target="_blank">registered with Vacation Soup</a>. </p>
                    {% if admin.error_msg %}
                        <div id="error-message" class="error">{{ admin.error_msg }}</div>
                    {% endif %}
                    <div class="field">
                        <label for="kitchen_user">
                            Username <span class="required">*</span>
                        </label>
                        <input type="text" class="no-persist" name="SoupWaiter.kitchen_user" id="kitchen_user" autocomplete="new-password" value="{{ soup.kitchen_user }}"/>
                    </div>
                    <div class="field required">
                        <label for="kitchen_password">
                            Password <span class="required">*</span>
                        </label>
                        <input type="password" class="no-persist" name="SoupWaiter.kitchen_password" id="kitchen_password" autocomplete="new-password" value=""
                        data-persist-action="doAllServiceChecks()"/>
                    </div>
                    <div class="label-indent">
                        {% if autoSync %}
                            <div id="sync-message" class="error">You have <span id="sync-message-count">{{ autoSync }}</span> post{{ autoSync > 1 ? 's' }} waiting to send to Vacation Soup. {{ autoSync > 1 ? 'They':'It' }} will synchronize in the background.</div>
                        {% endif %}
                        <input type="submit" value="submit" class="margin_5_ no-unload" id="no-done">
                    </div>
                {% else %}
                    {% if soup.host_authentication %}
                    <p>You are connected to Vacation Soup as {{ current_user.name }}.</p>
                    {% else %}
                    <p>The connection to Vacation Soup is not configured. Please contact the Site Administrator</p>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-xl-5 col-md-6 col-xs-12 center-xs">
        <div class="vs-panel row">
            <div id="title" class="col-sm-12">
                <h1>Vacation Soup Status</h1>
            </div>
            <div class="soup-icon hover col-sm-4 col-xs-12">
                <img title="Connect" src="{{ soup.image_url }}/vacation_soup_FB_logo_180sq.png"/>
            </div>

            <div id="servicecheck" class="soup-status col-sm-8">
                {% for handle,service in admin.services['basic'] %}
                    <div class="servicecheck" data-service="{{ handle }}">
                        {{ service['url']? "<a href='"~service['url']~"'>":"" }}
                        <i class="fa fa-question"></i><span>{{ service['title'] }}</span>
                        {{ service['url']? "</a>":"" }}
                    </div>
                {% endfor %}
                <h2>Premium services</h2>
                {% for handle,service in admin.services['premium'] %}
                    <div class="servicecheck" data-service="{{ handle }}">
                        {{ service['url']? "<a href='"~service['url']~"'>":"" }}
                        <i class="fa fa-question"></i><span>{{ service['title'] }}</span>
                        {{ service['url']? "</a>":"" }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% if userType == "administrator" %}
    <div class="col-xl-7 col-md-6 col-xs-12 center-xs">
        <div id="connect-params" class="vs-panel row field-container">
            <div id="title" class="col-sm-12">
                <h1>Advanced Settings</h1>
                <p>You should not change these values unless advised to do so by a member of the Vacation Soup team.</p>
                <h2>
                    Multi-User
                </h2>
                <p>
                    This option configures the Vacation Soup plugin to store different Owner, Property and Connection details for each Wordpress user on this site.
                    If unchecked, all users will share the same owner settings, which suits most websites.
                </p>
                <div class="field">
                    <label for="multiuser_checkbox">Multi-User</label>
                    <input type="checkbox" class="persist" name="SoupWaiter.multiuser" id="multiuser_checkbox" value="1"
                           onchange="
                           var multiuser = jQuery('#multiuser_checkbox').prop('checked');
                           jQuery('#multiuser_checkbox_inverse').prop('checked',!multiuser);
                            " {{ (soup.multiuser)?'checked':'' }}/>
                    <input type="checkbox" name="SoupWaiter.multiuser" class="persist hidden" id="multiuser_checkbox_inverse" value="0"/>
                </div>
                <h2>
                    API Configuration
                </h2>

                <div class="field">
                    <label for="kitchen_host">
                        Kitchen
                    </label>
                    <input type="text" readonly class="persist" name="SoupWaiter.kitchen_host" id="kitchen_host" value="{{ soup.kitchen_host }}"/>
                </div>
                <div class="field">
                    <label for="kitchen_auth_api">
                        Auth API
                    </label>
                    <input type="text" readonly class="persist" name="SoupWaiter.kitchen_jwt_api" id="kitchen_auth_api" value="{{ soup.kitchen_jwt_api }}"/>
                </div>
                <div class="field">
                    <label for="kitchen_api">
                        Kitchen API
                    </label>
                    <input type="text" readonly class="persist" name="SoupWaiter.kitchen_api" id="kitchen_api" value="{{ soup.kitchen_api }}"/>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock form_content -%}{% endembed %}
{% endblock content %}