@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">Change Connection Type</h3>
	  	<div class="box-tools pull-right">
	  		<a href="{{url('csr/application')}}" class="btn btn-sm btn-flat btn-default"><i class="fa fa-reply"></i> Go Back</a>
	    	<button id="change-conntype" data-aid="{{ $appl->id }}" type="button" class="btn btn-sm btn-flat btn-warning"><i class="fa fa-save"></i> Change Connection Type</button>
	  	</div>
	</div>
</div>

<style type="text/css">
	.control-label {
		margin-bottom:0px;
	}

	#table-accounts td {
		padding:2px;
	}
</style>

<div class="row"> 
	<div class="col-xs-12">
		<div class="box box-default">
			<div class="box-body">
				<div class="row">
					<div class="col-xs-5">
						<span class="appl" data-details="{{ json_encode($appl) }}"><i class="fa fa-fw fa-user"></i> {{ ucwords($appl->lastname) }}, {{ ucwords($appl->firstname) }} {{ ucwords($appl->middlename) }}</span><br>
						<span><i class="fa fa-fw fa-tag"></i> {{ ucwords($appl->ctype) }}</span><br>
						<span class="appl-promo" data-details="{{ json_encode($appl->promo_details) }}"><i class="fa fa-fw fa-gift"></i> {{ $appl->promo ? strtoupper($appl->promo->promo_title) : 'No Promo' }}</span>
					</div>

					<div class="col-xs-4">

					</div>

					<div class="col-xs-3">
						<table style="width: 100%">
							<tr>
								<td class="text-right">Advance Payment:</td>
								<td class="text-right">{{ number_format($appl->advance_amt,2,".",",") }}</td>
							</tr>
							<tr>
								<td class="text-right" id="change-conntype-result">Balance:</td>
								<td class="text-right" id="change-conntype-difference">0.00</td>
							</tr>
						</table>
					</div>
				</div>

				<table class="table table-hover table-condensed" style="margin-top:18px; margin-bottom:18px">
				    <thead class="table-header-bg">
				        <tr>
				            <th width="16%">PARTICULARS</th>
				            <th width="7%" class="text-right">BASIC</th>
				            <th width="7%" class="text-right">DISC.</th>
				            <th width="7%" class="text-right">INTEREST</th>
				            <th width="7%" class="text-right">SUB TOTAL</th>
				            <th width="7%" class="text-right">ADVANCE</th>
				            <th width="7%" class="text-right">NET AMT</th>
				            <th width="9%" class="text-right">P. METHOD</th>
				            <th width="7%" class="text-right">DPAYMENT</th>
				            <th width="6%" class="text-right">TERMS</th>
				            <th width="6%" class="text-right">MONTHLY</th>
				            <th width="7%" class="text-right">AMT DUE</th>
				            <th width="7%" class="text-right">AMT PAID</th>
				        </tr>
				    </thead>
				    <tbody>
				        @foreach($fees as $d)
				        <tr>
				            <td>{{ ucwords($d->particulars) }}</td>
				            <td class="text-right">{{ number_format($d->amt_basic,2,".",",") }}</td>
				            <td class="text-right">({{ number_format($d->discount_amt,2,".",",") }})</td>
				            <td class="text-right">{{ number_format($d->interest_amt,2,".",",") }}</td>
				            <td class="text-right">{{ number_format($d->amt_balance,2,".",",") }}</td>
				            <td class="text-right">({{ number_format($d->amt_advance,2,".",",") }})</td>
				            <td class="text-right">{{ number_format($d->amt_remaining,2,".",",") }}</td>
				            <td class="text-right">
				            	@if($d->payment_method == 'ins')
				                {{ 'Installment' }}
				                @endif

				                @if($d->payment_method == 'atb')
				                {{ 'Add to Bill' }}
				                @endif

				                @if($d->payment_method == 'full')
				                {{ 'Full Payment' }}
				                @endif
				            </td>
				            <td class="text-right">{{ number_format($d->amt_initial,2,".",",") }}</td>
				            <td class="text-right">
				                @if($d->payment_method != 'full')
				                {{ $d->terms }} Mo(s)
				                @else
				                {{ '-' }}
				                @endif
				            </td>
				            <td class="text-right">
				                @if($d->payment_method != 'full')
				                {{ number_format($d->amortization,2,".",",") }}
				                @else
				                {{ '-' }}
				                @endif
				            </td>
				            <td class="text-right">
				                {{ number_format($d->amt_remaining,2,".",",") }}
				            </td>
				            <td class="text-right">
				                {{ number_format($d->amt_paid,2,".",",") }}
				            </td>
				        </tr>
				        @endforeach
				    </tbody>
				    <tfoot>
				        <tr>
				            <th colspan="12" class="text-success">TOTAL AMOUNT PAID</th>
				            <td colspan="1" class="text-right text-success amt-grand-total-old" data-amt="{{ $fees->sum('amt_paid') }}">{{ number_format($fees->sum('amt_paid'),2,".",",") }}</td>
				        </tr>
				    </tfoot>
				</table>

				<select id="ctype_id" class="form-control col-xs-3 select2 select2-hidden-accessible" data-placeholder="NEW CONNECTION TYPE" style="width: 100%" aria-hidden="true">
				    <option></option>
				    @foreach($ctypes AS $c)
				    <option value="{{ $c->id }}">{{ strtoupper($c->description) }}</option>
				    @endforeach
				</select>

				<table class="table table-hover table-condensed" style="margin-top:2px">
				    <thead class="table-header-bg">
				        <tr>
				            <th width="16%">PARTICULARS</th>
				            <th width="7%" class="text-right">BASIC</th>
				            <th width="7%" class="text-right">DISC.</th>
				            <th width="7%" class="text-right">INTEREST</th>
				            <th width="7%" class="text-right">SUB TOTAL</th>
				            <th width="7%" class="text-right">ADVANCE</th>
				            <th width="7%" class="text-right">NET AMT</th>
				            <th width="9%" class="text-right">P. METHOD</th>
				            <th width="7%" class="text-right">DPAYMENT</th>
				            <th width="6%" class="text-right">TERMS</th>
				            <th width="6%" class="text-right">MONTHLY</th>
				            <th width="14%" class="text-right">AMT DUE</th>
				        </tr>
				    </thead>
				    <tbody>
				    	@foreach($fees as $d)
				        	@if($d->particulars == 'guarantee deposit')
				        	<tr class="fees-row gdeposit" data-particulars="gdep">
					            <td><i class="fa fa-fw fa-ban"></i> {{ ucwords($d->particulars) }}</td>
					            <td class="text-right fees-row-details amt-basic" data-amt="{{ $d->amt_basic }}">{{ number_format($d->amt_basic,2,".",",") }}</td>
					            <td class="text-right fees-row-details" data-amt="{{ $d->discount_amt }}">({{ number_format($d->discount_amt,2,".",",") }})</td>
					            <td class="text-right fees-row-details" data-amt="{{ $d->interest_amt }}">{{ number_format($d->interest_amt,2,".",",") }}</td>
					            <td class="text-right fees-row-details amt-subtotal" data-amt="{{ $d->amt_balance }}">{{ number_format($d->amt_balance,2,".",",") }}</td>
					            <td class="text-right fees-row-details amt-advance">(0.00)</td>
					            <td class="text-right fees-row-details amt-remaining" data-amt="{{ $d->amt_balance }}">{{ number_format($d->amt_balance,2,".",",") }}</td>
					            <td class="text-right">
					                @if($d->payment_method == 'ins')
					                {{ 'Installment' }}
					                @endif

					                @if($d->payment_method == 'atb')
					                {{ 'Add to Bill' }}
					                @endif

					                @if($d->payment_method == 'full')
					                {{ 'Full Payment' }}
					                @endif
					            </td>
					            
					            <td class="text-right">({{ number_format($d->amt_initial,2,".",",") }})</td>
					            <td class="text-right">
					                @if($d->payment_method != 'full')
					                {{ $d->terms }} Mo(s)
					                @else
					                {{ '-' }}
					                @endif
					            </td>
					            <td class="text-right">
					                @if($d->payment_method != 'full')
					                {{ number_format($d->amortization,2,".",",") }}
					                @else
					                {{ '-' }}
					                @endif
					            </td>
					            <td class="text-right amt-total" data-amt="{{ $d->amt_balance }}">{{ number_format($d->amt_balance,2,".",",") }}</td>
					        </tr>
				        	@endif
				        @endforeach

				    	<tr class="fees-row materials" data-particulars="mats">
				            <td><a href="#" id="appl-new-mats"><i class="fa fa-fw fa-pencil"></i> Materials</a></td>
				            <td class="text-right fees-row-details amt-basic">0.00</a></td>
				            <td class="text-right text-primary fees-row-details amt-discount"><a href="#" data-toggle="popover">(0.00)</a></td>
				            <td class="text-right text-primary fees-row-details amt-interest"><a href="#" data-toggle="popover">0.00</a></td>
				            <td class="text-right fees-row-details amt-subtotal">0.00</td>
				            <td class="text-right fees-row-details amt-advance">(0.00)</td>
				            <td class="text-right fees-row-details amt-remaining">0.00</td>
				            <td class="text-right text-primary fees-row-details payment-method"><a href="#" data-toggle="popover">Full Payment</a></td>
				            <td class="text-right text-primary fees-row-details amt-initial"><a href="#" data-toggle="popover">(0.00)</a></td>
				            <td class="text-right fees-row-details terms"><a href="#" data-toggle="popover">-</a></td>
				            <td class="text-right fees-row-details amt-monthly">-</td>
				            <td class="text-right amt-total">0.00</td>
				        </tr>

				        <tr class="fees-row service-fee" data-particulars="sfee">
				            <td><a href="#" id="appl-new-sfee"><i class="fa fa-fw fa-pencil"></i> Service Fee</a></td>
				            <td class="text-right fees-row-details amt-basic">0.00</a></td>
				            <td class="text-right text-primary fees-row-details amt-discount"><a href="#" data-toggle="popover">(0.00)</a></td>
				            <td class="text-right text-primary fees-row-details amt-interest"><a href="#" data-toggle="popover">0.00</a></td>
				            <td class="text-right fees-row-details amt-subtotal">0.00</td>
				            <td class="text-right fees-row-details amt-advance">(0.00)</td>
				            <td class="text-right fees-row-details amt-remaining">0.00</td>
				            <td class="text-right text-primary fees-row-details payment-method"><a href="#" data-toggle="popover">Full Payment</a></td>
				            <td class="text-right text-primary fees-row-details amt-initial"><a href="#" data-toggle="popover">(0.00)</a></td>
				            <td class="text-right fees-row-details terms"><a href="#" data-toggle="popover">-</a></td>
				            <td class="text-right fees-row-details amt-monthly">-</td>
				            <td class="text-right amt-total">0.00</td>
				        </tr>
				    </tbody>
				    <tfoot>
				        <tr>
				            <th colspan="11" class="text-danger">TOTAL AMOUNT DUE</th>
				            <td colspan="1" class="text-right text-danger amt-grand-total-new">0.00</td>
				        </tr>
				    </tfoot>
				</table>
			</div>
		</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
	var ApplicationHasPromo = function() {
		$promo_details = $('.appl-promo').data('details');

		if($promo_details.length > 0) {
			return true;
		} else {
			return false;
		}
	}

	// Initialize.
	$(document).ready(function() {
		$promo_details = $('.appl-promo').data('details');

		if($promo_details) {
			$.each($promo_details, function(k, v) {
				$row = $('.'+v.particulars.replace(' ', '-')).closest('tr');

				$row.find('.payment-method').data('value', v.payment_method);
				$row.find('.payment-method > a').text(v.payment_method == 'full' ? 'Full Payment' : 'Add to Bill');
				$row.find('.amt-initial').data('amt', 0); 				

				if(v.discount_type) {
					$row.find('.amt-discount').data('type', v.discount_type).data('rate', v.discount_rate);
				}

				if(v.interest_type) {
					$row.find('.amt-interest').data('type', v.interest_type).data('rate', v.interest_rate);
				}

				if(v.terms_min) {
					$row.find('.terms').data('value', v.terms_min).data('min', v.terms_min);
					$row.find('.terms > a').text(v.terms_min + ' Mo(s)')
				}

				if(v.terms_max) {
					$row.find('.terms').data('value', v.terms_min).data('min', v.terms_max);
				}
			});
		}
	});

	// Compute fees on changed row.
	$(document).on('change', '.fees-row-details', function() {
		$row            = $(this).closest('tr');
		$basic_amt      = $row.find('.amt-basic').data('amt') ? $row.find('.amt-basic').data('amt') : 0;
		$payment_method = $row.find('.payment-method').data('value');

		$discount_type  = $row.find('.amt-discount').data('type') ? $row.find('.amt-discount').data('type') : null;
		$discount_rate  = $row.find('.amt-discount').data('rate') ? $row.find('.amt-discount').data('rate') : 0;
		$discount_amt   = $discount_type == 'percent' ? $basic_amt * $discount_rate / 100 : $discount_rate;

		$row.find('.amt-discount').data('amt', $discount_amt);
		$row.find('.amt-discount > a').text('('+numeral($discount_amt).format('0,0.00')+')');

		$terms         = $row.find('.terms').data('value');
		$interest_type = $row.find('.amt-interest').data('type') ? $row.find('.amt-interest').data('type') : null;
		$interest_rate = $row.find('.amt-interest').data('rate') ? $row.find('.amt-interest').data('rate') : 0;
		$interest_amt   = $interest_type == 'percent' ? $basic_amt * $interest_rate / 100 : $interest_rate;

		$row.find('.amt-interest').data('amt', $interest_amt);
		$row.find('.amt-interest > a').text(numeral($interest_amt).format('0,0.00'));

		$total_amt = $basic_amt - $discount_amt + $interest_amt;
		$row.find('.amt-subtotal').data('amt', $total_amt).text(numeral($total_amt).format('0,0.00'));


		// Re-distribute advances to every particulars.
        $amt_advance_total = numeral(Number($('.appl').data('details').advance_amt));
        $.each($('.fees-row'), function() {
            $row              = $(this).closest('tr');
            $amt_subtotal     = $row.find('.amt-subtotal').data('amt');
            $amt_advance_used = numeral(0);
            $amt_advance_used = $amt_advance_total.value() >= $amt_subtotal ? numeral($amt_subtotal) : numeral($amt_advance_total.value());

            $row.find('.amt-advance').data('amt', $amt_advance_used.value()).text("("+ $amt_advance_used.format('0,0.00') +")");
            $amt_advance_total.subtract($amt_advance_used.value());

            // Re-compute net amount less advances.
            $net_amt = $amt_subtotal - $amt_advance_used.value();
            $row.find('.amt-remaining').data('amt', $net_amt).text(numeral($net_amt).format('0,0.00'));

			if($row.find('.payment-method').data('value') == 'atb') {
				$initial_amt = $row.find('.amt-initial').data('amt') ? $row.find('.amt-initial').data('amt') : 0;
				$monthly_amt = ($net_amt - $initial_amt) / $terms;
				
				$row.find('.amt-monthly').data('amt', $monthly_amt).text(numeral($monthly_amt).format('0,0.00'));
				$row.find('.amt-total').data('amt', $initial_amt).text(numeral($initial_amt).format('0,0.00')).trigger('change');
			} else {
				$row.find('.amt-total').data('amt', $net_amt).text(numeral($net_amt).format('0,0.00')).trigger('change');
			}            
        });


        
	}).on('change', '.amt-total', function() {
		$total_new = numeral(0);
		$total_old = $('.amt-grand-total-old').data('amt');

		$.each($('.amt-total'), function() {
			$row         = $(this).closest('tr');
			$total_amt   = $row.find('.amt-total').data('amt') ? Number($row.find('.amt-total').data('amt')) : 0;
			$initial_amt = $row.find('.amt-initial').data('amt') ? Number($row.find('.amt-initial').data('amt')) : 0;
			$topay_amt   = $row.find('.payment-method').data('value') == 'full' ? $total_amt : $initial_amt;

			$total_new.add($total_amt);
		});

		$('.amt-grand-total-new').data('amt', $total_new.value()).text($total_new.format('0,0.00'));

		if($total_old > $total_new.value()) {
			console.log('refundable');
			$('#change-conntype-result').text('Refundable:');
			$('#change-conntype-difference').text(numeral($total_old - $total_new.value()).format('0,0.00'));
		} else {
			console.log('balance');
			$('#change-conntype-result').text('Balance:');
			$('#change-conntype-difference').text(numeral($total_new.value() - $total_old).format('0,0.00'));
		}
	});

	$('#ctype_id').select2({
        allowClear: true,
        dropdownParent: $('.jconfirm-scrollpane'),
    }).on('select2:select', function() {
        var ctype = $('#ctype_id option:selected').val();
    
        $.get($app_url + '/csr/application/get-connection-type-fees', { 'ctype_id':ctype }).done(function(data) {
        	$('#appl-new-mats').data('details', data.mats.details);
        	$('#appl-new-sfee').data('details', data.sfee.details);
        	
            $.each(data, function(k, v) {
            	$.each($('.fees-row'), function() {
            		if(k == $(this).data('particulars')) {
            			$(this).closest('tr').data('details', v.details);
            			$(this).closest('tr').find('.amt-basic').data('amt', v.amount ? v.amount : 0).text(numeral(v.amount).format('0,0.00')).trigger('change');
            		} else {
            			$(this).closest('tr').find('.amt-basic').trigger('change');
            		}
            	});
            });
        });
    });


    // Discount popover.
    $('.amt-discount > a').popover({
        html      : true,
        trigger   : 'manual',
        placement : 'top',
        title     : 'Set Discount',
        content   : function() {
        	return  "<div class='input-group input-group-sm'>"
        				+ "<div class='input-group-btn'>"
		                  	+ "<select class='form-control input-sm amt-discount-type' style='width:120px'>"
	                        	+ "<option value='percent'>Percent (%)</option>"
	                        	+ "<option value='amount'>Amount (0.00)</option>"
	                        + "</select>"
                		+ "</div>"
		                + "<input type='number' class='form-control num amt-discount-input' data-num-min='0' data-num-max='100' value='0'>"
	                    + "<span class='input-group-btn'>"
	                      	+ "<button type='button' class='btn btn-success btn-flat amt-discount-save'><i class='fa fa-fw fa-save'></i></button>"
	                    + "</span>"
		            + "</div>"
        }
    }).on('click', function(e) {        
        $amt_basic = $(this).closest('tr').find('.amt-basic').data('amt');
        
        if($amt_basic && $amt_basic > 0 && ApplicationHasPromo() == false) {
            $(this).popover('toggle');   
        }  
    }).on('shown.bs.popover', function() {
        $('.popover').find('input.amt-discount-input').select();
    });

    $(document).on('click', '.amt-discount-save', function(){
    	var row  = $(this).closest('tr');
    	var type = $(this).closest('div').find('select option:selected').val();
        var rate = Number($(this).closest('div').find('input').val());
        var amt  = type == 'percent' ? row.find('.amt-basic').data('amt') * rate / 100 : rate

        row.find('.amt-discount').data('type', type).data('rate', rate).data('amt', amt).trigger('change');
        row.find('.amt-discount > a').text('(' + numeral(amt).format('0,0.00') + ')');
        
        $('.popover').popover('hide');
    }).on('change', '.amt-discount-type', function() {
    	$discount_type = $(this).val();

    	if($discount_type == 'percent') {
    		$('.amt-discount-input').data('num-min', 0).data('num-max', 100).val(0);
    	}

    	if($discount_type == 'amount') {
    		$amt_basic = $(this).closest('tr').find('.amt-basic').data('amt');
    		$('.amt-discount-input').data('num-min', 0).data('num-max', $amt_basic).val(0);
    	}
    }).on('keyup', '.amt-discount-input', function(e){
        if(e.which == 13){
            var button = $(this).closest('div').find('button');
            button.trigger('click');
        }
    });


    // Interest popover.
    $('.amt-interest > a').popover({
        html      : true,
        trigger   : 'manual',
        placement : 'top',
        title     : 'Set Discount',
        content   : function() {
        	return  "<div class='input-group input-group-sm'>"
        				+ "<div class='input-group-btn'>"
		                  	+ "<select class='form-control input-sm amt-interest-type' style='width:120px'>"
	                        	+ "<option value='percent'>Percent (%)</option>"
	                        	+ "<option value='amount'>Amount (0.00)</option>"
	                        + "</select>"
                		+ "</div>"
		                + "<input type='number' class='form-control num amt-interest-input' data-num-min='0' data-num-max='100' value='0'>"
	                    + "<span class='input-group-btn'>"
	                      	+ "<button type='button' class='btn btn-success btn-flat amt-interest-save'><i class='fa fa-fw fa-save'></i></button>"
	                    + "</span>"
		            + "</div>"
        }
    }).on('click', function() {        
        $amt_basic = $(this).closest('tr').find('.amt-basic').data('amt');

        if($amt_basic && $amt_basic > 0 && ApplicationHasPromo() == false) {
            $(this).popover('toggle');   
        }  
    }).on('shown.bs.popover', function() {
        $('.popover').find('input.amt-interest-input').select();
    });

    $(document).on('click', '.amt-interest-save', function(){
    	var row  = $(this).closest('tr');
    	var type = $(this).closest('div').find('select option:selected').val();
        var rate = Number($(this).closest('div').find('input').val());
        var amt  = type == 'percent' ? row.find('.amt-basic').data('amt') * rate / 100 : rate

        row.find('.amt-interest').data('type', type).data('rate', rate).data('amt', amt).trigger('change');
        row.find('.amt-interest > a').text(numeral(amt).format('0,0.00'));
        
        $('.popover').popover('hide');
    }).on('change', '.amt-interest-type', function() {
    	$interest_type = $(this).val();

    	if($interest_type == 'percent') {
    		$('.amt-interest-input').data('num-min', 0).data('num-max', 100).val(0);
    	}

    	if($interest_type == 'amount') {
    		$amt_basic = $(this).closest('tr').find('.amt-basic').data('amt');
    		$('.amt-interest-input').data('num-min', 0).data('num-max', $amt_basic).val(0);
    	}
    }).on('keyup', '.amt-interest-input', function(e){
        if(e.which == 13){
            var button = $(this).closest('div').find('button');
            button.trigger('click');
        }
    });


    // Payment method popover.
    $('.payment-method > a').popover({
        html      : true,
        trigger   : 'manual',
        placement : 'top',
        title     : 'Set Payment Method',
        content   : function(){
            return  "<div class='input-group input-group-sm'>"
                        +"<select class='form-control payment-method'>"
                        	+"<option value='full'>Full Payment</option>"
                        	+"<option value='atb'>Add to Bill</option>"
                        +"</select>"
                        +"<span class='input-group-btn'>"
                            +"<button type='button' class='btn btn-success payment-method-save' title='Save'>"
                                +"<i class='fa fa-fw fa-save'></i>"
                            +"</button>"
                        +"</span>"
                    +"</div>";
        }
    }).on('click', function() {        
        $basic_amt = $(this).closest('tr').find('.amt-basic').data('amt');

        if($basic_amt && $basic_amt > 0 && ApplicationHasPromo() == false) {
            $(this).popover('toggle');   
        }  
    });

    $(document).on('click', '.payment-method-save', function(){
        var pmt = $(this).closest('div').find('select option:selected');
        var row = $(this).closest('tr');

        row.find('.payment-method').data('value', pmt.val()).trigger('change');
        row.find('.payment-method > a').text(pmt.text());
        
        if(pmt.val() == 'atb') {
        	row.find('.terms').data('value', 1).trigger('change');
        	row.find('.terms > a').text('1 Mo(s)');
        }

        $('.popover').popover('hide');
    });


    // Initial payment popover.
    $('.amt-initial > a').popover({
        html      : true,
        trigger   : 'manual',
        placement : 'top',
        title     : 'Set Initial Payment',
        content   : function(){
            return  "<div class='input-group input-group-sm'>"
                        +"<input type='number' class='form-control amt-initial-input' placeholder='Enter amount'>"
                        +"<span class='input-group-btn'>"
                            +"<button type='button' class='btn btn-success amt-initial-save' title='Save'>"
                                +"<i class='fa fa-fw fa-save'></i>"
                            +"</button>"
                        +"</span>"
                    +"</div>";
        }
    }).on('click', function() {        
        $details = $(this).closest('tr').find('.amt-basic').data('amt');
        $pmethod = $(this).closest('tr').find('.payment-method').data('value');

        if($details && $details > 0 && $pmethod == "atb") {
            $(this).popover('toggle');   
        }  
    }).on('shown.bs.popover', function() {
        $('.popover').find('input.amt-initial-input').focus();
    });

    $(document).on('click', '.amt-initial-save', function(){
        var amt = Number($(this).closest('div').find('input').val());
        var row = $(this).closest('tr');

        row.find('.amt-initial').data('amt', amt).trigger('change');
        row.find('.amt-initial > a').text('(' + numeral(amt).format('0,0.00') + ')');
        
        $('.popover').popover('hide');
    }).on('keyup', '.amt-initial-input', function(e){
        if(e.which == 13){
            var button = $(this).closest('div').find('button');
            button.trigger('click');
        }
    });


    // Add to bill terms popover.
    $('.terms > a').popover({
        html      : true,
        trigger   : 'manual',
        placement : 'top',
        title     : 'Set Terms',
        content   : function(){
            return  "<div class='input-group input-group-sm'>"
                        +"<input type='number' class='form-control terms-input' placeholder='Enter amount'>"
                        +"<span class='input-group-btn'>"
                            +"<button type='button' class='btn btn-success terms-save' title='Save'>"
                                +"<i class='fa fa-fw fa-save'></i>"
                            +"</button>"
                        +"</span>"
                    +"</div>";
        }
    }).on('click', function() {        
        $details = $(this).closest('tr').find('.amt-basic').data('amt');
        $pmethod = $(this).closest('tr').find('.payment-method').data('value');

        if($details && $details > 0 && $pmethod == "atb") {
            $(this).popover('toggle');
        }  
    }).on('shown.bs.popover', function() {
        $('.popover').find('input.terms-input').focus();
    });

    $(document).on('click', '.terms-save', function(){
        var val = Number($(this).closest('div').find('input').val());
        var row = $(this).closest('tr');

        if(val > 0) {
        	row.find('.terms').data('value', val).trigger('change');
        	row.find('.terms > a').text(val + ' Mo(s)');
        } else {
        	row.find('.terms').data('value', null).trigger('change');
        	row.find('.terms > a').text('N/A');
        }
        
        $('.popover').popover('hide');
    }).on('keyup', '.terms-input', function(e){
        if(e.which == 13){
            var button = $(this).closest('div').find('button');
            button.trigger('click');
        }
    });


    // Edit materials.
    $(document).on('click', '#appl-new-mats', function() {
    	$jc = $.confirm({
	        title: false,
	        draggable: true,
	        columnClass: 'large',
	        content: function() {
	            var self = this;

	            return $.ajax({
	                url: $app_url + '/csr/application/assessment-materials',
	                dataType: 'html',
	                method: 'get'
	            }).done(function(res) {
	                self.setContent(res);
	            }).fail(function() {
	                self.setContent('Something went wrong. Please try again or refresh the page.');
	            });
	        },
	        onContentReady: function() {
	            function FormatMaterialsPresetSearchResults(results) {
	                if(results.loading) return results.text;

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

	                return markup;
	            }

	            function FormatMaterialsSearchResults(results) {
	                if(results.loading) return results.text;

	                $category = results.item_category ? results.item_category.toUpperCase() : 'N/A';
	                $code     = results.item_code ? results.item_code.toUpperCase() : 'N/A';
	                $uom      = results.item_uom ? results.item_uom.toUpperCase() : 'N/A';

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

	                markup +=   "<div class='select2-result-repository__statistics'>" +
	                                "<div class='select2-result-repository__forks'><i class='fa fa-tags fa-fw'></i>" + $category + "</div>" +
	                                "<div class='select2-result-repository__stargazers'><i class='fa fa-qrcode fa-fw'></i>" + $code + "</div>" +
	                                "<div class='select2-result-repository__stargazers'><i class='fa fa-sitemap fa-fw'></i>" + $uom + "</div>" +
	                            "</div>";

	                return markup;
	            }

	            function AppendNewMaterialsRow() {
	                $('#tbl-materials > tbody').append('<tr>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<select class="form-control select2 select2-hidden-accessible material-id" data-placeholder="SELECT MATERIALS" style="width: 100%;" aria-hidden="true">' +
	                            '<option></option>' +
	                        '</select>' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control material-uom" disabled="true" style="background-color:#ffffff">' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control text-right material-unit-price curr" data-num-min="1" data-num-max="99999">' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control material-qty num pnum-only" disabled="true" style="background-color:#ffffff">' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control text-right material-total-price" disabled="true" style="background-color:#ffffff">' +
	                    '</td>' +
	                '</tr>');
	            }

	            function AppendDefMaterialsRow(data) {
	                $('#tbl-materials > tbody').append('<tr>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<select class="form-control select2 select2-hidden-accessible material-id" data-placeholder="SELECT MATERIALS" style="width: 100%;" aria-hidden="true">' +
	                            '<option value="'+data.material_id+'" selected="true">'+data.material_description+'</option>' +
	                        '</select>' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control material-uom" value="'+data.uom+'" disabled="true" style="background-color:#ffffff">' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control text-right material-unit-price curr" data-num-min="1" data-num-max="99999" value="'+data.unit_price+'">' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control material-qty num pnum-only" value="'+data.uom_value+'">' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="fees-control form-control text-right material-total-price" disabled="true" value="'+data.total_price+'" style="background-color:#ffffff">' +
	                    '</td>' +
	                '</tr>');
	            }

	            function ComputeGrandtotal() {
	                $total = numeral(0);

	                $.each($('.material-total-price'), function() {
	                    $total.add($(this).val().replace(',', ''));
	                });

	                $('#material-grand-total').val($total.format('0,0.00')).data('amt', $total.value());
	            }

	            function InitializeAppendRow() {
	                // Initiliaze appended materials select2.
	                $('.material-id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/select2-materials-search',
	                        delay: 250,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                page: params.page
	                            }
	                        },
	                        processResults: function (data, params) {
	                            params.page = params.page || 1;

	                            return {
	                                results: $.map(data.items, function (data) {
	                                    return {
	                                        text: data.description,
	                                        item_category: data.category,
	                                        item_code: data.code,
	                                        item_uom: data.uom,
	                                        id: data.id
	                                    }
	                                }),
	                                pagination: {
	                                    more: (params.page * 10) < data.count
	                                }
	                            };
	                        },

	                    },
	                    escapeMarkup: function (markup) { return markup; },
	                    templateResult: FormatMaterialsSearchResults
	                }).on('select2:select', function (event) {
	                    $tr = $(this).closest('tr');

	                    $materials = [];
	                    $.each($('.material-id'), function() {
	                        $materials.push($(this).val());
	                    });

	                    if(_.uniq($materials).length !== $materials.length) {
	                        $(this).val(null).trigger('change');
	                    } else {
	                        $.get($app_url + '/select2-materials-details', { 'material_id':$(this).val() })
	                        .done(function(data) {
	                            $tr.find('.material-uom').val(data.uom.toUpperCase());
	                            $tr.find('.material-qty').val(1).prop('disabled', false);
	                            $tr.find('.material-total-price').val(numeral(1).format('0,0.00')).trigger('change');
	                            $tr.find('.material-unit-price').val(numeral(1).format('0,0.00')).prop('disabled', false).focus().select();

	                            AppendNewMaterialsRow();
	                            InitializeAppendRow();
	                        });
	                    }
	                }).on('select2:unselect', function (event) {
	                    $(this).select2('destroy');
	                    $(this).closest('tr').remove();

	                    ComputeGrandtotal();
	                });

	                // Compute total price.
	                $('.material-unit-price').on('keyup', function() {
	                    $tr = $(this).closest('tr');

	                    $qty = $tr.find('.material-qty').val();
	                    $uprice = $(this).val().replace(',', '');
	                    $tprice = $qty * $uprice;

	                    $tr.find('.material-total-price').val(numeral($tprice).format('0,0.00'));

	                    ComputeGrandtotal();
	                });

	                $('.material-qty').on('keyup', function() {
	                    $tr = $(this).closest('tr');

	                    $qty = $(this).val().replace(',', '');
	                    $uprice = $tr.find('.material-unit-price').val().replace(',', '');
	                    $tprice = $qty * $uprice;

	                    $tr.find('.material-total-price').val(numeral($tprice).format('0,0.00'));
	                    
	                    ComputeGrandtotal();
	                });

	                // Compute grand total.
	                ComputeGrandtotal();
	            }

	            // Initialize select2-connection-materials-preset
	            $('.connection-materials-preset').select2({
	                allowClear: true,
	                dropdownParent: $('.jconfirm-scrollpane'),
	                ajax: {
	                    url: $app_url + '/select2-materials-preset-search',
	                    delay: 250,
	                    data: function (params) {
	                        return query = {
	                            search: params.term,
	                            page: params.page
	                        }
	                    },
	                    processResults: function (data, params) {
	                        params.page = params.page || 1;

	                        return {
	                            results: $.map(data.items, function (data) {
	                                return {
	                                    text: data.preset_description.toUpperCase(),
	                                    connection_type: data.connection_type.toUpperCase(),
	                                    id: data.id
	                                }
	                            }),
	                            pagination: {
	                                more: (params.page * 10) < data.count
	                            }
	                        };
	                    },

	                },
	                escapeMarkup: function (markup) { return markup; },
	                templateResult: FormatMaterialsPresetSearchResults
	            }).on('select2:select', function (event) {
	                $.get($app_url + '/select2-materials-preset-details', { 'preset_id':$(this).val() }).done(function(data) {
	                    $jc.showLoading(true);

	                    $('#mats-amt').data('details', data.mats);
	                    $('#tbl-materials > tbody').empty();

	                    $.each(data.mats, function(k, v) {
	                        AppendDefMaterialsRow(v);
	                    });

	                    AppendNewMaterialsRow();
	                    InitializeAppendRow();
	                    ComputeGrandtotal();

	                    $jc.hideLoading(true);
	                });
	            }).on('select2:unselect', function (event) {
	                $jc.showLoading(true);

	                $('#tbl-materials > tbody').empty();
	                
	                AppendNewMaterialsRow();
	                InitializeAppendRow();
	                ComputeGrandtotal();

	                $jc.hideLoading(true);
	            });

	            // Load saved materials.
	            $materials = $('#appl-new-mats').data('details');
	            if($materials) {
	                $.each($materials, function(k, v) {
	                    AppendDefMaterialsRow(v);
	                });

	                AppendNewMaterialsRow();
	                InitializeAppendRow();
	            } else {
	                AppendNewMaterialsRow();
	                InitializeAppendRow();
	            }                
	        },
	        buttons: {
	            CANCEL: {
	                btnClass:'btn btn-default',
	                text: '<small>[ESC]</small> CANCEL',
	                keys: ['esc']
	            },
	            CONFIRM: {
	                btnClass: 'btn btn-primary',
	                text: '<i class="fa fa-save"></i> SAVE CHANGES',
	                action: function() {
	                    $materials = [];
	                    $jc.showLoading(true);

	                    // Save details in array.
	                    $.each($('.material-id'), function() {
	                        if($(this).val()) {
	                            $tr = $(this).closest('tr');

	                            $materials.push({
	                                'material_id' : $(this).val(),
	                                'material_description' : $(this).text(),
	                                'uom' : $tr.find('.material-uom').val(),
	                                'unit_price' : $tr.find('.material-unit-price').val().replace(',', ''),
	                                'uom_value' : $tr.find('.material-qty').val(),
	                                'total_price' : $tr.find('.material-total-price').val().replace(',', '')
	                            });
	                        }
	                    });

	                    $('#appl-new-mats').data('details', $materials);
	                    $('.materials').find('.amt-basic')
	                    	.data('amt', $('#material-grand-total').data('amt'))
	                        .text(numeral($('#material-grand-total').data('amt')).format('0,0.00'))
	                        .trigger('change');

	                    // Close jconfirm.
	                    $jc.hideLoading(true);
	                    $jc.close();
	                }
	            }
	        }
	    });
    });

	// Edit services.
	$(document).on('click', '#appl-new-sfee', function() {
		$jc = $.confirm({
	        title: false,
	        draggable: true,
	        columnClass: 'large',
	        content: function() {
	            var self = this;

	            return $.ajax({
	                url: $app_url + '/csr/job-order/jo-new-services',
	                dataType: 'html',
	                method: 'get'
	            }).done(function(res) {
	                self.setContent(res);
	            }).fail(function() {
	                self.setContent('Something went wrong. Please try again or refresh the page.');
	            });
	        },
	        onContentReady: function() {
	            function FormatServicesSearchResults(results) {
	                if(results.loading) return results.text;

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

	                return markup;
	            }

	            function AppendNewServicesRow() {
	                $('#tbl-services > tbody').append('<tr>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<select class="form-control select2 select2-hidden-accessible service-id" data-placeholder="SELECT SERVICES" style="width: 100%;" aria-hidden="true">' +
	                            '<option></option>' +
	                        '</select>' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="form-control text-right curr service-price" data-num-min="0" data-num-max="999999">' +
	                    '</td>' +
	                '</tr>');
	            }

	            function AppendDefServicesRow(data) {
	                $('#tbl-services > tbody').append('<tr>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<select class="form-control select2 select2-hidden-accessible service-id" data-placeholder="SELECT SERVICES" style="width: 100%;" aria-hidden="true">' +
	                            '<option value="'+data.id+'">'+data.category.toUpperCase()+'</option>' +
	                        '</select>' +
	                    '</td>' +
	                    '<td class="form-group" style="padding:2px">' +
	                        '<input type="text" class="form-control text-right curr service-price" data-num-min="0" data-num-max="999999" value="'+data.service_fee+'">' +
	                    '</td>' +
	                '</tr>');
	            }

	            function ComputeGrandtotal() {
	                $total = numeral(0);

	                $.each($('.service-price'), function() {
	                    $total.add($(this).val().replace(',', ''));
	                });

	                $('#service-grand-total').val($total.format('0,0.00')).data('amt', $total.value());
	            }

	            function InitializeAppendRow() {
	                // Initiliaze appended materials select2.
	                $('.service-id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/select2-application-services-search',
	                        delay: 250,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                page: params.page
	                            }
	                        },
	                        processResults: function (data, params) {
	                            params.page = params.page || 1;

	                            return {
	                                results: $.map(data.items, function (data) {
	                                    return {
	                                        text: data.category.toUpperCase(),
	                                        price: data.amount,
	                                        id: data.id
	                                    }
	                                }),
	                                pagination: {
	                                    more: (params.page * 10) < data.count
	                                }
	                            };
	                        },

	                    },
	                    escapeMarkup: function (markup) { return markup; },
	                    templateResult: FormatServicesSearchResults
	                }).on('select2:select', function (event) {
	                    $tr = $(this).closest('tr');

	                    $services = [];
	                    $.each($('.service-id'), function() {
	                        $services.push($(this).val());
	                    });

	                    if(_.uniq($services).length !== $services.length) {
	                        $(this).val(null).trigger('change');
	                    } else {
	                        $.get($app_url + '/select2-application-services-details', { 'service_id':$(this).val() }).done(function(data) {
	                            $tr.find('.service-price').val(numeral(data.service_fee).format('0,0.00'));

	                            AppendNewServicesRow();
	                            InitializeAppendRow();
	                        });
	                    }
	                }).on('select2:unselect', function (event) {
	                    $(this).select2('destroy');
	                    $(this).closest('tr').remove();

	                    ComputeGrandtotal();
	                });

	                // Compute total price.
	                $('.service-price').on('keyup', function() {
	                    ComputeGrandtotal();
	                });

	                // Compute grand total.
	                ComputeGrandtotal();
	            }

	            $services = $('#appl-new-sfee').data('details');

	            if($services) {
	                $.each($services, function(k, v) {
	                    AppendDefServicesRow(v);
	                });

	                AppendNewServicesRow();
	                InitializeAppendRow();
	            } else {
	                AppendNewServicesRow();
	                InitializeAppendRow();
	            }                
	        },
	        buttons: {
	            CANCEL: {
	                btnClass:'btn btn-default',
	                text: '<small>[ESC]</small> CANCEL',
	                keys: ['esc']
	            },
	            CONFIRM: {
	                btnClass: 'btn btn-primary',
	                text: '<i class="fa fa-save"></i> SAVE CHANGES',
	                action: function() {
	                    $services = [];
	                    $jc.showLoading(true);

	                    // Save details in array.
	                    $.each($('.service-id'), function() {
	                        if($(this).val()) {
	                            $tr = $(this).closest('tr');

	                            $services.push({
	                                'id' : $(this).val(),
	                                'category' : $(this).text(),
	                                'service_fee' : $tr.find('.service-price').val().replace(',', '')
	                            });
	                        }
	                    });

	                    $('#appl-new-sfee').data('details', $services);
	                    $('.service-fee').find('.amt-basic')
	                        .data('amt', $('#service-grand-total').data('amt'))
	                        .text(numeral($('#service-grand-total').data('amt')).format('0,0.00'))
	                        .trigger('change');

	                    // Close jconfirm.
	                    $jc.hideLoading(true);
	                    $jc.close();
	                }
	            }
	        }
	    });
	});


	// Change connection type.
	$('#change-conntype').click(function() {
		$amt_old = $('.amt-grand-total-old').data('amt');
		$amt_new = $('.amt-grand-total-new').data('amt') ? $('.amt-grand-total-new').data('amt') : 0;
		
		if($amt_new >= $amt_old) {
			$deficit = $amt_new - $amt_old;
			$refund  = 0;

			JconWithDeficit({'old':$amt_old, 'new':$amt_new, 'refund':$refund, 'deficit':$deficit});
		} else {
			$refund  = $amt_old - $amt_new;
			$deficit = 0;

			JconWithRefundable({'old':$amt_old, 'new':$amt_new, 'refund':$refund, 'deficit':$deficit});
		}
	});

	var JconWithRefundable = function(data) {
		$jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'medium',
            content: '<span style="font-size:24px"><i class="fa fa-fw fa-exchange text-bold text-primary"></i> <small>Change Connection Type</small></span><br>' +
                     '<p style="text-indent:18px; margin-top:4px" class="text-justify">Customer has a refundable amount of <b>'+ numeral(data.old - data.new).format('0,0.00') +'</b> please choose an option for the refundable amount. Customer have an option to <b>refund</b> the amount or save it as an <b>advance payment</b> under his/her account.</p>' +
                     '<div class="row">' +
	                     '<div class="col-xs-6">' +
		                     '<span class="text-bold">Old Connection Type:</span><br>' +
		                     '<span class="text-bold">New Connection Type:</span><br>' +
		                     '<span class="text-bold">Refundable:</span><br>' +
	                     '</div>' +
	                     '<div class="col-xs-6">' +
		                     '<span class="text-bold pull-right">'+numeral(data.old).format('0,0.00')+'</span><br>' +
		                     '<span class="text-bold pull-right">'+numeral(data.new).format('0,0.00')+'</span><br>' +
		                     '<span class="text-bold pull-right text-danger">'+numeral(data.old - data.new).format('0,0.00')+'</span><br><br>' +
	                     '</div>' +
	                     '<div class="col-xs-8">' +
	                     	 '<strong>Option</strong>' +
		                     '<select class="form-control" id="refund_option">' +
		                     	'<option value="refund">REFUND</option>' +
		                     	'<option value="advance">ADVANCE PAYMENT</option>' +
		                     '</select>' + 
	                     '</div>' +
	                     '<div class="col-xs-4">' +
	                     	 '<strong>Voucher No.</strong>' +
		                     '<input type="text" class="form-control" id="voucher_no">' +
	                     '</div>' +
                     '</div>',
            onContentReady: function() {
            	$('#refund_option').on('change', function() {
            		if($(this).val() == 'refund') {
            			$('#voucher_no').prop('disabled', false);
            		} else {
            			$('#voucher_no').prop('disabled', true).val(null);
            		}
            	});
            },
            buttons: {
                CANCEL: {
                    btnClass:'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                CREATE: {
                    btnClass:'btn btn-primary',
                    text: '<small>[ENTER]</small> SAVE CHANGES',
                    keys: ['enter'],
                    action: function() {
                        var appl_id  = $('#change-conntype').data('aid');
				        var services = [];
				        var mats     = [];
				        var fees     = [];

				        // Details of payables and payment method.
				        $.each($('.fees-row'), function() {
				            fees.push({
				                "appl_id"        : appl_id,
				                "particulars"    : $(this).data('particulars'),
				                "amt_basic"      : Number($(this).find('.amt-basic').data('amt')),

				                "discount_type"  : $(this).find('.amt-discount').data('type') ? $(this).find('.amt-discount').data('type') : 'percent',
				                "discount_rate"  : $(this).find('.amt-discount').data('rate') ? $(this).find('.amt-discount').data('rate') : 0, 
				                "discount_amt"   : $(this).find('.amt-discount').data('amt') ? $(this).find('.amt-discount').data('amt') : 0,

				                "interest_type"  : $(this).find('.amt-interest').data('type') ? $(this).find('.amt-interest').data('type') : 'percent',
				                "interest_rate"  : $(this).find('.amt-interest').data('rate') ? $(this).find('.amt-interest').data('rate') : 0,
				                "interest_amt"   : $(this).find('.amt-interest').data('amt') ? $(this).find('.amt-interest').data('amt') : 0,

				                "amt_subtotal"   : $(this).find('.amt-subtotal').data('amt'),
				                "amt_advance"    : $(this).find('.amt-advance').data('amt'),

				                "payment_method" : $(this).find('.payment-method').data('value') ? $(this).find('.payment-method').data('value') : 'full',
				                "amt_initial"    : $(this).find('.amt-initial').data('amt') ? $(this).find('.amt-initial').data('amt') : 0,
				                "terms"          : $(this).find('.terms').data('value'),
				                "amt_monthly"    : $(this).find('.amt-monthly').data('amt')
				            });
				        });
				        
				        // Save assessment.
				        $.ajax({
				            url: $app_url + '/csr/application/change-connection-type',
				            type: 'post',
				            data: {
				                'appl_id'       : appl_id,
				                'deficit'       : data.deficit,
				                'refund' 	    : data.refund,
				                'refund_option' : $('#refund_option').val(),
				                'voucher_no'    : $('#voucher_no').val(),
				                'ctype_id'      : $('#ctype_id').val(),
				                'amt_total_old' : data.old,
				                'amt_total_new' : data.new,                
				                'fees'          : fees,
				                'services'      : $('#appl-new-sfee').data('details'),
				                'mats'          : $('#appl-new-mats').data('details')
				            },
				            beforeSend: function() {
				                $jc.showLoading(true);
				            },
				            success: function(appl_no) {
				                window.open($app_url+'/reports/application/change-connection-type?appl-id='+appl_id, '_blank');

				                $.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">Connection type of the service application was successfully changed.</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-primary',
                                            keys: ['enter'],
                                            action: function() {
                                            	window.location.href = $app_url + '/csr/application';
                                            }
                                        }
                                    }
                                });
				            },
				            error: function(result) {
				                $.each(result.responseJSON, function(field, message) {
				                    $('#'+field.replace('appl.', '')).closest('.form-group').addClass('has-error').prop('title', message);
				                    $('#'+field.replace('fees.', '')).addClass('has-error').prop('title', message);
				                    $('#'+field.replace('mats.', '')).addClass('has-error').prop('title', message);
				                });
				            },
				            complete: function() {
				                $jc.hideLoading(true);
				            }
				        });

                        return false;
                    }
                }
            }
        });
	}

	var JconWithDeficit = function(data) {
		$jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'medium',
            content: '<span style="font-size:24px"><i class="fa fa-fw fa-exchange text-bold text-primary"></i> <small>Change Connection Type</small></span><br>' +
                     '<p style="text-indent:18px; margin-top:4px" class="text-justify">Customer has a deficit amount of <b>P'+ numeral(data.new - data.old).format('0,0.00') +'</b> please pay the deficit amount on <b>Teller - Application Payment</b> module.</p>' +
                     '<div class="row">' +
	                     '<div class="col-xs-6">' +
		                     '<span class="text-bold">Old Connection Type:</span><br>' +
		                     '<span class="text-bold">New Connection Type:</span><br>' +
		                     '<span class="text-bold">Deficit:</span><br>' +
	                     '</div>' +
	                     '<div class="col-xs-6">' +
		                     '<span class="text-bold pull-right">'+numeral(data.old).format('0,0.00')+'</span><br>' +
		                     '<span class="text-bold pull-right">'+numeral(data.new).format('0,0.00')+'</span><br>' +
		                     '<span class="text-bold pull-right text-danger">'+numeral(data.new - data.old).format('0,0.00')+'</span><br><br>' +
	                     '</div>' +
                     '</div>',
            onContentReady: function() {
            	$('#refund_option').on('change', function() {
            		if($(this).val() == 'refund') {
            			$('#voucher_no').prop('disabled', false);
            		} else {
            			$('#voucher_no').prop('disabled', true).val(null);
            		}
            	});
            },
            buttons: {
                CANCEL: {
                    btnClass:'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                CREATE: {
                    btnClass:'btn btn-primary',
                    text: '<small>[ENTER]</small> SAVE CHANGES',
                    keys: ['enter'],
                    action: function() {
                        var appl_id  = $('#change-conntype').data('aid');
				        var services = [];
				        var mats     = [];
				        var fees     = [];

				        // Details of payables and payment method.
				        $.each($('.fees-row'), function() {
				            fees.push({
				                "appl_id"        : appl_id,
				                "particulars"    : $(this).data('particulars'),
				                "amt_basic"      : Number($(this).find('.amt-basic').data('amt')),

				                "discount_type"  : $(this).find('.amt-discount').data('type') ? $(this).find('.amt-discount').data('type') : 'percent',
				                "discount_rate"  : $(this).find('.amt-discount').data('rate') ? $(this).find('.amt-discount').data('rate') : 0, 
				                "discount_amt"   : $(this).find('.amt-discount').data('amt') ? $(this).find('.amt-discount').data('amt') : 0,

				                "interest_type"  : $(this).find('.amt-interest').data('type') ? $(this).find('.amt-interest').data('type') : 'percent',
				                "interest_rate"  : $(this).find('.amt-interest').data('rate') ? $(this).find('.amt-interest').data('rate') : 0,
				                "interest_amt"   : $(this).find('.amt-interest').data('amt') ? $(this).find('.amt-interest').data('amt') : 0,

				                "amt_subtotal"   : $(this).find('.amt-subtotal').data('amt'),
				                "amt_advance"    : $(this).find('.amt-advance').data('amt'),

				                "payment_method" : $(this).find('.payment-method').data('value') ? $(this).find('.payment-method').data('value') : 'full',
				                "amt_initial"    : $(this).find('.amt-initial').data('amt') ? $(this).find('.amt-initial').data('amt') : 0,
				                "terms"          : $(this).find('.terms').data('value'),
				                "amt_monthly"    : $(this).find('.amt-monthly').data('amt')
				            });
				        });
				        
				        // Save assessment.
				        $.ajax({
				            url: $app_url + '/csr/application/change-connection-type',
				            type: 'post',
				            data: {
				                'appl_id'       : appl_id,
				                'deficit'       : data.deficit,
				                'refund' 	    : data.refund,
				                'refund_option' : $('#refund_option').val(),
				                'voucher_no'    : $('#voucher_no').val(),
				                'ctype_id'      : $('#ctype_id').val(),
				                'amt_total_old' : data.old,
				                'amt_total_new' : data.new,                
				                'fees'          : fees,
				                'services'      : $('#appl-new-sfee').data('details'),
				                'mats'          : $('#appl-new-mats').data('details')
				            },
				            beforeSend: function() {
				                $jc.showLoading(true);
				            },
				            success: function(appl_no) {
				            	window.open($app_url+'/reports/application/change-connection-type?appl-id='+appl_id, '_blank');

				                $.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">Connection type of the service application was successfully changed.</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-primary',
                                            keys: ['enter'],
                                            action: function() {
                                            	window.location.href = $app_url + '/csr/application';
                                            }
                                        }
                                    }
                                });
				            },
				            error: function(result) {
				                $.each(result.responseJSON, function(field, message) {
				                    $('#'+field.replace('appl.', '')).closest('.form-group').addClass('has-error').prop('title', message);
				                    $('#'+field.replace('fees.', '')).addClass('has-error').prop('title', message);
				                    $('#'+field.replace('mats.', '')).addClass('has-error').prop('title', message);
				                });
				            },
				            complete: function() {
				                $jc.hideLoading(true);
				            }
				        });

                        return false;
                    }
                }
            }
        });
	}
</script>
@endsection