@extends('layouts.app')
@section('title', 'BWSI')
<style type="text/css">
    .input-lg{
        font-size: 24px !important;
    }

    #outstanding-bill,
    #available-ap{
        font-size: 18px;
    }

    .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">ADVANCE PAYMENT</h3>
    </div>
</div>


<div class="row">
    <div class="col-xs-4">
            <div class="box box-success">         
                <div class="box-body" style="height: 330px">
                    @include('teller.advance-payment.add')
                </div>
            </div>
    </div>  
</div>    
@endsection

@section('scripts')  
<script type="text/javascript">
    $(document).ready(function(){
            $(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){
                var self = $(this);
                if(e.which == 13){
                    var index = $('.inputs').index(this) + 1;
                    $('.inputs').eq(index).focus();
                }                
            });

            $(document).on('keyup', '.text-number', function(e){
                var i = $(this);
                if(e.which == 13){                    
                    i.val(number_format(i.val()));
                }
            });

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

            $('#post-advance').click(function(){
                var amount   = cast($('#amount-to-advance').val());
                var ornumber = $('#or-number').val();

                if(amount <= 0){
                    $.alert({
                        title   : 'REQUIRED FIELD',
                        content : 'Please enter amount.',
                        type    : 'orange'
                    });

                    return false;
                }    

                $.confirm({
                    title   : 'POST ADVANCE PAYMENT',
                    content : 'Do you want to proceed?',
                    type    : 'blue',
                    buttons : {
                        YES : function(){
                            $.ajax({
                                url   : $app_url + '/teller/advance-payment/post-advance',
                                type  : 'POST',
                                data  : {
                                    '_token'     : $('[name=_token]').val(),
                                    'account_id' : $('#acct_id').val(),
                                    'amount'     : amount,
                                    'or_number'  : ornumber                                    
                                },
                                success : function(response){
                                    console.log(response);
                                    $.alert({
                                        title   : 'PAYMENT POSTED!',
                                        content : 'Amount : <strong style="font-size:18px;" class="text-primary">' + number_format(amount) + '</strong>',
                                        type    : 'green',
                                        buttons : {
                                            OK : function(){
                                                location.reload();
                                            }
                                        },
                                        draggable : true
                                    });                                    
                                },
                                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
                });                        
            });





            function load_bills(accountId){
                $.ajax({
                    url   : $app_url + '/teller/advance-payment/get-bills',
                    type  : 'GET',
                    data  : {
                        'account_id' : accountId    
                    },
                    success : function(response){

                        var ob = 0;      
                        var ap = 0;         

                        response.forEach(function(b){
                            ob += cast(b.balance);
                        });
                        
                        $('#outstanding-bill').val( ob > 0 ? number_format(ob) : '0.00');
                        load_ap(accountId);

                        $('#outstanding').css('display', '');

                        if(cast(ob) > 0){   
                            $('#add-ap').css('display', 'none');
                            $('#settle-bill').css('display', '');
                        }else{
                            $('#add-ap').css('display', '');
                            $('#settle-bill').css('display', 'none');
                        }                        
                    },
                    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 load_ap(accountId){
                $.get($app_url + '/teller/advance-payment/ap', {
                    'account_id' : accountId
                })
                .done(function(response){
                    $('#available-ap').val(number_format(response));
                });                 
            }






            $('#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']
                        }
                    },
                    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