@extends('layouts.app')
@section('title', 'BWSI')
<style type="text/css">
    .box-body{
        padding-bottom: 0px !important;        
    }
    .box-header.with-border {
        border-bottom: 0 !important;
    }       
/*	.select2-container--default 
	.select2-selection--single 
	.select2-selection__clear {
		display: none;
	}	*/    



</style>


    


@section('body')
<div class="no-print">
    <div class="row" style="padding: 0px 5px;">
        <div class="box-header with-border">
            <h3 class="box-title">BILL ALTERATION REPORT</h3>
            <div class="pull-right" style="margin-top: -10px; padding-left: 10px;">
                <!-- <button class="btn btn-primary print-preview"><i class="fa fa-fw fa-print"></i>&emsp;PRINT</button> -->
            </div>        
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-success">        
                <div class="box-body">
                    @include('reports.bill-alteration-report._filter')
                </div>
            </div>
        </div>    
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-default" style="margin-top: -10px;">        
                <div class="box-body" style="height: 500px;">
                    @include('reports.bill-alteration-report._datatable')
                </div>
            </div>
        </div>    
    </div>
</div>

@include('reports.bill-alteration-report._print')

@endsection





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

        $('#al-search').click(function(){
            var filter = {
                'account_id' : $('#acct_id').val(),
                'date_range' : $('#filter-by-date').val(),
                'jo_number'  : $('#filter-by-jo').val()
            };

            $.ajax({
                url  : $app_url + '/reports/bill-alteration',
                type : 'GET',
                data : {
                    'filter' : filter
                },
                success : function(response){
                    $('#t-al-report').DataTable().destroy();
                    var table = $('#t-al-report > tbody');
                    table.empty();

                    var len = Object.keys(response).length;

                    $.each(response, function(index){
                        var r = response[index];
                        var acctName = (r.business_name || r.lastname + ', ' + r.firstname + ' ' + r.middlename );

                        var log = {
                            'account_name' : acctName,
                            'account_id'   : r.account_id,
                            'bills_id'     : r.id
                        };

                        console.log(log);

                        var check    = "<input type='checkbox'>";
                        table.append("<tr>"
                                        +"<td>"+(r.account_no || 'N/A')+"</td>"
                                        +"<td>"+acctName.toUpperCase()+"</td>"
                                        +"<td>"
                                            +"<a href='javascript:void(0)' class='al-no' data-al-id='"+r.id+"'>"+(r.alteration_no || 'N/A')+"</a>"
                                        +"</td>"
                                        +"<td>"+r.alteration_date+"</td>"
                                        +"<td>"+r.bill_number+"</td>"
                                        +"<td>"+r.bill_date+"</td>"
                                        +"<td>"+(r.jo_number || 'N/A')+"</td>"
                                        // +"<td class='text-center'>"+check+"</td>"
                                    +"</tr>");                    
                    });   

                    table.append("<tr class='success' style='font-weight: bold;'>"
                                    +"<td>"
                                        +"TOTAL (" + len + ")"
                                    +"</td>"
                                    +"<td>&nbsp;</td>"
                                    +"<td>&nbsp;</td>"
                                    +"<td>&nbsp;</td>"
                                    +"<td>&nbsp;</td>"
                                    +"<td>&nbsp;</td>"
                                    +"<td>&nbsp;</td>"
                                +"</tr>");

                    $('#t-al-report').DataTable({
                        deferRender     : true,
                        processing      : true,
                        bPaginate       : false,
                        "dom"           : 'ft',
                        "bSort"         : false,     
                        "scrollY"       : '400px',
                        "aoColumnDefs"  : [
                            // { "sWidth": "10%", "aTargets": [0]  },
                            // { "sWidth": "20%", "aTargets": [1]  },
                            // { "sWidth": "5%",  "aTargets": [2]  },
                            // { "sWidth": "5%",  "aTargets": [3]  },
                            // { "sWidth": "5%",  "aTargets": [4]  },
                            // { "sWidth": "5%",  "aTargets": [5]  },
                            // { "sWidth": "5%",  "aTargets": [6]  },
                            // { "sWidth": "5%",  "aTargets": [7]  },
                            // { "sWidth": "5%",  "aTargets": [8]  },
                            // { "sWidth": "5%",  "aTargets": [9]  },
                            // { "sWidth": "7%",  "aTargets": [10] },
                            // { "sWidth": "10%", "aTargets": [11] },
                            // { "sWidth": "10%", "aTargets": [12] },
                            // { "sWidth": "3%",  "aTargets": [13] },
                        ],
                    }); 

                    $('.table > thead > tr').find('th:eq(0)').removeClass('sorting_asc').removeClass('sorting_disabled');

                },
                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();
                }
            });
        });

        $(document).on('click', '.al-no', function(){
            var id = $(this).data('al-id');
            $.confirm({
                content: function () {
                    var self = this;
                    return $.ajax({
                        url      : $app_url + '/reports/al-details',
                        data     : {'bill_id' : id},
                        dataType : 'html',
                        method   : 'get'
                    }).done(function (response) {
                        self.setContent(response);
                        $('.jconfirm-content').addClass('page-body');
                    }).fail(function(){
                        self.setContent('Something went wrong.');
                    });
                },
                title       : 'BILL&nbsp;&nbsp;ALTERATION&nbsp;&nbsp;REPORT',
                type        : 'green',
                columnClass : 'xl',
                draggable   : true,
                buttons     : {
                        PRINT   : {
                            text   : "<i class='fa fa-fw fa-print'></i>&nbsp;PRINT",
                            action : function(){
                                window.open($app_url + '/pdf/alteration?b_id='+id, '', 'width=800,height=600,top=100,left=100');
                            }
                        },
                        CLOSE : function(){

                        }
                },                
                onContentReady : function(){
                    // this.buttons.PRINT.disable();
                }
            });            
        });





        // $('#filter-by-date').daterangepicker({
        //     autoUpdateInput : false,
        //     locale: {
        //         cancelLabel: 'Clear'
        //     }            
        // });

        // $('#filter-by-date').on('apply.daterangepicker', function(ev, picker) {
        //     $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        // });

        // $('#filter-by-date').on('cancel.daterangepicker', function(ev, picker) {
        //     $(this).val('');
        // });





        //     $('#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