{include file="$template/includes/tablelist.tpl" tableName="ServicesList" filterColumn="3" noSortColumns="4"}
{assign var="servicesActiveCount" value=0}
{assign var="servicesPendingCount" value=0}
{assign var="servicesInactiveCount" value=0}
{foreach $services as $service}
    {if $service.status|lower == 'active'}
        {assign var="servicesActiveCount" value=$servicesActiveCount+1}
    {elseif $service.status|lower == 'pending'}
        {assign var="servicesPendingCount" value=$servicesPendingCount+1}
    {else}
        {assign var="servicesInactiveCount" value=$servicesInactiveCount+1}
    {/if}
{/foreach}

<script>
    jQuery(document).ready(function() {
        var table = jQuery('#tableServicesList').show().DataTable();
        var servicesPanel = jQuery('.dashboard-page-table-panel').first();
        var densityButton = jQuery('[data-services-density]');
        var exportButton = jQuery('[data-services-export]');

        {if $orderby == 'product'}
            table.order(0, '{$sort}');
        {elseif $orderby == 'amount' || $orderby == 'billingcycle'}
            table.order(1, '{$sort}');
        {elseif $orderby == 'nextduedate'}
            table.order(2, '{$sort}');
        {elseif $orderby == 'domainstatus'}
            table.order(3, '{$sort}');
        {/if}

        table.draw();
        jQuery('#tableLoading').hide();

        jQuery('#servicesPageSearch').on('keyup change', function() {
            table.search(jQuery(this).val().trim()).draw();
        });

        jQuery('#servicesPageStatus').on('change', function() {
            var value = jQuery(this).val().trim();
            table.column(3).search(value, false, false).draw();
        });

        densityButton.on('click', function() {
            servicesPanel.toggleClass('dashboard-page-table-panel--tight');
            densityButton.toggleClass('is-active');
        });

        exportButton.on('click', function() {
            var rows = [];

            table.rows({ search: 'applied' }).every(function() {
                var row = jQuery(this.node());
                rows.push([
                    row.find('.dashboard-item-title').first().text().trim(),
                    row.find('td').eq(1).find('.dashboard-table-money').text().trim() + ' ' + row.find('td').eq(1).find('.dashboard-item-subtitle').text().trim(),
                    row.find('td').eq(2).text().trim(),
                    row.find('.status-pill').text().trim()
                ]);
            });

            if (!rows.length) {
                return;
            }

            var csv = [['{lang key='orderproduct'}', '{lang key='clientareaaddonpricing'}', '{lang key='clientareahostingnextduedate'}', '{lang key='clientareastatus'}']].concat(rows).map(function(cols) {
                return cols.map(function(value) {
                    return '"' + String(value || '').replace(/"/g, '""') + '"';
                }).join(',');
            }).join('\n');

            var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            var link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'services-export.csv';
            link.click();

            setTimeout(function() {
                URL.revokeObjectURL(link.href);
            }, 1000);
        });
    });
</script>

    <section class="dashboard-page-section">
            <div class="dashboard-page-heading">
                <div>
                    <h1 class="dashboard-page-title">{lang key='navservices'}</h1>
            <p class="dashboard-panel__copy">{$LANG.clientareanavservices|default:$LANG.navservices}</p>
        </div>
    </div>

    <section class="dashboard-analytics-grid">
        <article class="dashboard-analytics-card dashboard-analytics-card--green">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-box-open"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='navservices'}</span>
                <strong class="dashboard-analytics-card__value">{$services|@count}</strong>
                <span class="dashboard-analytics-card__meta">{$LANG.all|default:$LANG.orderForm.totals}</span>
            </div>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--mint">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-check-circle"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientareaactive'}</span>
                <strong class="dashboard-analytics-card__value">{$servicesActiveCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='clientareaactive'}</span>
            </div>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--amber">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-box"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientareapending'}</span>
                <strong class="dashboard-analytics-card__value">{$servicesPendingCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='clientareapending'}</span>
            </div>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--rose">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-pause-circle"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientareasuspended'}</span>
                <strong class="dashboard-analytics-card__value">{$servicesInactiveCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='clientareasuspended'}</span>
            </div>
        </article>
    </section>

    <section class="dashboard-panel dashboard-page-table-panel">
        <div class="dashboard-page-table-toolbar">
            <div class="dashboard-toolbar-search">
                <i class="far fa-search"></i>
                <input type="search" id="servicesPageSearch" class="form-control" placeholder="{lang key='search'}..." />
            </div>
            <div class="dashboard-page-table-toolbar__actions">
                <div class="dashboard-select-wrap">
                    <i class="far fa-filter"></i>
                    <select id="servicesPageStatus" class="form-control custom-select">
                        <option value="">{lang key='all'} {$LANG.clientareastatus|default:'Statuses'}</option>
                        <option value="Active">{lang key='clientareaactive'}</option>
                        <option value="Pending">{lang key='clientareapending'}</option>
                        <option value="Suspended">{lang key='clientareasuspended'}</option>
                        <option value="Terminated">{lang key='clientareaterminated'}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="table-container clearfix">
            <table id="tableServicesList" class="table dashboard-table dashboard-table--rich dashboard-data-table w-hidden">
                <thead>
                    <tr>
                        <th>{lang key='orderproduct'}</th>
                        <th>{lang key='clientareaaddonpricing'}</th>
                        <th>{lang key='clientareahostingnextduedate'}</th>
                        <th>{lang key='clientareastatus'}</th>
                        <th class="text-right">{lang key='actions'}</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $services as $service}
                        <tr onclick="clickableSafeRedirect(event, 'clientarea.php?action=productdetails&amp;id={$service.id}', false)">
                            <td>
                                <div class="dashboard-table-service">
                                    <span class="dashboard-table-service__icon {if $service.status|lower == 'active'}is-active{elseif $service.status|lower == 'pending'}is-pending{else}is-muted{/if}">
                                        {if $service.domain}
                                            <i class="fas fa-server"></i>
                                        {else}
                                            <i class="fas fa-lock"></i>
                                        {/if}
                                    </span>
                                    <div class="dashboard-table-service__copy">
                                        <strong class="dashboard-item-title">{$service.product}</strong>
                                        <span class="dashboard-item-subtitle">{if $service.domain}{$service.domain}{else}-{/if}</span>
                                    </div>
                                </div>
                            </td>
                            <td data-order="{$service.amountnum}">
                                <strong class="dashboard-table-money">{$service.amount}</strong>
                                <span class="dashboard-item-subtitle">{$service.billingcycle}</span>
                            </td>
                            <td>
                                <span class="w-hidden">{$service.normalisedNextDueDate}</span>
                                <span class="dashboard-table-date">{$service.nextduedate|default:'-'}</span>
                            </td>
                            <td>
                                <span class="status-pill {if $service.status|lower == 'active'}success{elseif $service.status|lower == 'pending'}warning{elseif $service.status|lower == 'suspended'}danger{else}muted{/if}">
                                    {$service.statustext}
                                </span>
                            </td>
                            <td class="text-right">
                                <a href="clientarea.php?action=productdetails&amp;id={$service.id}" class="dashboard-row-action stopEventBubble" aria-label="{lang key='view'} {$LANG.navservices|default:$LANG.clientareanavservices}">
                                    <i class="far fa-ellipsis-h"></i>
                                </a>
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
            <div class="text-center" id="tableLoading">
                <p><i class="fas fa-spinner fa-spin"></i> {lang key='loading'}</p>
            </div>
        </div>
    </section>
</section>
