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

<style type="text/css">
    .form-group{
        margin-bottom: 8px !important;
    }
</style>

@section('body')
<div class="row">
    <div class="col-xs-8" style="padding-right:0px">
        <div class="box {{ session('current_teller_mode') == 'COLLECTOR' ? 'box-danger' : 'box-success' }}">
            <div class="box-body table-responsive">
                <div style="margin-bottom: 5px;">
                    <label class="text-primary">OTHERS PAYMENT - </label>
                    <label>TELLER MODE:
                        @if (session('current_teller_mode') == 'TELLER')
                        <a href="#" class="label label-success" id="edit-teller-mode" style="font-size: 16px;"><i class="fa fa-calculator"></i>&nbsp;TELLER</a>
                        @elseif (session('current_teller_mode') == 'COLLECTOR')
                        <a href="#" class="label label-danger" id="edit-teller-mode" style="font-size: 16px;"><i class="fa fa-bank"></i>&nbsp;COLLECTOR</a>
                        @endif
                        
                        
                        @if (session('current_teller_mode') == 'COLLECTOR')
                        <span class="text-danger" style="font-size: 16px;" id="collector-name" data-col-id="{{ session('current_col_id') }}">({{ session('current_col_name') ? strtoupper(session('current_col_name')) : '' }})</span>
                        @endif
                    </label>
                </div>
                <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 {{ session('current_teller_mode') == 'COLLECTOR' ? 'box-danger' : 'box-success' }}">
            <div class="box-body">
                <div class="row">
                    <div class="form-group col-xs-12">
                        <label class="text-primary">SELECT CUSTOMER</label><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-6">
                                {{-- START OR NUMBER --}}
                                <label style="margin-bottom:0px !important;">
                                    @if (session('new_or') == 1)
                                        SI NUMBER:
                                    @else
                                        OR NUMBER: 
                                    @endif
                                    &nbsp;
                                    <a href="#" class="text-primary" id="edit-or" data-or-number='{{ session('or_current') }}' title="Click to set the OR Number">
                                        {{ session('or_current') ? session('or_current') : 'N/A' }}
                                    </a>
                                </label>
                                {{-- END OR NUMBER --}}
                                <br>
                                {{-- START PRINTER --}}
                                <label style="margin-bottom:0px !important;">PRINTER: &nbsp;
                                    <a href="#" class="text-primary" id="edit-printer" data-current-printer="{{ session('current_printer') }}" title='Click to set the Printer'>
                                        @if (session('current_printer'))
                                            @if (strlen(session('current_printer')) > 20)
                                            {{ substr(session('current_printer'), 0, 18) . '..' }}
                                            @else
                                            {{ session('current_printer') }}
                                            @endif
                                        @else
                                        {{ 'N/A' }}
                                        @endif
                                    </a>
                                </label>
                                {{-- END PRINTER --}}
                            </div>
                            <div class="col-xs-6">
                                {{-- START POSTING DATE --}}
                                @if (session('system_mode') == 'parallel' || auth()->user()->designation == 'ADMINISTRATOR')
                                <label style="margin-bottom:0px !important;">POSTING DATE: <a href="#" class="text-danger" id="edit-posting-date" title="Click to set the Posting Date">{{ session('col-back-date') ? date("M d, Y", strtotime(session('col-back-date'))) :  date("M d, Y") }}</a></label>
                                @else
                                <label style="margin-bottom:0px !important;">POSTING DATE: <span class="text-danger">{{ session('col-back-date') ? date("M d, Y", strtotime(session('col-back-date'))) :  date("M d, Y") }}</span></label>
                                @endif
                                {{-- END POSTING DATE --}}
                                <br>
                                {{-- START TRANSACTION DATE --}}
                                @if (session('current_teller_mode') == 'COLLECTOR')
                                <label style="margin-bottom:0px !important;">TRANS DATE: <a href="#" class="text-danger" id="edit-trans-date" data-trans-date="{{ session('current_trans_date')}} " title="Click to set the Transaction Date">{{ session('current_trans_date') ? date("M d, Y", strtotime(session('current_trans_date'))) : date("M d, Y") }}</a></label>
                                @endif
                                {{-- END TRANSACTION DATE  --}}
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xs-12">
                        <hr style="margin-top:0px; margin-bottom:2px">
                    </div>

                    <div class="form-group col-xs-12">
                        <span class="text-bold text-muted">TOTAL DUE</span><br>
                        <h2 class="text-bold" style="margin-top:0px; margin-bottom:0px"><span id="amt_total">0.00</span></h2>
                    </div>

                    <div class="form-group col-xs-6">
                        <span class="text-bold text-muted">VOUCHER PAYMENT</span><br>
                        <span id="amt_voucher" class="text-bold">0.00</span>
                    </div>
                    <div class="form-group col-xs-6">
                        <span class="text-bold text-muted">CHANGE</span><br>
                        <span id="amt_change" class="text-bold">0.00</span>
                    </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') <!-- This field is only available on parrallel test.  -->
                    <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-success btn-block btn-flat text-bold" id="ppt">POST PAYMENT</button>
                    </div>

                    <div class="form-group col-xs-12">
                        <a href="#" class="btn btn-warning btn-xs btn-flat text-bold" id="insert-voucher" data-discount="0"><i class="fa fa-ticket"></i> USE VOUCHER</a>
                        <span id="voucher-codes">
                            {{-- <label class="label label-primary label-xs" title="A1B2C3D4E5">PHP200</label>
                            <label class="label label-primary label-xs" title="A1B2C3D4E5">PHP200</label> --}}
                        </span>
                    </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 src="{{ URL::asset('js/elite.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);
        //     }
        // });
    })
    .on('click', '#edit-or', function(){
        set_or(true, $new_or_set);
    })
    .on('click', '#edit-printer', function() {
        set_printer();
    })
    .on('click', '#edit-teller-mode', function() {
        set_teller_mode();
    })
    .on('click', '#edit-posting-date', function() {
        set_posting_date();
    })
    .on('click', '#edit-trans-date', function() {
        set_transaction_date();
    });;
</script>