{include file="sections/header.tpl"}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .styled-form-group {
        margin-bottom: 20px;
    }

    .styled-btn {
        color: #28a745;
        border: 1px solid #28a745;
        background-color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .styled-btn:hover {
        background-color: #28a745;
        color: #fff;
    }

    .styled-small-text {
        color: blue;
        margin-top: 10px;
        display: block;
        font-size: 14px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    /* Hidden checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* Slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #2196F3;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
</style>

{if isset($message)}
<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">×</span>
    </button>
    <div>{$message}</div>
</div>
{/if}
<form class="form-horizontal" method="post" role="form" action="{$_url}plugin/c2b_settings">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-primary panel-hovered panel-stacked mb30">
                <div class="panel-heading">{Lang::T('M-Pesa C2B Payment Gateway')}</div>
                <div class="panel-body">
                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">{Lang::T('M-Pesa C2B Environment')}</label>
                        <div class="col-md-6">
                            <select class="form-control" name="mpesa_c2b_env" id="mpesa_c2b_env">
                                <option value="sandbox" {if $_c['mpesa_c2b_env']=='sandbox' }selected{/if}>
                                    {Lang::T('SandBox or
                                    Testing')}</option>
                                <option value="live" {if $_c['mpesa_c2b_env']=='live' }selected{/if}>{Lang::T('Live or
                                    Production')}
                                </option>
                            </select>
                            <small class="form-text text-muted">
                                <font color="red"><b>{Lang::T('Sandbox')}</b></font> {Lang::T('is for testing purpose,
                                please switch to')} <font color="green"><b>{Lang::T('Live')}</b></font> {Lang::T('in
                                production.')}
                            </small>
                        </div>
                    </div>

                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">M-Pesa C2B Consumer Key</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="mpesa_c2b_consumer_key"
                                name="mpesa_c2b_consumer_key" placeholder="xxxxxxxxxxxxxxxxx"
                                value="{$_c['mpesa_c2b_consumer_key']}">
                            <small class="form-text text-muted"><a href="https://developer.safaricom.co.ke/MyApps"
                                    target="_blank">https://developer.safaricom.co.ke/MyApps</a></small>
                        </div>
                    </div>

                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">M-Pesa C2B Consumer Secret</label>
                        <div class="col-md-6">
                            <input type="password" class="form-control" id="mpesa_c2b_consumer_secret"
                                name="mpesa_c2b_consumer_secret" placeholder="xxxxxxxxxxxxxxxxx"
                                value="{$_c['mpesa_c2b_consumer_secret']}">
                        </div>
                    </div>
                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">M-Pesa C2B Business Shortcode</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="mpesa_c2b_business_code"
                                name="mpesa_c2b_business_code" placeholder="xxxxxxx" maxlength="7"
                                value="{$_c['mpesa_c2b_business_code']}">
                        </div>
                    </div>
                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">M-Pesa C2B Version</label>
                        <div class="col-md-6">
                            <select class="form-control" name="mpesa_c2b_api">
                                <option value="v1" {if $_c['mpesa_c2b_api']=='v1' }selected{/if}>v1</option>
                                <option value="v2" {if $_c['mpesa_c2b_api']=='v2' }selected{/if}>v2</option>
                            </select>
                            <small class="form-text text-muted">Select the version of the API you want to
                                use.</small>
                        </div>
                    </div>
                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">Bill Ref Number Type</label>
                        <div class="col-md-6">
                            <select class="form-control" name="mpesa_c2b_bill_ref">
                                <option value="phone" {if $_c['mpesa_c2b_bill_ref']=='phone' }selected{/if}>Phone Number</option>
                                <option value="username" {if $_c['mpesa_c2b_bill_ref']=='username' }selected{/if}>Username</option>
                                <option value="id" {if $_c['mpesa_c2b_bill_ref']=='id' }selected{/if}>Account ID</option>
                            </select>
                            <small class="form-text text-muted">How will the system identify your customers. BillRefNumber must be a unique identity</small>
                        </div>
                    </div>
                    <div class="form-group col-6">
                        <label class="col-md-3 control-label">{Lang::T('Accept Insufficient Fee')}</label>
                        <div class="col-md-6">
                            <label class="switch">
                                <input type="checkbox" id="mpesa_c2b_low_fee" value="1"
                                    name="mpesa_c2b_low_fee" {if $_c['mpesa_c2b_low_fee']==1}checked{/if}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                    {if $_c['c2b_registered'] && $_c['mpesa_c2b_env']!='sandbox'}
                    <div class="form-group col-12 styled-form-group">
                        <label class="col-md-3 control-label">Register C2B URL</label>
                        <div class="col-md-6">
                            <button class="btn styled-btn">URLs Already Registered</button>
                        </div>
                    </div>
                    {else}
                    <div class="form-group col-12 styled-form-group">
                        <label class="col-md-3 control-label">Register C2B URL</label>
                        <div class="col-md-6">
                            <a href="{$_url}plugin/c2b_registerUrl" class="btn styled-btn">Click to Register Mpesa
                                C2B URL</a>
                            <small class="form-text text-muted styled-small-text">Click only after you have saved
                                the changes.</small>
                        </div>
                    </div>
                    {/if}
                    <div class="form-group col-6">
                        <div class="col-lg-offset-3 col-lg-10">
                            <button class="btn btn-primary waves-effect waves-light" name="save" value="save"
                                type="submit">Save Changes</button>
                        </div>
                    </div>

                    <div class="bs-callout bs-callout-info" id="callout-navbar-role">
                        <h4><b>Accept Insufficient Fee</b>:</h4> 
                        <p> If Enable the money customer sent will be convert to customer balance, but if disabled the system will reject it. <br> It requires Validation URL</p>
                        <h4><b>Note</b>:</h4>
                        <p> Before click on Register URL <br>
                            Make sure you have fill the required fields <br>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    $(document).ready(function () {
        toggleTillNumberInput();
        $('#mpesa_c2b_transaction').on('change', function () {
            toggleTillNumberInput();
        });
        function toggleTillNumberInput() {
            if ($('#mpesa_c2b_transaction').val() === 'BuyGoods') {
                $('#tillNumberContainer').show();
            } else {
                $('#tillNumberContainer').hide();
            }
        }
    });
</script>
{include file="sections/footer.tpl"}