<!--// $Id$ //-->

{assign var=remove_number value='<span class="ui-icon ui-icon-closethick remove-number"></span>'}

{if $pool_list}
    {assign var=pool_number_select value='<span class="ui-icon ui-icon-clipboard show-pool-list"></span>'}
    {include file='voipaccount/voipaccountaddboxdialog.html'}
{else}
    {assign var=pool_number_select value=''}
{/if}

<style>

    .voipaccount-data {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .voipaccount-data > div {
        flex-grow: 1;
    }

    #voipaccount-right-panel {
        margin-right: 2em;
    }

    .phone-table tr:hover td:nth-child(2) div span {
        visibility: visible;
        cursor: pointer;
    }

    .phone-table tr td:nth-child(2) div span {
        visibility: hidden;
    }

    .phone-table .phone-number,
    .phone-table .phone-info {
        width: 10em;
    }

    .phone-table .phone-info {
        margin-left: 0.5em;
    }

</style>

<form name="editvoipaccount" id="editvoipaccount" method="post" action="?m=voipaccountedit&id={$voipaccountinfo.id}">
    <input type="submit" class="hiddenbtn">
    <input type="hidden" name="voipaccountedit[id]" value="{$voipaccountinfo.id}">
    <table class="lmsbox">
        <colgroup>
            <col style="width: 1%;">
            <col style="width: 1%;">
            <col style="width: 98%;">
        </colgroup>
        <thead>
            {block name="voipaccounteditbox-login"}
            <tr>
                <td>
                    <img src="img/voip.gif" alt="{trans("Login:")}">
                </td>
                <td class="bold nobr" style="padding: 2px;">
                    {trans("Login:")}
                </td>
                <td>
                    <input type="text" name="voipaccountedit[login]" value="{$voipaccountinfo.login}" maxlength="32" size="30" {tip text="Enter VoIP account login" trigger="login" bold=1}>
                    ({$voipaccountinfo.id|string_format:"%04d"})
                </td>
            </tr>
            {/block}
        </thead>
        <tbody>
            <tr>
                <td colspan="3" class="container">
                    <table width="100%" celpadding="0">
                        <tr>
                            <td class="voipaccount-data">
                                <div id="voipaccount-left-panel">
                                    <TABLE>
                                        <COLGROUP>
                                            <COL style="width: 1%;">
                                            <COL style="width: 1%;">
                                            <COL style="width: 99%;">
                                        </COLGROUP>
                                        {block name="voipaccounteditbox-password"}
                                        <tr>
                                            <td>
                                                <img src="img/passwd.gif" alt="{trans("Password:")}">
                                            </td>
                                            <td class="bold nobr">
                                                {trans("Password:")}
                                            </td>
                                            <td>
                                                <input type="{if ConfigHelper::checkPrivilege('hide_voip_passwords')}password{else}text{/if}" name="voipaccountedit[passwd]" value="{$voipaccountinfo.passwd}" {tip text="Enter password" trigger="passwd"}>
                                                <a href="#" id="genpasswd"  {tip text="Click to generate random password"}>&raquo;&raquo;&raquo;</a>
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-phone"}
                                        <tr>
                                            <td class="valign-top">
                                                <img src="img/phone.gif" alt="{trans("Phone number")}">
                                            </td>
                                            <td class="bold nobr valign-top" style="padding-top: 4px;">
                                                {trans("Phone number")}
                                            </td>
                                            <td class="valign-top" style="padding:0;">
                                                <table id="phone_numbers_table" class="phone-table">
                                                    <tr>
                                                        <td>
                                                            {strip}
                                                            <input type="tel" name="voipaccountedit[numbers][0][phone]"
                                                                value="{$voipaccountinfo.numbers[0].phone}"
                                                                placeholder="{trans("<!phone>number")}"
                                                                {tip class="phone-number" trigger="phone-number-0"}>
                                                            <input type="search" name="voipaccountedit[numbers][0][info]"
                                                                value="{$voipaccountinfo.numbers[0].info|default:""|escape}"
                                                                placeholder="{trans("description")}"
                                                                autocomplete="off"
                                                                {tip class="phone-info" trigger="phone-info-0"}>
                                                            {/strip}
                                                        </td>
                                                        <td>
                                                            <div>
                                                                {$pool_number_select}
                                                                <span class="ui-icon ui-icon-closethick remove-number{if empty($voipaccountinfo.phones) || count($voipaccountinfo.phones) < 2} lms-ui-visibility-hidden{/if}"></span>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    {if !empty($voipaccountinfo['numbers'])}
                                                        {foreach $voipaccountinfo['numbers'] as $k => $v}
                                                            {if $v@first || $v.phone == ''}{continue}{/if}
                                                            <tr class="row">
                                                                <td>
                                                                    {strip}
                                                                    <input type="tel" name="voipaccountedit[numbers][{$k}][phone]"
                                                                        value="{$v.phone}" placeholder="{trans("<!phone>number")}"
                                                                        {tip class="phone-number" trigger="phone-number-{$k}"}>
                                                                    <input type="search" name="voipaccountedit[numbers][{$k}][info]"
                                                                        value="{$v.info|default:""|escape}"
                                                                        placeholder="{trans("description")}"
                                                                        autocomplete="off"
                                                                        {tip class="phone-info" trigger="phone-info-{$k}"}>
                                                                    {/strip}
                                                                </td>
                                                                <td><div>{$pool_number_select} {$remove_number}</div></td>
                                                            </tr>
                                                        {/foreach}
                                                    {/if}
                                                </table>
                                                <a href="#" id="add_number"><span class="ui-icon ui-icon-plusthick"></span> {trans("add next")}</a>
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-status"}
                                        <tr>
                                            <td>
                                                <img src="img/{if ! $voipaccountinfo.access}no{/if}access.gif" alt="">
                                            </td>
                                            <td class="bold nobr">
                                                {trans("Status:")}
                                            </td>
                                            <td>
                                                <select size="1" name="voipaccountedit[access]" {tip text="Select node status" trigger="access"}>
                                                    <option value="1"{if $voipaccountinfo.access} selected{/if}>{trans("connected<!singular>")}</option>
                                                    <option value="0"{if ! $voipaccountinfo.access} selected{/if}>{trans("disconnected<!singular>")}</option>
                                                </select>
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-cost_limit"}
                                        <tr>
                                             <td>
                                                <img src="img/money.gif" alt="">
                                            </td>
                                            <td class="bold nobr">
                                                {trans("Cost limit:")}
                                            </td>
                                            <td>
                                                {if ConfigHelper::checkPrivilege('superuser')}
                                                    <input type="text"
                                                           name="voipaccountedit[cost_limit]"
                                                           value="{$voipaccountinfo.cost_limit}"
                                                           placeholder="{trans("default")}: {ConfigHelper::getConfig('voip.default_cost_limit')|money_format}">
                                                {else}
                                                    {$voipaccountinfo.cost_limit|money_format}
                                                {/if}
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-balance"}
                                        <tr>
                                            <td>
                                                <img src="img/money.gif" alt="">
                                            </td>
                                            <td class="bold nobr">
                                                {trans("Balance:<!voip>")}
                                            </td>
                                            <td>
                                                {if ConfigHelper::checkPrivilege('superuser')}
                                                    <input type="text" name="voipaccountedit[balance]" value="{$voipaccountinfo.balance}">
                                                {else}
                                                    {$voipaccountinfo.balance}
                                                {/if}
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-customer"}
                                        <tr>
                                            <td>
                                                <img src="img/customer.gif" alt="{trans("Customer:")}">
                                            </td>
                                            <td class="bold nobr" >
                                                {trans("Customer:")}
                                            </td>
                                            <td>
                                                {customerlist
                                                    form="editvoipaccount"
                                                    customers=$customers
                                                    selected=$voipaccountinfo.ownerid
                                                    selectname="voipaccountedit[customerid]"
                                                    inputname="voipaccountedit[ownerid]"
                                                    trigger="voipaccountedit[ownerid]"
                                                    customOnChange="customer_change();"
                                                    required=true
                                                    version=2
                                                }
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-location"}
                                        <tr>
                                            <td>
                                                <img src="img/home.gif" alt="{trans('Location:')}">
                                            </td>
                                            <td class="bold nobr">
                                                 {trans("Location:")}
                                            </td>
                                            <td>
                                                <select id="customer_addresses" name="voipaccountedit[address_id]" {tip text="Select address" trigger="voipaccountedit[address_id]"}></select>
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-serviceprovider"}
                                            {if !empty($serviceproviders)}
                                                <tr>
                                                    <td>
                                                        {icon name="service"}
                                                    </td>
                                                    <td class="nobr">
                                                        <strong>{trans("Service provider")}</strong>
                                                    </td>
                                                    <td>
                                                        <select name="voipaccountedit[serviceproviderid]">
                                                            <option value="">{trans("— select —")}</option>
                                                            {foreach $serviceproviders as $serviceprovider}
                                                                <option value="{$serviceprovider.id}"
                                                                    {if $serviceprovider.id == $voipaccountinfo.serviceproviderid} selected{/if}
                                                                    >{$serviceprovider.name|escape}</option>
                                                            {/foreach}
                                                        </select>
                                                    </td>
                                                </tr>
                                            {/if}
                                        {/block}
                                        {block name="voipaccounteditbox-flags"}
                                        <tr>
                                            <td class="valign-top">
                                                <img src="img/settings.gif" alt="">
                                            </td>
                                            <td class="bold nobr valign-top" style="padding-top: 4px;">
                                                {trans("Settings:")}
                                            </td>
                                            <td>
                                                <label>
                                                    <input type="checkbox" name="voipaccountedit[{$smarty.const.VOIP_ACCOUNT_FLAG_ADMIN_RECORDING}]" value="yes"
                                                        {if $voipaccountinfo.flags & $smarty.const.VOIP_ACCOUNT_FLAG_ADMIN_RECORDING} checked{/if}>
                                                    {trans("recording for operator")}
                                                </label>
                                                <br>

                                                <label>
                                                    <input type="checkbox" name="voipaccountedit[{$smarty.const.VOIP_ACCOUNT_FLAG_CUSTOMER_RECORDING}]" value="yes"
                                                        {if $voipaccountinfo.flags & $smarty.const.VOIP_ACCOUNT_FLAG_CUSTOMER_RECORDING} checked{/if}>
                                                    {trans("recording for customer")}
                                                </label>
                                                <br>

                                                <label>
                                                    <input type="checkbox" name="voipaccountedit[{$smarty.const.VOIP_ACCOUNT_FLAG_TRUNK}]" value="yes"
                                                        {if $voipaccountinfo.flags & $smarty.const.VOIP_ACCOUNT_FLAG_TRUNK} checked{/if}>
                                                    {trans("<!voip-account>trunk")}
                                                </label>
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-events"}
                                        <tr>
                                            <td class="valign-top">
                                                <img src="img/info.gif" alt="">
                                            </td>
                                            <td class="bold nobr">
                                                {trans("Created:")}
                                                {if $voipaccountinfo.moddate}
                                                    <br>{trans("Modified:")}
                                                {/if}
                                            </td>
                                            <td>
                                                {$voipaccountinfo.createdby|escape}, {$voipaccountinfo.creationdateh}
                                                {if $voipaccountinfo.moddate}<br>{$voipaccountinfo.modifiedby|escape}, {$voipaccountinfo.moddateh}{/if}
                                            </td>
                                        </tr>
                                        {/block}
                                        {block name="voipaccounteditbox-extra"}{/block}
                                    </TABLE>
                                </div>
                                <div id="voipaccount-right-panel">
                                    <TABLE>
                                        <COLGROUP>
                                            <COL style="width: 1%;">
                                            <COL style="width: 99%;">
                                        </COLGROUP>
                                        <tr>
                                            <TD>
                                                <IMG src="img/info1.gif" alt="">
                                            </TD>
                                            <TD>
                                                <TEXTAREA name="voipaccountedit[description]" class="lms-ui-wysiwyg-editor"
                                                          COLS="60" ROWS="10" {tip text="Enter additional information (optional)"}
                                                        {if isset($voipaccountinfo.wysiwyg.description)}
                                                    data-wysiwyg="{$voipaccountinfo.wysiwyg.description}"
                                                    {/if}>{$voipaccountinfo.description|escape}</TEXTAREA>
                                            </TD>
                                        </tr>
                                    </TABLE>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="lms-ui-box-buttons" colspan="3">
                    {block name="voipaccounteditbox-buttons"}
                        {button type="submit" class="lms-ui-button-submit" accesskey="s" label="Submit" icon="save" form="editvoipaccount"}
                        {button href="?m=voipaccountinfo&id={$voipaccountinfo.id}" label="Cancel" icon="cancel"}
                    {/block}
                </td>
            </tr>
        </tbody>
    </table>
</form>

<script>

    var remove_number      = '{$remove_number}';
    var pool_number_select = '{$pool_number_select}';
    initAdvancedSelectsTest("#customer_addresses");

	function checkIfTerritLocation() {
		{$terytRequired = ConfigHelper::getConfig('phpui.teryt_required', 'false')}
		{if $terytRequired == 'warning'}
			var ca = $('#customer_addresses');
			var option = ca.find('option[value="' + ca.val() + '"]');
			if (territ = option.attr('data-territ')) {
				ca.next().find('.select2-selection').toggleClass('lms-ui-warning', !parseInt(territ));
			} else {
				ca.next().find('.select2-selection').addClass('lms-ui-warning');
			}
		{elseif $terytRequired == 'error' || ConfigHelper::checkValue($terytRequired)}
			var ca = $('#customer_addresses');
			var option = ca.find('option[value="' + ca.val() + '"]');
			if (territ = option.attr('data-territ')) {
				ca.next().find('.select2-selection').toggleClass('lms-ui-error', !parseInt(territ));
			} else {
				ca.next().find('.select2-selection').addClass('lms-ui-error');
			}
		{/if}
	}

    $(function() {
        $('[name="voipaccountedit[login]"]').focus();

        $('[name="voipaccountedit[ownerid]"]').on('invalid', function(e) {
            e.preventDefault();
        });

        $i = {if !isset($phone_next_index)}0{else}{$phone_next_index}{/if};

        $('#add_number').on('click', function () {
            var table = $('#phone_numbers_table');
            var i = table.find('[type="tel"]').length;
            var phone_number_input = '<input type="tel" name="voipaccountedit[numbers][' + i +'][phone]" placeholder="{trans("<!phone>number")}" {tip class="phone-number" trigger="phone-number"}>' +
                '<input type="search" name="voipaccountedit[numbers][' + i + '][info]" placeholder="{trans("description")}" autocomplete="off" {tip class="phone-info" trigger="phone-info"}>';
            table.append('<tr class="row"><td>' + phone_number_input + '</td><td><div>' + pool_number_select + ' ' + remove_number + '</div></td></tr>');
            var numbers = table.find('.remove-number');
            numbers.toggleClass('lms-ui-visibility-hidden', numbers.length < 2);
        });

        $( "body" ).on('click', '.remove-number', function() {
            $(this).closest('tr').remove();
            var numbers = $('#phone_numbers_table .remove-number');
            numbers.toggleClass('lms-ui-visibility-hidden', numbers.length < 2);
        });

        $( "#phone_numbers_table" ).sortable({
            items: ">tbody tr",
            update: function(event, ui) {
                $.each( $( "#phone_numbers_table .remove-number" ), function( i ) {
                    if (i == 0 && !$( this ).hasClass( "lms-ui-visibility-hidden" )) {
                        $( this ).addClass( "lms-ui-visibility-hidden" );
                    } else if ( i != 0 && $( this ).hasClass( "lms-ui-visibility-hidden" ) ){
                        $( this ).removeClass( "lms-ui-visibility-hidden" );
                    }
                });
            }
        });

        $("#genpasswd").click(function() {
            var length = {ConfigHelper::getConfig('phpui.voipaccount_password_length', '16')};
            if (length > 32) length = 32;

            $('[name="voipaccountedit[passwd]"]').val(
                generate_random_string(length, "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789")
            );
        });

        $('#customer_addresses').change(function() {
            checkIfTerritLocation();
        });
    });

    /*!
     * \brief Update addresses list on customer change.
     */
    function customer_change() {
        getCustomerAddresses($('[name="voipaccountedit[ownerid]"]').val(), function(addresses) {
            setAddressList("#customer_addresses", addresses);
            checkIfTerritLocation();
        });
    }

    getCustomerAddresses($('[name="voipaccountedit[ownerid]"]').val(), function(addresses) {
        setAddressList("#customer_addresses", addresses);

        {if $voipaccountinfo.address_id}
            $('#customer_addresses').val({$voipaccountinfo.address_id});
            updateAdvancedSelectsTest("#customer_addresses");
        {/if}

        checkIfTerritLocation();
    });

</script>
