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

<style type="text/css">
    input[readonly] {
        background-color: #fff !important;
    }
</style>

@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">New Athena Loan</label>

                <div class="pull-right box-tools">
                    <a href="#" class="btn btn-success btn-flat pull-right" id="btn_post_loan"><i class="fa fa-fw fa-save"></i> Post New Loan</a>
                </div>
                <div class="pull-right box-tools" style="margin-right: 3px;">
                    <a href="{{ url('athena/athena-loans') }}" class="btn btn-default btn-flat pull-right"><i class="fa fa-fw fa-reply"></i> Go Back</a>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-6">
    			<div class="row">
    				<div class="col-xs-6">
	                    <div class="form-group">
	                        <span class="text-bold">SELECT CUSTOMER</span>
	                        <select id="acct_id" name="acct_id" class="form-control select2 select2-hidden-accessible jo-account" data-placeholder="Select customer." style="width: 100%;" aria-hidden="true">
	                            <option></option>
	                        </select>
	                    </div> 
	                </div>

	                <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">CLASS</span>
                            <input type="text" id="acct_class" class="form-control acct-details" readonly="">
                        </div>  
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">SEQUENCE</span>
                            <input type="text" id="sequence" class="form-control acct-details" readonly="">
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">BOOK</span>
                            <input type="text" id="book" class="form-control acct-details" readonly="">
                        </div>
                    </div>
    			</div>

    			<div class="row">
    				<div class="col-xs-8">
                        <div class="form-group">
                            <span class="text-bold">ADDRESS</span>
                            <input type="text" id="complete_address" class="form-control acct-details" readonly="">
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <span class="text-bold">STATUS</span>
                            <input type="text" id="status" class="form-control acct-details" readonly="">
                        </div>
                    </div>
    			</div>
    		</div>

    		<div class="col-xs-6">
    			<div class="row">
    				<div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">PRINCIPAL AMOUNT</span>
                            <input type="text" id="amt_principal" class="form-control curr"  value="0.00" disabled>
                        </div> 
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">INTEREST RATE</span>
                            <input type="text" id="interest_rate" class="form-control" value="0" disabled>
                        </div> 
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">INTEREST AMOUNT</span>
                            <input type="text" id="amt_interest" class="form-control" value="0.00" readonly="true" disabled>
                        </div> 
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">NET AMOUNT</span>
                            <input type="text" id="amt_net" class="form-control" value="0.00" readonly="true" disabled>
                        </div> 
                    </div>
    			</div>

    			<div class="row">
                    <div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">TERMS</span>
                            <div class="input-group">
                                <input type="text" id="terms" class="form-control wnum-only pnum-only" value="1" disabled>
                                <span class="input-group-addon">mo(s)</span>
                            </div>
                        </div> 
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">AMORTIZATION</span>
                            <input type="text" id="amortization" class="form-control" value="0.00" readonly="true" disabled>
                        </div> 
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <span class="text-bold">FIRST DUE DATE</span>
                            <input type="text" id="first_due_day" class="form-control date-masked" placeholder="yyyy-mm-dd" disabled>
                        </div> 
                    </div>
    			</div>
    		</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;
        }

        computeTotal = function() {
            $amt_principal    = Number($('#amt_principal').val().replace(',', ''));
                
            $amt_interest  = numeral(0);
            $interest      = numeral(0);
            $amt_net       = numeral(0);
            $amortization  = numeral(0);
            $terms         = Number($('#terms').val());
            $interest_rate = Number($('#interest_rate').val());
            $interest = $amt_principal * $interest_rate / 100;

            $amt_interest.add($amt_principal);
            $amt_interest.multiply($interest_rate);
            $amt_interest.divide(100);

            $amt_net.add($amt_principal);
            $amt_net.add($interest);
            
            $amortization.add($amt_net.value());
            $amortization.divide($terms);

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

		$('#acct_id').select2({
            allowClear: false,
            ajax: {
                url: $app_url + '/select2-acct-search',
                delay: 300,
                data: function (params) {
                    return query = {
                        search: params.term,
                        page: params.page,
                        filter: ["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_class').val(data.acct_class + " - " + data.acct_subclass);
                            $('#status').val(data.acct_status.toUpperCase());
                            $('#book').val(data.book);
                            $('#sequence').val(data.sequence); 
                            $('#complete_address').val(data.complete_address.toUpperCase());

                            $.ajax({
                                url: $app_url + '/csr/bill-promissory/acct-bills',
                                type: 'get',
                                dataType: 'html',
                                data: { 'acct_id' : $('#acct_id option:selected').val() },
                                success: function(response) {
                                    $('#bills-container').html(response);
                                }
                            });
                        });
                break;

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

                    totalAmt();
                break;
            }

            $('#amt_principal').prop('disabled', false);
            $('#interest_rate').prop('disabled', false);
            $('#amt_interest').prop('disabled', false);
            $('#amt_net').prop('disabled', false);
            $('#first_due_day').prop('disabled', false);
            $('#amt_initial').prop('disabled', false);
            $('#amt_remaining').prop('disabled', false);
            $('#terms').prop('disabled', false);
            $('#amortization').prop('disabled', false);
            $('#amt_principal').focus();
        });

        $('#amt_principal, #terms').on('change keyup', function() {
            computeTotal();
        });

        $('#interest_rate').on('change keyup', function() {
            computeTotal();
        });

        $('#btn_post_loan').on('click', function() {
            var acct_id         = $('#acct_id').val();
            var amt_principal   = Number($('#amt_principal').val().replace(',', ''));
            var interest_rate   = Number($('#interest_rate').val());
            var amt_interest    = Number($('#amt_interest').val().replace(',', ''));
            var amt_net         = Number($('#amt_net').val().replace(',', ''));
            var terms           = Number($('#terms').val());
            var amortization    = Number($('#amortization').val().replace(',', ''));
            var first_due_day   = $('#first_due_day').val();

            $jc = $.confirm({
                title: 'Post New Loan',
                draggable: false,
                columnClass: 'small',
                content: 'Do you want to proceed?',
                buttons: {
                    CLOSE: {
                        btnClass: 'btn btn-default',
                        text: '<small>[ESC]</small> Cancel',
                        keys: ['esc']
                    },
                    CONFIRM: {
                        btnClass: 'btn btn-success',
                        text: '<small>[ENTER]</small> Confirm',
                        keys: ['enter'],
                        action: function() {
                            $.ajax({
                                url: $app_url + '/athena/athena-loans/create',
                                type: 'POST',
                                data: {
                                    'acct_id'       : acct_id,
                                    'amt_principal' : amt_principal,
                                    'interest_rate' : interest_rate,
                                    'amt_interest'  : amt_interest,
                                    'amt_net'       : amt_net,
                                    'terms'         : terms,
                                    'amortization'  : amortization,
                                    'first_due_day' : first_due_day
                                },
                                beforeSend: function(){
                                    $jc.showLoading(true);
                                },
                                success: function(e){
                                    $.confirm({
                                        title: 'Success',
                                        content: 'Successfuly added new loan!',
                                        type: 'green',
                                        buttons: {
                                            OK: {
                                                text: '<small>[ENTER]</small> OK',
                                                btnClass: 'btn-success',
                                                keys: ['enter', 'esc'],
                                                action: function() {
                                                    window.location.href = $app_url + '/athena/athena-loans';
                                                }
                                            }
                                        }
                                    });
                                },
                                error: function(e){
                                    // if (e.status == 422 || e.status == 500) {
                                    //     console.log(e);
                                    //     $.confirm({
                                    //         title: 'ERROR!',
                                    //         content: 'An error has occured!',
                                    //         type: 'red',
                                    //         buttons: {
                                    //             OK: {
                                    //                 text: '<small>[ENTER]</small> OK',
                                    //                 btnClass: 'btn-red',
                                    //                 keys: ['enter', 'esc'],
                                    //                 action: function() {
                                    //                 }
                                    //             }
                                    //         }
                                    //     });
                                    // }
                                },
                                complete: function(e) {
                                    $.each(e.responseJSON, function(k,v) {
                                        $('#'+k).closest('.form-group').addClass('has-error');
                                    });

                                    $jc.hideLoading(true);
                                }
                            })
                        }
                    }
                }
            });
        })
	})
</script>
@endsection