{% extends app['twig_theme'] ~ '/' ~ 'layout.twig' %}

{% set title = 'Tariff plans'|trans ~ ': ' ~ (app.servicePlanEdit ? ('Edit tariff plan'|trans ~ " '"~ app.planName ~ "'"): 'Add tariff plan'|trans) %}
{% set active_alias = 'tariff-plans' %}

{% block head %}

    {{ parent() }}
    <style type="text/css">
        {% include (app.twig_theme ~ "/Tariffs/add_tariff_plans/add_tariff_plans.css") %}
    </style>

{% endblock %}

{% form_theme app['form'] _self %}

{# form_errors.html.twig #}
{% block form_errors %}
    {% spaceless %}
        <div {{ attr.class is defined ? 'class=' ~ attr.class : '' }}>
            {% if errors|length > 0 %}
                {% for error in errors %}
                    <i class="txt-danger fa fa-ban"></i> {{ error.message }} {% if not loop.last %}<br>{% endif %}
                {% endfor %}
            {% endif %}
        </div>
    {% endspaceless %}
{% endblock form_errors %}

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

{% endblock footer_js %}

{% block footer %}

    {{ parent() }}
    <script type="text/javascript" src="./js/jquery.tmpl.min.js" defer=""></script>
    <script type="text/javascript" defer>
        {% include (app.twig_theme ~ "/Tariffs/add_tariff_plans/add_tariff_plans.js.twig") %}
    </script>

{% endblock %}


{% block content %}
    <div id="add_channel">
        {{ form_start(app['form'], {'method': 'POST', 'action': (app.request_context.baseUrl ~ '/' ~ app.controller_alias  ~ '/' ~ app.action_alias) | trans, 'attr': {'class': 'form-horizontal', 'role': 'form', 'id': 'form_'} }) }}
        {{ form_errors(app['form']) }}
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="box">
                    <div class="box-content">
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-xs-offset-1">{{ 'External ID'|trans }}</label>
                            <div class="col-xs-10 col-sm-6">
                                <div class=" col-xs-10 col-sm-6">
                                    {{ form_widget(app['form'].id, {'attr': {'class': 'form-control'} }) }}
                                    {{ form_widget(app['form'].external_id, {'attr': {'class': 'form-control',
                                        'data-validation': 'server',
                                        'data-validation-postpone': '200',
                                        'data-validation-url': app.request_context.baseUrl ~ '/'~ app.controller_alias ~'/check-external-id',
                                        'data-validation-param-name': 'externalid',
                                        'data-validation-optional': 'true'
                                    }}) }}
                                    {{ form_errors(app['form'].external_id, {'attr': {'class': 'name-check'}}) }}
                                </div>
                                <i class="i-hint"
                                    title="{{ 'Tariff identifier, can be used for external services'|trans }}. {{ 'Must be unique'|trans }}" >
                                    <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                </i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-xs-offset-1">{{ 'Tariff'|trans }}<span class="icon-required">*</span></label>
                            <div class="col-xs-10 col-sm-6">
                                <div class=" col-xs-10 col-sm-6">
                                    {{ form_widget(app['form'].name, {'attr': {'class': 'form-control',
                                        'data-validation': 'required, server',
                                        'data-validation-postpone': '200',
                                        'data-validation-url': app.request_context.baseUrl ~ '/'~ app.controller_alias ~'/check-tariff-name',
                                        'data-validation-param-name': 'name'
                                    }}) }}
                                    {{ form_errors(app['form'].name) }}
                                </div>
                                <i class="i-hint"
                                    title="{{ 'Tariff title. You can use letters, digits and symbols from the list: ! @ # $ % ^ & * ( ) _ - + : ; , .' |trans }}" >
                                    <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                </i>
                            </div>
                        </div>
                        <div class="form-group form-group-checkbox">
                            <label class="col-sm-2 control-label col-xs-offset-1">{{ 'Set as default'|trans }}</label>
                            <div class="col-xs-10 col-sm-6">
                                <div class=" col-xs-10 col-sm-8">
                                    <div class="checkbox-inline">
                                        <label>
                                            {% if( attribute(app, 'userDefault') is defined) and app.userDefault %}
                                                {{ form_widget(app['form'].user_default, {'attr': {'disabled': 'disabled' }} ) }}
                                            {% else %}
                                                {{ form_widget(app['form'].user_default ) }}
                                            {% endif %}
                                            <i class="fa fa-square-o small"></i>
                                        </label>
                                    </div>
                                    <i class="i-hint"
                                        title="{{ 'Default tariff for all new STB of the network' |trans }}" >
                                        <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                    </i>
                                    {{ form_errors(app['form'].user_default) }}
                                </div>
                                <span class="help-inline ln-18 col-sm-8">
                                    <span class="small txt-default">{{ 'To select as default, first you have to uncheck the current default tariff'|trans }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-xs-offset-1">{{ 'Service package'|trans }}</label>
                            <div class="col-xs-10 col-sm-6">
                                <div class=" col-xs-10 col-sm-6">
                                    {{ form_widget(app['form'].packages, {'attr': {'class': 'populate placeholder', 'multiple': 'multiple'} }) }}
                                    {{ form_errors(app['form'].packages) }}
                                </div>
                                <i class="i-hint"
                                    title="{{ 'Service package for the following tariff plan. You may use several packages.' |trans }}" >
                                    <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                </i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-xs-offset-1"></label>
                            <div class="col-xs-10 col-sm-6">
                                <div class=" col-xs-10 col-sm-8">
                                    {{ form_widget(app['form'].packages_optional, {'attr': {'class': 'form-control'} }) }}
                                    {{ form_errors(app['form'].packages_optional) }}
                                </div>
                                <span class="help-inline ln-18 col-sm-8">
                                    <span class="small txt-default">*{{ 'Optional default package is switched off, but it can be switched on right in the user profile'|trans }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-xs-offset-1">{{ 'Validity period, days'|trans }}</label>
                            <div class="col-xs-10 col-sm-6">
                                <div class=" col-xs-10 col-sm-6">
                                    {{ form_widget(app['form'].days_to_expires, {'attr': {'class': 'form-control', 'data-validation': 'number', 'data-validation-allowing': 'range[0;365]', 'data-validation-event': 'blur', 'data-validation-error-msg-number': 'Invalid value'|trans, 'data-validation-optional': 'true' }}) }}
                                    {{ form_errors(app['form'].days_to_expires) }}
                                </div>
                                <i class="i-hint"
                                    title="{{ 'Acceptable value is from 1 to 365. Leave empty field or 0 for unlimited validity period' |trans }}" >
                                    <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                </i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-xs-offset-1">{{ 'Notification'|trans }}</label>
                            <div class="col-xs-10 col-sm-6">
                                {% for key, notiField in app['form']['notification_delay_in_hours']%}
                                    {% set tmplField = app['form']['template_id'][key] %}
                                    {% set validation_noti_field = 'form[template_id][{n}]' | replace({'{n}': key}) %}
                                    {% set validation_tmpl_field = 'form[notification_delay_in_hours][{n}]' | replace({'{n}': key}) %}
                                <div class=" col-xs-12 col-sm-12 noti_row">
                                    <div class=" col-xs-5 col-sm-5 no-padding-left">
                                        {{ form_widget(notiField, {'attr': {'class': 'form-control form_notification_delay_in_hours populate', 'data-validation' : 'number', 'data-validation-depends-on': validation_noti_field, 'data-validation-error-msg': 'Set the sending time'| trans }}) }}
                                        {{ form_errors(notiField) }}
                                    </div>
                                    <div class=" col-xs-5 col-sm-5 no-padding-right">
                                        {{ form_widget(tmplField, {'attr': {'data-validation' : 'number', 'data-validation-depends-on': validation_tmpl_field, 'data-validation-error-msg': 'Set the notification'| trans  }}) }}
                                        {{ form_errors(tmplField) }}
                                    </div>
                                    <div class="col-xs-2">
                                        <button type="button" class="btn btn-default del_noti_row" data-rownum="{{ key }}" title="{{ 'Remove notification'|trans }}"><i class="fa fa-minus"></i></button>
                                    </div>
                                    <div class="col-sm-12">&nbsp;</div>
                                </div>
                                {% endfor %}
                                <div class=" col-xs-12 col-sm-12">
                                    <div class=" col-xs-6 col-sm-5 no-padding-left center">
                                        <button type="button" class="btn btn-default" id="add_noti_row">{{ 'Add notification'|trans }}</button>
                                    </div>
                                    <div class=" col-xs-6 col-sm-5 no-padding-right center">
                                        <button type="button" class="btn btn-default" id="add_noti_template">{{ 'Add noification message'|trans }}</button>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="form-buttons col-sm-12">
                    <div class="box">
                        <div class="box-content">
                            <div class="row">
                                <div class="col-xs-10 col-sm-8 pull-right">
                                    {{ form_widget(app['form'].save, { 'label': 'Save'|trans , attr: {'class': 'btn btn-success pull-right'} }) }}
                                    <a href="{{app.request_context.baseUrl}}/{{app.controller_alias}}/tariff-plans" class="btn btn-default pull-right">{{ 'Cancel'|trans }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: none;">
            {{ form_rest(app.form) }}
        </div>
        {{ form_end(app['form']) }}  
    </div>

    <script type="text/template" id="modal_form_body">
        <div class="box-content">
            <form class="form-horizontal" id="save_message_template" role="form" action="{{ app.request_context.baseUrl }}/events/save-message-template">
                <div class="form-group">
                    <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Template name'|trans }}<span class="icon-required">*</span></label>
                    <div class="col-xs-10 col-sm-6">
                        <span class="col-xs-12 col-sm-12">
                            <input type="hidden" class="own_fields" name="action" value="updateFormField">
                            <input type="hidden" class="own_fields" name="msg_tpl[id]" value="">
                            <input type="hidden" class="own_fields" name="msg_tpl[admin_id]" value="{% if attribute(app, 'user_id') is defined %}{{ app.user_id }}{% endif %}">
                            <input type="text" class="own_fields form-control" name="msg_tpl[title]" value="" data-validation=required>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Header'|trans }}<span class="icon-required">*</span></label>
                    <div class="col-xs-10 col-sm-6">
                        <span class="col-xs-12 col-sm-12">
                            <input type="text" class="own_fields form-control" name="msg_tpl[header]" value="" data-validation=required>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Text'|trans }}<span class="icon-required">*</span></label>
                    <div class="col-xs-10 col-sm-6">
                        <span class="col-xs-12 col-sm-12">
                            <textarea class="own_fields form-control" name="msg_tpl[body]" data-validation=required ></textarea>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label col-sm-offset-1">{{ 'URL'|trans }}</label>
                    <div class="col-xs-10 col-sm-6">
                        <span class="col-xs-12 col-sm-12">
                            <input type="text" class="own_fields form-control" name="msg_tpl[url]" value="">
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </script>

    <script type="text/template" id="modal_form_buttons">
        <div class="col-xs-12">
            <button type="submit" class="btn btn-success col-sm-2 pull-right">{{ 'Save'|trans }}</button>
            <button type="reset"  class="btn btn-default col-sm-2 pull-right" >{{ 'Cancel'|trans }}</button>
        </div>
    </script>

    <script type="text/template" id="noti_row_tmpl">
        <div class=" col-xs-12 col-sm-12 noti_row">
            <div class=" col-xs-5 col-sm-5 no-padding-left">
                <select id="form_notification_delay_in_hours_${num}" name="form[notification_delay_in_hours][${num}]" required="required" class="form-control form_notification_delay_in_hours populate placeholder" data-validation="number" data-validation-depends-on="form[template_id][${num}]" data-validation-error-msg="{{ 'Set the sending time'| trans }}">
                    {% autoescape false %}
                        {% if attribute(app, 'notification_delay_labels') is defined %}
                            {% for key, row in app.notification_delay_labels %}
                                <option value="{{ key }}" >{{ row ? row : '&nbsp;' }}</option>
                            {% endfor %}
                        {% endif %}
                    {% endautoescape %}
                </select>
                <div class="bg-danger"></div>
            </div>
            <div class=" col-xs-5 col-sm-5 no-padding-right">
                <select id="form_template_id_${num}" name="form[template_id][${num}]" required="required" class="form-control form_template populate placeholder" data-validation="number" data-validation-depends-on="form[notification_delay_in_hours][${num}]" data-validation-error-msg="{{ 'Set the notification'|trans }}">
                    {% autoescape false %}
                        {% if attribute(app, 'notification_templates') is defined %}
                            {% for key, row in app.notification_templates %}
                                <option value="{{ key }}" >{{ row ? row : '&nbsp;' }}</option>
                            {% endfor %}
                        {% endif %}
                    {% endautoescape %}
                </select>
                <div class="bg-danger"></div>
            </div>
            <div class="col-xs-2">
                <button type="button" class="btn btn-default del_noti_row" data-rownum="${num}" title="{{ 'Remove notification'|trans }}"><i class="fa fa-minus"></i></button>
            </div>
            <div class="col-sm-12">&nbsp;</div>
        </div>
    </script>

{% endblock %}