{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% set active_menu = 'order' %}

{% import "macro_functions.html.twig" as mf %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'order'|alink }}">{{ 'Orders'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Create new order'|trans }}</li>
    </ol>
{% endblock %}

{% block meta_title %}{{ 'Create new order'|trans }}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <h3>{{ 'Create new order'|trans }}</h3>
        <p class="text-muted">{{ product.title }} {{ 'for'|trans }} {{ client.first_name }} {{ client.last_name }}</h2>

        <form method="post" action="{{ 'api/admin/order/create'|link }}" class="api-form" data-api-jsonp="onAfterOrderPlaced">
            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
            <div class="mb-3 row">
                <label class="form-label col-3 col-form-label">{{ 'Invoice option'|trans }}</label>
                <div class="col">
                    {{ mf.selectbox('invoice_option', admin.order_get_invoice_options, order.invoice_option) }}
                </div>
            </div>
            <div class="mb-3 row">
                <label class="form-label col-3 col-form-label">{{ 'Activate order'|trans }}:</label>
                <div class="col">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" id="radioEnabledYes" type="radio" name="activate" value="1" checked>
                        <label class="form-check-label" for="radioEnabledYes">{{ 'Yes'|trans }}</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" id="radioEnabledNo" type="radio" name="activate" value="0">
                        <label class="form-check-label" for="radioEnabledNo">{{ 'No'|trans }}</label>
                    </div>
                </div>
            </div>
            {% if product.pricing.type == 'recurrent' %}
            <div class="mb-3 row">
                <label class="form-label col-3 col-form-label">{{ 'Period'|trans }}</label>
                <div class="col">
                    <select class="form-select" name="period" id="period" required>
                        {% for val,label in guest.system_periods %}
                        <option value="{{ val }}" label="{{ label|e }}" data-price="{{ product.pricing.recurrent[val].price }}" data-status="{{ product.pricing.recurrent[val].enabled }}" {% if request.period == val %}selected="selected"{% endif %}>{{ label|e }}</option>
                        {% endfor %}
                    </select>
                    <span id="period-info" class="help"></span>
                </div>
            </div>
            {% endif %}

            {% set product_order = 'mod_service' ~ product.type ~ '_order.html.twig' %}
            {% if admin.system_template_exists({ 'file': product_order }) %}
                {% include product_order %}
            {% endif %}

            <input type="hidden" name="client_id" value="{{ client.id }}">
            <input type="hidden" name="product_id" value="{{ product.id }}">
            <input type="submit" value="{{ 'Place new order'|trans }}" class="btn btn-primary">
        </form>
    </div>
</div>
{% endblock %}

{% block js%}
<script>
    function onAfterOrderPlaced(id) {
        bb.redirect("{{ 'order/manage/'|alink }}/" + id);
    }

    $('#period').on('change', function() {
        var optionSelected = $("option:selected", this);
        var periodNotification = $('#period-info');
        var spanElem = $('<span />').css({'padding-left': '20px', 'line-height': '28px', 'float': 'left'});

        periodNotification.text('');

        if (optionSelected.data('price') == 0){
            spanElem.clone().text("{{ 'Selected price is 0.00'|trans }}").appendTo(periodNotification);
        }

        if (optionSelected.data('status') == 0){
            spanElem.clone().text("{{ 'Product is disabled in configuration'|trans }}").appendTo(periodNotification);
        }
    });
</script>
{% endblock %}
