{% extends request.is_ajax|yesno:'bajax.html,base.html' %}
{% load i18n %}

{% block title %}{% trans 'Pick a service' %}{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span></li>
        <li><a href="{% url 'abonapp:group_list' %}">{% trans 'User groups' %}</a></li>
        <li><a href="{% url 'abonapp:people_list' group.pk %}">{{ group.title }}</a></li>
        <li><a href="{% url 'abonapp:abon_home' group.pk abon.username %}">{{ abon.fio }}</a></li>
        <li class="active">{% trans 'Pick a service' %}</li>
    </ol>
{% endblock %}

{% block page-header %}
    {% trans 'Pick a service' %}
{% endblock %}

{% block main %}

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans 'Pick a service for' %}
                <a href="{% url 'abonapp:abon_home' group.pk abon.username %}"><u>{% trans 'Sub' %}</u></a>
            </h3>
        </div>
        <div class="panel-body">
            <form role="form" action="{% url 'abonapp:pick_tariff' group.pk abon.username %}"
                  method="post">{% csrf_token %}
                <div class="form-group">
                    {% if tariffs %}
                        <label for="id_tariffs">{% trans 'Pick a service' %}</label>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-bullhorn"></span></span>
                            <select class="form-control" name="tariff" id="id_tariffs">
                                {% for trf in tariffs %}
                                    {% if trf == selected_tariff %}
                                        <option value="{{ trf.pk }}" data-deadline='{{ trf.calc_deadline|date:"Y-m-d\TH:i" }}' selected>
                                    {% else %}
                                        <option value="{{ trf.pk }}" data-deadline='{{ trf.calc_deadline|date:"Y-m-d\TH:i" }}'>
                                    {% endif %}
                                    {{ trf.title }}. {{ trf.amount }}{% trans 'currency' %} (Вх:{{ trf.speedIn }}MBit/s. Исх:{{ trf.speedOut }} MBit/s)
                                        </option>
                                {% endfor %}
                            </select>
                        </div>
                        {% if not abon.active_tariff %}
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                {% if selected_tariff %}
                                    <input type="datetime-local" class="form-control" name="deadline" id="id_deadline" value="{{ selected_tariff.calc_deadline|date:'Y-m-d\TH:i' }}">
                                {% else %}
                                    <input type="datetime-local" class="form-control" name="deadline" id="id_deadline" value="{{ tariffs.0.calc_deadline|date:'Y-m-d\TH:i' }}">
                                {% endif %}
                                <script type="text/javascript">
                                    $(function () {
                                        $('#id_tariffs').on('change', function(){
                                            let a = $(this).find('option:selected');
                                            $('#id_deadline').val(a.attr('data-deadline'));
                                        });
                                    });
                                </script>
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-danger" role="alert">
                            <span class="glyphicon glyphicon-exclamation-sign"></span>
                            {% trans 'This group has no services' %},
                            <a href="{% url 'abonapp:ch_group_tariff' group.pk %}">
                                {% trans 'Attach serices to groups' %}
                            </a>
                        </div>

                    {% endif %}
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn btn-sm btn-primary"{% if not tariffs %} disabled{% endif %}>
                        <span class="glyphicon glyphicon-save"></span> {% trans 'Save' %}
                    </button>
                    <button type="reset" class="btn btn-sm btn-default"{% if not tariffs %} disabled{% endif %}>
                        <span class="glyphicon glyphicon-remove-circle"></span> {% trans 'Reset' %}
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}