{% extends app['twig_theme'] ~ '/' ~ 'layout.twig' %}
{% set title =  'Certificate request' %}


{% block footer_js %}
    
        {{ parent() }}
        {% include app.twig_theme ~ "/basic_templates/scripts-select2.twig" %}

{% endblock footer_js %}


{% block content %}

    <div id="add_channel">
    {% if not(app.is_show) %}
        <div class="row">
            <div class="box">
                <a class="collapse-link">
                    <div class="box-header">
                        <div class="box-name">
                            <div class="row">
                                <div class="col-xs-10 col-sm-2">
                                    <span>{{ 'Certificate request'|trans }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="box-icons">
                            <i class="fa fa-chevron-up"></i>
                        </div>
                        <div class="no-move"></div>
                    </div>
                </a>
                <div class="box-content">
    {% endif %}
                    {{ form_start(app['form'], {'method': 'POST', 'action': (app.request_context.baseUrl ~ '/' ~ app.controller_alias  ~ '/certificate-request') | trans, 'attr': {'class': 'form-horizontal', 'role': 'form', 'id': 'form_'}}) }}
                    <div class="bg-danger">
                        {{ form_errors(app['form']) }}
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-lg-offset-1 col-md-offset-1">
                            <div class="box">
                                <div class="box-content">
                                    <div class="form-group"  {{ (app.is_show ? '' : 'style="display: none;"') }}>
                                        <label class="col-sm-2 control-label ">{{ 'ID'|trans }}</label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].id, {'attr': {'class': 'form-control', 'readonly': 'readonly'}}) }}
                                                <div></div>
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].id) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label ">{{ 'Company'|trans }}<span class="icon-required">*</span></label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].company, {'attr': {'class': 'form-control', 'data-validation': 'required' }}) }}
                                                <div></div>
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].company) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label ">{{ 'Contact person'|trans }}<span class="icon-required">*</span></label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].contact_name, {'attr': {'class': 'form-control', 'data-validation': 'required'}}) }}
                                                <div></div>
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].contact_name) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label ">{{ 'Phone'|trans }}<span class="icon-required">*</span></label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].phone, {'attr': {'class': 'form-control', 'data-validation': 'required'}}) }}
                                                <div></div>
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].phone) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label ">{{ 'Email'|trans }}<span class="icon-required">*</span></label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].contact_address, {'attr': {'class': 'form-control', 'placeholder': 'mail@example.com', 'data-validation': 'required'}}) }} {#, 'data-validation': 'custom', 'data-validation-regexp': '^[а-яА-ЯёЁa-zA-Z0-9@ ]{3,25}$'#}
                                                <div></div>
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].contact_address) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label ">{{ 'Country'|trans }}<span class="icon-required">*</span></label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].country, {'attr': {'class': ('populate placeholder' ~ (app.is_show ? ' disabled': '')) | trans, 'data-validation': 'required'} }) }}
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].country) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label ">{{ 'Number of licenses'|trans }}<span class="icon-required">*</span></label>
                                        <div class="col-xs-10 col-sm-8">
                                            <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].quantity, {'attr': {'class': ('populate placeholder' ~ (app.is_show ? ' disabled': '')) | trans, 'data-validation': 'required'} }) }}
                                            </div>
                                            <div>
                                                <div class="bg-danger">
                                                    {{ form_errors(app['form'].quantity) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% if app.is_show %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label ">{{ 'Begin of certificate validity'|trans }}<span class="icon-required">*</span></label>
                                            <div class="col-xs-10 col-sm-8">
                                                <div class=" col-xs-10 col-sm-6">
                                                    {{ form_widget(app['form'].date_begin, {'attr': {'class': 'populate placeholder col-md-12'} }) }}
                                                </div>
                                                <div>
                                                    <div class="bg-danger">
                                                        {{ form_errors(app['form'].date_begin) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label ">{{ 'End of certificate validity'|trans }}</label>
                                            <div class="col-xs-10 col-sm-8">
                                                <div class=" col-xs-10 col-sm-6">
                                                    {{ form_widget(app['form'].date_to, {'attr': {'class': 'populate placeholder col-md-12'} }) }}
                                                </div>
                                                <div>
                                                    <div class="bg-danger">
                                                        {{ form_errors(app['form'].date_to) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% if app['form'].expire.vars.value <= 30  %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label "></label>
                                            <div class="col-xs-10 col-sm-8">
                                                <div class=" col-xs-10 col-sm-6">
                                                    {{ form_widget(app['form'].expire, {'attr': {'class': 'populate placeholder col-md-12', 'style': 'display: none;'} }) }}
                                                    {{ form_widget(app['form'].save, { 'label': 'Сertificate request'|trans , attr: {'class': 'btn btn-default pull-right'}}) }}
                                                </div>
                                                <div>
                                                    <div class="bg-danger">
                                                        {{ form_errors(app['form'].expire) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label ">{{ 'Status'|trans }}</label>
                                            <div class="col-xs-10 col-sm-8">
                                                <div class=" col-xs-10 col-sm-6">
                                                    {{ form_widget(app['form'].status, {'attr': {'class': 'populate placeholder col-md-12'} }) }}
                                                </div>
                                                <div>
                                                    <div class="bg-danger">
                                                        {{ form_errors(app['form'].status) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% if app['form'].expire.vars.value > 30 and app['form'].status.vars.value == 'wrong_signature' %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label "></label>
                                            <div class="col-xs-10 col-sm-8">
                                                <div class=" col-xs-10 col-sm-6">
                                                {{ form_widget(app['form'].save, { 'label': 'Сertificate request'|trans , attr: {'class': 'btn btn-default pull-right'}}) }}
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    {% else %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label ">{{ 'Server host'|trans }}<span class="icon-required">*</span></label>
                                            <div class="col-xs-10 col-sm-8">
                                                <div class=" col-xs-10 col-sm-6">
                                                    {{ form_widget(app['form'].server_host , {'attr': {'class': 'form-control', 'data-validation': 'required' }}) }} {#, 'data-validation': 'custom', 'data-validation-regexp': '^[а-яА-ЯёЁa-zA-Z ]{3,25}$'#}
                                                    <div></div>
                                                </div>
                                                <div>
                                                    <div class="bg-danger">
                                                        {{ form_errors(app['form'].server_host ) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            {% if not(app.is_show) %}
                            <div class="box">
                                <div class="box-content">
                                    <div class="row">
                                        <div class="pull-right">
                                            {{ form_widget(app['form'].save, { 'label': 'Request'|trans , attr: {'class': 'btn btn-success pull-right'}}) }}
                                            <a id="form_reset" href="{{app.request_context.baseUrl}}/{{app.controller_alias}}" class="btn btn-default pull-right">{{ 'Cancel'|trans }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <div style="display: none;">
                            {{ form_rest(app.form) }}
                        </div>
                    </div>
                    {{ form_end(app['form']) }}
    {% if not(app.is_show) %}
                </div>
            </div>
            <div class="box">
                <a class="collapse-link">
                    <div class="box-header">
                        <div class="box-name">
                            <div class="row">
                                <div class="col-xs-10 col-sm-2">
                                    <span>{{ 'Frequently asked Questions'|trans }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="box-icons">
                            <i class="fa fa-chevron-up"></i>
                        </div>
                        <div class="no-move"></div>
                    </div>
                </a>
                <div class="box-content">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'What are the certificates?'|trans }}</dt>
                                        <dd>
                                            {{ 'The certificates allow operators to connect set-top boxes and applications to Stalker Middleware. These are the files generated for a certain server at an administrative control panel request.'|trans }}<br/>
                                            {{ 'Every certificate includes a certain number of licenses which is the number of devices which can be connected to Stalker Middleware. To establish a successful connection, set-top box should be integrated with Stalker Middleware. Infomir’s MAG set-top boxes and original StalkerTV (Android, iOS) apps don’t require a certificate.'|trans }}
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'How is license usage determined?'|trans }}</dt>
                                        <dd>{{ 'The license is not attached to a certain device. The rated number of licenses is the number of unique devices which have been using your services within 24 hours. '|trans }}</dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'What should I do if I need to connect more devices than I have licenses?'|trans }}</dt>
                                        <dd>{{ 'Users can connect to Stalker middleware even if the number of active devices exceeds the amount of available licenses. According to active devices statistics, in the end of every quarter you will get a supplementary invoice equal to 25%% of annual value of additional licenses. You can also request for another certificate with needed amount of licenses and use it with the one you already own.'|trans }}</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'How much will it cost to integrate my devices with Stalker Middleware?'|trans }}</dt>
                                        <dd>{{ 'Integration of one firmware version of one device costs $3,000. And $1,500 if you need to integrate an additional firmware version markedly different from the integrated one. If your device has already been integrated with Stalker Middleware, payment is not needed.'|trans }}</dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'Which devices are already integrated with Stalker Middleware?'|trans }}</dt>
                                        <dd>
                                            {{ 'The following set-top boxes:'|trans }}<br/>
                                            MAG245/250<br/>
                                            MAG254/255<br/>
                                            MAG256/257<br/>
                                            MAG270/275<br/>
                                            MAG349/350<br/>
                                            MAG351/352<br/>
                                            {{ 'Devices working with the following apps:'|trans }}<br/>
                                            STALKERTV for SAMSUNG SMART TV<br/>
                                            STALKERTV for Android<br/>
                                            STALKERTV for iOS<br/>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'To what consequences may lead my server configurations change?'|trans }}</dt>
                                        <dd>{{ 'If you change your server configurations your certificate may become invalid. So all devices connected to your server will be access denied. If you are planning configuration changes you need to inform us in advance and to request for a renewed certificate.'|trans }}</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'Can I use multiple certificates simultaneously?'|trans }}</dt>
                                        <dd>{{ 'Yes, you can. If your certificates are valid within a certain time, their licenses summarize. If validity interval of any certificate is over, it’s licenses are subtracted from a total number.'|trans }}</dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'Can my certificate be blocked?'|trans }}</dt>
                                        <dd>
                                            {{ 'Yes. Our server gets requests any time you try to authorize a set-top box.  If your certificate is valid it will be authorized even if the request failed to reach our server. That guarantees high-availability of connected devices.'|trans }}<br/>
                                            {{ 'These requests are important for license use calculation. So if no request is received by our server within 30 days, your certificate will be banned automatically. It can also be banned in case of fraud or late payment for licenses usage.'|trans }}
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="box">
                                <div class="box-content">
                                    <dl>
                                        <dt>{{ 'You have any additional questions?'|trans }}</dt>
                                        <dd>{{ 'Write us on'|trans }}: <a href="mailto:stalker@infomir.com">stalker@infomir.com</a> </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    {% endif %}
    </div>
    <script type="text/javascript" defer>

        var allLicenseCountAndCost = JSON.parse('{% autoescape false %}{{ app.allLicenseCountAndCost|json_encode() }}{% endautoescape %}');
        var licsServerErrors = JSON.parse('{% autoescape false %}{{ app.licsServerErrors|json_encode() }}{% endautoescape %}');

        var select2Opt = {minimumResultsForSearch: -1, dropdownAutoWidth: false, width: '100%'};

        var conf = {
            form: '#form_',
            lang : '{{ app.language }}',
            showHelpOnFocus : true,
            validateHiddenInputs: true,
            modules: 'jsconf',
            onSuccess: function () {
                $(conf.form).find(':disabled').prop('disabled', false).removeAttr('disabled');
                $(conf.form).get(0).submit();
                return true;
            },
            onError: function () {
                return false;
            }
        };

        function InitSelect2() {
            $('select').select2(select2Opt);
        }

        function yelp() {
            $(document).ready(function () {

                if (licsServerErrors instanceof Array) {
                    $.each(licsServerErrors, function(){
                        licsServerErrorsModal(this);
                    });
                }

                $.validate(conf);

                if (allLicenseCountAndCost && allLicenseCountAndCost.length != 0) {
                    for (var i in allLicenseCountAndCost ) {
                        var opt = $("#form_quantity option[value='"+i+"']");
                        opt.data({cost: allLicenseCountAndCost[i].cost}).html(opt.html() + ' (' + allLicenseCountAndCost[i].cost + '$)');
                    }
                }

                $("#form_save").on('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    if ($(conf.form).isValid({}, conf, true)) {
                        conf.onSuccess();
                    } else {
                        conf.onError();
                    }
                    return false;
                });

                LoadSelect2Script(InitSelect2);
            });
        }
        document.addEventListener("DOMContentLoaded", yelp, false);

        function licsServerErrorsModal(error){
            var zIndex = 200000;

            $("div[id^='server_error_warn_']").each(function(){
                var cZIndex = $(this).css('zIndex');
                if (zIndex < cZIndex) {
                    zIndex = cZIndex + 1;
                }
            });

            $('body').prepend("\n\
                    <div id='server_error_warn_"+ zIndex +"' class='box-content ' style='z-index: "+ zIndex +"; position: fixed; top: 0; left: 0; width: 100%;'>\n\
                        <div class='row'>\n\
                            <div class='col-xs-6 col-xs-offset-3'>\n\
                                <h4 class='text-center'>\n\
                                    <img src='{{app.request_context.baseUrl}}/img/warning-icon.png'/>\n\
                                    &nbsp;&nbsp;\n\
                                    <strong>" + error + "</strong>\n\
                                </h4>\n\
                            </div>\n\
                            <div id='warn_close_"+zIndex+"' class='col-xs-3 txt-center pull-right'>\n\
                                <i class='fa fa-times'></i>\n\
                            </div>\n\
                        </div>\n\
                    </div>");

            $("div[id^='server_error_warn_']").on("click", "div[id^='warn_close_'] i", function(){
                $(this).closest("div[id^='server_error_warn_']").remove();
            });
        }
    </script>
{% endblock %}