@extends('app')

@section('content')
 
<div class = "row">   
    
    <div class="col-md-12" id = "hilbit-billing">
        <div class="panel panel-default">

            <div class="panel-heading">
                <h3 class="panel-title">Billings</h3>         
            </div>
      
            <div class="panel-body">
       
                @include('flash::message')
        
                @include('partials.alert')         
              
                <div id="billing_toolbar" class="small-bottom-padding">
                      
                    <!-- bs-table styling to align buttons with search -->
                    <div class="fixed-table-toolbar">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form" role="form">
                                 
                                    <div class="form-group">
                                        <label for="billing_month" class="control-label col-sm-3">Billing Month: </label>
                                            <div class="col-sm-9 small-bottom-padding">
                                                <div class='input-group monthpicker' id="billing-monthpicker">
                                                    <input class="form-control" type="text" id="billing_month" name="billing_month" v-model="billing_month">
                                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                                </div>
                                            </div>
                                    </div>
                                    
                                               
                                    <div class="form-group" v-show="arrears">
                                       <div class="col-sm-3">Arrear Interest: </div>
                                        <div class="col-sm-9 small-bottom-padding">
                                            <input name="arrear_interest" type="checkbox" id="arrear_interest" v-model="arrear_interest">
                                        </div>
                                    </div>
                                        
                                    <div class="form-group" v-show="payments_to_raise">
                                        <div class="col-sm-3"></div>
                                        <div class="col-sm-9">
                                            <a href = "{!! url('billing/raise/@{{billing_month}}/@{{arrear_interest}}/0') !!}">
                                                <button type = "button" class = "btn btn-success">
                                                    <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> {{ trans('hilbit.raise_billings') }}
                                                </button>
                                            </a>
                                         </div>
                                    </div>
                                        
                                    <div class="form-group" v-show="charge_arrears">
                                        <div class="col-sm-3"></div>
                                        <div class="col-sm-9">
                                            <a href = "{!! url('billing/raise/@{{billing_month}}/1/1') !!}">
                                                <button type = "button" class = "btn btn-success">
                                                    <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> Charge arrear interest
                                                </button>
                                            </a>
                                         </div>
                                    </div>
                                        
                                </div>    
                            </div>
                        </div>
                    </div>
                </div>
                    
                <hr class="dashed">
        
                <!-- Bootstrap table component -->
                <!-- data-toggle = "table" activates Bootstrap table -->
                
                <table data-toggle="table"
                       data-maintain-selected=true
                       data-height="575"
                       data-search="false"
                       data-advanced-search="false"
                       data-toolbar="#billing-toolbar"
                       id="tbl-billing"
                       data-group-by="true"
                       data-group-by-field="client_code"
                       data-undefined-text="">
                 
                    <thead>
                        <tr>
                            <th data-field="client_code">Client</th>
                            <th data-field="agreement_code">Agreement</th>
                            <th data-field="agreement_description">Description</th>
                            <th data-field="payment_date">Date</th>
                            <th data-field="instalment_no">Instalment/Rental No</th>
                            <th data-field="amount">Amount</th>
                        </tr>
                    </thead>
                          
                    <tbody>
                             
                    </tbody>
                  
                </table>
            </div>
                    
        </div>
       
    </div> <!-- End col-md-12 -->
            
</div> <!-- End Row -->
    
@stop

@section('scripts')
    
<script src = "{!! asset('js/hilbit-billing-vue.js') !!}"></script>
    
<script>
    
var hilbitBilling = hilbitBilling || {};
    
hilbitBilling = function()
{
    var fetchBillings = function() 
    {   
        var date = $('#billing-monthpicker').data("DateTimePicker").date();
        var month = new Date(date).getMonth() + 1;
        var year = String(date).split(" ")[3];       
        var url = 'api/billing/' + month + '/' + year;
        
        removeAlerts();
                
        $.ajax({
                method: "GET",
                url: url
        }) 
        .done(function( response )
        {
            if (response.message !== '')
            {
                hilbit.ui.alertMessage('hilbit-alert-message-text', response.message, 'error', true);
            }
                     
            setVueData(response.payments_to_raise, response.arrears);
            $('#tbl-billing').bootstrapTable('load', response.items);
        })
           
        .fail(function( jqXHR, textStatus, errorThrown)
        {
            hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown)
        });     
    };
    
    var setVueData = function(payments_to_raise, arrears)
    {
        var vm = billing_vue;
        
        vm.$data.payments_to_raise = payments_to_raise;
        vm.$data.charge_arrears = !payments_to_raise && arrears;
        vm.$data.arrears = vm.$data.payments_to_raise && !vm.$data.charge_arrears;
    };
    
    var removeAlerts = function()
    {
        $('.alert').hide();
    };
        
    
    return {fetchBillings : fetchBillings,
            setVueData: setVueData,
            removeAlerts : removeAlerts}       
    
}();
 
$(function () {
       
       hilbit.ui.attachMonthPicker();
       
       $('#billing-monthpicker').data("DateTimePicker").date(new Date());
       
       hilbitBilling.fetchBillings();
       
       $('#billing-monthpicker').on("dp.change",function (e)
       {  
            hilbitBilling.fetchBillings();
       });
});

       
</script>
    
@stop