{extends file="layout.html"}
{block name=title}LMS: {$layout.pagetitle|striphtml}{/block}
{block name=module_content}
<!--// $Id$ //-->
{$xajax}
<h1>{trans("Tariff rules")}</h1>

<style>

    #tariff-rule-add {
        margin-top: 0.7em;
        width: min-content;
    }

    #tariff-rule-list caption,
    #tariff-rule-add caption {
        text-align: left;
        font-weight: bold;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }

    #tariff-rule-list thead {
        border-bottom: 1px dotted gray;
    }

    #tariff-rule-list tr td:first-child,
    #tariff-rule-add tr td:first-child {
        min-width: 30px;
    }

    #tariff-rule-list tr td {
        min-width: 75px;
        padding-right: 10px;
    }

    #tariff-rule-list thead {
        font-weight: bold;
    }

</style>

<form name="voiptariffrules" id="voiptariffrules" method="post" action="?m=voiptariffrules{if isset($rule.id)}&id={$rule.id}{/if}">
    <table class="lmsbox">
        <thead>
            <tr>
                <td class="bold" width="40%" colspan="2">
                    <img src="img/add.gif" alt=""> {trans("Create")} / {trans("Edit")}
                </td>
            </tr>
        </thead>
        <tbody id="voiptariffrules-add">
            <tr>
                <td style="vertical-align: top;">
                    <table>
                        <tr>
                            <td><img src="img/size.gif" alt=""></td>
                            <td>
                                <strong>{trans("Tariff rule")}</strong>
                            </td>
                            <td>
                                <select id="tariff-rule-select" style="width: 200px;">
                                    <option value="">--</option>
                                    {if !empty($rule_list)}
                                        {foreach from=$rule_list item=single_rule}
                                        <option value="{$single_rule.id}" {if !empty($rule.id) && $rule.id == $single_rule.id}SELECTED{/if}>
                                            {$single_rule.name}
                                        </option>
                                        {/foreach}
                                    {/if}
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                            <td>
                                {button type="link" label="load<!voip>" icon="save" id="tariff-rule-load"}
                                {button type="link" label="Delete" icon="delete" id="tariff-rule-delete"}
                            </td>
                        </tr>
                        <tr class="space_row">
                            <td><img src="img/customer.gif" alt=""></td>
                            <td><b>{trans("Name:")}</b></td>
                            <td>
                                {if isset($rule.id)}
                                <input type="hidden"
                                       name="rule[id]"
                                       value="{$rule.id}">
                                {/if}
                                <input type="text"
                                       id="rule_name"
                                       name="rule[name]"
                                       value="{if isset($rule.name)}{$rule.name}{/if}"
                                       style="width: 200px;"
                                       maxlength="100"
                                       {tip text="Enter tariff name" trigger="name"}>
                            </td>
                        </tr>
                        <tr>
                            <td><img src="img/desc.gif" alt=""></td>
                            <td><b>{trans("Description:")}</td>
                            <td>
                                <textarea name="rule[description]" style="width: 200px;">{if isset($rule.description)}{$rule.description}{/if}</textarea>
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="vertical-align: top;">
                    <fieldset style="display: block; min-width: 30%;">
                        <legend>
                            <strong>{trans("<!voip>Tariff rule information details")}</strong>
                        </legend>

                        <table id="tariff-rule-list" class="lmsbox-inner lms-ui-background-cycle">
                            <caption>
                                {trans("<!voip>Prefix groups")}
                            </caption>
                            <thead>
                                <tr class="dark">
                                    <td>{trans("No.")}</td>
                                    <td style="width: 230px;">{trans("Name")}</td>
                                    <td {tip text="Price per single unit"}>{trans("Price")}</td>
                                    <td {tip text="Number of units at a promotion price"}>{trans("Number of units")}</td>
                                    <td {tip text="Unit size in seconds"}>{trans("Unit size<!voip>")}</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                {if !empty($rule)}
                                    {foreach $rule.group as $group}
                                        {$row_id = $group.ruleid}
                                        {$iteration = $group@iteration}
                                        {include file="voipaccount/voiptarifftablerow.html"}
                                    {/foreach}
                                {/if}
                            </tbody>
                        </table>

                        <div id="no-tariff-rules" class="lucid" style="text-align: center; padding: 10px; font-weight: bold;{if empty($rule)} display: none;{/if}">
                            {trans("No prefix groups assigned to tariff rule.")}
                        </div>

                        <table id="tariff-rule-add" class="lmsbox-inner">
                            <colgroup>
                                <col style="width: 1%;">
                                <col style="width: 1%;">
                                <col style="width: 1%;">
                                <col style="width: 1%;">
                                <col style="width: 1%;">
                            </colgroup>
                            <caption>
                                {trans("<!voip>Add prefix group")}
                            </caption>
                            <tr>
                                <td>
                                    <input type="search"
                                        id="prefix-group-search"
                                        placeholder="{trans("Name")}"
                                        {tip class="autosuggest-bottom" trigger="prefix-group-search"}>
                                </td>
                                <td>
                                    <input type="text"
                                           id="default_price"
                                           name="rule[default][price]"
                                           value="{if isset($rule.default.price)}{$rule.default.price}{/if}"
                                           placeholder="{trans("default")}"
                                            {tip text="Enter default price"}>
                                </td>
                                <td>
                                    <input type="text"
                                           id="default_units"
                                           name="rule[default][units]"
                                           value="{if isset($rule.default.units)}{$rule.default.units}{/if}"
                                           placeholder="{trans("default")}"
                                            {tip text="Enter default number of units"}>
                                </td>
                                <td>
                                    <input type="text"
                                           id="default_unit_size"
                                           name="rule[default][unit_size]"
                                           value="{if isset($rule.default.unit_size)}{$rule.default.unit_size}{/if}"
                                           placeholder="{trans("default")}"
                                            {tip text="Enter default size of units"}>
                                </td>
                                <td>
                                    {button type="link" href="javascript:add()" icon="add" tip="Add"}
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>

            <tr>
                <td class="lms-ui-box-buttons" colspan="2">
                    {button icon="save" label="Submit" id="tariff-rule-submit-button"}
                    {button icon="cancel" label="Cancel" href="?m={if $customerinfo.id}customerinfo&id={$customerinfo.id}{else}voipaccountlist{/if}"}
                </td>
            </tr>
        </tbody>
    </table>
</form>

<script>

    var table = $('#tariff-rule-list');
    var group_search_input = $('#prefix-group-search');
    var rule_list = $('#tariff-rule-select');

    // get default price for new groups
    function getDefaultPrice() {
        return document.getElementById("default_price").value;
    }

    //get default number of units to use for new groups
    function getDefaultUnits() {
        return document.getElementById("default_units").value;
    }

    //get default unit size for new groups
    function getDefaultUnitSize() {
        return document.getElementById("default_unit_size").value;
    }

    // get table row by id
    function getGroupRow( id ) {
        return document.getElementById(id);
    }

    // delete table row by id
    function deleteRow( id ) {
        var row = $('#' + id);

        if (row) {
            row.remove();
        }

        groupsTableInfoUpdate();
    }

    // send add request to xajax
    function add() {
        var name = group_search_input.val();

        xajax_getGroupTableRow(name,
                               getDefaultPrice(),
                               getDefaultUnits(),
                               getDefaultUnitSize());
    }

    // xajax response
    function addGroup( row ) {
        var id   = row[0];
        var html = row[1];

        if (!id || getGroupRow(id)) {
            return 0;
        }

        group_search_input.val('');

        var tr = $(html);
        tr.find('.number').html(table.find('tbody tr').length + 1);
        table.find('tbody').append(tr);

        groupsTableInfoUpdate();
    }

    // load tariffs
    function loadTariff() {
        var id = rule_list.val();

        if (!id.length) {
            return 0;
        }

        window.location.href = "?m=voiptariffrules&id=" + rule_list.val();
    }

    // delete tariff
    function deleteTariff() {
        var id = rule_list.val();

        if (!id.length) {
            return 0;
        }

        confirmDialog($t("Are you sure that you want remove tariff rule '$a'?", rule_list.find(':selected').text()), $('#tariff-rule-delete')).done(function() {
            window.location.href = "?m=voiptariffrules&id=" + rule_list.val() + "&action=delete";
        });
        return 0;
    }

    // groups table is empty check
    function groupsTableInfoUpdate() {
        $('#no-tariff-rules').toggle(!table.find('tbody tr').length);
    }

    groupsTableInfoUpdate();
    new AutoSuggest(document.getElementById('voiptariffrules'),group_search_input.get(0),'?m=voiptariffrules&ajax=1&mode=group&what=',0);

    $(function() {
        $('#tariff-rule-submit-button').click(function() {
            $('#voiptariffrules').submit();
        });

        $('#tariff-rule-load').click(function() {
            loadTariff();
        });

        $('#tariff-rule-delete').click(function() {
            deleteTariff();
        });
    });

</script>
{/block}