<!--// $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="voipaccountadd" id="voipaccountadd" method="post" action="?m=voipaccountadd{if $customerinfo.id}&ownerid={$customerinfo.id}{/if}">
    <input type="submit" class="hiddenbtn">

    <table class="lmsbox">
        <colgroup>
            <col style="width: 1%;"/>
            <col style="width: 98%;"/>
        </colgroup>
        <thead>
            {block name="voipaccountaddbox-login"}
            <tr>
                <td class="bold nobr">
                    <img src="img/creditor.gif" alt="{trans("Login:")}">
                    {trans("Login:")}
                </td>
                <td>
                    <input type="text" id="voip-login" name="voipaccountdata[login]" value="{$voipaccountdata.login}" maxlength="32" size="20" {tip text="Enter VoIP account login" trigger="login" bold=1}>
                </td>
            </tr>
            {/block}
        </thead>
        <tbody>
            <tr>
                <td colspan="2" 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: 99%;">
                                        </COLGROUP>
                                        {block name="voipaccountaddbox-password"}
                                            <tr>
                                                <td class="bold nobr">
                                                    <img src="img/passwd.gif" alt="{trans("Password:")}">
                                                    {trans("Password:")}
                                                </td>
                                                <td>
                                                    <input type="{if ConfigHelper::checkPrivilege('hide_voip_passwords')}password{else}text{/if}" name="voipaccountdata[passwd]" value="{$voipaccountdata.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="voipaccountaddbox-phone"}
                                            <tr>
                                                <td style="padding-top: 2px;" class="bold nobr valign-top">
                                                    <img src="img/phone.gif" alt="{trans("Phone number:")}">
                                                    {trans("Phone number:")}
                                                </td>
                                                <td style="padding: 0;" class="valign-top">
                                                    <table id="phone_numbers_table" class="phone-table">
                                                        <tr>
                                                            <td>
                                                                {strip}
                                                                <input type="tel" name="voipaccountdata[numbers][0][phone]"
                                                                    value="{$voipaccountdata.numbers[0].phone}"
                                                                    placeholder="{trans("<!phone>number")}"
                                                                    {tip class="phone-number" trigger="phone-number-0"}>
                                                                <input type="search" name="voipaccountdata[numbers][0][info]"
                                                                    value="{$voipaccountdata.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 !isset($voipaccountdata.phone) || empty($voipaccountdata.phone)} lms-ui-visibility-hidden{/if}"></span>
                                                                </div>
                                                            </td>
                                                        </tr>

                                                        {if !empty($voipaccountdata['numbers'])}
                                                            {foreach $voipaccountdata['numbers'] as $k => $v}
                                                                {if $v@first || $v.phone == ''}{continue}{/if}
                                                                <tr class="row">
                                                                    <td>
                                                                        {strip}
                                                                        <input type="tel" name="voipaccountdata[numbers][{$k}][phone]"
                                                                            value="{$v.phone}" placeholder="{trans("<!phone>number")}"
                                                                            {tip class="phone-number" trigger="phone-number-{$k}"}>
                                                                        <input type="search" name="voipaccountdata[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="voipaccountaddbox-status"}
                                            <tr>
                                                <td class="bold nobr">
                                                    <img src="img/{if ! $voipaccountdata.access}no{/if}access.gif" alt="">
                                                    {trans("Status:")}
                                                </td>
                                                <td>
                                                    <select name="voipaccountdata[access]" {tip trigger="access"}>
                                                        <option value="1"{if $voipaccountdata.access} selected{/if}>{trans("connected<!singular>")}</option>
                                                        <option value="0"{if ! $voipaccountdata.access} selected{/if}>{trans("disconnected<!singular>")}</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        {/block}
                                        {block name="voipaccountaddbox-cost_limit"}
                                            <tr>
                                                <td class="bold nobr">
                                                    <img src="img/money.gif" alt="">
                                                    {trans("Cost limit:")}
                                                </td>
                                                <td>
                                                    <input id="costlimit"
                                                           name="voipaccountdata[cost_limit]"
                                                           type="text"
                                                           value="{$voipaccountdata.cost_limit}"
                                                           placeholder="{trans("default")}: {ConfigHelper::getConfig('voip.default_cost_limit')|money_format}"
                                                            {tip text="Enter max cost limit for VoIP account" trigger="cost_limit"}>
                                                </td>
                                            </tr>
                                        {/block}
                                        {block name="voipaccountaddbox-balance"}
                                            <tr>
                                                <td class="bold nobr">
                                                    <img src="img/money.gif" alt="">
                                                    {trans("Balance:<!voip>")}
                                                </td>
                                                <td>
                                                    <input name="voipaccountdata[balance]" type="text" value="{$voipaccountdata.balance}" {tip text="Funds on account" trigger="balance"}>
                                                </td>
                                            </tr>
                                        {/block}
                                        {block name="voipaccountaddbox-customer"}
                                            <tr>
                                                <td class="bold nobr">
                                                    <img src="img/customer.gif" alt="{trans("Customer:")}">
                                                    {trans("Customer:")}
                                                </td>
                                                <td>
                                                    {customerlist
                                                        form="voipaccountadd"
                                                        customers=$customers
                                                        selected=$voipaccountdata.ownerid
                                                        selectname="voipaccountdata[customerid]"
                                                        inputname="voipaccountdata[ownerid]"
                                                        selecttip="Assign VoIP account to customer"
                                                        trigger="voipaccountdata[ownerid]"
                                                        customOnChange="change_customer();"
                                                        required=true
                                                        version=2
                                                    }
                                                </td>
                                            </tr>
                                        {/block}
                                        {block name="voipaccountaddbox-location"}
                                            <tr>
                                                <td class="bold">
                                                    <img src="img/home.gif" alt="{trans('Location:')}">
                                                    {trans("Location:")}
                                                </td>
                                                <td>
                                                    <select id="customer_addresses" name="voipaccountdata[address_id]" {tip text="Select address" trigger="address_id"}></select>
                                                </td>
                                            </tr>
                                        {/block}
                                        {block name="voipaccountaddbox-serviceprovider"}
                                            {if !empty($serviceproviders)}
                                                <tr>
                                                    <td class="nobr">
                                                        {icon name="service"}
                                                        <strong>{trans("Service provider")}</strong>
                                                    </td>
                                                    <td>
                                                        <select name="voipaccountdata[serviceproviderid]">
                                                            <option value="">{trans("— select —")}</option>
                                                            {foreach $serviceproviders as $serviceprovider}
                                                                <option value="{$serviceprovider.id}"
                                                                    {if $serviceprovider.id == $voipaccountdata.serviceproviderid} selected{/if}
                                                                    >{$serviceprovider.name|escape}</option>
                                                            {/foreach}
                                                        </select>
                                                    </td>
                                                </tr>
                                            {/if}
                                        {/block}
                                        {block name="voipaccountaddbox-flags"}
                                            <tr>
                                                <td class="bold nobr">
                                                    <img src="img/settings.gif" alt="{trans("Settings:")}">
                                                    {trans("Settings:")}
                                                </td>
                                                <td>
                                                    <label>
                                                        <input type="checkbox" name="voipaccountdata[{$smarty.const.VOIP_ACCOUNT_FLAG_ADMIN_RECORDING}]" value="yes"
                                                            {if $voipaccountdata.flags & $smarty.const.VOIP_ACCOUNT_FLAG_ADMIN_RECORDING} checked{/if}>
                                                        {trans("recording for operator")}
                                                    </label>
                                                    <br>

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

                                                    <label>
                                                        <input type="checkbox" name="voipaccountdata[{$smarty.const.VOIP_ACCOUNT_FLAG_TRUNK}]" value="yes"
                                                            {if $voipaccountdata.flags & $smarty.const.VOIP_ACCOUNT_FLAG_TRUNK} checked{/if}>
                                                        {trans("<!voip-account>trunk")}
                                                    </label>
                                                </td>
                                            </tr>
                                        {/block}
                                        {block name="voipaccountaddbox-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="voipaccountdata[description]" class="lms-ui-wysiwyg-editor"
                                                    COLS="60" ROWS="10" {tip text="Enter additional information (optional)"}
                                                    {if isset($voipaccountdata.wysiwyg.description)}
                                                    data-wysiwyg="{$voipaccountdata.wysiwyg.description}"
                                                    {/if}>{$voipaccountdata.description|escape}</TEXTAREA>
                                            </TD>
                                        </tr>
                                    </TABLE>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="lms-ui-box-buttons" colspan="2">
                    {block name="voipaccountaddbox-buttons"}
                        {button type="submit" class="lms-ui-button-submit" accesskey="s" label="Submit" icon="save" form="voipaccountadd"}
                        {button type="link-button" href="?m={if $customerinfo.id}customerinfo&id={$customerinfo.id}{else}voipaccountlist{/if}"
                            label="Cancel" icon="cancel"}
                        <br>
                        <label>
                            <input type="checkbox" name="voipaccountdata[reuse]" value="ON"
                                {if $voipaccountdata.reuse}checked{/if}>
                            {trans("Display this form again, when this VoIP account is saved")}
                        </label>
                    {/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() {
        $('#voip-login').focus();

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

        var 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="voipaccountdata[numbers][' + i +'][phone]" placeholder="{trans("<!phone>number")}" {tip class="phone-number" trigger="phone-number"}>' +
                '<input type="search" name="voipaccountdata[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="voipaccountdata[passwd]"]').val(
                generate_random_string(length, "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789")
            );
        });

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

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

    getCustomerAddresses( {intval($voipaccountdata.ownerid)}, function(addresses) {
        setAddressList("#customer_addresses", addresses);

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

        checkIfTerritLocation();
    });

</script>
