{include file="sections/header.tpl"}
            <div class="container-fluid">
                <style>
                    .dataTables_wrapper .dataTables_paginate .paginate_button {
                        display: inline-block;
                        padding: 5px 10px;
                        margin-right: 5px;
                        border: 1px solid #ccc;
                        background-color: #fff;
                        color: #333;
                        cursor: pointer;
                    }
                </style>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card card-hovered mb20 card-primary">
                            <div class="card-header">
                                {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
                                <div class="btn-group pull-right">
                                    <a class="btn btn-primary btn-xs" title="save" href="{$_url}customers/csv"
                                        onclick="return confirm('This will export to CSV?')"><span class="fa fa-download"
                                            aria-hidden="true"></span> CSV</a>
                                </div>
                                {/if}
                                {Lang::T('Manage Contact')}
                            </div>
                            <div class="card-body">
                                <div class="md-whiteframe-z1 mb20 text-center">
                                    <div class="col-md-6">
                                        <form method="post" action="{$_url}customers/list" class="form-inline">
                                            <div class="form-group">
                                                <label for="filter" class="control-label" style="margin-right: 10px;">{Lang::T('Filter by Status')}:</label>
                                                <select name="filter" id="filter" class="form-control" onchange="this.form.submit()">
                                                    <option value="All" {if $filter == 'All'}selected{/if}>{Lang::T('All Status')}</option>
                                                    {foreach $statuses as $status}
                                                        <option value="{$status}" {if $filter == $status}selected{/if}>{$status}</option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-md-6">
                                        <a href="{$_url}customers/add" class="btn btn-primary btn-block"><i class="fa fa-plus">
                                            </i> {Lang::T('Add New Client')}</a>
                                    </div>&nbsp;
                                </div>
                                <div class="table-responsive table_mobile">
                                    <div class="alert alert-info">
                                        <strong>{Lang::T('Showing')}:</strong> {count($d)} {Lang::T('customers')} 
                                        {if $filter != 'All'}({Lang::T('Status')}: {$filter}){/if}
                                    </div>
                                    <table id="customerTable" class="table table-bordered table-striped table-condensed">
                                        <thead>
                                            <tr>
                                                <th>{Lang::T('Full Name')}</th>
                                                <th>{Lang::T('Username')}</th>
                                                <th>{Lang::T('Acc Type')}</th>
                                                <th>{Lang::T('Area')}</th>
                                                <th>{Lang::T('Package')}</th>
                                                <th>{Lang::T('Service')}</th>
                                                <th>{Lang::T('Status')}</th>
                                                <!--<th>{Lang::T('Created On')}</th>-->
                                                <th>{Lang::T('Manage')}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {foreach $d as $ds}
                                            <tr {if $ds['status'] != 'Active'}class="danger"{/if}>
                                                <td onclick="window.location.href = '{$_url}customers/view/{$ds['id']}'"
                                                    style="cursor: pointer;">{$ds['fullname']}</td>
                                                <td onclick="window.location.href = '{$_url}customers/view/{$ds['id']}'"
                                                    style="cursor:pointer;">{$ds['username']}</td>
                                                <td>{$ds['account_type']}</td>
                                                <td>{$ds['address']}</td>
                                                <td align="center" api-get-text="{$_url}autoload/customer_is_active/{$d['id']}">
                                                    <span class="label label-default">&bull;</span>
                                                </td>
                                                <td>{$ds['service_type']}</td>
                                                <td>
                                                    <span class="label label-{if $ds['status'] == 'Active'}success{elseif $ds['status'] == 'Banned'}danger{elseif $ds['status'] == 'Disabled'}warning{elseif $ds['status'] == 'Suspended'}danger{elseif $ds['status'] == 'Limited'}warning{else}default{/if}">
                                                        {$ds['status']}
                                                    </span>
                                                </td>
                                                <!--<td>{Lang::dateTimeFormat($ds['created_at'])}</td>-->
                                                <td align="center">
                                                    <a href="{$_url}customers/view/{$ds['id']}" id="{$ds['id']}"
                                                        style="margin: 0px; color:black"
                                                        class="btn btn-success btn-xs">&nbsp;&nbsp;{Lang::T('View')}&nbsp;&nbsp;</a>
                                                    <a href="{$_url}customers/edit/{$ds['id']}" id="{$ds['id']}"
                                                        style="margin: 0px; color:black"
                                                        class="btn btn-info btn-xs">&nbsp;&nbsp;{Lang::T('Edit')}&nbsp;&nbsp;</a>
                                                    <a href="{$_url}plan/recharge/{$ds['id']}" id="{$ds['id']}" style="margin: 0px;color:black;"
                                                        class="btn btn-warning btn-xs">{Lang::T('Recharge')}</a>
                                                </td>
                                            </tr>
                                            {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
                <script>
                    var $j = jQuery.noConflict();
                    $j(document).ready(function () {
                        $j('#customerTable').DataTable({
                            "pagingType": "full_numbers"
                        });
                    });
                </script>
            </div>
{include file="sections/footer.tpl"}