@extends('layouts.app')
@section('title', 'BWSI')
<style type="text/css">
	.select2-container--default .select2-selection--single .select2-selection__clear {
		display: none;
	}	
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }  		
</style>
@section('body')
<div class="row">
    <div class="box-header with-border">
        <h3 class="box-title">COLLECTION POSTING</h3>
    </div>
</div>

<div class="row">
    <div class="col-xs-8" style="padding: 0px 10px;">
        <div class="box box-success no-border">     
            <div class="box-body" style="height: 500px">
				@include('teller.collection-posting._bills')                
            </div>
        </div>
    </div> 
    <div class="col-xs-4" style="padding: 0px 10px;">
        <div class="box box-default no-border">
            <div class="box-body" style="height: 500px">
                @include('teller.collection-posting._collector')
            </div>
        </div>
    </div>   
</div>   
@endsection





@section('scripts')
<script type="text/javascript">
	$(document).ready(function(){

		var BILLS;		// array for storing bills details
		var PAYMENT;	// array for storing payment details

		select2Init();
		collector_file();





		$('#acct_id').change(function(){
			var id   = $(this).val();

			var data = $(this).select2('data')[0];
			$('#label-customer-account').text(data.acct_no);

			if(id){
				$('#amount-paid').val('');
				get_bills(id);		
	        	setTimeout(function(){
	        		enable_post();
	        	}, 1);	
			}			
		});      

        $('#select-collector').change(function(){
			$('#or-number').val('');
			$('#or-number').prop('disabled', false);        	
        	GetCollections();
        	setTimeout(function(){
        		$('#or-number').focus();
        		enable_post();
        	}, 1);        	
        });

        $('#btn-post-collection').click(function(){
        	if($(this).prop('disabled') === false){
        		var amountDue 		= cast($('#label-amount-due').text());
        		var amountTendered  = cast($('#amount-paid').val());
        		var change 			= amountTendered > amountDue ? (amountTendered - amountDue) : 0;
        		PAYMENT = {
	                'amount_due'        : amountDue,
	                'amount_tendered'   : amountTendered,
	                'change'            : change,
	                'payment_method'    : 'cash',
	                'check_no'          : null,
	                'bank_name'         : null      			
        		};

        		$.confirm({        			
        			title   : 'POST PAYMENT',
        			type    : 'blue',
        			content : 'Do you want to proceed?',
        			buttons : {
        				YES : {
        						btnClass : 'btn-blue',
        						action : function(){
        							post_payment();
        						},
        						keys : [
        							'enter'
        						]
        				},
        				NO : function(){

        				}
        			},
        			draggable : true
        		});        		
        	}
        });




        $(document).on('focusin', '.inputs', function(e){
            $(this).css('background-color', '#ffff8d'); 
            $(this).select();
        });  

        $(document).on('focusout', '.inputs', function(e){
        	$(this).css('background-color', '#fff');
        });       

        $(document).on('keyup', '.inputs', function(){
        	enable_post();
        });

        $(document).on('keyup', '#amount-paid', function(e){
        	if(e.which == 13){
        		$('#btn-post-collection').trigger('click');
        	}
        });     

        $(document).on('click', '.delete-collection', function(){
        	var r = $(this).closest('tr');
        	var colId    = r.data('collection-id');
        	var acctName = $.trim(r.find('td.td-account-name').text());
        	var amtPaid  = number_format($.trim(r.find('td.td-amount-paid').text()));
        	$.confirm({
        		title     : 'DELETE PAYMENT',
        		content   : acctName + '<br />' + amtPaid + '<br /><br />' + 'Do you want to proceed?',
        		type      : 'blue',
        		buttons   : {
        			YES : {
        				btnClass : 'btn-blue',
        				action : function(){
        					ajaxcall($app_url + '/teller/collection-posting/delete-payment?id='+colId, 
        						'DELETE',
        						{}, 
        						function(response){
        							console.log('delete : '+response);
        							r.remove();
        					}, true);
        				}
        			},
        			NO  : function(){

        			}
        		},
        		draggable : true
        	});
        });





        function post_payment(){
	        $.ajax({
	            url   : $app_url + '/teller/bills-payment/post-payment',
	            type  : 'POST',
	            data  : {
	                '_token'     : $('[name=_token]').val(),
	                'payment'    : PAYMENT,
	                'bills'      : BILLS,
	                'account_id' : $('#acct_id').val(),
	                'collector'  : {
	                	'id'   : $('#select-collector').val(),
	                	'or'   : $('#or-number').val()
	                }
	            },
	            success : function(response){
	                var collection_id = response;
	                console.log('collection id : '+collection_id);  	                    
	                if(cast(PAYMENT.change) > 0){
	                	post_advance(collection_id, cast(PAYMENT.change));
	                }

					$('#t-collections > tbody').append("<tr data-collection-id='"+collection_id+"'>"
									+"<td>"
										+ $.trim($('#label-customer-account').text())
									+"</td>"			
									+"<td>"
										+ $('#label-customer-account').data('book-code')
									+"</td>"			
									+"<td>"
										+ $('#label-customer-account').data('class')
									+"</td>"
									+"<td class='td-account-name'>"
										+ $('#acct_id').find('option:selected').text()
									+"</td>"																															
									+"<td align='right' class='td-amount-paid'>"
										+ number_format($('#amount-paid').val())
									+"</td>"
									+"<td style='text-align:right;vertical-align:middle;cursor:hand;'>"
										+"<i class='fa fa-remove text-danger delete-collection'></i>"
									+"</td>"																
								+"</tr>");

	                $('#btn-post-collection').prop('disabled', true);
	                $('#amount-paid').val('');
	                $('#label-amount-due').text('0.00');
	                $('#acct_id').select2('focus');					

	            },
	            error : function(xhr){
	                if(xhr.status != '422'){
	                    $.alert({
	                        title   : 'Oops, something went wrong!',
	                        content : "<span style='font-size:20px' class='text-danger'>" 
	                                    + xhr.status 
	                                + "</span>" + '&nbsp;&nbsp;' 
	                                + '<strong>'+xhr.statusText+'</strong>'
	                                + '<br />'
	                                + 'Refresh the page and try again.',
	                        type    : 'red',
	                        icon    : 'fa fa-warning',
	                        draggable : true
	                    });  
	                }                                           
	            },
	            beforeSend : function(){
	                showBoxLoadingState();
	            },
	            complete : function(){
	                removeBoxLoadingState();
	            }
	        });        	
        }

		function get_bills(accountId){
			$.ajax({
				url  : $app_url + '/teller/bills-payment/get-bills',
				type : 'GET',
				data : {
					'account_id' : accountId					
				},
				success : function(response){	
				console.log(response);				
					var totaldue = 0;

					BILLS = [];	// re-initialize array

					$.each(response, function(index){
						var r = response[index];

						$('#label-customer-account').data('book-code', r.b_code);
						$('#label-customer-account').data('class', r.acct_class+'-'+r.acct_subclass);

						totaldue += cast(r.amount_due);

                        var log = {
                            'account_id'      : accountId,
                            'meter_id'        : r.meter_id,
                            'details_id'      : r.did,
                            'basic'           : r.basic,
                            'pca'             : r.pca,
                            'others'          : r.others,
                            'penalty'         : r.penalty,
                            'payment_details' : r.payment_details
                        };

                        console.log(log);	

                        BILLS.push({
                            'id'        : r.did,
                            'penalty'   : cast(r.penalty),
                            'senior'    : 0,
                            'tax'       : 0,
                            'discount'  : 0,
                            'balance'   : cast(r.amount_due)
                        });					
					});	// end loop $response

					if(cast(totaldue) > 0){
						$('#amount-paid').prop('disabled', false);
			        	$('#amount-paid').focus();			        							
					}else{
						$('#amount-paid').prop('disabled', true);
					}

					$('#label-amount-due').text(number_format(totaldue));
				},
				error : function(xhr){
                    if(xhr.status != '422'){
                        $.alert({
                            title   : 'Oops, something went wrong!',
                            content : "<span style='font-size:20px' class='text-danger'>" 
                                        + xhr.status 
                                    + "</span>" + '&nbsp;&nbsp;' 
                                    + '<strong>'+xhr.statusText+'</strong>'
                                    + '<br />'
                                    + 'Refresh the page and try again.',
                            type    : 'red',
                            icon    : 'fa fa-warning',
                            draggable : true
                        });  
                    }   					
				},
				beforeSend : function(){
					showBoxLoadingState();
				},
				complete : function(){
					removeBoxLoadingState();
				}
			});			
		}

		function GetCollections(){
			var colId = $('#select-collector').val();		
			var table = $('#t-collections > tbody');

			$('#t-collections').DataTable().destroy();
			table.empty();					
			// send ajax request
			ajaxcall($app_url + '/teller/collection-posting/get-collections', 
				'GET', {
				'collector_id' : colId
			}, function(response){
				// loop response
				$.each(response, function(index){	
					var data = response[index];	

					$('#or-number').val(data.or_number);					
					$('#or-number').prop('disabled', true);

					var log = {
						'account_id'    : data.account_id,
						'account_name'  : data.account_name,
						'collection_id' : data.collection_id,
						'meter_id'     	: data.meter_id
					};

					console.log(log);

					table.append("<tr data-collection-id='"+data.collection_id+"'>"
									+"<td>"
										+data.account_no
									+"</td>"			
									+"<td>"
										+data.book_code
									+"</td>"			
									+"<td>"
										+data.acct_class + '-' + data.acct_subclass
									+"</td>"
									+"<td class='td-account-name'>"
										+data.account_name
									+"</td>"																															
									+"<td align='right' class='td-amount-paid'>"
										+number_format(data.amount_paid)
									+"</td>"
									+"<td style='text-align:right;vertical-align:middle;cursor:hand;'>"
										+"<i class='fa fa-remove text-danger delete-collection'></i>"
									+"</td>"																
								+"</tr>");
				});	// end loop response

				if(Object.keys(response).length > 0){
	                $('#t-collections').DataTable({
	                    deferRender : true,
	                    processing  : true,
	                    bPaginate   : false,
	                    "dom"       : 't',
	                    "bSort"     : false,     
	                    "scrollY"   : '450px',
	                });    		
	                $('.table > thead > tr').find('th:eq(0)').removeClass('sorting_asc').removeClass('sorting_disabled');
				}

			}, true);

		}

		function collector_file(){
			$.ajax({
				url  : $app_url + '/teller/collection-posting/collector-file',
				type : 'GET',
				data : {},
				success : function(response){
					$.each(response, function(index){
						var r = response[index];
						$('#select-collector').append("<option value='"+r.collector_id+"' data-code='"+r.collector_code+"'>"
															+r.collector_name
														+"</option>");
					});
				},
				error : function(xhr){
                    if(xhr.status != '422'){
                        $.alert({
                            title   : 'Oops, something went wrong!',
                            content : "<span style='font-size:20px' class='text-danger'>" 
                                        + xhr.status 
                                    + "</span>" + '&nbsp;&nbsp;' 
                                    + '<strong>'+xhr.statusText+'</strong>'
                                    + '<br />'
                                    + 'Refresh the page and try again.',
                            type    : 'red',
                            icon    : 'fa fa-warning',
                            draggable : true
                        });  
                    }   					
				},
				beforeSend : function(){
					showBoxLoadingState();
				},
				complete : function(){
					removeBoxLoadingState();
				}
			});
		}

		function post_advance(id, change){
	        $.post($app_url + '/teller/bills-payment/post-advance' , {
	                '_token'       : $('[name=_token]').val(),
	                'account_id'   : $('#acct_id').val(),
	                'reference_id' : id,
	                'amount'       : change
	            })
	            .done(function(response){
	                
	            }); 			
		}

		function enable_post(){
			var collector  = $('#select-collector').val();
			var orNumber   = $('#or-number').val();
			var acctId     = $('#acct_id').val();
			var amountPaid = cast($('#amount-paid').val());

			if(collector && orNumber && acctId && amountPaid>0){
				$('#btn-post-collection').prop('disabled', false);
			}else{
				$('#btn-post-collection').prop('disabled', true);
			}
		}

		function select2Init(){
	        $('#acct_id').select2({
	            allowClear: true,
	            ajax: {
	                url: $app_url + '/select2-acct-search',
	                delay: 300,
	                data: function (params) {
	                    return query = {
	                        search: params.term,
	                        page: params.page,
	                        filter: ['Active', 'Disconnected', 'Inactive']
	                    }
	                },
	                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_no       : data.acct_number,
	                                acct_class    : data.acct_class == 'res' ? 'Residential' : 'Commercial',
	                                account_class : data.acct_class,
	                                address       : data.cust_address,
	                                id            : data.cust_id,
	                                sc            : data.sc_discount,
	                                adv           : data.adv_payment,
	                                acct_status   : data.acct_status
	                            }
	                        }),
	                        pagination: {
	                            more: (params.page * 10) < data.count
	                        }
	                    };
	                },

	            },
	            escapeMarkup: function (markup) { return markup; },
	            templateResult: formatAcctSearchResults

	        }); 			
		}

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

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

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

            markup +=   "<div class='select2-result-repository__statistics'>" +
                            "<div class='select2-result-repository__forks'><i class='fa fa-lock fa-fw'></i><span style='font-size:16px'>" + results.acct_no + "</span></div>" +
                            "<div class='select2-result-repository__stargazers'><i class='fa fa-street-view fa-fw'></i>" + results.acct_class + "</div>" +
                        "</div>";

            return markup;
        }    

        function number_format(number){
            return numeral(number.toString().replace(/,/g, '')).format('0,0.00');
        }

        function cast(number){
            return Number(number.toString().replace(/,/g, ''));
        }        

	});
</script>
@endsection