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

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h3 class="mb-0">
                                <i class="fa fa-university text-primary"></i> Bank Management
                            </h3>
                            <p class="text-muted mb-0">Manage bank accounts and STK Push configurations</p>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="btn-group">
                                <a href="{$_url}paymentgateway/BankStkPush" class="btn btn-info">
                                    <i class="fa fa-cog"></i> Configure STK Push
                                </a>
                                <a href="{$_url}banks/add" class="btn btn-success">
                                    <i class="fa fa-plus"></i> Add New Bank
                                </a>
                            </div>
                            <div class="mt-2">
                                <span class="badge badge-primary">
                                    {count($banks)} Banks
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Search Form -->
                    <div class="card mb-2">
                        <div class="card-header bg-light py-2">
                            <h6 class="mb-0">Search & Filter</h6>
                        </div>
                        <div class="card-body py-2">
                            <form method="post" action="{$_url}banks/list">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group mb-2">
                                            <label class="mb-1">Search</label>
                                            <input type="text" name="search" class="form-control form-control-sm" 
                                                   placeholder="Search by bank name, account number..." 
                                                   value="{$search}">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-2">
                                            <label class="mb-1">STK Push</label>
                                            <select name="filter_stk" class="form-control form-control-sm">
                                                <option value="">All</option>
                                                <option value="1" {if $filter_stk == '1'}selected{/if}>Supported</option>
                                                <option value="0" {if $filter_stk == '0'}selected{/if}>Not Supported</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-2">
                                            <label class="mb-1">Status</label>
                                            <select name="filter_active" class="form-control form-control-sm">
                                                <option value="">All</option>
                                                <option value="1" {if $filter_active == '1'}selected{/if}>Active</option>
                                                <option value="0" {if $filter_active == '0'}selected{/if}>Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-2">
                                            <label class="mb-1">&nbsp;</label>
                                            <button type="submit" class="btn btn-primary btn-sm form-control">
                                                <i class="fa fa-search"></i> Filter
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-2">
                                            <label class="mb-1">&nbsp;</label>
                                            <a href="{$_url}banks/list" class="btn btn-secondary btn-sm form-control">
                                                <i class="fa fa-refresh"></i> Reset
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive mt-2">
                        <table class="table table-striped table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th><i class="fa fa-university"></i> Bank Name</th>
                                    <th><i class="fa fa-credit-card"></i> Account Number</th>
                                    <th><i class="fa fa-user"></i> Account Name</th>
                                    <th><i class="fa fa-mobile"></i> STK Push</th>
                                    <th><i class="fa fa-toggle-on"></i> Status</th>
                                    <th><i class="fa fa-star"></i> Default</th>
                                    <th><i class="fa fa-cogs"></i> Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {if $banks}
                                    {foreach $banks as $bank}
                                    <tr {if $bank->is_default}class="table-warning"{/if}>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bank-icon mr-2">
                                                    <i class="fa fa-university text-primary"></i>
                                                </div>
                                                <div>
                                                    <strong>{$bank->name}</strong>
                                                    {if $bank->is_default}
                                                        <br><small class="text-warning">
                                                            <i class="fa fa-star"></i> Default Bank
                                                        </small>
                                                    {/if}
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            {if $bank->account_number}
                                                <code class="bg-light text-dark px-2 py-1 rounded">{$bank->account_number}</code>
                                            {else}
                                                <span class="text-muted">
                                                    <i class="fa fa-minus"></i> Not Set
                                                </span>
                                            {/if}
                                        </td>
                                        <td>
                                            {if $bank->account_name}
                                                <span class="text-dark">{$bank->account_name}</span>
                                            {else}
                                                <span class="text-muted">
                                                    <i class="fa fa-minus"></i> Not Set
                                                </span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->supports_stk_push}
                                                <span class="badge badge-success badge-pill">Yes</span>
                                            {else}
                                                <span class="badge badge-secondary badge-pill">No</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->is_active}
                                                <span class="badge badge-success badge-pill">Active</span>
                                            {else}
                                                <span class="badge badge-danger badge-pill">Inactive</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->is_default}
                                                <span class="badge badge-warning badge-pill">Yes</span>
                                            {else}
                                                <span class="badge badge-secondary badge-pill">No</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group" role="group">
                                                <a href="{$_url}banks/edit/{$bank->id}" class="btn btn-sm btn-outline-primary" title="Edit">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <a href="{$_url}banks/delete/{$bank->id}" class="btn btn-sm btn-outline-danger" 
                                                   onclick="return confirm('Are you sure you want to delete this bank?')" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                {else}
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <div class="empty-state">
                                                <i class="fa fa-university fa-3x text-muted mb-3"></i>
                                                <h5 class="text-muted">No Banks Found</h5>
                                                <p class="text-muted">No banks match your current filter criteria.</p>
                                                <a href="{$_url}banks/add" class="btn btn-primary">
                                                    <i class="fa fa-plus"></i> Add Your First Bank
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                {/if}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bank-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 50%;
}

.empty-state {
    padding: 2rem;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,123,255,0.05);
}

.table-warning {
    background-color: rgba(255,193,7,0.1) !important;
}

.badge-pill {
    padding: 0.5em 0.75em;
    font-size: 0.75em;
}

.btn-group .btn {
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

/* Fix for table visibility */
.table-responsive {
    overflow-x: auto;
    min-height: 200px;
}

.table {
    margin-bottom: 0;
}

.card-body {
    padding: 1rem;
}

/* Reduce spacing between search and table */
.card.mb-2 {
    margin-bottom: 0.5rem !important;
}

.card-header.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.card-body.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Ensure table is visible */
.banks-table-container {
    position: relative;
    z-index: 1;
}
</style>

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