@extends('app')

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

            <div class="panel-heading">
                <h3 class="panel-title">{{ ucfirst(trans('hilbit.agreement_status.maintain')) }}</h3>     
            </div>
      
            <div class="panel-body">
                       
                @include('flash::message')
        
                @include('partials.alert')
                
                
                <hilbit-has-many-edit
                        form_url="{!! url('api/agreement-status') !!}"
                        form_title="{{ ucfirst(trans('hilbit.agreement_status.edit')) }}"
                        v-bind:record_id="agreement_status_id"
                        v-bind:edit_record="edit_agreement_status"
                        table_id="tbl-agreement-status"
                        edit_button_id="btn-edit-agreement-status"
                        modal_id="modal-edit-agreement-status"
                        form_content_id="edit-agreement-status-form-content"
                        v-bind:update_display_values="false">
                </hilbit-has-many-edit>
               
                <div id="agreement-status-toolbar" class="small-bottom-padding">
                      

                </div>                      
 
    
                <!-- Bootstrap table component -->
                <!-- data-toggle = "table" activates Bootstrap table -->
                
                <table data-toggle="table"
                       data-maintain-selected=true
                       data-height="575"
                       data-search="false"
                       data-id-field="id"
                       data-advanced-search="false"
                       data-toolbar="#agreement-status-toolbar"
                       data-sort-name="description"
                       id="tbl-agreement-status"
                       data-undefined-text="">
                 
                    <thead>
                        <tr>
                            <th data-field="id" data-visible="false">ID</th>
                            <th data-field="description" data-align="left" data-halign="left">Description</th>
                            {{--<th data-field="paid_up" data-align="left" data-halign="left">Paid up?</th>
                            <th data-field="active" data-align="left" data-halign="left">Active?</th>
                            <th data-field="bad_debt" data-align="left" data-halign="left">Bad Debt?</th>
                            <th data-field="settled" data-align="left" data-halign="left">Settled?</th>
                            <th data-field="pending" data-align="left" data-halign="left">Pending?</th>
                            <th data-field="discounted" data-align="left" data-halign="left">Discounted?</th>--}}
                            <th data-field="edit_btn">Edit</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-agreement-status-vue.js') !!}"></script>
    
<script>
 
    var hilbitAgreementStatus = hilbitAgreementStatus || {};
        
    hilbitAgreementStatus = function()
    {
        var getData = function()
        {
                
            $.ajax({
                url: "{{ url('api/agreement-status/get') }}"
            })  
            .done( function(response)
            {  
                $('#tbl-agreement-status').bootstrapTable('load', response.data);
        
            })
            .fail( function(jqXHR, textStatus, errorThrown)
            {
                // in hilbit-global.js
                    hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
            }); 
        };
            
        var setVueProps = function(props)
        {
            hilbit.utils.setVueProps(agreement_status_vue, props);
        };
        
        return {getData : getData, setVueProps : setVueProps}
        
    }();
    
    
    $(function ()
    {
        hilbitAgreementStatus.getData();
        

        $('#tbl-agreement-status').on('click', '.has-many-edit', function(event)
        {
            var table = $(event.delegateTarget);
            
            var agreement_status_id = $(this).data('id');

            hilbitAgreementStatus.setVueProps({ 'edit_agreement_status' : false });
            
            // Wait for vue to finish updating
            Vue.nextTick(function () {
            
            hilbitAgreementStatus.setVueProps({'agreement_status_id' : agreement_status_id,
                                         'edit_agreement_status' : true});
                
            });
        
        });
        
       
    });
    
</script>
    
@stop