@extends('app')

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

                <div class="panel-heading">
                    <h3 class="panel-title">{{ ucfirst(trans('hilbit.month_end.header')) }}</h3>         
                </div>
      
                <div class="panel-body">
       
                    @include('flash::message')
                    @include('partials.alert')
                    
                    <hilbit-modal-confirm   trigger_element="do-month-end"
                                            trigger_parent_element="fm-month-end"
                                            action_form="fm-month-end"
                                            modal_title="{{ ucfirst(trans('hilbit.month_end.process')) }}"
                                            confirm_prompt="{{ ucfirst(trans('hilbit.confirm_continue')) }}"
                                            modal_id="hilbit-modal-confirm-month_end">       
                    </hilbit-modal-confirm>
              
                    <div class="row">
                        <div class="form col-md-10" role="form">
                             
                            {!! Form::open(['action' => ['MonthEndController@process'],  'id' => 'fm-month-end', 'class' => 'form-horizontal', 'role' => 'form']) !!}
                            
                            <div class="form-group">
                                <div class="col-md-3">Month end date:</div>
                                <div class="input-group datepicker" id="month-end-datepicker">
                                    <input class="form-control col-md-7" type="text" id="month_end_date" name="month_end_date" required="required"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>
            
                            <div class="form-group">
                                <div class="col-md-7 col-md-offset-3">
                                    <button type = "button" class = "btn btn-success" id="btn-fetch-arrears">
                                        <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span> {{ trans('hilbit.fetch_month_end_arrears') }}
                                    </button>
                                    <button type = "button" class = "btn btn-primary" id="do-month-end">
                                        <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> {{ trans('hilbit.process_month_end') }}
                                    </button>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </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="#month-end-toolbar"--}}
                           id="tbl-month-end"
                           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>
                            </tr>
                        </thead>
                        
                        <tbody>
                           
                        </tbody>
                
                    </table>
                </div>
            </div>        
         
       </div> <!-- End col-md-12 -->
            
         
    </div> <!-- End Row -->
    
@stop

@section('scripts')
    
<script src = "{!! asset('js/hilbit-vue.js') !!}"></script>

<script src = "{!! asset('js/hilbit-month-end-vue.js') !!}"></script>

    
<script>
 
    $(function () {
        hilbit.ui.attachDatePicker('fm-month-end');
        hilbit.ui.attachFormValidation('fm-month-end');
        
        $("#btn-fetch-arrears").on("click", function(event)
        {
            var form = '#fm-month-end';
            var post_url =  "{{ url('api/monthend/fetch') }}";
            var form_data = $(form).serializeArray();   
            
            if (!$(form).valid())
            {
                return;
            }
           
            $.ajax({
                method: "POST",
                url: post_url,
                data: form_data
            })   
            .done(function(response)
            {
                if (response.message !== '')
                {
                    hilbit.ui.alertMessage('hilbit-alert-message-text', response.message, 'info', true);
                }
                $('#tbl-month-end').bootstrapTable('load', response.items);
            })
              
            .fail( function(jqXHR, textStatus, errorThrown)
            {
            // in hilbit-global.js
                hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
            }); 
        });

    });
       

</script>
    
@stop