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

@section('body')
<div class="box box-default">
    <div class="box-body">
        <div class="row">
            <div class="col-xs-12">
                <label class="text-primary" style="font-size:16px; margin-top:6px">Illegal Promissory</label>

                <div class="pull-right box-tools">
                    <a href="{{ url('csr/illegal-promissory/new') }}" id="btn-post-promissory" class="btn btn-default pull-right"><i class="fa fa-plus-circle text-success"></i> New Illegal Promissory</a>
                </div>


                <div class="pull-right" style="width:140px; margin-right:3px">
                    <select id="filter-by-status" class="form-control select2 select2-hidden-accessible" data-placeholder="PAYMENT STATUS" style="width: 100%;" aria-hidden="true">
                        <option value="p">PAID</option>
                        <option value="up" selected="true">UNPAID</option>
                    </select>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
        <div class="row">
            <div class="col-xs-12">
                <table class="table table-hover table-condensed" id="table-illegal-pn">
                    <thead class="table-header-bg">
                        <tr>
                            <td>ACCOUNT NO.</td>
                            <td>CUSTOMER NAME</td>
                            <td class="text-right">PRINCIPAL</td>
                            <td class="text-right">DISCOUNT</td>
                            <td class="text-right">INTEREST</td>
                            <td class="text-right">AMT NET</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">STATUS</th>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $dt = $('#table-illegal-pn').DataTable({
            deferred: true,
            processing: true,
            bSort: false,
            serverSide: true,
            ajax: {
                url: $app_url + '/csr/illegal-promissory/dt',
                data: function(d){
                    d.status = $('#filter-by-status').val();
                }
            },
            columns: [
                { data:'acct_number',       name:'acct_number',         orderable:false,    className:"text-uppercase" },
                { data:'cust_name',         name:'cust_name',           orderable:false,    className:"text-uppercase" },
                { data:'amt_basic',         name:'amt_basic',           orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'amt_discount',      name:'amt_discount',        orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'interest_amt',      name:'interest_amt',        orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'amt_net',           name:'amt_net',             orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'amt_initial',       name:'amt_initial',         orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'terms',             name:'terms',               orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'amortization',      name:'amortization',        orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'amt_paid',          name:'amt_paid',            orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'amt_remaining',     name:'amt_remaining',       orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'status',            name:'status',              orderable:false,    className:"text-uppercase text-right",  searchable:false },
                { data:'action',            name:'action',              orderable:false,    searchable:false },
            ],
            columnDefs: [
                {   
                    targets: 3, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                },
                {   
                    targets: 6, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                },
                {   
                    targets: 9, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                }
            ],
        });

        $('#table-illegal-pn_filter input').unbind();
        $('#table-illegal-pn_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                $dt.search($(this).val()).draw();
            }
        });

        $('#filter-by-status').change(function() {
            $dt.search($('#table-illegal-pn_filter input').val()).draw();
        });
    })
    .on('click', '.pn-view-ledger', function() {
        $id = $(this).data('id');
        $acct_no = $(this).data('acct-no');

        $.confirm({
            title: '',
            draggable: true,
            columnClass: 'x-large',
            type: 'blue',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/illegal-promissory/payments-ledger',
                    data: { 
                        'id': $id,
                        'acct-no': $acct_no 
                    },
                    dataType: 'html',
                    method: 'get'
                }).done(function(res) {
                    self.setContent(res);
                }).fail(function() {
                    self.setContent('Something went wrong. Please try again or refresh the page.');
                });
            },
            buttons: {
                CLOSE: {
                    btnClass:'btn btn-default',
                    text: '<small>[ESC]</small> CLOSE',
                    keys: ['esc', 'enter']
                }
            }
        });
    });
</script>
@endsection