@extends('layouts.app')
@section('title', 'BWSI')

@section('body')
<div class="row" style="padding-left:5px; padding-right:5px">
    <div class="box-header with-border">
        <h3 class="box-title">Illegal Promissory Note</h3>
    </div>
</div>

<div class="row">
    <div class="col-xs-8" style="padding-right:5px">
        <div class="box box-default" style="height:510px; margin-bottom:10px">
            <div class="box-body table-responsive">
                <span class="text-bold text-success">ILLEGAL CONNECTIONS</span>
                <table class="table table-hover table-responsive">
                    <thead>
                        <tr class="table-header-bg">
                            <td style="padding:6px">&nbsp;</td>
                            <td style="padding:6px">PARTICULARS</td>
                            <td style="padding:6px">PAYMENT</td>
                            <td style="padding:6px" class="text-right">BASIC</td>
                            <td style="padding:6px" class="text-right">DISCOUNT</td>
                            <td style="padding:6px" class="text-right">INTEREST</td>
                            <td style="padding:6px" class="text-right">NET</td>
                            <td style="padding:6px" class="text-right">AMT PAID</td>
                            <td style="padding:6px" class="text-right">BALANCE</td>
                        </tr>
                    </thead>
                    <tbody id="illegals-container">
                        <!-- APPEND AREA -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-xs-4" style="padding-left:5px">
        <div class="box box-default" style="height:510px; margin-bottom:10px">
            <div class="box-body">
                <div class="row">
                    <div class="form-group col-xs-12">
                        <span class="text-bold text-success">SELECT CUSTOMER</span>
                        <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>

                    <div class="form-group col-xs-12">
                        <span id="amt_total" class="text-muted text-right text-bold" style="font-size:42px">0.00</span>
                        <!-- <span class="text-bold">TOTAL AMOUNT</span>
                        <input type="text" id="amt_total" class="form-control" value="0.00" readonly="true"> -->
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">DISCOUNT AMOUNT</span>
                        <input type="text" id="amt_discount" class="form-control curr" value="0.00" value="0">
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">INTEREST AMOUNT</span>
                        <input type="text" id="amt_interest" class="form-control curr" value="0.00" value="0">
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">NET AMT</span>
                        <input type="text" id="amt_net" class="form-control" value="0.00" readonly="true">
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">INITIAL PAYMENT</span>
                        <input type="text" id="amt_initial" class="form-control curr" value="0.00">
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">REMAINING AMT</span>
                        <input type="text" id="amt_remaining" class="form-control curr" value="0.00" readonly="true">
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">TERMS</span>
                        <div class="input-group">
                            <input type="text" id="terms" class="form-control wnum-only pnum-only" value="1">
                            <span class="input-group-addon">mo(s)</span>
                        </div>
                    </div>
                    <div class="form-group col-xs-4">
                        <span class="text-bold">AMORTIZATION</span>
                        <input type="text" id="amortization" class="form-control" value="0.00" readonly="true">
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <button id="post-promissory" class="btn btn-success btn-block">Post Illegal Promissory Note</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        formatAcctSearchResults = function(results) {
            if(results.loading) return results.text;

            var markup = "<div class='select2-result-repository clearfix'>" +
                         "<div class='select2-result-repository__title'>" + results.text.toUpperCase() + "</div>";

            if (results.address) {
                markup += "<div class='select2-result-repository__description'><i class='fa fa-map-marker fa-fw'></i>" + results.address.toUpperCase() + "</div>";
            }

            markup +=   "<div class='select2-result-repository__statistics'>" +
                            "<div class='select2-result-repository__forks'><i class='fa fa-lock fa-fw'></i>" + results.acct_number + "</div>" +
                            "<div class='select2-result-repository__stargazers'><i class='fa fa-street-view fa-fw'></i>" + results.acct_class + "</div>" +
                            "<div class='select2-result-repository__stargazers'><i class='fa fa-power-off fa-fw'></i>" + results.acct_status.toUpperCase() + "</div>" +
                        "</div>";

            return markup;
        }

        computePromissory = function() {
            $amt_total    = Number($('#amt_total').data('amt'));
            $amt_discount = Number($('#amt_discount').val().replace(',', ''));
            $amt_interest = Number($('#amt_interest').val().replace(',', ''));
            $amt_initial  = Number($('#amt_initial').val().replace(',', ''));;
            
            $amt_net       = numeral(0);
            $amortization  = numeral(0);
            $amt_remaining = numeral(0);
            $terms         = Number($('#terms').val());

            $amt_net.add($amt_total);
            $amt_net.add($amt_interest);
            $amt_net.subtract($amt_discount);
            
            $amt_remaining.add($amt_net.value());
            $amt_remaining.subtract($amt_initial);

            $amortization.add($amt_remaining.value());
            $amortization.divide($terms);

            $('#amt_net').val($amt_net.format('0,0.00')).data('amt', $amt_net.value());
            $('#amt_remaining').val($amt_remaining.format('0,0.00')).data('amt', $amt_remaining.value());
            $('#amortization').val($amortization.format('0,0.00')).data('amt', $amortization.value());
        }

        $('#acct_id').select2({
            allowClear: true,
            ajax: {
                url: $app_url + '/select2-acct-search',
                delay: 300,
                data: function (params) {
                    return query = {
                        search: params.term,
                        page: params.page,
                        filter: ["ac", "dc", "ia"]
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    return {
                        results: $.map(data.items, function (data) {
                            return {
                                text: data.cust_fullname ? data.cust_fullname : data.cust_bname,
                                acct_number: data.acct_number,
                                acct_class: data.acct_class + " - " + data.acct_subclass,
                                acct_status: data.acct_status,
                                address: data.cust_address,
                                id: data.cust_id
                            }
                        }),
                        pagination: {
                            more: (params.page * 10) < data.count
                        }
                    };
                },

            },
            escapeMarkup: function (markup) { return markup; },
            templateResult: formatAcctSearchResults
        }).on('select2:select', function(e) {
            switch(e.type) {
                case 'select2:select':
                    $.get($app_url + '/select2-acct-details', { 'acct_id':$('#acct_id option:selected').val() })
                        .done(function(data) {
                            $('#acct-number').text(data.acct_number);
                            $('#acct-class').text(data.acct_class + " - " + data.acct_subclass);
                            $('#acct-status').text(data.acct_status);
                            $('#acct-meter').text(data.meter_brand + " - " + data.meter_no);
                            $('#acct-book').text(data.book);
                            $('#acct-sequence').text(data.sequence);
                            $('#acct-address').text(data.complete_address.substring(0,59).toUpperCase());

                            $.ajax({
                                url: $app_url + '/csr/illegal-promissory/acct-illegals',
                                type: 'get',
                                dataType: 'html',
                                data: { 'acct_id' : $('#acct_id option:selected').val() },
                                success: function(response) {
                                    $('#illegals-container').html(response);
                                    $('.chk-illegal').prop('checked', true).trigger('change');
                                }
                            });
                        });
                break;

                default:
                    $.each($('.acct-details'), function() { $(this).val('').trigger('change'); });
                    $('#adv_payment').data('amt', 0).val('(0.00)');

                    totalAmt();
                break;
            }
        });

        $('#terms').on('change', function() {
            computePromissory();
        });

        $('#amt_discount').on('change keyup', function() {
            $('#amt_initial').val('0.00').data('amt', 0);

            $amt_total    = Number($('#amt_total').data('amt'));
            $amt_discount = Number($('#amt_discount').val().replace(',', ''));
            $amt_initial  = 0;
            $amt_balance  = $amt_total - $amt_discount - $amt_initial;
            
            if($amt_balance <= 0) {
                // $.confirm({
                //     draggable: true,
                //     type: 'red',
                //     title: false,
                //     content: '<p class="text-center"><i class="fa fa-gg text-bold text-danger" style="font-size:54px"></i></p>' +
                //             '<p class="text-center">Discount amount must not be higher or equal to bill amount.</p>',
                //     buttons: {
                //         yes: {
                //             text: '<small>[ENTER]</small> got it!',
                //             btnClass: 'btn-danger',
                //             keys: ['enter']
                //         }
                //     }
                // });
                
                $('#amt_discount').val($amt_total-1).data('amt', $amt_total-1).trigger('change');
            } else {
                if($amt_discount > 0) {
                    $('#amt_interest').val('0.00').prop('disabled', true);
                } else {
                    $('#amt_interest').val('0.00').prop('disabled', false);
                }

                computePromissory();
            }
        });

        $('#amt_interest').on('change keyup', function() {
            $amt_interest = Number($(this).val().replace(',', ''));
            
            if($amt_interest > 0) {
                $('#amt_discount').val('0.00').prop('disabled', true);
            } else {
                $('#amt_discount').val('0.00').prop('disabled', false);
            }

            computePromissory();
        });

        $('#amt_initial').on('change keyup', function() {
            $amt_initial = Number($(this).val());
            $amt_balance = Number($('#amt_net').data('amt'));
            
            if($amt_initial >= $amt_balance) {
                $.confirm({
                    draggable: true,
                    type: 'red',
                    title: '',
                    content: '<p class="text-center"><i class="fa fa-gg text-bold text-danger" style="font-size:54px"></i></p>' +
                            '<p class="text-center">Initial payment amount must not be higher or equal to balance.</p>',
                    buttons: {
                        yes: {
                            text: 'got it!',
                            btnClass: 'btn-danger'
                        }
                    }
                });

                $('#amt_initial').val('0.00').data('amt', 0).trigger('change');
            }

            computePromissory();
        });

        $('#post-promissory').click(function(e) {
            $jc = $.confirm({
                title: false,
                draggable: true,
                columnClass: 'small',
                content: '<p class="text-center" style="font-size:22px">Are you sure you want to post this illegal promissory note?</p>',
                buttons: {
                    CANCEL: {
                        btnClass:'btn btn-default',
                        text: '<small>[ESC]</small> CANCEL',
                        keys: ['esc']
                    },
                    CONFIRM: {
                        btnClass: 'btn btn-warning',
                        text: '<small>[ENTER]</small> POST',
                        action: function() {
                            $jc.showLoading(true);

                            $.ajax({
                                url: $app_url + '/csr/illegal-promissory/post-promissory',
                                method: 'post',
                                data: {
                                    'cap_id'        : $('.chk-illegal:checkbox:checked').data('id'),
                                    'acct_id'       : $('#acct_id').val(),
                                    'amt_total'     : $('#amt_total').data('amt'),
                                    'amt_discount'  : Number($('#amt_discount').val().replace(',', '')),
                                    'amt_interest'  : Number($('#amt_interest').val().replace(',', '')),
                                    'amt_net'       : Number($('#amt_net').data('amt')),
                                    'amt_initial'   : Number($('#amt_initial').val().replace(',', '')),
                                    'amt_remaining' : Number($('#amt_remaining').data('amt')),
                                    'terms'         : Number($('#terms').val()),
                                    'amortization'  : Number($('#amortization').data('amt'))
                                },
                                success: function(res) {
                                    $.confirm({
                                        draggable: true,
                                        title: false,
                                        type: 'blue',
                                        content: '<p class="text-center"><i class="fa fa-fw fa-check text-bold text-primary" style="font-size:54px"></i></p>' +
                                                '<p class="text-center">Illegal promissory was successfully posted, please proceed to teller for the payment if initial payment has been set.</p>',
                                        buttons: {
                                            yes: {
                                                text: '<small>[ENTER]</small> got it!',
                                                btnClass: 'btn-primary',
                                                keys: ['enter'],
                                                action: function() {
                                                    window.location.href = $app_url + '/csr/illegal-promissory';
                                                }
                                            }
                                        }
                                    });
                                },
                                error: function(res) {
                                    $.each(res.responseJSON, function(k,v) {
                                        $('#'+k).closest('.form-group').addClass('has-error');
                                    });

                                    $jc.hideLoading(true);
                                }
                            });
                        }
                    }
                }
            });
        });
    }).on('change', '.chk-illegal', function(e) {
        $total_amount = numeral(0);

        $.each($('.chk-illegal:checkbox:checked'), function() {
            $balance = Number($(this).data('amt-net')) - Number($(this).data('amt-paid'));
            $total_amount.add($balance);
        });

        $('#amt_total').data('amt', $total_amount.value()).text($total_amount.format('0,0.00'));

        computePromissory();
    });
</script>
@endsection