@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
<div class="row">
    <div class="col-xs-8" style="padding-right:0px">
        <div class="box box-default" style="height:520px">
            <div class="box-body table-responsive">
                <span class="text-bold text-muted">OTHERS PAYMENT</span>
                <table class="table table-hover table-responsive table-condensed">
                    <thead>
                        <tr class="table-header-bg">
                            <td><input type="checkbox" class="chk-all"></td>
                            <td>PARTICULARS</td>
                            <td class="text-right">TOTAL DUE</td>
                            <td class="text-right">PAYMENT</td>
                            <td class="text-right">INITIAL</td>
                            <td class="text-right">TERMS</td>
                            <td class="text-right">MONTHLY</td>
                            <td class="text-right">AMT PAID</td>
                            <td class="text-right">BALANCE</td>
                            <td class="text-right">AMT TO PAY</td>
                        </tr>
                    </thead>
                    <tbody id="payables_container">
                        <!-- APPEND AREA -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-xs-4" style="padding-left:8px">
        <div class="box box-default" style="height:520px">
            <div class="box-body">
                <div class="row">
                    <div class="form-group col-xs-12">
                        <span class="text-bold text-muted">SELECT CUSTOMER</span><br>
                        <select id="acct_id" name="acct_id" class="form-control select2 select2-hidden-accessible jo-account" data-placeholder="Select one." style="width: 100%;" aria-hidden="true">
                            <option></option>
                        </select>
                    </div>

                    <div class="form-group col-xs-12">
                        <div class="row">
                            <div class="col-xs-5">
                                <i class="fa fa-fw text-success fa-lock"></i><span class="acct-details" id="acct-number">-</span>
                            </div>
                            <div class="col-xs-3">
                                <i class="fa fa-fw text-success fa-user"></i><span class="acct-details" id="acct-class">-</span>
                            </div>
                            <div class="col-xs-4">
                                <i class="fa fa-fw text-success fa-power-off"></i><span class="acct-details" id="acct-status">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-5">
                                <i class="fa fa-fw text-success fa-history"></i><span class="acct-details" id="acct-meter">-</span>
                            </div>
                            <div class="col-xs-3">
                                <i class="fa fa-fw text-success fa-book"></i><span class="acct-details" id="acct-book">-</span>
                            </div>
                            <div class="col-xs-4">
                                <i class="fa fa-fw text-success fa-code-fork"></i><span class="acct-details" id="acct-sequence">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <i class="fa fa-fw text-success fa-map-marker"></i><span class="acct-details" id="acct-address">-</span>
                            </div>
                        </div>
                        <div class="row" style="margin-top:10px">
                            <div class="col-xs-12">
                                <b class="text-success">&nbsp;OR NUMBER: </b><span class="text-primary text-bold" style="font-size:16px" data-or-number="{{ session('or_current') }}" id="or_number">{{ session('or_current') }}</span> @if(session('system_mode') == 'parallel')<a href="#" id="btn-edit-or"><i class="fa fa-fw fa-pencil"></i></a>@endif<br>
                                <b class="text-success">&nbsp;PRINTER: </b> <span data-current-printer="{{ session('current_printer') }}" id="current-printer">{{ session('current_printer') }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-xs-12">
                        <hr style="margin-top:0px; margin-bottom:2px">
                        <h1 class="text-bold" style="font-size:42px; margin-top:0px; margin-bottom:0px">P<span id="amt_total">0.00</span></h1>
                    </div>

                    <div class="form-group col-xs-6">
                        <span class="text-bold text-muted">CASH AMOUNT</span><br>
                        <input id="amt_cash" type="text" class="form-control curr ppt" value="0.00" disabled="true">
                    </div>

                    <div class="form-group col-xs-6">
                        <span class="text-bold text-muted">CHECK AMOUNT</span><br>
                        <input id="amt_check" type="text" class="form-control curr ppt" value="0.00" disabled="true">
                    </div>

                    <div class="form-group col-xs-6">
                        <span class="text-bold text-muted">BANK</span><br>
                        <input id="bank_name" type="text" class="form-control ppt" disabled="true">
                    </div>

                    <div class="form-group col-xs-6">
                        <span class="text-bold text-muted">CHECK NUMBER</span><br>
                        <input id="check_no" type="text" class="form-control ppt" disabled="true">
                    </div>

                    @if (session('system_mode') == 'parallel' || auth()->user()->designation == 'ADMINISTRATOR')
                    <div class="form-group col-xs-12">
                        <span class="text-bold text-danger">COLLECTION DATE*</span><br>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <input type="checkbox" id="collection_date_current">
                            </span>
                            <input type="text" class="form-control date-masked ppt" id="collection_date" disabled="true">
                        </div>
                    </div>
                    @endif

                    <div class="form-group col-xs-12">
                        <button class="btn btn-primary btn-block btn-flat" id="ppt"><i class="fa fa-fw fa-save"></i> POST PAYMENT</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ URL::asset('js/qz-tray/rsvp-3.1.0.min.js') }}"></script>
<script src="{{ URL::asset('js/qz-tray/sha-256.min.js') }}"></script>
<script src="{{ URL::asset('js/qz-tray/qz-tray.js') }}"></script>
<script src="{{ URL::asset('js/qz-tray/jsrsasign-all-min.js') }}"></script>
<script src="{{ URL::asset('js/qz-tray/set-certificate.js') }}"></script>
<script src="{{ url(mix('js/teller/others-payment.js')) }}"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        $('#collection_date_current').click(function(e) {
            if($(this).is(':checked') == true) {
                $('#collection_date').val('').attr('disabled', false).focus();
            } else {
                $('#collection_date').val('').attr('disabled', true);
            }
        });

        $('#btn-edit-or').click(function(e) {
            set_or();
        });
    });
</script>