@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="form-group col-xs-4">
                <div style="margin-top:4px">
                    <select id="appl_id" name="appl_id" class="form-control select2 select2-hidden-accessible" data-placeholder="SELECT CUSTOMER" style="width: 100%;" aria-hidden="true">
                        <option></option>
                    </select>
                </div>
            </div>

            <div class="form-group col-xs-8 text-bold">
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-fw text-success fa-user"></i><span class="appl-details" id="appl-name">CUSTOMER NAME</span>
                    </div>
                    <div class="col-xs-6">
                        <i class="fa fa-fw text-success fa-power-off"></i><span class="appl-details" id="appl-status">APPLICATION STATUS</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-fw text-success fa-lock"></i><span class="appl-details" id="appl-number">APPLICATION NO.</span>
                    </div>
                    <div class="col-xs-6">
                        <i class="fa fa-fw text-success fa-code-fork"></i><span class="appl-details" id="connection-type">CONNECTION TYPE</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-fw text-success fa-map-marker"></i><span class="appl-details" id="appl-address">ADDRESS</span>
                    </div>
                    <div class="col-xs-6">
                        <i class="fa fa-fw text-success fa-user"></i><span class="appl-details" id="acct-class">CLASSIFICATION</span>
                    </div>
                </div>
            </div>

            {{-- <div class="col-xs-12">
                @include('layouts._search-customer')
            </div> --}}
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">ARREARS</span>
                            <input type="text" id="bills_amt" class="form-control curr text-right wnum-only" value="0.00" readonly>
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">MATERIALS</span>
                            <input type="text" id="materials_amt" class="form-control curr text-right wnum-only" value="0.00" readonly>
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">SERVICE FEE</span>
                            <input type="text" id="services_amt" class="form-control curr text-right wnum-only" value="0.00" readonly>
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">GUARANTEE DEPOSIT</span>
                            <input type="text" id="gdeposit_amt" class="form-control curr text-right wnum-only" value="0.00" readonly>
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">PRINCIPAL AMOUNT</span>
                            <input type="text" id="principal_amt" class="form-control text-right text-bold text-primary" style="font-size: 20px;" value="0.00" readonly>
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">1ST AMORTIZATION</span>
                            <div class="input-group">
                                <input type="text" id="first_due" class="form-control date-masked" value="{{ $first_due }}" disabled>
                            </div>
                        </div> 
                    </div>
                </div>

    			<div class="row">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">INTEREST PER ANNUM</span>
                            <div class="input-group">
                                <input type="text" class="fees-control form-control curr text-right wnum-only" id="interest_val" value="{{ $interest }}" readonly>
                                <span class="input-group-addon text-bold">%</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">INTEREST AMOUNT</span>
                            <input type="text" id="interest_amt" class="form-control text-right" value="0.00" readonly="true">
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <span class="text-bold">NET AMOUNT</span>
                            <input type="text" id="net_amt" class="form-control text-right text-bold" style="font-size: 20px;" value="0.00" readonly="true">
                        </div> 
                    </div>
                    <div class="col-xs-2">
                        <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 data-amt="0">
                                <span class="input-group-addon text-bold">mo(s)</span>
                            </div>
                        </div> 
                    </div>
                    <div class="col-xs-4">
                        <p class="lead text-danger text-bold text-right" style="margin-bottom:0px"><small>Monthly Payment for <span class="terms">1</span> Mo(s)</small></p>
                        <h1 class="text-success text-right" style="margin-top:0px; line-height:.8; font-size:50px"><b>P<span id="amortization">0.00</span></b></h1>
                    </div>
    			</div>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script src="{{ URL::asset('js/elite.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function (){
        Select2SearchAccount('cust__account-id', ['ia']);
        $('#due_date').val($date);

        formatASR = function(res) {
            if(res.loading) return res.text;

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

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

            mu  +=  "<div class='select2-result-repository__statistics'>" +
                        "<div class='select2-result-repository__forks'><i class='fa fa-lock fa-fw'></i>" + res.application_number + "</div>" +
                        "<div class='select2-result-repository__stargazers'><i class='fa fa-street-view fa-fw'></i>" + res.acct_class + "</div>" +
                        "<div class='select2-result-repository__stargazers'><i class='fa fa-power-off fa-fw'></i>" + res.application_status.toUpperCase() + "</div>" +
                    "</div>";

            return mu;
        }

        $('#appl_id').select2({
            allowClear: true,
            ajax: {
                url: $app_url + '/select2-appl-search',
                delay: 200,
                data: function (params) {
                    return query = {
                        search: params.term,
                        page: params.page,
                        filter: ["pending", "surveyed", "for payment", "joborder", "connected"]
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    return {
                        results: $.map(data.items, function (data) {
                            return {
                                text: data.cust_name.toUpperCase(),
                                application_number: data.application_number,
                                acct_class: data.acct_class + " - " + data.acct_subclass,
                                application_status: data.application_status,
                                address: data.cust_address,
                                id: data.appl_id
                            }
                        }),
                        pagination: {
                            more: (params.page * 10) < data.count
                        }
                    };
                },

            },
            escapeMarkup: function (mu) { return mu; },
            templateResult: formatASR
        })
        .on('select2:select', function (e) {
            $.get($app_url + '/select2-appl-details', { 'appl_id':$('#appl_id option:selected').val() }).done(function(data) {
                $('#appl-number').text(data.application_number);
                $('#appl-name').text($('#appl_id option:selected').text().toUpperCase());
                $('#acct-class').text(data.acct_class + " - " + data.acct_subclass);
                $('#appl-status').text(data.application_status.toUpperCase());
                $('#connection-type').text(data.connection_type ? data.connection_type.toUpperCase() : '-');
                $('#appl-address').text(data.complete_address.toUpperCase());
            });

            // $('#interest_val').prop('disabled', false);
            $('#terms').prop('disabled', false);
            $('#first_due').prop('disabled', false);

            getPayables($('#appl_id option:selected').val());
        })
        .on('select2:unselect', function(e) {
            // $.each($('.appl-details'), function() { $(this).text('-'); });
            location.reload();
        });

        // $('#cust__account-id').change(function(){
        //     LoadAccountDetails();           
        // })
        // .on('select2:select', function() {
        //     // $('#bills_amt').prop('disabled', false);
        //     $('#materials_amt').prop('disabled', false);
        //     $('#services_amt').prop('disabled', false);
        //     $('#gdeposit_amt').prop('disabled', false);
        //     $('#principal_amt').prop('disabled', false);
        //     $('#interest_val').prop('disabled', false);
        //     $('#net_amt').prop('disabled', false);
        //     $('#terms').prop('disabled', false);
        //     $('#first_due').prop('disabled', false);
        //     $('#materials_amt').focus();

        //     getArrears($('#cust__account-id option:selected').val())   
        // });

        // $('#cust__clear-search').click(function(){
        //     location.reload();
        // });

        // LoadAccountDetails = function () {
        //     var data      = $('#cust__account-id').select2('data')[0];
        //     var oldAcctNo = data.old_acct_no ? ' | ' + data.old_acct_no : '';
        //     var sc_number = data.sc_number ? data.sc_number.toUpperCase() : 'N/A';
        //     var senior = data.sc ? 'ACTIVE SC ' + sc_number : '';
        //     var tags = data.tags ? data.tags.toUpperCase() : '';
        //     var promo = data.promo_id ? data.promo_title.toUpperCase() : '';
        //     $('#cust__account-name')    .text(data.text.toUpperCase());
        //     $('#cust__account-no')      .text(data.acct_no);
        //     $('#cust__old-account-no')  .text(oldAcctNo);
        //     $('#cust__address')         .text(data.address.toUpperCase());
        //     $('#cust__meter-no')        .text('M - ' + data.meter);
        //     $('#cust__account-class')   .text(data.acct_class.toUpperCase());
        //     $('#cust__account-book')    .text('B - ' + data.book_code);
        //     $('#cust__tags')            .text(tags);
        //     $('#cust__promo')           .text(promo);
        //     $('#cust__senior')          .text(senior);
        //     $('#cust__gdeposit')        .text('GD - ' + number_format(data.gdeposit));

        //     var acctStatus = data.acct_status;
        //     switch(acctStatus.toLowerCase()){
        //         case 'active' 
        //             : $('#cust__account-status')
        //                 .removeClass('label-info')
        //                 .removeClass('label-warning')
        //                 .removeClass('label-danger')
        //                 .addClass('label-info')
        //                 .text('ACTIVE');
        //             break;

        //         case 'disconnected' 
        //             : $('#cust__account-status')
        //                 .removeClass('label-info')
        //                 .removeClass('label-warning')
        //                 .removeClass('label-danger')                
        //                 .addClass('label-warning')
        //                 .text('DISCONNECTED');
        //             break;            

        //         case 'inactive'
        //             : $('#cust__account-status')
        //                 .removeClass('label-info')
        //                 .removeClass('label-warning')
        //                 .removeClass('label-danger')                
        //                 .addClass('label-danger')
        //                 .text('INACTIVE');
        //             break;                
        //     }

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

        computeTotal = function() {
            var bills_amt     = numeral(Number($('#bills_amt').val().replace(',', '')));
            var materials_amt = numeral(Number($('#materials_amt').val().replace(',', '')));
            var services_amt  = numeral(Number($('#services_amt').val().replace(',', '')));
            var gdeposit_amt  = numeral(Number($('#gdeposit_amt').val().replace(',', '')));
            var principal_amt = numeral(0);
            var interest_val  = numeral(Number($('#interest_val').val().replace(',', '')));
            var interest_amt  = numeral(0);
            var net_amt       = numeral(0);
            var amortization  = numeral(0);
            var terms         = numeral($('#terms').val());

            $('.terms').text(terms.value());

            principal_amt = bills_amt.value() + materials_amt.value() + services_amt.value() + gdeposit_amt.value();

            interest_amt = principal_amt * (interest_val.value() / 100) * terms.value() / 12;
            $('#interest_amt').val(numeral(interest_amt).format('0,0.00'));

            net_amt = principal_amt + interest_amt;
            amortization = net_amt / terms.value();

            $('#principal_amt').val(numeral(principal_amt).format('0,0.00'));
            $('#net_amt').val(numeral(net_amt).format('0,0.00'));
            $('#amortization').text(numeral(amortization).format('0,0.00'));
        }

        getPayables = function (appl_id) {
            $.ajax({
                url: $app_url + '/athena/athena-loans/get-payables',
                type: 'get',
                cache: false,
                data: { 'appl_id' : appl_id },
                beforeSend: function() { },
                success: function(data) {
                    $('#bills_amt').val(numeral(data.bills).format('0,0.00')).trigger('change');
                    $('#materials_amt').val(numeral(data.materials).format('0,0.00')).trigger('change');
                    $('#services_amt').val(numeral(data.services).format('0,0.00')).trigger('change');
                    $('#gdeposit_amt').val(numeral(data.gdeposit).format('0,0.00')).trigger('change');
                },
                error: function(result) {
                    // Code here.
                },  
                complete: function() { 
                    // Code here.
                }
            });
        }
        
        $('#bills_amt, #materials_amt, #services_amt, #gdeposit_amt, #interest_val, #terms').on('change keyup', function() {
            computeTotal();
        });

        $('#btn_post_loan').on('click', function() {
            var appl_id       = $('#appl_id option:selected').val();
            var bills_amt     = Number($('#bills_amt').val().replace(',', ''));
            var materials_amt = Number($('#materials_amt').val().replace(',', ''));
            var services_amt  = Number($('#services_amt').val().replace(',', ''));
            var gdeposit_amt  = Number($('#gdeposit_amt').val().replace(',', ''));
            var principal_amt = Number($('#principal_amt').val().replace(',', ''));
            var interest_val  = Number($('#interest_val').val().replace(',', ''));
            var interest_amt  = Number($('#interest_amt').val().replace(',', ''));
            var net_amt       = Number($('#net_amt').val().replace(',', ''));
            var terms         = Number($('#terms').val());
            var first_due     = $('#first_due').val();
            var amortization  = Number($('#amortization').text().replace(',', ''));

            console.log(amortization);

            $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: {
                                    'appl_id'       : appl_id,
                                    'bills_amt'     : bills_amt,
                                    'materials_amt' : materials_amt,
                                    'services_amt'  : services_amt,
                                    'gdeposit_amt'  : gdeposit_amt,
                                    'principal_amt' : principal_amt,
                                    'interest_val'  : interest_val,
                                    'interest_amt'  : interest_amt,
                                    'net_amt'       : net_amt,
                                    'terms'         : terms,
                                    'first_due'     : first_due,
                                    'amortization'  : amortization,
                                },
                                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){
                                    console.log(e);
                                    $.each(e.responseJSON, function(k,v) {
                                        $('#'+k).closest('.form-group').addClass('has-error');
                                    });
                                },
                                complete: function(e) {
                                    $jc.hideLoading(true);
                                }
                            })
                        }
                    }
                }
            });
        })
	})
</script>
@endsection