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

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <!-- Page Header -->
            <div class="page-header">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="page-title">
                            <i class="fa fa-university text-primary"></i> {Lang::T('Bank Management')}
                        </h3>
                        <p class="text-muted">{Lang::T('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> {Lang::T('Configure STK Push')}
                            </a>
                            <a href="{$_url}banks/add" class="btn btn-success">
                                <i class="fa fa-plus"></i> {Lang::T('Add New Bank')}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Card -->
            <div class="card card-primary card-hovered card-stacked mb30">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="mb-0">
                                <i class="fa fa-list"></i> {Lang::T('Bank Accounts')}
                            </h4>
                        </div>
                        <div class="col-md-6 text-right">
                            <span class="badge badge-light text-primary">
                                {Lang::arrayCount($banks)} {Lang::T('Banks')}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Search and Filter Form -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="fa fa-filter text-primary"></i> {Lang::T('Search & Filter')}
                            </h6>
                        </div>
                        <div class="card-body">
                            <form method="post" action="{$_url}banks/list">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="font-weight-bold">
                                                <i class="fa fa-search text-muted"></i> {Lang::T('Search')}
                                            </label>
                                            <input type="text" name="search" class="form-control" 
                                                   placeholder="{Lang::T('Search by bank name, account number...')}" 
                                                   value="{$search}">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="font-weight-bold">
                                                <i class="fa fa-mobile text-muted"></i> {Lang::T('STK Push')}
                                            </label>
                                            <select name="filter_stk" class="form-control">
                                                <option value="">{Lang::T('All')}</option>
                                                <option value="1" {if $filter_stk == '1'}selected{/if}>{Lang::T('Supported')}</option>
                                                <option value="0" {if $filter_stk == '0'}selected{/if}>{Lang::T('Not Supported')}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="font-weight-bold">
                                                <i class="fa fa-toggle-on text-muted"></i> {Lang::T('Status')}
                                            </label>
                                            <select name="filter_active" class="form-control">
                                                <option value="">{Lang::T('All')}</option>
                                                <option value="1" {if $filter_active == '1'}selected{/if}>{Lang::T('Active')}</option>
                                                <option value="0" {if $filter_active == '0'}selected{/if}>{Lang::T('Inactive')}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="font-weight-bold">&nbsp;</label>
                                            <button type="submit" class="btn btn-primary form-control">
                                                <i class="fa fa-search"></i> {Lang::T('Filter')}
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="font-weight-bold">&nbsp;</label>
                                            <a href="{$_url}banks/list" class="btn btn-secondary form-control">
                                                <i class="fa fa-refresh"></i> {Lang::T('Reset')}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Banks Table -->
                    <div class="table-responsive banks-table-container">
                        <table class="table table-hover table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="text-center">
                                        <i class="fa fa-university"></i> {Lang::T('Bank Name')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-credit-card"></i> {Lang::T('Account Number')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-user"></i> {Lang::T('Account Name')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-code"></i> {Lang::T('Bank Code')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-phone"></i> {Lang::T('Paybill')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-mobile"></i> {Lang::T('STK Push')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-toggle-on"></i> {Lang::T('Status')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-star"></i> {Lang::T('Default')}
                                    </th>
                                    <th class="text-center">
                                        <i class="fa fa-cogs"></i> {Lang::T('Actions')}
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {if $banks}
                                    {foreach $banks as $bank}
                                    <tr class="{if $bank->is_default}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 class="text-dark">{$bank->name}</strong>
                                                    {if $bank->is_default}
                                                        <br><small class="text-warning">
                                                            <i class="fa fa-star"></i> {Lang::T('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> {Lang::T('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> {Lang::T('Not Set')}
                                                </span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->bank_code}
                                                <span class="badge badge-info badge-pill">{$bank->bank_code}</span>
                                            {else}
                                                <span class="text-muted">-</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->paybill}
                                                <code class="bg-light text-dark px-2 py-1 rounded">{$bank->paybill}</code>
                                            {else}
                                                <span class="text-muted">-</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->supports_stk_push}
                                                <span class="badge badge-success badge-pill">
                                                    <i class="fa fa-check"></i> {Lang::T('Yes')}
                                                </span>
                                            {else}
                                                <span class="badge badge-secondary badge-pill">
                                                    <i class="fa fa-times"></i> {Lang::T('No')}
                                                </span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->is_active}
                                                <span class="badge badge-success badge-pill">
                                                    <i class="fa fa-check-circle"></i> {Lang::T('Active')}
                                                </span>
                                            {else}
                                                <span class="badge badge-danger badge-pill">
                                                    <i class="fa fa-times-circle"></i> {Lang::T('Inactive')}
                                                </span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->is_default}
                                                <span class="badge badge-warning badge-pill">
                                                    <i class="fa fa-star"></i> {Lang::T('Default')}
                                                </span>
                                            {else}
                                                <span class="text-muted">-</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="{Lang::T('Edit Bank')}"
                                                   data-toggle="tooltip">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                
                                                {if $bank->supports_stk_push && $bank->is_active && !$bank->is_default}
                                                <a href="{$_url}banks/set-default/{$bank->id}" 
                                                   class="btn btn-sm btn-outline-warning" 
                                                   title="{Lang::T('Set as Default')}" 
                                                   data-toggle="tooltip"
                                                   onclick="return confirm('{Lang::T('Set this bank as default for STK Push?')}')">
                                                    <i class="fa fa-star"></i>
                                                </a>
                                                {/if}
                                                
                                                <a href="{$_url}banks/toggle-status/{$bank->id}" 
                                                   class="btn btn-sm {if $bank->is_active}btn-outline-warning{else}btn-outline-success{/if}" 
                                                   title="{if $bank->is_active}{Lang::T('Deactivate')}{else}{Lang::T('Activate')}{/if}"
                                                   data-toggle="tooltip"
                                                   onclick="return confirm('{if $bank->is_active}{Lang::T('Deactivate this bank?')}{else}{Lang::T('Activate this bank?')}{/if}')">
                                                    <i class="fa {if $bank->is_active}fa-pause{else}fa-play{/if}"></i>
                                                </a>
                                                
                                                <a href="{$_url}banks/delete/{$bank->id}" 
                                                   class="btn btn-sm btn-outline-danger" 
                                                   title="{Lang::T('Delete Bank')}"
                                                   data-toggle="tooltip"
                                                   onclick="return confirm('{Lang::T('Are you sure you want to delete this bank?')}')">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                {else}
                                    <tr>
                                        <td colspan="9" 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">{Lang::T('No Banks Found')}</h5>
                                                <p class="text-muted">{Lang::T('No banks match your current filter criteria.')}</p>
                                                <a href="{$_url}banks/add" class="btn btn-primary">
                                                    <i class="fa fa-plus"></i> {Lang::T('Add Your First Bank')}
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                {/if}
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {if Lang::arrayCount($banks)}
                        <div class="mt-3">
                            {include file="pagination.tpl"}
                        </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.page-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.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: 1.25rem;
}

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

/* Fix button text visibility */
.btn {
    color: #fff !important;
    text-decoration: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
    color: #fff !important;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff !important;
}

.btn-secondary:hover {
    background-color: #545b62;
    border-color: #4e555b;
    color: #fff !important;
}

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}
</style>

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