{include file="sections/header.tpl"}

<style>
    /* Style for pagination buttons */
    .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;
    }

    /* Hover effect for pagination buttons */
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #f0f0f0;
        border-color: #888;
    }

    /* Style for table rows */
    .table tbody tr:hover {
        background-color: #f9f9f9;
        cursor: pointer;
    }

    /* Enhanced styling for buttons */
    .btn-xs {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* Add spacing for action buttons */
    .table-actions a {
        margin-right: 5px;
    }

    /* Ensure table is fully responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table td, .table th {
        white-space: nowrap;
    }

    /* Ensure form elements are displayed in a single row */
    .md-whiteframe-z1 .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .md-whiteframe-z1 .input-group {
        width: 100%;
    }

    .md-whiteframe-z1 .col-lg-3,
    .md-whiteframe-z1 .col-lg-2 {
        flex: 1 1 22%; /* Adjust width of columns to fit in one row */
        max-width: 22%;
    }

    .md-whiteframe-z1 .input-group-addon {
        min-width: 80px; /* To ensure the labels don't overlap */
    }

    .md-whiteframe-z1 .input-group input,
    .md-whiteframe-z1 .input-group select {
        width: 100%;
    }

    .md-whiteframe-z1 .input-group-btn button {
        margin-left: 5px; /* Add margin between the buttons */
    }

    /* Adjust padding and spacing to ensure proper alignment */
    .md-whiteframe-z1 {
        padding: 15px 10px;
    }

    /* Default Flexbox layout for larger screens */
    .md-whiteframe-z1 .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .md-whiteframe-z1 .col-lg-3,
    .md-whiteframe-z1 .col-lg-2 {
        flex: 1 1 22%; /* Default width for larger screens */
        max-width: 22%;
    }

    /* Adjust the width of input fields to fill their containers */
    .md-whiteframe-z1 .input-group {
        width: 100%;
    }

    /* Ensure the label has enough space without overlapping */
    .md-whiteframe-z1 .input-group-addon {
        min-width: 80px;
    }

    .md-whiteframe-z1 .input-group input,
    .md-whiteframe-z1 .input-group select {
        width: 100%;
    }

    .md-whiteframe-z1 .input-group-btn button {
        margin-left: 5px; /* Add margin between buttons */
    }

    /* For small screens (e.g., mobile) - Stack inputs in a column */
    @media (max-width: 767px) {
        .md-whiteframe-z1 .col-lg-3,
        .md-whiteframe-z1 .col-lg-2 {
            flex: 1 1 100%;  /* Make each input take full width on small screens */
            max-width: 100%;
            margin-bottom: 10px; /* Add space between elements */
        }

        /* Adjust the size of the input group on small screens */
        .md-whiteframe-z1 .input-group {
            margin-bottom: 10px; /* Space between the form fields */
        }

        .md-whiteframe-z1 .input-group-addon {
            min-width: 70px;  /* Reduce label width for smaller screens */
        }
    }

    /* For medium-sized screens (tablets) */
    @media (min-width: 768px) and (max-width: 991px) {
        .md-whiteframe-z1 .col-lg-3,
        .md-whiteframe-z1 .col-lg-2 {
            flex: 1 1 48%;  /* Take up 48% of the row */
            max-width: 48%;
        }
    }

    /* Make the panel title bold */
    .panel-heading .panel-title {
        font-weight: bold; /* Make the title bold */
    }

    /* Fix visibility issues for Package and Online Status columns */
    .table td:nth-child(7),  /* Package column */
    .table td:nth-child(11) { /* Online Status column */
        visibility: visible !important;
        opacity: 1 !important;
        display: table-cell !important;
    }

    /* Ensure that column headers are not hidden */
    .table th:nth-child(7), /* Package header */
    .table th:nth-child(11) { /* Online Status header */
        visibility: visible !important;
        opacity: 1 !important;
        display: table-cell !important;
    }
</style>

<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-hovered mb20 panel-primary">
            <div class="panel-heading">
                {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&token={$csrf_token}"
                            onclick="return ask(this, 'This will export to CSV?')">
                            <span class="glyphicon glyphicon-download" aria-hidden="true"></span> CSV
                        </a>
                    </div>
                {/if}
                {Lang::T('Manage Contact')}
            </div>
            <div class="panel-body">
                <form id="site-search" method="post" action="{$_url}customers">
                    <input type="hidden" name="csrf_token" value="{$csrf_token}">
                    <div class="md-whiteframe-z1 mb20 text-center" style="padding: 15px">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="input-group">
                                    <span class="input-group-addon">Order&nbsp;&nbsp;</span>
                                    <select class="form-control" id="order" name="order">
                                        <option value="username" {if $order eq 'username' }selected{/if}>{Lang::T('Username')}</option>
                                        <option value="fullname" {if $order eq 'fullname' }selected{/if}>{Lang::T('First Name')}</option>
                                        <option value="lastname" {if $order eq 'lastname' }selected{/if}>{Lang::T('Last Name')}</option>
                                        <option value="created_at" {if $order eq 'created_at' }selected{/if}>{Lang::T('Created Date')}</option>
                                        <option value="balance" {if $order eq 'balance' }selected{/if}>{Lang::T('Balance')}</option>
                                        <option value="status" {if $order eq 'status' }selected{/if}>{Lang::T('Status')}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="input-group">
                                    <span class="input-group-addon">Ascending&nbsp;&nbsp;</span>
                                    <select class="form-control" id="orderby" name="orderby">
                                        <option value="asc" {if $orderby eq 'asc' }selected{/if}>{Lang::T('Ascending')}</option>
                                        <option value="desc" {if $orderby eq 'desc' }selected{/if}>{Lang::T('Descending')}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="input-group">
                                    <span class="input-group-addon">Status&nbsp;&nbsp;</span>
                                    <select class="form-control" id="filter" name="filter">
                                        {foreach $statuses as $status}
                                            <option value="{$status}" {if $filter eq $status }selected{/if}>{Lang::T($status)}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="input-group">
                                    <input type="text" name="search" class="form-control" placeholder="{Lang::T('Search')}..." value="{$search}">
                                    <div class="input-group-btn">
                                        <button class="btn btn-primary" type="submit"><span class="fa fa-search"></span> {Lang::T('Search')}</button>
                                        <button class="btn btn-info" type="submit" name="export" value="csv">
                                            <span class="glyphicon glyphicon-download" aria-hidden="true"></span> CSV
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-4">
                        <a href="{$_url}customers/add" class="btn btn-success text-black btn-block" title="{Lang::T('Add')}">
                            <i class="ion ion-android-add"></i><i class="glyphicon glyphicon-user">Add New Client</i>
                        </a>
                    </div>
                </form>
                <br>&nbsp;
                <div class="table-responsive">
                    <table id="customerTable" class="table table-bordered table-striped table-condensed">
                        <thead>
                            <tr>
                                <th>{Lang::T('Username')}</th>
                                <th>Photo</th>
                                <th>{Lang::T('Account Type')}</th>
                                <th>{Lang::T('Full Name')}</th>
                                <th>{Lang::T('Balance')}</th>
                                <th>{Lang::T('Contact')}</th>
                                <th>{Lang::T('Package')}</th>
                                <th>{Lang::T('Service Type')}</th>
                                <th>PPPOE</th>
                                <th>{Lang::T('Status')}</th>
                                <th>{Lang::T('Created On')}</th>
                                <th>{Lang::T('Online Status')}</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['username']}</td>
                                    <td>
                                        <a href="{$UPLOAD_PATH}{$ds['photo']}" target="photo">
                                            <img src="{$UPLOAD_PATH}{$ds['photo']}.thumb.jpg" width="32" alt="">
                                        </a>
                                    </td>
                                    <td>{$ds['account_type']}</td>
                                    <td onclick="window.location.href = '{$_url}customers/view/{$ds['id']}'" style="cursor: pointer;">{$ds['fullname']}</td>
                                    <td>{Lang::moneyFormat($ds['balance'])}</td>
                                    <td align="center">
                                        {if $ds['phonenumber']}
                                            <a href="tel:{$ds['phonenumber']}" class="btn btn-default btn-xs" title="{$ds['phonenumber']}"><i class="glyphicon glyphicon-earphone"></i></a>
                                        {/if}
                                        {if $ds['email']}
                                            <a href="mailto:{$ds['email']}" class="btn btn-default btn-xs" title="{$ds['email']}"><i class="glyphicon glyphicon-envelope"></i></a>
                                        {/if}
                                        {if $ds['coordinates']}
                                            <a href="https://www.google.com/maps/dir//{$ds['coordinates']}/" target="_blank" class="btn btn-default btn-xs" title="{$ds['coordinates']}"><i class="glyphicon glyphicon-map-marker"></i></a>
                                        {/if}
                                    </td>
                                    <td align="center" api-get-text="{$_url}autoload/plan_is_active/{$ds['id']}">
                                        <span class="label label-default">&bull;</span>
                                    </td>
                                    <td>{$ds['service_type']}</td>
                                    <td>
                                        {$ds['pppoe_username']}
                                        {if !empty($ds['pppoe_username']) && !empty($ds['pppoe_ip'])}:{/if}
                                        {$ds['pppoe_ip']}
                                    </td>
                                    <td>{Lang::T($ds['status'])}</td>
                                    <td>{Lang::dateTimeFormat($ds['created_at'])}</td>
                                    <!-- Online Status Column -->
                                    <td>
                                        {if $ds['last_seen'] == 'online'}
                                            <span class="label label-success">{Lang::T('Online')}</span>
                                        {else}
                                            <span class="label label-default">
                                                {Lang::T('Last Seen')}: {Lang::dateTimeFormat($ds['last_seen'])}
                                            </span>
                                        {/if}
                                    </td>
                                    <td align="center" class="table-actions">
                                        <a href="{$_url}customers/view/{$ds['id']}" id="{$ds['id']}" class="btn btn-success btn-xs">&nbsp;&nbsp;{Lang::T('View')}&nbsp;&nbsp;</a>
                                        <a href="{$_url}customers/edit/{$ds['id']}&token={$csrf_token}" id="{$ds['id']}" class="btn btn-info btn-xs">&nbsp;&nbsp;{Lang::T('Edit')}&nbsp;&nbsp;</a>
                                        <a href="{$_url}customers/sync/{$ds['id']}&token={$csrf_token}" id="{$ds['id']}" class="btn btn-success btn-xs">&nbsp;&nbsp;{Lang::T('Sync')}&nbsp;&nbsp;</a>
                                        <a href="{$_url}plan/recharge/{$ds['id']}&token={$csrf_token}" id="{$ds['id']}" class="btn btn-primary btn-xs">{Lang::T('Recharge')}</a>
                                    </td>
                                </tr>
                            {/foreach}
                        </tbody>
                    </table>
                </div>
                {include file="pagination.tpl"}
            </div>
        </div>
    </div>
</div>

{include file="sections/footer.tpl"}

