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

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-0 pb-0">
                    <div class="row align-items-center mb-3">
                        <div class="col-md-6">
                            <h3 class="mb-0 text-dark">Banks</h3>
                            <p class="text-muted mb-0 small">Manage your bank accounts and configurations</p>
                        </div>
                        <div class="col-md-6 text-end">
                            <a href="{$_url}banks/add" class="btn btn-dark">
                                <i class="fa fa-plus me-1"></i> Add Bank
                            </a>
                        </div>
                    </div>
                    
                    <!-- Enhanced Search Section -->
                    <div class="row">
                        <div class="col-12">
                            <div class="search-container">
                                <form method="post" action="{$_url}banks/list" class="row g-3" id="search-form">
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0">
                                                <i class="fa fa-search text-muted"></i>
                                            </span>
                                            <input type="text" name="search" class="form-control border-start-0 ps-0" 
                                                   placeholder="Search by bank name, account number, or account name..." 
                                                   value="{$search}">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="filter_stk" class="form-select">
                                            <option value="">All STK Push</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">
                                        <select name="filter_active" class="form-select">
                                            <option value="">All Status</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>
                                </form>
                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <div class="d-flex gap-2">
                                        <button type="submit" form="search-form" class="btn btn-outline-secondary btn-sm">
                                            <i class="fa fa-search me-1"></i> Search
                                        </button>
                                        <a href="{$_url}banks/list" class="btn btn-outline-secondary btn-sm">
                                            <i class="fa fa-refresh me-1"></i> Reset
                                        </a>
                                    </div>
                                    <div class="text-muted small">
                                        <i class="fa fa-info-circle me-1"></i>
                                        Showing {count($banks)} bank{if count($banks) != 1}s{/if}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th class="border-0">ID</th>
                                    <th class="border-0">Bank Name</th>
                                    <th class="border-0">Account Number</th>
                                    <th class="border-0">Account Name</th>
                                    <th class="border-0 text-center">STK Push</th>
                                    <th class="border-0 text-center">Status</th>
                                    <th class="border-0 text-center">Default</th>
                                    <th class="border-0 text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {if $banks}
                                    {foreach $banks as $bank}
                                    <tr {if $bank->is_default}class="bg-light"{/if}>
                                        <td class="text-muted">{$bank->id}</td>
                                        <td>
                                            <div class="fw-semibold text-dark">{$bank->name}</div>
                                            {if $bank->is_default}
                                                <small class="text-muted">Default Bank</small>
                                            {/if}
                                        </td>
                                        <td>
                                            {if $bank->account_number}
                                                <code class="bg-light px-2 py-1 rounded text-dark">{$bank->account_number}</code>
                                            {else}
                                                <span class="text-muted">—</span>
                                            {/if}
                                        </td>
                                        <td>
                                            {if $bank->account_name}
                                                <span class="text-dark">{$bank->account_name}</span>
                                            {else}
                                                <span class="text-muted">—</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->supports_stk_push}
                                                <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">Yes</span>
                                            {else}
                                                <span class="badge bg-secondary bg-opacity-10 text-secondary">No</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->is_active}
                                                <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">Active</span>
                                            {else}
                                                <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25">Inactive</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            {if $bank->is_default}
                                                <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25">Yes</span>
                                            {else}
                                                <span class="badge bg-secondary bg-opacity-10 text-secondary">No</span>
                                            {/if}
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{$_url}banks/edit/{$bank->id}" class="btn btn-outline-secondary btn-sm" title="Edit">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <a href="{$_url}banks/delete/{$bank->id}" class="btn btn-outline-secondary btn-sm" title="Delete"
                                                   onclick="return confirm('Delete this bank?')">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                {else}
                                    <tr>
                                        <td colspan="8" class="text-center py-4">
                                            <i class="fa fa-university fa-2x text-muted mb-2"></i>
                                            <br>No banks found
                                        </td>
                                    </tr>
                                {/if}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Polish the design with subtle improvements */
.card {
    border: 1px solid #e9ecef;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.25rem;
}

.table th {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
    padding: 0.75rem;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
}

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

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

.form-control {
    border: 1px solid #ced4da;
    font-size: 0.875rem;
}

.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Subtle animations */
.table-hover tbody tr {
    transition: background-color 0.15s ease-in-out;
}

.btn {
    transition: all 0.15s ease-in-out;
}

/* Clean empty state */
.text-center.py-4 {
    padding: 3rem 1rem;
}

.text-center.py-4 i {
    opacity: 0.5;
}

/* Enhanced Search Section */
.search-container {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 0;
}

.input-group-text {
    border-color: #ced4da;
    background-color: #f8f9fa;
}

.input-group .form-control:focus {
    border-color: #ced4da;
    box-shadow: none;
}

.input-group:focus-within .input-group-text {
    border-color: #86b7fe;
    background-color: #f8f9fa;
}

.input-group:focus-within .form-control {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select {
    font-size: 0.875rem;
    border-color: #ced4da;
}

.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.gap-2 > * + * {
    margin-left: 0.5rem;
}

/* Search section responsive */
@media (max-width: 768px) {
    .search-container .row {
        margin: 0;
    }
    
    .search-container .col-md-8,
    .search-container .col-md-2 {
        margin-bottom: 0.75rem;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
}
</style>

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