{include file="sections/header.tpl"}
<!-- Include Tailwind CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- Include FontAwesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600&display=swap');

    body {
        font-family: 'Mulish', sans-serif;
    }

    .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;
    }

    .no-package {
        font-size: 0.75rem; /* Adjusted font size */
    }

    .action-icons a {
        margin-right: 0.5rem; /* Spacing between icons */
    }

    .username {
        
        font-weight: bold;
    }
</style>

<div class="container mx-auto mt-8">
    <div class="p-6 rounded-lg shadow-lg rounded-lg p-6">
        <form id="site-search" method="post" action="{$_url}customers" class="flex flex-wrap items-center justify-between space-y-4 md:space-y-0">
            <div class="w-full md:w-auto flex-grow md:flex md:items-center space-y-4 md:space-y-0">
                <div class="md:flex md:space-x-4 w-full">
                    <!-- Filter by order -->
                    <div class="mb-4 md:mb-0 w-full md:w-1/3">
                        <div class="inline-block relative w-full">
                            <select class="block appearance-none w-full bg-transparent border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline" 
                                    id="order" name="order">
                                <option value="username" {if $order eq 'username'}selected{/if}>Username</option>
                                <option value="created_at" {if $order eq 'created_at'}selected{/if}>Created Date</option>
                                <option value="balance" {if $order eq 'balance'}selected{/if}>Balance</option>
                                <option value="status" {if $order eq 'status'}selected{/if}>Status</option>
                            </select>
                        </div>
                    </div>
                    <!-- Ascending/Descending -->
                    <div class="mb-4 md:mb-0 w-full md:w-1/3">
                        <div class="inline-block relative w-full">
                            <select class="block appearance-none w-full bg-transparent border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline" 
                                    id="orderby" name="orderby">
                                <option value="asc" {if $orderby eq 'asc'}selected{/if}>Ascending</option>
                                <option value="desc" {if $orderby eq 'desc'}selected{/if}>Descending</option>
                            </select>
                        </div>
                    </div>
                    <!-- Status Filter -->
                    <div class="mb-4 md:mb-0 w-full md:w-1/3">
                        <div class="inline-block relative w-full">
                            <select class="block appearance-none w-full bg-transparent border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline" 
                                    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>
                <!-- Actions -->
         <div class="w-full md:w-auto md:flex-shrink-0 space-y-4 md:space-y-0 md:space-x-1 flex items-center">
            <input type="text" name="search" class="form-control border border-gray-300 p-2 w-full md:w-auto" placeholder="{Lang::T('Search')}..." value="{$search}">
            <button class="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded" type="submit"><i class="fas fa-search"></i></button>
        </div>       
            </div>
            
        </form>
        <div class="w-full md:w-auto md:flex-shrink-0 space-y-4 md:space-y-0 md:space-x-2 flex items-center">
            <a href="{$_url}customers/add" class="btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded flex items-center text-lg">
                <i class="fas fa-plus mr-2"></i> Add New Client
            </a>
        </div>
        <div class="table-responsive mt-4">
            <table id="customerTable" class="table table-bordered table-striped table-condensed">
                <thead class="bg-gray-50">
                    <tr>
                                <th>{Lang::T('Username')}</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('Manage')}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $d as $ds}
                                <tr {if $ds['status'] != 'Active'}class="table-danger"{/if}>
                                    <td onclick="window.location.href = '{$_url}customers/view/{$ds['id']}'" style="cursor:pointer;">{$ds['username']}</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 class="text-center">
                                        {if $ds['phonenumber']}
                                            <a href="tel:{$ds['phonenumber']}" class="btn btn-outline-secondary btn-sm" title="{$ds['phonenumber']}"><i class="fas fa-phone"></i></a>
                                        {/if}
                                        {if $ds['email']}
                                            <a href="mailto:{$ds['email']}" class="btn btn-outline-secondary btn-sm" title="{$ds['email']}"><i class="fas fa-envelope"></i></a>
                                        {/if}
                                        {if $ds['coordinates']}
                                            <a href="https://www.google.com/maps/dir//{$ds['coordinates']}/" target="_blank" class="btn btn-outline-secondary btn-sm" title="{$ds['coordinates']}"><i class="fas fa-map-marker-alt"></i></a>
                                        {/if}
                                    </td>
                                    <td class="text-center" api-get-text="{$_url}autoload/plan_is_active/{$ds['id']}">
                                        <span class="badge bg-secondary">&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>
                                    <td class="text-center">
                                        <a href="{$_url}customers/view/{$ds['id']}" class="btn btn-success btn-sm">{Lang::T('View')}</a>
                                        <a href="{$_url}customers/edit/{$ds['id']}" class="btn btn-info btn-sm">{Lang::T('Edit')}</a>
                                        <a href="{$_url}customers/sync/{$ds['id']}" class="btn btn-success btn-sm">{Lang::T('Sync')}</a>
                                        <a href="{$_url}plan/recharge/{$ds['id']}" class="btn btn-primary btn-sm">{Lang::T('Recharge')}</a>
                                    </td>
                                </tr>
                            {/foreach}
                        </tbody>
                    </table>
                </div>
                {include file="pagination.tpl"}
            </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",
            "lengthMenu": [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "All"]
            ],
            "pageLength": 25
        });
    });
</script>
{include file="sections/footer.tpl"}
