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

<style type="text/css">
    #table-bills thead tr th,
    #table-bills tbody tr td{        
        white-space: nowrap;
    }

    #table-bills thead tr th:nth-child(n+5):nth-child(-n+8),
    #table-bills tbody tr td:nth-child(n+5):nth-child(-n+8){
        text-align: right;
    }

    #table-bills thead tr th:nth-child(4),
    #table-bills tbody tr td:nth-child(4),
    #table-bills thead tr th:nth-child(9),
    #table-bills tbody tr td:nth-child(9){
        text-align: center;
    }

    #table-bills tbody tr td{
        border  : 1px solid #e0e0e0;
    }

    .box-body{
        padding-bottom: 0 !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__clear {
        display: none;
    }           
</style>

@section('body')

<div class="row" style="padding-left:5px; padding-right:5px">
    <div class="box-header with-border">
        <h3 class="box-title">SKIP BILLS</h3>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
            <div class="box box-success">
                <div class="box-body">

					<div class="row">
						<div class="col-xs-3">
							<div class="form-group">
								<label class="control-label">SELECT ACCOUNT</label>
								<select id="acct_id" name="acct_id" class="form-control select2 select2-hidden-accessible" data-placeholder="" style="width: 100%;" aria-hidden="true">
								</select>
							</div>
						</div> 	

						<div class="col-xs-9">
							<div class="form-group">
								<label class="control-label">&nbsp;</label>
								<table class="table table-hover table-condensed" id="table-bills">
									<thead>
										<tr class="table-header-bg">
                                            <th>BILL NO.</th>
											<th>RDG. DATE</th>
											<th>DUE DATE</th>											
											<th>BILL TYPE</th>
											<th>PRES. RDG.</th>
											<th>PREV. RDG.</th>
											<th>ADD. CONS</th>
                                            <th>CUM.</th>
                                            <th>skip</th>
										</tr>
									</thead>
                                    <tbody>
                                        
                                    </tbody>
								</table>
							</div>
						</div> 						
					</div>					

                </div>
            </div>
    </div>  
</div>  

@endsection

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

        $('#acct_id').change(function(){
            $.ajax({
                url  : $app_url + '/csr/skip-bills/get-bills',
                type : 'GET',
                data : {
                    'account_id' : $(this).val()
                },
                success : function(response){
                    var table = $('#table-bills > tbody');
                    table.empty();

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

                        var ischecked = '';
                        var rowclass  = '';
                        if(b.skip == 1){
                            ischecked = 'checked';
                            rowclass  = 'danger';
                        }
                        
                        var log = {
                            'account_id' : b.account_id,
                            'meter_id'   : b.meter_id,
                            'header_id'  : b.hid,
                            'details_id' : b.did
                        };

                        console.log(log);

                        var c = "<input type='checkbox' class='skip-bill' "+ischecked+">";

                        table.append("<tr data-id='"+b.did+"' class='"+rowclass+"'>"
                                        +"<td>"
                                            + b.bill_number
                                        +"</td>"                         
                                        +"<td>"
                                            + b.present_rdg_date
                                        +"</td>"
                                        +"<td>"
                                            + (b.due_date || 'N/A')
                                        +"</td>"
                                        +"<td>"
                                            + b.bill_type
                                        +"</td>"
                                        +"<td>"
                                            + b.present_rdg
                                        +"</td>"
                                        +"<td>"
                                            + b.previous_rdg
                                        +"</td>"
                                        +"<td>"
                                            + b.additional_cum
                                        +"</td>"
                                        +"<td>"
                                            + b.cum
                                        +"</td>"                                                                                                                                                                                                                                                            
                                        +"<td>"
                                            + c
                                        +"</td>"                                     
                                    +"</tr>");                    
                    });                    
                },
                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();
                }
            });         
        });





        // skip bill
        $(document).on('click', '.skip-bill', function(){
            var row       = $(this).closest('tr');
            var ischecked = $(this).is(':checked');
            if(ischecked){
                row.addClass('danger');
            }else{
                row.removeClass('danger');
            }

            $.ajax({
                url   : $app_url + '/csr/skip-bills/update',
                type  : 'POST',
                data  : {
                    '_token'     : $('[name=_token]').val(),
                    'is_checked' : ischecked ? 1 : 0,
                    'id'         : row.data('id')                    
                },
                success : function(response){},
                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();
                }
            });
        });




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

                    return {
                        results: $.map(data.items, function (data) {
                            return {
                                text          : data.cust_fullname ? data.cust_fullname : data.cust_bname,
                                acct_no       : data.acct_number,        
                                old_acct_no   : data.acct_number_old,                            
                                acct_class    : data.acct_class + '-' + data.acct_subclass,
                                account_class : data.acct_class,
                                meter         : data.meter_no,
                                address       : data.cust_address,
                                id            : data.cust_id,
                                sc            : data.sc_discount,
                                adv           : data.adv_payment,
                                acct_status   : data.acct_status,
                                book_code     : data.book_code
                          }
                        }),
                        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.toUpperCase()
                        +"</div>";

                 markup +=  "<div class='select2-result-repository__forks'>"
                                +"<i class='fa fa-lock fa-fw'></i>"
                                +"<span style='font-size:14px;'>"                                    
                                    + results.acct_no
                                +"</span>"
                                +" | "
                                +"<span>"
                                        + results.old_acct_no 
                                +"</span>"                                
                            +"</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__stargazers'>"
                                +"<i class='fa fa-power-off fa-fw'></i>" 
                                    +results.acct_status 
                                +"</div>"
                            +"<div class='select2-result-repository__stargazers'>"
                                +"<i class='fa fa-dashboard fa-fw'></i>"
                                    +results.meter 
                            +"</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