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

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-1">Bank Management</h2>
                    <p class="text-muted mb-0">Manage your bank accounts and configurations</p>
                </div>
                <div>
                    <a href="{$_url}banks/add" class="btn btn-primary">
                        <i class="fa fa-plus"></i> Add Bank
                    </a>
                </div>
            </div>

            <!-- Search and Filters -->
            <div class="card mb-3">
                <div class="card-body">
                    <form method="post" action="{$_url}banks/list" class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Search</label>
                            <input type="text" name="search" class="form-control" 
                                   placeholder="Search banks..." value="{$search}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">STK Push</label>
                            <select name="filter_stk" class="form-select">
                                <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 class="col-md-2">
                            <label class="form-label">Status</label>
                            <select name="filter_active" class="form-select">
                                <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 class="col-md-2">
                            <label class="form-label">&nbsp;</label>
                            <button type="submit" class="btn btn-outline-primary w-100">
                                <i class="fa fa-search"></i> Search
                            </button>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">&nbsp;</label>
                            <a href="{$_url}banks/list" class="btn btn-outline-secondary w-100">
                                <i class="fa fa-refresh"></i> Reset
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Banks List -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Banks ({count($banks)})</h5>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
                            <i class="fa fa-refresh"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    {if $banks}
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Bank</th>
                                        <th>Account Details</th>
                                        <th>Features</th>
                                        <th>Status</th>
                                        <th width="120">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $banks as $bank}
                                    <tr {if $bank->is_default}class="table-warning"{/if}>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-3">
                                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" 
                                                         style="width: 40px; height: 40px;">
                                                        <i class="fa fa-university"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="fw-bold">{$bank->name}</div>
                                                    {if $bank->is_default}
                                                        <small class="text-warning">
                                                            <i class="fa fa-star"></i> Default Bank
                                                        </small>
                                                    {/if}
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                {if $bank->account_number}
                                                    <div class="text-muted small">Account Number</div>
                                                    <code class="bg-light px-2 py-1 rounded">{$bank->account_number}</code>
                                                {else}
                                                    <span class="text-muted">Not set</span>
                                                {/if}
                                            </div>
                                            {if $bank->account_name}
                                                <div class="mt-1">
                                                    <div class="text-muted small">Account Name</div>
                                                    <div class="small">{$bank->account_name}</div>
                                                </div>
                                            {/if}
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column gap-1">
                                                <span class="badge {if $bank->supports_stk_push}bg-success{else}bg-secondary{/if}">
                                                    <i class="fa fa-mobile"></i> STK Push
                                                </span>
                                                {if $bank->bank_code}
                                                    <span class="badge bg-info">
                                                        <i class="fa fa-code"></i> {$bank->bank_code}
                                                    </span>
                                                {/if}
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge {if $bank->is_active}bg-success{else}bg-danger{/if}">
                                                {if $bank->is_active}Active{else}Inactive{/if}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="{$_url}banks/edit/{$bank->id}" 
                                                   class="btn btn-outline-primary" title="Edit">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <a href="{$_url}banks/delete/{$bank->id}" 
                                                   class="btn btn-outline-danger" title="Delete"
                                                   onclick="return confirm('Delete this bank?')">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    {else}
                        <div class="text-center py-5">
                            <div class="mb-3">
                                <i class="fa fa-university fa-3x text-muted"></i>
                            </div>
                            <h5 class="text-muted">No Banks Found</h5>
                            <p class="text-muted">No banks match your search criteria.</p>
                            <a href="{$_url}banks/add" class="btn btn-primary">
                                <i class="fa fa-plus"></i> Add Your First Bank
                            </a>
                        </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.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 {
    font-size: 0.75em;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.table-light th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}
</style>

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