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

<style type="text/css">
    .table thead tr th,
    .table tbody tr td{
        padding : 5px 5px !important;
        vertical-align: middle;
    }

    .table thead tr th{
        border-bottom: 0px !important;
    }

    .table tbody tr td{
        white-space: nowrap;
        border-bottom: 1px solid #eee;
    }   

    table{
        font-size: 14px;
    }     
</style>

@section('body')
<div class="row">
    <div class="col-xs-8" style="padding-right: 0px;">
        <div class="box box-default" style="height: 540px;">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-12 table-responsive">
                        <label class="text-primary" style="font-size:16px; margin-top:5px;">Athena Collections Posting</label>

                        <hr style="margin-top:0px; margin-bottom:8px">

                        <table class="table table-hover table-responsive table-condensed" id="table_payables" width="100%">
                            <thead>
                                <tr class="table-header-bg">
                                    <th><input type="checkbox" class="chk-all"></th>
                                    <th class="text-center">TERM</th>
                                    <th class="text-center">DUE DATE</th>
                                    <th class="text-right">PRINCIPAL</th>
                                    {{-- <th class="text-right">INT RATE</th> --}}
                                    <th class="text-right">INT AMT</th>
                                    <th class="text-right">NET AMT</th>
                                    {{-- <th class="text-right">PAYMENT</th> --}}
                                    {{-- <th class="text-right">TERMS</th> --}}
                                    {{-- <th class="text-right">MONTHLY</th> --}}
                                    <th class="text-right">PENALTY</th>
                                    <th class="text-right">PAST DUE INT</th>
                                    {{-- <th class="text-right">AMT PAID</th> --}}
                                    {{-- <th class="text-right">BALANCE</th> --}}
                                    <th class="text-right">AMT TO PAY</th>
                                </tr>
                            </thead>
                            <tbody id="payables_container">
                                <!-- APPEND AREA -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-4" style="padding-left: 8px;">
        <div class="box box-default" style="height: 540px;">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-12">
                        <label class="text-primary" style="font-size:16px; margin-top:5px;">Select Customer</label>

                        <hr style="margin-top:0px; margin-bottom:8px">

                        <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" style="margin-top: 10px;">
                        <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">
                                <strong class="text-success">&nbsp;PR NUMBER: </strong><a class="text-primary text-bold" data-pr-number="{{ session('pr_current') }}" id="pr_number" href="#">{{ session('pr_current') }}</a> @if(session('system_mode') == 'parallel')<a href="#" id="btn-edit-pr"><i class="fa fa-fw fa-pencil"></i></a>@endif<br>

                                @if (session('system_mode') == 'parallel' || auth()->user()->designation == 'ADMINISTRATOR')
                                <strong class="text-success">&nbsp;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
                                <strong class="text-success">&nbsp;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
                                {{-- <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') <!-- 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-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(mix('js/athena.js')) }}"></script>

<script src="{{ URL::asset('js/helper.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);
            }
        });

        $('#btn-edit-pr').click(function(e) {
            set_pr();
        });
        console.log("{{ session()->has('pr_current') }}");
    });
</script>