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

<style type="text/css">
    .box-body{
        padding-bottom: 0px !important;        
    }
    .box-header{
        width : 50%;
    }
    .box-header.with-border {
        border-bottom: 0 !important;
    }      
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }  
    .inputs{
        font-size: 16px !important;
        text-align: center;
    }
    .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">FINAL BILL</h3>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="box box-success">
            <div class="box-body">
                @include('billing.final._header')
            </div>
        </div>
    </div>
</div>

<div class="row" id="div-fb-datatable" style="display: none">
    <div class="col-xs-12" style="margin-top: -10px;">
        <div class="box box-default">
            <div class="box-body">
                @include('billing.final._datatable')
            </div>
        </div>
    </div>
</div>
@endsection





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

            $('#acct_id').change(function(){
                var acctId = $(this).val();
                $.fn.load_account_details(acctId);
            });




            //
            $(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(e){
                        // $.fn.compute_consumption($(this));
                        if(e.which == 13){
                            var index = $('.inputs').index(this) + 1;
                            $('.inputs').eq(index).focus();    

                            if($(this).data('input-name')=='remarks'){
                                $(this).closest('tr')
                                    .find('td')
                                    .find('button#fb-post')
                                    .trigger('click');
                            }
                        }
                    }
                );





                //
            $(document).on('click', '#fb-post', function(){
                var header  = [];
                var details = [];
                var bill    = [];

                // HEADER FIELDS
                var bookId          = $('#account_book')        .text();
                var presentDate     = $('#fb-present-date')     .text(); 
                var previousDate    = $('#fb-previous-date')    .text();
                var dueDate         = $('#fb-due-date')         .val();
                var $class          = $('#account_class')       .data('account-class');
                var $subclass       = $('#account_class')       .data('account-subclass');
                var $book           = $('#account_book')        .data('book-id');

                var data = $('#acct_id').select2('data')[0];

                // DETAILS FIELDS
                var jobOrderNo      = $('#fb-jo-number')        .text();                                            
                var finalReading    = $('#fb-final-rdg')        .text();
                var previousReading = $('#fb-previous-rdg')     .text();
                var addCons         = $('#fb-add-cons')         .text() || 0;
                var cum             = $('#fb-cum')              .text();
                var remarks         = $('#fb-remarks')          .val();
                var accountId       = $('#acct_id')             .val();
                var meterId         = $('#meter_no')            .data('meter-id');
                var maxReading      = $('#meter_no')            .data('max-reading');
                var sc              = data.sc;//$('#account_no')          .data('senior');
                var advance         = data.adv;//$('#account_no')          .data('advance');

                if(!jobOrderNo){
                    $.alert({
                        type    : 'orange',
                        title   : 'Required Field',
                        content : 'Please enter JO Number.'
                    });
                    return false;
                }

                if(!presentDate){
                    $.alert({
                        type    : 'orange',
                        title   : 'Required Field',
                        content : 'Please enter present date.'
                    });
                    return false;
                }

                if(!dueDate){
                    $.alert({
                        type    : 'orange',
                        title   : 'Due Date cannot be blank.',
                        content : 'Please enter due date.',
                        draggable : true
                    });
                    return false;
                }                

                if(!finalReading){
                    $.alert({
                        type    : 'orange',
                        title   : 'Required Field',
                        content : 'Please enter final reading.'
                    });
                    return false;
                }                

                header = {
                    'book_id'           : $book,
                    'present_rdg_date'  : presentDate,
                    'previous_rdg_date' : previousDate,
                    'due_date'          : dueDate,                    
                };

                details = {
                    'account_id'        : accountId,
                    'meter_id'          : meterId,
                    'senior'            : sc,
                    'advance'           : advance,
                    'bill_type'         : 'FB',
                    'present_rdg'       : finalReading,
                    'previous_rdg'      : previousReading,
                    'additional_cum'    : addCons,
                    'actual_cum'        : cum,
                    'findings'          : remarks,
                    'reference_id'      : jobOrderNo
                };

                bill = {
                    'header'     : header,
                    'details'    : details,
                    'class'      : $class,
                    'subclass'   : $subclass,
                    'book'       : $book,
                    'maxreading' : maxReading
                };

                $.confirm({
                    type    : 'orange',
                    title   : 'POST FINAL BILL',
                    content : 'Do you want to proceed?',
                    buttons : {
                        YES : function () {
                            $.ajax({
                                url   : $app_url + '/billing/final-bill/post-fb',
                                type  : 'POST',
                                data  : {
                                    '_token' : $('[name=_token]').val(),
                                    'bill'   : bill
                                },
                                success : function(response){
                                    $.fn.load_account_details(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();
                                }
                            });
                        },
                        NO  : function () {
                                                        
                        },
                    },
                    draggable : true
                });                

            });





            //
            $.fn.load_account_details = function(accountId){
                $.ajax({
                    url  : $app_url + '/billing/final-bill/customer-account-details',
                    type : 'GET',
                    data : {
                        'account_id' : accountId
                    },
                    success : function(response){
                        if(Object.keys(response).length > 0){
                            var a = response;
                            var account_name   = a.business_name || (a.lastname + ', ' + a.firstname + ' ' +a.middlename);                        
                            var account_addr   = a.address + ', ' + a.barangay + ', ' + a.city + ', ' + a.province;
                            var account_class  = a.acct_class + ' - ' + a.acct_subclass;
                            var status         = a.account_status ? a.account_status : '';

                            var log = {
                                'account_id' : a.id,
                                'meter_id'   : a.meter_id
                            };

                            console.log(log);

                            switch(status){
                                case 'ac' :
                                    status = "<span class='label label-primary'>ACTIVE</span>";
                                    break;
                                case 'ia' :
                                    status = "<span class='label label-danger'>INACTIVE</span>";
                                    break;
                                case 'dc' :
                                    status = "<span class='label label-warning'>DISCONNECTED</span>";
                                    break;                                
                            }

                            $('#account_name')      .text(account_name.toUpperCase());
                            $('#account_address')   .text(account_addr.toUpperCase());
                            $('#account_book')      .text(a.book_code);
                            $('#account_class')     .text(account_class);
                            $('#meter_no')          .text(a.meter_no);
                            $('#meter_no')          .data('meter-id', a.meter_id);
                            $('#meter_no')          .data('max-reading', a.max_reading);
                            $('#account_class')     .data('account-class', a.acct_class);
                            $('#account_class')     .data('account-subclass', a.acct_subclass);
                            $('#account_status')    .html(status);
                            $('#account_book')      .data('book-id', a.book_id);

                            $.fn.load_previous_bill(a.id, a.meter_id);
                        }else{
                            $.alert({
                                title   : 'Account not found!',
                                content : 'Please enter a valid account number.',
                                type    : 'orange'
                            });
                            $('#account_name')      .text('-');
                            $('#account_address')   .text('-');
                            $('#account_book')      .text('-');
                            $('#account_class')     .text('-');
                            $('#account_status')    .text('-');  
                            
                            return false;                         
                        }
                        $('#div-fb-datatable').css('display', '');                            
                    },
                    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();
                    }
                });
            }    




                
            $.fn.load_previous_bill = function($accountId, $meterId){
                $.ajax({
                    url  : $app_url + '/billing/final-bill/previous-bill',
                    type : 'GET',
                    data : {
                        'account_id'  : $accountId,
                        'meter_id'    : $meterId                        
                    },
                    success : function(response){  
                        console.log(response);
                        if(response.existing){                        
                            var bill   = response.bill;
                            var $table = $('#table-bills > tbody');
                            $table.empty();

                            $table.append("<tr>"
                                            +"<td>"
                                                +"FB"
                                            +"</td>"
                                            +"<td>"
                                                +(bill.reference_id || 'N/A')
                                            +"</td>"
                                            +"<td>"
                                                +bill.present_rdg_date
                                            +"</td>"                  
                                            +"<td>"
                                                +bill.previous_rdg_date
                                            +"</td>"                   
                                            +"<td>"
                                                +(bill.due_date || '')
                                            +"</td>"    
                                            +"<td>"
                                                +bill.present_rdg
                                            +"</td>"             
                                            +"<td>"
                                                +bill.previous_rdg
                                            +"</td>" 
                                            +"<td>"
                                                +bill.add_cons
                                            +"</td>"      
                                            +"<td>"
                                                +bill.cum
                                            +"</td>"   
                                            +"<td>"
                                                +(bill.previous_cum || '')
                                            +"</td>"              
                                            +"<td style='text-align: left;'>"
                                                +(bill.findings || '' )
                                            +"</td>"     
                                            +"<td></td>"                                                                                                                                                                                                                                                                                     
                                        +"</tr>"
                                );
                        }else{
                            var bill   = response.bill;
                            var jo     = response.jo;

                            var $table = $('#table-bills > tbody');
                            $table.empty();       

                            var cum = cast(jo.final_rdg) - cast(bill.previous_rdg) + cast(jo.add_cons);

                            $table.append("<tr>"
                                            +"<td>FB</td>"
                                            +"<td id='fb-jo-number'>"
                                                +jo.jo_number
                                                // +"<input type='text' class='form-control inputs' maxlength='12' id='fb-jo-number' style='width:100%;'>"
                                            +"</td>"
                                            +"<td id='fb-present-date'>"
                                                +jo.date_accomplished
                                                // +"<input id='fb-present-date' name='fb-present-date' type='text' class='form-control date-masked inputs'>"
                                            +"</td>"
                                            +"<td id='fb-previous-date'>"
                                                +bill.previous_rdg_date
                                            +"</td>"
                                            +"<td class='cellpad-top'>"
                                                +"<input id='fb-due-date' name='fb-due-date' type='text' class='form-control date-masked inputs'>"
                                            +"</td>"
                                            +"<td class='pres-rdg' id='fb-final-rdg'>"
                                                +jo.final_rdg
                                                // +"<input type='number' id='fb-final-rdg' class='form-control inputs' maxlength='6' style='width:100%;'>"
                                            +"</td>"
                                            +"<td id='fb-previous-rdg' class='prev-rdg'>"
                                                +bill.previous_rdg
                                            +"</td>"
                                            +"<td class='add-cons' id='fb-add-cons'>"
                                                // +"<input type='number' id='fb-add-cons' class='form-control inputs' maxlength='6' style='width:100%;' value='"+bill.additional_cum+"'>"
                                                +jo.add_cons
                                            +"</td>"
                                            +"<td id='fb-cum' class='actual-cum'>"    
                                                +cum                                        
                                            +"</td>"
                                            +"<td id='fb-previous-cum'>"
                                                +bill.previous_cum
                                            +"</td>"
                                            +"<td class='cellpad-top'>"
                                                +"<input type='text' data-input-name='remarks' id='fb-remarks' class='form-control inputs' style='width:100%; text-align: left !important'>"
                                            +"</td>"
                                            +"<td class='cellpad-top' style='background-color:transparent !important; padding-top: 5px !important'>"
                                                +"<button class='btn btn-primary' title='Post' id='fb-post'>"
                                                    +"<i class='fa fa-save'></i>"
                                                +"</button>"
                                            +"</td>"
                                         +"</tr>");    

                                        $(".date-masked").inputmask("date", {
                                            mask: "y-2-1", 
                                            placeholder: "yyyy-mm-dd", 
                                            leapday: "-02-29", 
                                            separator: "-", 
                                            alias: "yyyy/mm/dd",
                                            hourFormat: 12,
                                            onincomplete: function() {
                                                $(this).val(null);
                                            }
                                        });                                                                                                                                          
                        }                        
                    },
                    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(){},
                    complete : function(){}
                });             
            }





            // compute consumption
            $.fn.compute_consumption = function(source){
                var $row     = source.closest('tr')
                var presRdg  = $row.find('td.pres-rdg').find('input').val() || 0;
                var prevRdg  = $row.find('td.prev-rdg').text()              || 0;
                var addCons  = $row.find('td.add-cons').find('input').val() || 0;
                var $cum     = parseInt(presRdg) - parseInt(prevRdg) + parseInt(addCons);

                $row.find('td.actual-cum').text($cum);
            }    





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