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

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6 mx-auto">
            <!-- Page Header -->
            <div class="page-header text-center mb-4">
                <h3 class="page-title">
                    <i class="fa fa-plus-circle text-success"></i> {Lang::T('Add New Bank')}
                </h3>
                <p class="text-muted">{Lang::T('Create a new bank account for STK Push payments')}</p>
            </div>

            <!-- Main Card -->
            <div class="card card-primary card-hovered card-stacked mb30 shadow-sm">
                <div class="card-header bg-gradient-success text-white">
                    <h4 class="mb-0">
                        <i class="fa fa-university"></i> {Lang::T('Bank Information')}
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" action="{$_url}banks/save" class="form-horizontal" id="bankForm">
                        <!-- Basic Information Section -->
                        <div class="form-section mb-4">
                            <h6 class="section-title">
                                <i class="fa fa-info-circle text-primary"></i> {Lang::T('Basic Information')}
                            </h6>
                            
                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-university text-muted"></i> {Lang::T('Bank Name')} <span class="text-danger">*</span>
                                </label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-university"></i></span>
                                        </div>
                                        <input type="text" name="name" class="form-control" 
                                               placeholder="{Lang::T('Enter bank name')}" required>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-lightbulb-o"></i> {Lang::T('e.g., Safaricom M-Pesa, Equity Bank, KCB Bank')}
                                    </small>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-credit-card text-muted"></i> {Lang::T('Account Number')} <span class="text-danger">*</span>
                                </label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-credit-card"></i></span>
                                        </div>
                                        <input type="text" name="account_number" class="form-control" 
                                               placeholder="{Lang::T('Enter account number')}" required>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i> {Lang::T('The account number for STK Push payments')}
                                    </small>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-user text-muted"></i> {Lang::T('Account Name')} <span class="text-danger">*</span>
                                </label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                                        </div>
                                        <input type="text" name="account_name" class="form-control" 
                                               placeholder="{Lang::T('Enter account holder name')}" required>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i> {Lang::T('Name of the account holder')}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Information Section -->
                        <div class="form-section mb-4">
                            <h6 class="section-title">
                                <i class="fa fa-cog text-primary"></i> {Lang::T('Additional Information')}
                            </h6>
                            
                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-code text-muted"></i> {Lang::T('Bank Code')}
                                </label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-code"></i></span>
                                        </div>
                                        <input type="text" name="bank_code" class="form-control" 
                                               placeholder="{Lang::T('Enter bank code')}" maxlength="10">
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-lightbulb-o"></i> {Lang::T('e.g., MPESA, EQTY, KCB')}
                                    </small>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-phone text-muted"></i> {Lang::T('Paybill Number')}
                                </label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-phone"></i></span>
                                        </div>
                                        <input type="text" name="paybill" class="form-control" 
                                               placeholder="{Lang::T('Enter paybill number')}">
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i> {Lang::T('M-Pesa paybill number (if applicable)')}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Settings Section -->
                        <div class="form-section mb-4">
                            <h6 class="section-title">
                                <i class="fa fa-sliders text-primary"></i> {Lang::T('Settings & Configuration')}
                            </h6>
                            
                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-mobile text-muted"></i> {Lang::T('STK Push Support')}
                                </label>
                                <div class="col-md-9">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" name="supports_stk_push" value="1" id="stkPush" checked>
                                        <label class="custom-control-label" for="stkPush">
                                            <strong>{Lang::T('This bank supports STK Push payments')}</strong>
                                        </label>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i> {Lang::T('Only banks with STK Push support can be used for BankStkPush payments')}
                                    </small>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-toggle-on text-muted"></i> {Lang::T('Status')}
                                </label>
                                <div class="col-md-9">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" name="is_active" value="1" id="isActive" checked>
                                        <label class="custom-control-label" for="isActive">
                                            <strong>{Lang::T('Active')}</strong>
                                        </label>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i> {Lang::T('Only active banks can be used for payments')}
                                    </small>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label font-weight-bold">
                                    <i class="fa fa-star text-muted"></i> {Lang::T('Set as Default')}
                                </label>
                                <div class="col-md-9">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" name="is_default" value="1" id="isDefault">
                                        <label class="custom-control-label" for="isDefault">
                                            <strong>{Lang::T('Set as default bank for STK Push')}</strong>
                                        </label>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i> {Lang::T('This will make this bank the default selection for BankStkPush configuration')}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group">
                            <div class="col-md-9 col-md-offset-3">
                                <div class="btn-group" role="group">
                                    <button type="submit" class="btn btn-success btn-lg">
                                        <i class="fa fa-save"></i> {Lang::T('Save Bank')}
                                    </button>
                                    <a href="{$_url}banks/list" class="btn btn-outline-secondary btn-lg">
                                        <i class="fa fa-arrow-left"></i> {Lang::T('Back to List')}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </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;
}

.form-section {
    border-left: 3px solid #007bff;
    padding-left: 1rem;
    margin-bottom: 2rem;
}

.section-title {
    color: #007bff;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

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

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
    border-color: #28a745;
}

.custom-switch .custom-control-label::after {
    background-color: #fff;
}

.btn-group .btn {
    margin-right: 0.5rem;
}

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

@media (max-width: 768px) {
    .col-md-3 {
        margin-bottom: 0.5rem;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
        margin-right: 0.25rem;
    }
}
</style>

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