{include file="$template/includes/flashmessage.tpl"}
{assign var="activeServicesCount" value=$clientsstats.productsactive|default:$clientsstats.productsnumactive|default:0}
{assign var="domainsCount" value=$clientsstats.numdomains|default:$clientsstats.numactivedomains|default:0}
{assign var="dueInvoicesCount" value=$clientsstats.numdueinvoices|default:$clientsstats.numunpaidinvoices|default:0}
{assign var="ticketsCount" value=$clientsstats.numactivetickets|default:0}
{assign var="activePanel" value=$panels->getChild('Active Products/Services')}
{assign var="invoicePanel" value=false}
{if $panels->getChild('Unpaid Invoices')}
    {assign var="invoicePanel" value=$panels->getChild('Unpaid Invoices')}
{elseif $panels->getChild('Overdue Invoices')}
    {assign var="invoicePanel" value=$panels->getChild('Overdue Invoices')}
{/if}
{assign var="servicesShown" value=0}
{assign var="invoicesShown" value=0}
{assign var="ticketsShown" value=0}

<div class="dashboard-grid dashboard-home-stats mb-4">
    <section class="dashboard-card dashboard-home-stat dashboard-home-stat--hosting">
        <div class="dashboard-home-stat__body">
            <div class="dashboard-home-stat__head">
                <span class="dashboard-home-stat__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4.5" width="16" height="5" rx="1.5"></rect><rect x="4" y="10.5" width="16" height="4.5" rx="1.5"></rect><rect x="4" y="16" width="16" height="3.5" rx="1.5"></rect><path d="M8 7h.01"></path><path d="M8 12.75h.01"></path><path d="M8 17.75h.01"></path></svg>
                </span>
                <h2 class="dashboard-home-stat__title">{lang key='navservices'}</h2>
            </div>
            <div class="dashboard-home-stat__value">{$activeServicesCount}</div>
            <p class="dashboard-home-stat__meta">{$activeServicesCount} {lang key='navservices'}</p>
        </div>
    </section>

    <section class="dashboard-card dashboard-home-stat dashboard-home-stat--billing">
        <div class="dashboard-home-stat__body">
            <div class="dashboard-home-stat__head">
                <span class="dashboard-home-stat__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3.5h8l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"></path><path d="M15 3.5V8h4"></path><path d="M9 12h6"></path><path d="M9 16h4"></path></svg>
                </span>
                <h2 class="dashboard-home-stat__title">{lang key='invoicesdue'}</h2>
            </div>
            <div class="dashboard-home-stat__value">{$dueInvoicesCount}</div>
            <p class="dashboard-home-stat__meta">{$dueInvoicesCount} {lang key='invoicesdue'}</p>
        </div>
    </section>

    <section class="dashboard-card dashboard-home-stat dashboard-home-stat--domains">
        <div class="dashboard-home-stat__body">
            <div class="dashboard-home-stat__head">
                <span class="dashboard-home-stat__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"></circle><path d="M4 12h16"></path><path d="M12 4a13 13 0 0 1 0 16"></path><path d="M12 4a13 13 0 0 0 0 16"></path></svg>
                </span>
                <h2 class="dashboard-home-stat__title">{lang key='navdomains'}</h2>
            </div>
            <div class="dashboard-home-stat__value">{$domainsCount}</div>
            <p class="dashboard-home-stat__meta">{$domainsCount} {lang key='navdomains'}</p>
        </div>
    </section>

    <section class="dashboard-card dashboard-home-stat dashboard-home-stat--tickets">
        <div class="dashboard-home-stat__body">
            <div class="dashboard-home-stat__head">
                <span class="dashboard-home-stat__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 10a6 6 0 1 0-12 0v5a2 2 0 0 0 2 2h2v-5H8"></path><path d="M16 17h2a2 2 0 0 0 2-2v-5"></path><path d="M12 19v2"></path></svg>
                </span>
                <h2 class="dashboard-home-stat__title">{lang key='supportticketspagetitle'}</h2>
            </div>
            <div class="dashboard-home-stat__value">{$ticketsCount}</div>
            <p class="dashboard-home-stat__meta">{$ticketsCount} {lang key='navtickets'}</p>
        </div>
    </section>
</div>

<section class="dashboard-panel dashboard-home-panel mb-4">
    <div class="dashboard-panel__header dashboard-home-panel__header">
        <div>
            <h2 class="dashboard-panel__title">My Services</h2>
            <p class="dashboard-home-panel__subtitle">Manage and view all your active services.</p>
        </div>
        <a href="clientarea.php?action=services" class="dashboard-chip-link">{lang key='viewAll'}</a>
    </div>
    <div class="table-responsive">
        <table class="table dashboard-table dashboard-home-services-table align-middle mb-0" data-dashboard-services-table data-source-url="clientarea.php?action=services">
            <thead>
                <tr>
                    <th><span class="dashboard-home-th">{lang key='orderproduct'} <i class="fas fa-sort"></i></span></th>
                    <th><span class="dashboard-home-th">{lang key='orderdomain'} <i class="fas fa-sort"></i></span></th>
                    <th><span class="dashboard-home-th">{lang key='clientareastatus'} <i class="fas fa-sort"></i></span></th>
                    <th><span class="dashboard-home-th">{lang key='clientareahostingnextduedate'} <i class="fas fa-sort"></i></span></th>
                    <th class="text-right"><span class="dashboard-home-th dashboard-home-th--right">{lang key='actions'}</span></th>
                </tr>
            </thead>
            <tbody data-dashboard-services-body>
                {if isset($services) && $services|@count gt 0}
                    {foreach $services as $service}
                        {assign var="serviceStatus" value=$service.status|lower}
                        {assign var="serviceRenewalDate" value=$service.nextduedate|default:$service.nextDueDate|default:$service.nextinvoicedate|default:$service.nextInvoiceDate|default:$service.normalisedNextDueDate|default:''}
                        {if $servicesShown < 4 && $serviceStatus == 'active'}
                        <tr>
                            <td>
                                <div class="dashboard-home-service">
                                    <span class="dashboard-home-service__icon">
                                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="14" height="5" rx="1.5"></rect><rect x="5" y="10.5" width="14" height="4.5" rx="1.5"></rect><rect x="5" y="16" width="14" height="3" rx="1.5"></rect></svg>
                                    </span>
                                    <div>
                                        <div class="dashboard-item-title">{$service.product|default:$service.name|default:$service.groupname|default:$service.domain|strip_tags}</div>
                                        <div class="dashboard-item-subtitle">{$service.groupname|default:'-'|strip_tags}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{if $service.domain}{$service.domain}{else}-{/if}</td>
                            <td>
                                <span class="status-pill success">
                                    <span>{$service.statustext|default:$service.status}</span>
                                </span>
                            </td>
                            <td>
                                <div class="dashboard-home-renewal">
                                    <div class="dashboard-home-renewal__date">{if $serviceRenewalDate}{$serviceRenewalDate}{else}-{/if}</div>
                                    <div class="dashboard-item-subtitle">{if $serviceRenewalDate}{lang key='clientareahostingnextduedate'}{else}{$service.billingcycle|default:$LANG.billingcycle|default:'-'}{/if}</div>
                                </div>
                            </td>
                            <td class="text-right">
                                <a href="clientarea.php?action=productdetails&id={$service.id}" class="dashboard-home-action" aria-label="{lang key='view'} {$LANG.navservices|default:$LANG.clientareanavservices}">
                                    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1.7"></circle><circle cx="12" cy="12" r="1.7"></circle><circle cx="12" cy="19" r="1.7"></circle></svg>
                                </a>
                            </td>
                        </tr>
                        {assign var="servicesShown" value=$servicesShown+1}
                        {/if}
                    {/foreach}
                {/if}
                {if $servicesShown == 0 && $activePanel && $activePanel->getChildren()|@count gt 0}
                    {foreach $activePanel->getChildren() as $product}
                        {if $servicesShown < 4}
                        <tr>
                            <td>
                                <div class="dashboard-home-service">
                                    <span class="dashboard-home-service__icon">
                                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="14" height="5" rx="1.5"></rect><rect x="5" y="10.5" width="14" height="4.5" rx="1.5"></rect><rect x="5" y="16" width="14" height="3" rx="1.5"></rect></svg>
                                    </span>
                                    <div>
                                        <div class="dashboard-item-title">{$product->getLabel()}</div>
                                        <div class="dashboard-item-subtitle">{lang key='navservices'}</div>
                                    </div>
                                </div>
                            </td>
                            <td>-</td>
                            <td><span class="status-pill success"><span>{if $product->hasBadge()}{$product->getBadge()}{else}{lang key='clientareaactive'}{/if}</span></span></td>
                            <td><div class="dashboard-item-subtitle">{lang key='clientareaactive'}</div></td>
                            <td class="text-right"><a href="clientarea.php?action=services" class="dashboard-link">{lang key='manage'}</a></td>
                        </tr>
                        {assign var="servicesShown" value=$servicesShown+1}
                        {/if}
                    {/foreach}
                {/if}
                {if $servicesShown == 0}
                    <tr>
                        <td colspan="5" class="dashboard-empty-cell">{lang key='clientareaproductsnone'}</td>
                    </tr>
                {/if}
            </tbody>
        </table>
    </div>
    <div class="dashboard-home-table-footer">
        <div class="dashboard-home-table-footer__count">Showing {$servicesShown} active service{if $servicesShown != 1}s{/if}</div>
        <div class="dashboard-home-table-footer__pager" aria-hidden="true">
            <span class="dashboard-home-table-footer__page-btn"><i class="fas fa-chevron-left"></i></span>
            <span class="dashboard-home-table-footer__page-btn is-active">1</span>
            <span class="dashboard-home-table-footer__page-btn"><i class="fas fa-chevron-right"></i></span>
        </div>
    </div>
</section>

<div class="row g-4">
    <div class="col-lg-6">
        <section class="dashboard-panel dashboard-home-panel h-100">
            <div class="dashboard-panel__header dashboard-home-panel__header">
                <div>
                    <h2 class="dashboard-panel__title">My Invoices</h2>
                    <p class="dashboard-home-panel__subtitle">Track unpaid and recently generated invoices.</p>
                </div>
                <a href="clientarea.php?action=invoices" class="dashboard-chip-link">{lang key='viewAll'}</a>
            </div>
            <div class="dashboard-stack" data-dashboard-invoices-list data-source-url="clientarea.php?action=invoices" data-empty-title="{lang key='invoicesnoinvoices'}" data-empty-message="{lang key='noinvoicesduemsg'}">
                {if isset($invoices) && $invoices|@count gt 0}
                    {foreach $invoices as $invoice}
                        {if $invoicesShown < 3}
                        <a class="dashboard-list-card dashboard-list-card--invoice" href="viewinvoice.php?id={$invoice.id}">
                            <div>
                                <div class="dashboard-item-title">{$invoice.invoicenum|default:$invoice.id}</div>
                                <div class="dashboard-item-subtitle">{$invoice.datecreated|default:$invoice.datedue}</div>
                            </div>
                            <div class="text-right">
                                <div class="fw-semibold">{$invoice.total|default:'-'}</div>
                                <div class="dashboard-list-status {$invoice.statusClass|default:'paid'}">{$invoice.status|default:$LANG.paid}</div>
                            </div>
                        </a>
                        {assign var="invoicesShown" value=$invoicesShown+1}
                        {/if}
                    {/foreach}
                {/if}
                {if $invoicesShown == 0 && $invoicePanel && $invoicePanel->getChildren()|@count gt 0}
                    {foreach $invoicePanel->getChildren() as $invoiceItem}
                        {if $invoicesShown < 3}
                        <a class="dashboard-list-card dashboard-list-card--invoice" href="{$invoiceItem->getUri()|default:'clientarea.php?action=invoices'}">
                            <div>
                                <div class="dashboard-item-title">{$invoiceItem->getLabel()}</div>
                                <div class="dashboard-item-subtitle">{lang key='invoicesdue'}</div>
                            </div>
                            <div class="text-right">
                                <div class="fw-semibold">{if $invoiceItem->hasBadge()}{$invoiceItem->getBadge()}{else}{lang key='invoicesview'}{/if}</div>
                                <div class="dashboard-list-status unpaid">{lang key='invoicesunpaid'}</div>
                            </div>
                        </a>
                        {assign var="invoicesShown" value=$invoicesShown+1}
                        {/if}
                    {/foreach}
                {/if}
                {if $invoicesShown == 0}
                    <div class="dashboard-home-loading" data-dashboard-invoices-loading>
                        <span class="dashboard-home-loading__icon">
                            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3.5h8l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"></path><path d="M15 3.5V8h4"></path><path d="M9 12h6"></path><path d="M9 16h4"></path></svg>
                        </span>
                        <div class="dashboard-home-loading__copy">
                            <div class="dashboard-home-loading__title">{lang key='loading'}</div>
                            <div class="dashboard-item-subtitle">{lang key='invoices'}</div>
                        </div>
                    </div>
                {/if}
            </div>
        </section>
    </div>
    <div class="col-lg-6">
        <section class="dashboard-panel dashboard-home-panel h-100">
            <div class="dashboard-panel__header dashboard-home-panel__header">
                <div>
                    <h2 class="dashboard-panel__title">Support Tickets</h2>
                    <p class="dashboard-home-panel__subtitle">Get help from our support team.</p>
                </div>
                <a href="submitticket.php" class="dashboard-chip-link">Submit Ticket</a>
            </div>
            <div class="dashboard-stack">
                {foreach $tickets as $ticket}
                    {if $ticketsShown < 3}
                    <a class="dashboard-list-card dashboard-list-card--ticket" href="viewticket.php?tid={$ticket.tid}&c={$ticket.c}">
                        <div class="dashboard-ticket-row">
                            <span class="dashboard-ticket-row__icon">
                                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6.5h14a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 19 17.5H9l-4.5 3v-12A1.5 1.5 0 0 1 6 6.5z"></path><path d="M8 11h8"></path><path d="M8 14h5"></path></svg>
                            </span>
                            <div>
                                <div class="dashboard-item-title">#{$ticket.tid} {$ticket.subject}</div>
                                <div class="dashboard-item-subtitle">{$ticket.lastreply}</div>
                            </div>
                        </div>
                        <div class="dashboard-ticket-row__meta">
                            <span class="dashboard-list-status {if $ticket.statusClass == 'answered'}info{elseif $ticket.statusClass == 'closed'}muted{else}primary{/if}">{$ticket.status}</span>
                            <span class="dashboard-ticket-row__chevron">
                                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg>
                            </span>
                        </div>
                    </a>
                    {assign var="ticketsShown" value=$ticketsShown+1}
                    {/if}
                {foreachelse}
                    <div class="dashboard-empty-state">{lang key='nosupporttickets'}</div>
                {/foreach}
            </div>
        </section>
    </div>
</div>
