
<link rel="stylesheet" href="/css/timeline/timeline.css">
<link rel="stylesheet" href="/css/timeline/timeline-theme.css">

<script type="text/javascript" src="/js/libs/timeline/timeline-locales.js"></script>
<script type="text/javascript" src="/js/libs/timeline/timeline-min.js"></script>
<script type="text/javascript" src="/js/timeline.js"></script>

<script type="text/javascript">
var timeline = null;
function loadTimeline() {
    if ('[% contract.id %]'.length > 0) {
        if (timeline == null) {
            timeline = initBillingMappingsTimeline(
                'billingmappingstimeline_wrapper',
                '[% c.uri_for_action('/customer/billingmappings_ajax', [ contract.id ]) %]',
                function(deltaHeight) {
                    $("#collapse_bilprofs").height("+=" + deltaHeight);
                },
                '[% c.session.lang %]',
                '[% now %]'
            );
        }
        timeline.load();
    }
}
$(function() {
  $(".collapse").on('shown.bs.collapse', function(e) {
    if ($(this).is(e.target)) {
      //console.log(this.id);
      switch (this.id) {
        case 'collapse_bilprofs':
            loadTimeline();
            break;
        default:

      }
    }
  })
});
</script>


[%
    lock_levels = [
        { level = 0, text = c.loc("none") },
        { level = 1, text = c.loc("foreign calls") },
        { level = 2, text = c.loc("all outgoing calls") },
        { level = 3, text = c.loc("incoming and outgoing") },
        { level = 4, text = c.loc("global (including web login)") },
        { level = 5, text = c.loc("ported (call forwarding only)") },
    ];
-%]

[% IF framed -%]
[%   IF c.user.roles == "subscriber" || c.user.roles == "subscriberadmin" -%]
<div class="row">
    <span>
        <a class="btn btn-primary btn-large" href="[% c.uri_for_action('/customer/preferences', [c.req.captures.0]) %]"><i class="icon-list"></i> [% c.loc('Preferences') %]</a>
    </span>
</div>
[%   END -%]
[% ELSE -%]
[%   IF c.user.roles == "subscriber" || c.user.roles == "subscriberadmin" -%]
    [% site_config.title = c.loc('Customer Details') -%]
[%   ELSE -%]
    [% site_config.title = c.loc('Customer Details for #[_1] ([_2])',contract.id,product.name) -%]
[%   END -%]

<div class="row">
    <span>
        <a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> [% c.loc('Back') %]</a>
        <a class="btn btn-primary btn-large" href="[% c.uri_for_action('/customer/preferences', [c.req.captures.0]) %]"><i class="icon-list"></i> [% c.loc('Preferences') %]</a>
    </span>
    [% IF (c.user.roles == 'admin' || c.user.roles == 'reseller' ||
           c.user.roles == 'ccareadmin' || c.user.roles == 'ccare') && !c.user.read_only -%]
    <span>
        <a class="btn btn-primary btn-large" href="[% c.uri_for_action('/customer/edit', [ contract.id ]) %]"><i class="icon-edit"></i> [% c.loc('Edit') %]</a>
    </span>
    [% END -%]
</div>
[% back_created = 1 -%]
[% END -%]

<div class="row">
    [% FOREACH m IN messages -%]
        <div class="alert alert-[% m.type %]">[% m.text %]</div>
    [% END -%]
    [% IF contract.status != "active" -%]
        <div class="alert">Customer is <b>[% contract.status %]</b></div>
    [% END -%]
</div>

<div class="ngcp-separator"></div>

<div class="accordion" id="customer_details">

    [% IF c.user.is_superuser -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_reseller">[% c.loc('Reseller') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_reseller">
            <div class="accordion-inner">
                [% UNLESS c.user.read_only -%]
                <span>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for('/reseller', contract.contact.reseller.id, 'edit') %]"><i class="icon-edit"></i> [% c.loc('Edit Reseller') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]
                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <tr>
                            <th>[% c.loc('#') %]</th>
                            <th>[% c.loc('Name') %]</th>
                            <th>[% c.loc('Status') %]</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>[% contract.contact.reseller.id %]</td>
                            <td>[% contract.contact.reseller.name %]</td>
                            <td>[% contract.contact.reseller.status %]</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    [% END -%]

    [% IF c.user.roles == 'admin' || c.user.roles == 'reseller' || c.user.roles == 'ccareadmin' || c.user.roles == 'ccare' %]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_contact">[% c.loc('Contact Details') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_contact">
            <div class="accordion-inner">

                [% UNLESS c.user.read_only -%]
                <span>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for('/contact', contact_hash.id, 'edit') %]"><i class="icon-edit"></i> [% c.loc('Edit Contact') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]

                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <tr>
                            <th>[% c.loc('Name') %]</th>
                            <th>[% c.loc('Value') %]</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>[% c.loc('Email') %]</td>
                            <td>[% contact_hash.email%]</td>
                        </tr>
                        <tr>
                            <td>[% c.loc('Name') %]</td>
                            <td>[% contact_hash.firstname %] [% contact_hash.lastname %]</td>
                        </tr>
                        <tr>
                            <td>[% c.loc('Company') %]</td>
                            <td>[% contact_hash.company%]</td>
                        </tr>
                        <tr>
                            <td>[% c.loc('Address') %]</td>
                            <td>
                                [% contact_hash.street %]<br/>
                                [% contact_hash.postcode %] [% contact_hash.city %]<br/>
                                [% contact_hash.country %]
                            </td>
                        </tr>
                        <tr>
                            <td>[% c.loc('Phone/Fax') %]</td>
                            <td>
                                Mobile: [% contact_hash.mobilenumber %]<br/>
                                Fixed: [% contact_hash.phonenumber %]<br/>
                                Fax: [% contact_hash.faxnumber %]<br/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    [% IF c.license('billing') -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_bilprofs">[% c.loc('Billing Profile Schedule') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_bilprofs">
            <div class="accordion-inner">
                <div id="billingmappingstimeline_wrapper" class="billingmappingstimeline_wrapper"></div>




<!--                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <tr>
                            <th>[% c.loc('actual') %]</th>
                            <th>[% c.loc('Date') %]</th>
                            <th>[% c.loc('Billing Profile Name') %]</th>
                            <th>[% c.loc('Prepaid') %]</th>
                            <th>[% c.loc('Billing Network Name') %]</th>
                        </tr>
                    </thead>
                    <tbody>
                        [% FOR mapping IN billing_mappings_ordered_result.all -%]
                        <tr class="sw_action_row [% IF !mapping.get_column('is_future') -%]ngcp-entry-disabled[% END -%]">
                            <td><input type="checkbox" disabled="disabled" [% IF mapping.get_column('is_actual') -%]checked="checked"[% END -%]/></td>
                            <td>
                                [% mapping.start_date ? mapping.start_date : 'NULL' %] - [% mapping.end_date.defined ? mapping.end_date : 'NULL' %]
                            </td>
                            <td>[% mapping.billing_profile.name %]</td>
                            <td><input type="checkbox" disabled="disabled" [% IF mapping.billing_profile.prepaid -%]checked="checked"[% END -%]/></td>
                            <td>[% mapping.network.name %]</td>
                        </tr>
                        [% END -%]
                    </tbody>
                </table>-->
            </div>
        </div>
    </div>
    [% END -%]
    [% END -%]

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_subs">[% c.loc('Subscribers') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_subs">
            <div class="accordion-inner">
                [% IF ((c.user.roles == "subscriberadmin" && product.class == "pbxaccount") ||
                        c.user.roles == "admin" || c.user.roles == "reseller" ||
                        c.user.roles == "ccareadmin" || c.user.roles == "ccare") &&
                        contract.max_subscribers.defined && subscriber_count < contract.max_subscribers -%]
                    <div class="alert alert-info">
                        [% c.loc('[_1] of maximum [_2] subscribers [_3] created',subscriber_count,contract.max_subscribers,
                                c.license('pbx') && c.config.features.cloudpbx ? c.loc('(including PBX groups) ') : '') %]
                    </div>
                    [% IF !c.user.read_only -%]
                        <a class="btn btn-large btn-primary" href="[% c.uri_for_action('/customer/subscriber_create', [ c.req.captures.0 ]) %]">
                            <i class="icon-star"></i> [% c.loc('Create Subscriber') %]
                        </a>
                    [% END -%]
                [% ELSIF contract.max_subscribers.defined -%]
                    <div class="alert">
                        [% c.loc('Maximum number of [_1] subscribers [_2] created',contract.max_subscribers,
                            c.license('pbx') && c.config.features.cloudpbx ? c.loc('(including PBX groups) ') : '') %]
                    </div>
                [% ELSIF (c.user.roles == "subscriberadmin" && product.class == "pbxaccount") ||
                          c.user.roles == "admin" || c.user.roles == "reseller" ||
                          c.user.roles == "ccareadmin" || c.user.roles == "ccare" -%]
                    [% IF !c.user.read_only -%]
                        <a class="btn btn-large btn-primary" href="[% c.uri_for_action('/customer/subscriber_create', [ c.req.captures.0 ]) %]">
                            <i class="icon-star"></i> [% c.loc('Create Subscriber') %]
                        </a>
                    [% END -%]
                [% END -%]

[%
    helper.name = c.loc('Subscribers');
    helper.identifier = 'subscribers';
    helper.length_change = 1;
    helper.dt_columns = subscriber_dt_columns;
    helper.ajax_uri = c.uri_for_action('/customer/subscriber_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Terminate'), uri = "/subscriber/'+full.id+'/terminate", class = 'btn-small btn-secondary', icon = 'icon-remove' },
            { name = c.loc('Details'), uri = "/subscriber/'+full.id+'/details", class = 'btn-small btn-primary', icon = 'icon-th-list' },
            { name = c.loc('Preferences'), uri = "/subscriber/'+full.id+'/preferences", class = 'btn-small btn-tertiary', icon = 'icon-list' },
        ];
    ELSE;
        helper.dt_buttons = [
            { name = c.loc('Details'), uri = "/subscriber/'+full.id+'/details", class = 'btn-small btn-primary', icon = 'icon-th-list' },
            { name = c.loc('Preferences'), uri = "/subscriber/'+full.id+'/preferences", class = 'btn-small btn-tertiary', icon = 'icon-list' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
%]

            </div>
        </div>
    </div>

    [% IF c.license('pbx') && c.config.features.cloudpbx && product.class == 'pbxaccount' && subscribers.count -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_pbxgroups">[% c.loc('PBX Groups') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_pbxgroups">
            <div class="accordion-inner">
                [% IF contract.max_subscribers.defined && subscriber_count < contract.max_subscribers -%]
                    <div class="alert alert-info">
                        [% c.loc('[_1] of maximum [_2] subscribers [_3] created',subscriber_count, contract.max_subscribers,
                            c.license('pbx') && c.config.features.cloudpbx ? c.loc('(including PBX groups) ') : '') %]
                    </div>
                    [% IF !c.user.read_only -%]
                        <a class="btn btn-large btn-primary" href="[% c.uri_for_action('/customer/pbx_group_create', [ c.req.captures.0 ]) %]">
                            <i class="icon-star"></i> [% c.loc('Create PBX Group') %]
                        </a>
                    [% END -%]
                [% ELSIF contract.max_subscribers.defined -%]
                    <div class="alert">
                        [% c.loc('Maximum number of [_1] subscribers [_2] created',contract.max_subscribers,
                            c.license('pbx') && c.config.features.cloudpbx ? c.loc('(including PBX groups) ') : '') %]
                    </div>
                [% ELSE %]
                    [% IF !c.user.read_only -%]
                        <a class="btn btn-large btn-primary" href="[% c.uri_for_action('/customer/pbx_group_create', [ c.req.captures.0 ]) %]">
                            <i class="icon-star"></i> [% c.loc('Create PBX Group') %]
                        </a>
                    [% END -%]
                [% END -%]

[%
    helper.name = c.loc('PBX Groups');
    helper.identifier = 'pbx_groups';
    helper.length_change = 1;
    helper.dt_columns = pbxgroup_dt_columns;
    helper.ajax_uri = c.uri_for_action('/customer/pbx_group_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Terminate'), uri = "/subscriber/'+full.id+'/terminate", class = 'btn-small btn-secondary', icon = 'icon-remove' },
            { name = c.loc('Details'), uri = "/subscriber/'+full.id+'/details", class = 'btn-small btn-primary', icon = 'icon-th-list' },
            { name = c.loc('Preferences'), uri = "/subscriber/'+full.id+'/preferences", class = 'btn-small btn-tertiary', icon = 'icon-list' },
        ];
    ELSE;
        helper.dt_buttons = [
            { name = c.loc('Details'), uri = "/subscriber/'+full.id+'/details", class = 'btn-small btn-primary', icon = 'icon-th-list' },
            { name = c.loc('Preferences'), uri = "/subscriber/'+full.id+'/preferences", class = 'btn-small btn-tertiary', icon = 'icon-list' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
%]


            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_pbxdevs">[% c.loc('PBX Devices') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_pbxdevs">
            <div class="accordion-inner">
                [% IF !c.user.read_only -%]
                    <a class="btn btn-large btn-primary" href="[% c.uri_for_action('/customer/pbx_device_create', [ c.req.captures.0 ]) %]"><i class="icon-star"></i> [% c.loc('Create PBX Device') %]</a>
                [% END -%]
                <div class="ngcp-separator"></div>
                <table class="table table-bordered table-striped table-highlight table-hover" id="subscribers_table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>[% c.loc('Station Name') %]</th>
                            <th>[% c.loc('Subscriber') %]</th>
                            <th>[% c.loc('MAC Address / Identifier') %]</th>
                            <th>[% c.loc('Device Profile') %]</th>
                            <th class="ngcp-actions-column"></th>
                        </tr>
                    </thead>
                    <tbody>
                        [% FOR dev IN pbx_devices -%]
                        <tr class="sw_action_row">
                            <td><img src="[% c.uri_for_action('/device/devmod_download_frontthumbnail', [ dev.profile.config.device.id]) %]" style="height:40px"/></td>
                            <td>[% dev.station_name %]</td>
                            <td>
                                <ul style="list-style-type:none; margin-left:0">
                                [% FOR line IN dev.autoprov_field_device_lines.all -%]
                                    [% sub = line.provisioning_voip_subscriber.username _ '@' _ line.provisioning_voip_subscriber.domain.domain; -%]
                                    <li>[% line.autoprov_device_line_range.name %]/[% line.key_num %]: [% line.line_type %]<br/>[% line.target_number ? line.target_number : sub %]</li>[% UNLESS loop.last -%]<li>&nbsp;</li>[% END -%]
                                [% END -%]
                                </ul>
                            </td>
                            <td>[% dev.identifier %]</td>
                            <td>[% dev.profile.name %]</td>
                            <td class="ngcp-actions-column">
                                <div class="sw_actions">
                                    [% UNLESS c.user.read_only -%]
                                    <a class="btn btn-secondary btn-small" href="[% c.uri_for_action("/customer/pbx_device_delete", [contract.id, dev.id])%]" data-confirm="Delete">
                                        <i class="icon-remove"></i> [% c.loc('Delete') %]
                                    </a>
                                    <a class="btn btn-primary btn-small" href="[% c.uri_for_action("/customer/pbx_device_edit", [contract.id, dev.id]) %]">
                                        <i class="icon-edit"></i> [% c.loc('Edit') %]
                                    </a>
                                    <a class="btn btn-primary btn-small" href="[% c.uri_for_action("/device/dev_field_config", dev.identifier) %]">
                                        <i class="icon-edit"></i> [% c.loc('Config') %]
                                    </a>
                                        [%IF dev.profile.config.device.bootstrap_method == 'http'%]
                                    <a class="btn btn-primary btn-small" href="[% c.uri_for_action("/customer/pbx_device_sync", [contract.id, dev.id]) %]">
                                        <i class="icon-edit"></i> [% c.loc('Sync Device') %]
                                    </a>
                                        [% END -%]
                                    [% END -%]
                                    <a class="btn btn-primary btn-small" href="[% c.uri_for_action("/customer/pbx_device_preferences_root", [contract.id, dev.id]) %]">
                                        <i class="icon-edit"></i> [% c.loc('Preferences') %]
                                    </a>
                                </div>
                            </td>
                        </tr>
                        [% END -%]
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    [% END -%]

    [% IF
        c.license('pbx') && c.config.features.cloudpbx &&
        product.class == 'pbxaccount' &&
        (c.user.roles == 'admin' || c.user.roles == 'reseller' ||
         c.user.roles == 'ccareadmin' || c.user.roles == 'ccare' ||
         c.user.roles == 'subscriberadmin')
    -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_soundsets">[% c.loc('Sound Sets') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_soundsets">
            <div class="accordion-inner">

[%
    helper.name = c.loc('Sound Set');
    helper.identifier = 'sound_sets';
    helper.dt_columns = soundset_dt_columns;
    helper.ajax_uri = c.uri_for_action('/sound/contract_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc("Edit"), uri = "/sound/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit',
              condition => 'full.user_role != "subscriberadmin" || (full.user_contract_id == full.contract_id)' },
            { name = c.loc('Delete'), uri = "/sound/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-trash',
              condition => 'full.user_role != "subscriberadmin" || (full.user_contract_id == full.contract_id)' },
            { name = c.loc('Files'), uri = "/sound/'+full.id+'/handles", class = 'btn-small btn-tertiary', icon = 'icon-list' },
        ];
        helper.top_buttons = [
            { name = c.loc('Create Sound Set'), uri = c.uri_for_action('/sound/create', c.req.captures.0), icon = 'icon-star', accordion_button = 1 },
        ];
    ELSE;
        helper.dt_buttons = [
            { name = c.loc('Files'), uri = "/sound/'+full.id+'/handles", class = 'btn-small btn-tertiary', icon = 'icon-list' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
%]
            </div>
        </div>
    </div>
    [% END -%]

    [% IF c.license('billing') -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_balance">[% c.loc('Contract Balance') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_balance">

            <div class="accordion-inner">

                [% IF (c.user.roles == 'admin' || c.user.roles == 'reseller' ||
                       c.user.roles == 'ccareadmin' || c.user.roles == 'ccare') && !c.user.read_only -%]
                <span>
                    [% IF c.user.billing_data && c.config.features.voucher -%]
                    <a class="btn btn-primary btn-large" href="[% c.uri_for_action("/customer/topup_voucher", [contract.id]) %]"><i class="icon-repeat"></i> [% c.loc('Top-up Voucher') %]</a>
                    [% END -%]
                    <a class="btn btn-primary btn-large" href="[% c.uri_for_action("/customer/topup_cash", [contract.id]) %]"><i class="icon-repeat"></i> [% c.loc('Top-up Cash') %]</a>
                    <a class="btn btn-primary btn-large" href="[% c.uri_for_action("/customer/edit_balance", [contract.id]) %]"><i class="icon-edit"></i> [% c.loc('Set Cash Balance') %]</a>
                </span>
                <div class="ngcp-separator"></div>
                [% END -%]

                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <th>
                            <th colspan="6"></th>
                        </th>
                    </thead>
                    <tbody>
                        [% USE format %]
                        [% money_format = format('%.2f') %]

                        <tr>
                            <td>[% c.loc('Initial Cash Balance:') %]</td>
                            <td><b>[% money_format(balance.initial_cash_balance / 100) %]</b></td>
                            <td>[% c.loc('Cash Balance:') %]</td>
                            <td><b>[% money_format(balance.cash_balance / 100) %]</b></td>
                            <td>[% c.loc('Debit:') %]</td>
                            <td><b>[% money_format( balance.cash_balance_interval / 100 ) %]</b></td>
                        </tr>

                        <tr>
                            <td>[% c.loc('Initial Free-Time Balance:') %]</td>
                            <td><b>[% balance.initial_free_time_balance %]</b></td>
                            <td>[% c.loc('Free-Time Balance:') %]</td>
                            <td><b>[% balance.free_time_balance %]</b></td>
                            <td>[% c.loc('Free-Time spent:') %]</td>
                            <td><b>[% balance.free_time_balance_interval %]</b></td>
                        </tr>
                    </tbody>
                </table>

                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <th>
                            <th colspan="4"></th>
                        </th>
                    </thead>

                        <tr>
                            <td>[% c.loc('Interval from:') %]</td>
                            <td><b>[% balance.start %]</b></td>
                            <td>[% c.loc('Interval to:') %]</td>
                            <td><b>[% balance.end %]</b></td>
                        </tr>

                        <tr>
                            <td>[% c.loc('"Timely" Top-ups from:') %]</td>
                            <td><b>[% timely_topup_start %]</b></td>
                            <td>[% c.loc('"Timely" Top-ups to:') %]</td>
                            <td><b>[% timely_topup_end %]</b></td>
                        </tr>

                        <tr>
                            <td colspan="2">[% c.loc('Balance will be discarded, if no tup-up happens until:') %]</td>
                            <td colspan="2"><b>[% notopup_expiration %]</b></td>
                        </tr>

                    </tbody>
                </table>

                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <th>
                            <th colspan="4"></th>
                        </th>
                    </thead>
                    <tbody>
                        [% USE format %]
                        [% money_format = format('%.2f') %]

                        <tr>
                            <td>[% c.loc('Actual profile package:') %]</td>
                            <td>[% package.name %]</td>
                            <td>[% c.loc('Actual billing profile:') %]</td>
                            <td>[% mapping.billing_profile.name %]</td>
                        </tr>

                        <tr>
                            <td>[% c.loc('Cash balance threshold when underrun profiles get applied:') %]</td>
                            <td>[% package.underrun_profile_threshold ? money_format( package.underrun_lock_threshold / 100 ) : '' %]</td>
                            <td>[% c.loc('Cash balance threshold when subscribers will be locked:') %]</td>
                            <td>[% package.underrun_lock_threshold ? money_format( package.underrun_lock_threshold / 100 ) : '' %]</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>


    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_balanceintervals">[% c.loc('Balance Intervals') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_balanceintervals">

            <div class="accordion-inner">

[%
    helper.name = c.loc('Balance Interval');
    helper.identifier = 'balance_intervals';
    helper.dt_columns = balanceinterval_dt_columns;
    helper.ajax_uri = c.uri_for_action('/customer/balanceinterval_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    PROCESS 'helpers/datatables.tt';
%]
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_topuplog">[% c.loc('Top-up Log') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_topuplog">

            <div class="accordion-inner">

[%
    helper.name = c.loc('Topuplog');
    helper.identifier = 'topup_logs';
    helper.dt_columns = topuplog_dt_columns;
    helper.ajax_uri = c.uri_for_action('/customer/topuplog_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    PROCESS 'helpers/datatables.tt';
%]
            </div>
        </div>
    </div>

    [% IF c.user.roles == 'admin' || c.user.roles == 'reseller' ||
          c.user.roles == 'ccareadmin' || c.user.roles == 'ccare' %]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_fraud">[% c.loc('Fraud Limits') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_fraud">
            <div class="accordion-inner">
                <table class="table table-bordered table-striped table-highlight table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>[% c.loc('Limit') %]</th>
                            <th>[% c.loc('Lock Level') %]</th>
                            <th>[% c.loc('Notify') %]</th>
                            <th class="ngcp-actions-column"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="sw_action_row">
                            <td>[% c.loc('Monthly Settings') %]</td>
                            [% fraud_def_message = (fraud.fraud_interval_limit.defined ? "none" : c.loc("billing profile default")) %]
                            <td>[% fraud.fraud_interval_limit.defined ? fraud.fraud_interval_limit : fraud_def_message %]</td>
                            <td>
                                [% IF fraud.fraud_interval_lock.defined -%]
                                    <select disabled="disabled">
                                       [% FOR l IN lock_levels -%]
                                       <option [% fraud.fraud_interval_lock == l.level ? 'selected="selected"' : '' %]>[% l.text %]</option>
                                       [% END -%]
                                    </select>
                                [% ELSE -%]
                                   [% fraud_def_message %]
                                [% END -%]
                            </td>
                            <td>[% fraud.fraud_interval_notify.defined ? fraud.fraud_interval_notify : fraud_def_message %]</td>
                            <td class="ngcp-actions-column">
                                <div class="sw_actions pull-right">
                                [% IF !c.user.read_only -%]
                                    <a class="btn btn-small btn-primary"
                                       href="[% c.uri_for_action("/customer/edit_fraud", [c.req.captures.0], "month") %]">
                                        <i class="icon-edit"></i> [% c.loc('Edit') %]
                                    </a>
                                    <a class="btn btn-small btn-secondary" data-confirm="Delete"
                                       href="[% c.uri_for_action("/customer/delete_fraud", [c.req.captures.0], "month") %]">
                                        <i class="icon-trash"></i> [% c.loc('Delete') %]
                                    </a>
                                [% END -%]
                                </div>
                            </td>
                        </tr>
                        <tr class="sw_action_row">
                            <td>[% c.loc('Daily Settings') %]</td>
                            [% fraud_def_message = (fraud.fraud_daily_limit.defined ? "none" : c.loc("billing profile default")) %]
                            <td>[% fraud.fraud_daily_limit.defined ? fraud.fraud_daily_limit : fraud_def_message %]</td>
                            <td>
                                [% IF fraud.fraud_daily_lock.defined -%]
                                    <select disabled="disabled">
                                       [% FOR l IN lock_levels -%]
                                       <option [% fraud.fraud_daily_lock == l.level ? 'selected="selected"' : '' %]>[% l.text %]</option>
                                       [% END -%]
                                    </select>
                                [% ELSE -%]
                                   [% fraud_def_message %]
                                [% END -%]
                            </td>
                            <td>[% fraud.fraud_daily_notify.defined ? fraud.fraud_daily_notify : fraud_def_message %]</td>
                            <td class="ngcp-actions-column">
                                <div class="sw_actions pull-right">
                                [% IF !c.user.read_only -%]
                                    <a class="btn btn-small btn-primary"
                                       href="[% c.uri_for_action("/customer/edit_fraud", [c.req.captures.0], "day") %]">
                                        <i class="icon-edit"></i> [% c.loc('Edit') %]
                                    </a>
                                    <a class="btn btn-small btn-secondary" data-confirm="Delete"
                                       href="[% c.uri_for_action("/customer/delete_fraud", [c.req.captures.0], "day") %]">
                                        <i class="icon-trash"></i> [% c.loc('Delete') %]
                                    </a>
                                [% END -%]
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    [% END -%]
    [% END -%]

    [% IF c.license('invoice') -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_invoices">[% c.loc('Invoices') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_invoices">
            <div class="accordion-inner">

[%
    helper.name = c.loc('Invoice');
    helper.identifier = 'invoices';
    helper.dt_columns = invoice_dt_columns;
    helper.ajax_uri = c.uri_for_action('/invoice/customer_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [
        { name = c.loc('Download'), uri = "/invoice/'+full.id+'/download", class = 'btn-small btn-tertiary', icon = 'icon-download-alt' },
    ];

    PROCESS 'helpers/datatables.tt';
%]
            </div>
        </div>
    </div>
    [% END -%]

    [% IF ((c.user.roles == "subscriberadmin" && product.class == "pbxaccount") ||
           c.user.roles == "admin" || c.user.roles == "reseller" ||
           c.user.roles == "ccareadmin" || c.user.roles == "ccare") && !c.user.read_only -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_locations">[% c.loc('Locations') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_locations">
            <div class="accordion-inner">
                    <a class="btn btn-large btn-primary" href="[% c.uri_for_action('/customer/location_create', [ c.req.captures.0 ]) %]">
                        <i class="icon-star"></i> [% c.loc('Create Location') %]
                    </a>

[%
    helper.name = c.loc('Locations');
    helper.identifier = 'locations';
    helper.length_change = 1;
    helper.dt_columns = location_dt_columns;
    helper.ajax_uri = c.uri_for_action('/customer/location_ajax', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    helper.tmpuri = c.uri_for(contract.id, 'location');
    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Preferences'), uri = helper.tmpuri _ "/'+full.id+'/preferences", class = 'btn-small btn-tertiary', icon = 'icon-list' },
            { name = c.loc('Edit'), uri = helper.tmpuri _ "/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Delete'), uri = helper.tmpuri _ "/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-remove' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
%]

            </div>
        </div>
    </div>
    [% END -%]

    [% IF c.config.general.ngcp_type != 'spce' -%]
    [% IF c.license('phonebook') -%]
    [% IF (c.user.roles == "subscriberadmin" && product.class == "pbxaccount") ||
           c.user.roles == "admin" || c.user.roles == "reseller" ||
           c.user.roles == "ccareadmin" || c.user.roles == "ccare" -%]
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#customer_details" href="#collapse_phonebook">[% c.loc('Phonebook') %]</a>
        </div>
        <div class="accordion-body collapse" id="collapse_phonebook">
            <div class="accordion-inner">

[%
    helper.name = c.loc('Phonebook');
    helper.identifier = 'phonebook';
    helper.messages = messages;
    helper.create_flag = phonebook_create_flag;
    helper.edit_flag = phonebook_edit_flag;
    helper.close_target = close_target;
    helper.form_object = form;
    helper.length_change = 1;
    helper.dt_columns = phonebook_dt_columns;
    helper.ajax_uri = c.uri_for_action('/customer/phonebook_ajax', [ c.req.captures.0 ]);
    helper.tmpuri = c.uri_for_action('/customer/phonebook_root', [ c.req.captures.0 ]);

    helper.top_buttons = [];
    helper.dt_buttons = [];

    UNLESS c.user.read_only;
        helper.dt_buttons = [
            { name = c.loc('Edit'), uri = helper.tmpuri _ "/'+full.id+'/edit", class = 'btn-small btn-primary', icon = 'icon-edit' },
            { name = c.loc('Delete'), uri = helper.tmpuri _ "/'+full.id+'/delete", class = 'btn-small btn-secondary', icon = 'icon-remove' },
        ];
        helper.top_buttons = [
            { name = c.loc('Create Phonebook Entry'), uri = c.uri_for_action('/customer/phonebook_create', c.req.captures), class = 'btn-small btn-primary', icon = 'icon-star' },
            { name = c.loc('Download CSV'), uri = c.uri_for_action('/customer/phonebook_download_csv', c.req.captures), class = 'btn-small btn-primary', icon = 'icon-star' },
            { name = c.loc('Upload CSV'), uri = c.uri_for_action('/customer/phonebook_upload_csv', c.req.captures), class = 'btn-small btn-primary', icon = 'icon-star' },
        ];
    END;

    PROCESS 'helpers/datatables.tt';
%]

            </div>
        </div>
    </div>
    [% END -%]
    [% END -%]
    [% END -%]

</div>

[% IF create_flag == 1 -%]
[%
    IF form.has_for_js;
        form.render_repeatable_js;
    END;
    PROCESS "helpers/modal.tt";
    modal_header(m.create_flag = create_flag,
                 m.name = description.defined ? description : c.loc("Subscriber"));
    form.render;
    modal_footer();
    modal_script(m.close_target = close_target);
-%]
<script src="/js/libs/ngcp-pwdgen.js"></script>
[% ELSIF edit_flag == 1 -%]
[%
    IF form.has_for_js;
        form.render_repeatable_js;
    END;
    PROCESS "helpers/modal.tt";
    modal_header(m.create_flag=0,
                 m.name = c.loc("Settings"));
    form.render;
    modal_footer();
    modal_script(m.close_target = close_target);
-%]
[% ELSIF devsync_flag == 1 -%]
[%
    PROCESS "helpers/modal.tt";
    modal_header(m.create_flag=0, m.edit_flag=0,
                 m.name = c.loc("Deployed Device"));
    form.render;
    modal_footer();
    modal_script(m.close_target = close_target);
-%]
    <script>
        $('input#sync').click(function(e) {
            e.preventDefault();
            var full_params = "";
            var ip = $('form#devsyncform input#ip').val();
            if(!ip.length) {
                return 0;
            }
            $('form#devsyncform .form_messages').empty();

            var autoprov_uri = "[% autoprov_uri %]";
            autoprov_uri = autoprov_uri.replace('__NGCP_CLIENT_IP__', ip);
            [% IF autoprov_method == "POST" -%]
                $devform = $('form#devsyncform').clone(true);
                $devform.remove('input:hidden');
                $devform.find('input#ip').remove();
                [% FOR p IN autoprov_params -%]
                    var input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "[% p.key %]";
                    input.value = "[% p.value %]";
                    $devform.append(input);
                [% END -%]
                $devform.attr("target", "_blank");
                $devform.attr("action", autoprov_uri);
                $devform.attr("method", "[% autoprov_method %]");
                $devform.submit();
            [% ELSE -%]
                [% FOR p IN autoprov_params -%]
                    if(full_params.length > 0)
                        full_params += '&';
                    full_params += "[% p.key %]";
                    full_params += '=' + "[% p.value %]";
                [% END -%]
                window.open(autoprov_uri + '?' + full_params, '_blank');
            [% END -%]

            return false;
        });
    </script>
[% END -%]


[% IF c.license('pbx') && c.config.features.cloudpbx && device_flag -%]
<style>
    .annotated
    {
        position: relative;
        margin: 20px 20px 0 20px;
    }
    .annotated img
    {
        display: block;
            max-width: none;
    }
    .annotated a
    {
        text-decoration: none;
        color: inherit;
    }
    .annotated .caption
    {
        white-space: nowrap;
    }
    .annotated select
    {
        height: 15px;
        line-height: 15px;
        padding: 0;
        margin: 0;
        font-size: 11px;
    }
    .annotated select.subselect
    {
        width: 180px;
    }
    .annotated select.modeselect
    {
        width: 60px;
    }

    .annotated input
    {
        height: 15px;
        line-height: 15px;
        padding: 0;
        margin: 0;
        font-size: 11px;
    }
    .annotated input.subinput
    {
        height: 13px;
        width: 178px;
        display: none;
    }

    .annotated .switch {
      position: relative;
      display: inline-block;
      width: 25px;
      height: 15px;
      margin-right: 3px;
      margin-bottom: 0px;
      line-height: 15px;
    }

    .annotated .switch input
    {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .annotated .slider
    {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .annotated .slider:before
    {
      position: absolute;
      content: "";
      height: 15px;
      width: 15px;
      left: 0px;
      bottom: 0px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .annotated input:checked + .slider {
      background-color: #006600;
    }

    .annotated input:focus + .slider {
      box-shadow: 0 0 1px #006600;
    }

    .annotated input:checked + .slider:before {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }

    .annotated .slider.round {
      border-radius: 10px;
    }

    .annotated .slider.round:before {
      border-radius: 50%;
    }

</style>
<link rel="stylesheet" href="/css/ngcp-annotate.css">
<script src="/js/libs/ngcp-annotate.js"></script>
<link rel="stylesheet" type="text/css" href="/font/font-awesome/css/font-awesome.min.css"/>
<script>
var linekeys;
var fieldExtensions;
//can't be passed from events => global variable
var profileExtensionsData;
[% IF edit_flag == 1 -%]
if(!linekeys){
    linekeys = {};
    //keeps as keys modelDeviceId's for all extensions, mentioned in the field lineranges
    //keys of the value keep all phone models linked to this extension
    fieldExtensions = {};
    [% FOR line IN pbx_device.autoprov_field_device_lines.all -%]
        [%IF line.autoprov_device_line_range.device.type == 'extension'%]
            [%extension_model_device_id = line.autoprov_device_line_range.device.id%]
            if(!fieldExtensions['[%extension_model_device_id%]']){
                    fieldExtensions['[%extension_model_device_id%]']= {
                    'units': {},
                    'availablePhones': {}
                };
            }
            fieldExtensions['[%extension_model_device_id%]']['units']['[%line.extension_unit%]'] = 1;
            fieldExtensions['[%extension_model_device_id%]']['availablePhones'] = {
            [% FOR link IN line.autoprov_device_line_range.device.autoprov_extension_device_link.all -%]
                '[%link.device_id%]':1[%IF !loop.last %], [%END%]
            [%END%]
            };
        [%END%]
        linekeys['[% line.linerange_id %].[% line.key_num %].[% line.extension_unit %]'] = {
          'mode': '[% line.line_type %]',
          'sub': '[% line.provisioning_voip_subscriber.username %]@[% line.provisioning_voip_subscriber.domain.domain%]',
          'subid': [% line.provisioning_voip_subscriber.id %],
          'ext': '[% line.provisioning_voip_subscriber.pbx_extension%]',
          'target_number': '[% line.target_number%]'
        };
    [% END -%]
}
[% END -%]

function get_urls(in_data){
    var data = {};
    if((!in_data.type) || (in_data.type == undefined) || in_data.type == 'profile'){
        in_data.type = 'profile';
        if(!in_data.id){
            in_data.id = $('div.controls #profile_id option:selected').first().attr('value');
        }
        if(!in_data.id) return;
        data.uri_lines = '/device/profile/' + in_data.id + '/annolines/ajax';
        data.uri_extensions = '/device/profile/' + in_data.id + '/extensions';
    }
    return data;
}
function create_ranges_annotations(id,type,ranges){
    var divCnt = 1 + get_extension_divcnt(id);
    var divId = 'annotated_'+type+(type === 'extension'?'_'+id+'_'+divCnt:'');
    var uri_image = ( type == 'extension' ) ?'/device/model/' + id + '/frontimage' : '/device/profile/' + id + '/frontimage';
    var markup = '<div class="annotated" id="'+divId+'">' +
        '<img src="' +uri_image + '" />';
    var linecmt = get_linecmt();
    var unit = 0;
    if(type === 'extension'){
        //if we draw by button - it will fit without parameter
        unit = get_extensions_num();
    }
    for(var i = 0; i < ranges.length; ++i) {
        var range = ranges[i];
        for(var j = 0; j < range.annotations.length; ++j) {
            linecmt++;
            $('#line\\.' + linecmt).remove();

            var a = range.annotations[j];
            var status = "unassigned";
            var linekeyCurrent = 0;
[% IF edit_flag == 1 -%]
            var idx = ranges[i].id+'.'+ a.line_index+'.'+ unit;
            if( linekeys && linekeys[idx]){
                linekeyCurrent = linekeys[idx];
                status = "assigned";
            }
[% END -%]
            var isSwitchOn = linekeyCurrent.target_number ? 'checked' : '';
            var targetNumber = linekeyCurrent.target_number ? 'value="' + linekeyCurrent.target_number + '"' : ''
            var action = '<i class="fa '+(linekeyCurrent ? 'fa-plus-square' : 'fa-user')+' fa-fw"></i> ' +
                '<label class="switch">' +
                '<input type="checkbox" class="switch" ' + isSwitchOn + ' name="line.' + linecmt + '.switch" id="line.' + linecmt + '">' +
                '<span class="slider round"></span>' +
                '</label>' +
                '<input type="text" class="subinput" oninput="this.value = this.value.replace(/[^0-9#*+]/, \'\')" name="line.' + linecmt + '.target_number" id="line.' + linecmt + '.target_number" ' + targetNumber + '>' +
                '<select class="subselect" name="line.' + linecmt + '.subscriber_id" id="line.' + linecmt + '.subscriber_id">' +
                '<option value="0">'+(linekeyCurrent ? '[% c.loc("Subscriber") %]' : '[% c.loc("None") %]' )+'</option>' +
[% FOR sub IN subscribers.all -%]
                '<option value="[% sub.provisioning_voip_subscriber.id %]"'+((linekeyCurrent && !linekeyCurrent.target_number && linekeyCurrent.subid == '[% sub.provisioning_voip_subscriber.id %]')? ' selected="selected"' : '')+'>[% sub.get_column('username_combined') %][% sub.provisioning_voip_subscriber.pbx_extension.defined ? " (" _ sub.provisioning_voip_subscriber.pbx_extension _ ")" : "" %]</option>' +
[% END -%]
[% FOR sub IN pbx_groups.all -%]
                '<option value="[% sub.provisioning_voip_subscriber.id %]"'+((linekeyCurrent && linekeyCurrent.subid == '[% sub.provisioning_voip_subscriber.id %]')? ' selected="selected"' : '')+'>[% sub.get_column('username_combined') %][% sub.provisioning_voip_subscriber.pbx_extension.defined ? " (" _ sub.provisioning_voip_subscriber.pbx_extension _ ")" : "" %]</option>' +
[% END -%]
                '</select>' +
                '<select class="modeselect" name="line.' + linecmt + '.type" id="line.' + linecmt + '.type">' +
[% FOR opt IN ["private", "shared", "blf", "speeddial", "forward", "transfer"] -%]
                (range.can_[% opt %] == "1" ?
                    '<option value="[% opt %]"'+((linekeyCurrent && linekeyCurrent.mode == '[% opt %]' ) ? '  selected="selected"' : '')+'>[% opt %]</option>' : '') +
[% END -%]
                '</select>' +
                '<input type="hidden" name="line.' + linecmt + '.line" id="line.' + linecmt + '.line" value="' + a.range_id + '.' + a.line_index + '.' + unit + '"/>' +
                '<input type="hidden" name="line.' + linecmt + '.extension_unit" id="line.' + linecmt + '.extension_unit" value="' + unit + '"/>' +
                '';
            markup += '<div class="caption ' + status + '" style="top:' + a.y + 'px; left:' + a.x + 'px;" data-pos="' + a.position + '" data-pos-top="' + a.y + '" data-pos-left="' + a.x + '">' + action + '</div>';
        }
    }
    if(type == 'extension'){
        markup += '<div class="control-group delete_extension_button">'
+'<div class="controls">'
+'<div class="btn btn-primary pull-right rm_element btn" onclick="$(\'div#'+divId+'\').remove();">Remove Extension</div>'
+'</div>'
+'</div>';
    }
    markup += '</div>';
    apply_markup(markup);
    add_extension_button();
    $("div.annotated").each(function(){
        $(this).find("div.caption").annotate(this);
    });

    $(document).ready(function() {
        $(document).on("click", ".annotated .switch", function() {
            let aName = $(this).attr('id');
            if (aName) {
                $('input[name="' + aName + '.target_number"]').toggle();
                $('select[name="' + aName + '.subscriber_id"]').toggle();
            }
        });
        $('.annotated .switch').each(function() {
            if ($(this).is(':checked')) {
                let aName = $(this).attr('id');
                if (aName) {
                    $('input[name="' + aName + '.target_number"]').toggle();
                    $('select[name="' + aName + '.subscriber_id"]').toggle();
                }
            }
        });
    });

    //return markup;
}
function apply_markup(markup){
    var last = $('div.annotated').last();
    if(!last || last.length < 1 ){
        last =$('div.annotated');
    }
    if(!last || last.length < 1 ){
        last = $('div.caption').last();
        if(!last || last.length < 1 ){
            last =$('div.caption');
        }
    }
    if(!last || last.length < 1 ){
        last = $('div.control-group').last();
    }
    if(!last || last.length < 1 ){
        last = $('div.control-group');
    }
    last.after(markup);
}

function annotate_profile() {
    $('.annotated').remove();
    var in_data = {'id':'', 'type': 'profile'};
    var uri_data = get_urls(in_data);
    id = in_data.id;
    type = in_data.type;
    if(!id) return;
    $.ajax({
        url: uri_data.uri_lines,
    }).done(function(data) {
        profileExtensionsData = data.aaData;
        var ranges = profileExtensionsData.ranges;
        create_ranges_annotations(id,'profile',profileExtensionsData.ranges);
        process_extensions();
    });
}
function process_extensions(){
    var fieldExtensionsCurrent = get_extensions_current();
    for( extension_unit in fieldExtensionsCurrent ){
        extensionModelDeviceId = fieldExtensionsCurrent[extension_unit];
        create_ranges_annotations(extensionModelDeviceId,'extension',profileExtensionsData.extensions[extensionModelDeviceId].ranges);
    }
}
function get_extensions_current(){
    //a little bit not optimal
    var fieldExtensionsCurrent = {};
    var profileModelDeviceId = profileExtensionsData.device.id;
    for(extensionModelDeviceId in fieldExtensions){
        if(fieldExtensions[extensionModelDeviceId]['availablePhones'][profileModelDeviceId]){
            for(extension_unit in fieldExtensions[extensionModelDeviceId]['units']){
                fieldExtensionsCurrent[extension_unit] = extensionModelDeviceId;
            }
        }
    }
    return fieldExtensionsCurrent;
}
function add_extension_button(){
    var fieldExtensionsNum = get_extensions_num();
    var allowedExtensionsNum = profileExtensionsData.device.extensions_num;
    var addExtensionMarkup = '';
    var availableExtensionsNum = Object.keys(profileExtensionsData.extensions).length;
    if(allowedExtensionsNum && availableExtensionsNum && (fieldExtensionsNum < allowedExtensionsNum)){
        var exists = $('div#add_extension_button').length;
        if(!exists){
            addExtensionMarkup += '<div class="control-group" id="add_extension_button">'
+'<label class="control-label" for="extension">Device Extension</label>'
+'<div class="controls">'
+'<div class="control-group">'
+'<label class="control-label" for="extension.'+fieldExtensionsNum+'"></label>'
+'<div class="controls"><select name="extension_id" id="extension_id">';
            for( extensionModelDeviceId in profileExtensionsData.extensions ){
                addExtensionMarkup += '<option value='+extensionModelDeviceId+'>'+profileExtensionsData.extensions[extensionModelDeviceId].vendor+' '+ profileExtensionsData.extensions[extensionModelDeviceId].model;
            }
            addExtensionMarkup += '</select></div>'
+'</div>'
+'<div class="control-group">'
+'<div class="controls">'
+'<div class="btn btn-primary pull-right add_element btn" data-rep-elem-id="'+fieldExtensionsNum+'" id="extension.'+fieldExtensionsNum+'.add" onclick="var selectObj = document.getElementById(\'extension_id\');var extensionModelDeviceId=selectObj.options[selectObj.selectedIndex].value; create_ranges_annotations(extensionModelDeviceId,\'extension\',profileExtensionsData.extensions[extensionModelDeviceId].ranges);">Add Extension</div>'
+'</div>'
+'</div></div>'
+'</div>';
            apply_markup(addExtensionMarkup);
        }
    }else{
        $('div#add_extension_button').remove();
    }
}
function get_linecmt(){
    var linecmt = [];
    $("select[id^='line.']").each(function (i, element) {
        var found = element.id.match(/line\.(\d+)\.type/);
        if(found && found[1]){
            linecmt.push(found[1]);
        }
    });
    var linecmt_max = Math.max.apply(Math, linecmt);
    if(isNaN(linecmt_max) || linecmt_max == Number.POSITIVE_INFINITY || linecmt_max == Number.NEGATIVE_INFINITY){
    //we shouldn't make -1 for the NEXT number, although in the code the first operation is ++ in the loop;
        linecmt_max = -1;
    }
    return linecmt_max;
}
function get_extension_divcnt(id_in){
    var divcnt = {};
    $("div[id^='annotated_extension_']").each(function (i, element) {
        var found = element.id.match(/annotated_extension_(\d+)_(\d+)/);
        if(found && found[1] && found[2]){
            if(!divcnt[found[1]]){
                divcnt[found[1]] = [found[2]];
            }else{
                divcnt[found[1]].push(found[2]);
            }
        }
    });
    for(id in divcnt){
        divcnt[id] = Math.max.apply(Math, divcnt[id]);
    }
    var res = 0 + ( divcnt[id_in] ? divcnt[id_in] : 0 );
    return res;
}
function get_extensions_num(){
    return $("div[id^='annotated_extension_']").length;
}
$('div.controls #profile_id').change(annotate_profile);
annotate_profile();
</script>
<div id="extensions">
</div>
[% END -%]<!--/IF c.license('pbx') && c.config.features.cloudpbx && device_flag-->

[% # vim: set tabstop=4 syntax=html expandtab: -%]
