@extends('app')

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

            <div class="panel-heading">
                <h3 class="panel-title">{{ ucfirst(trans('hilbit.agreement_type.maintain')) }}</h3>     
            </div>
      
            <div class="panel-body">
                       
                @include('flash::message')
        
                @include('partials.alert')
                
                <hilbit-has-many-edit
                        form_url="{!! url('api/agreement-type') !!}"
                        form_title="{{ ucfirst(trans('hilbit.agreement_type.edit')) }}"
                        v-bind:record_id="agreement_type_id"
                        v-bind:edit_record="edit_agreement_type"
                        table_id="tbl-agreement-type"
                        edit_button_id="btn-edit-agreement-type"
                        modal_id="modal-edit-agreement-type"
                        form_content_id="edit-agreement-type-form-content"
                        v-bind:update_display_values="false">
                </hilbit-has-many-edit>
              
                <hilbit-has-many-delete
                        delete_url="{!! url('agreement-type') !!}"
                        title="{{ ucfirst(trans('hilbit.agreement_type.delete')) }}"
                        v-bind:message="delete_message"
                        v-bind:update_display_values="false"
                        confirm_button_id="btn-delete-agreement-type"
                        table_id="tbl-agreement-type"
                        v-bind:record_id="agreement_type_id"
                        v-bind:delete_record="delete_agreement_type"
                        modal_id="modal-confirm-delete-agreement-type">
                </hilbit-has-many-delete>
                
                <div id="agreement-type-toolbar" class="small-bottom-padding">
                      
                    <hilbit-has-many-create
                        form_url="{!! url('api/agreement-type/create') !!}"
                        form_title="{{ ucfirst(trans('hilbit.agreement_type.new')) }}"
                        v-bind:allow_creates="true"
                        v-bind:update_display_values="false"
                        table_id="tbl-agreement-type"
                        modal_id="modal-create-agreement-type"
                        form_content_id="create-agreement-type-form-content"
                        create_button_class="btn btn-primary">
                    </hilbit-has-many-create>
 

                </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-type-toolbar"
                       data-sort-name="description"
                       id="tbl-agreement-type"
                       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="billing_description" data-align="left" data-halign="left">Billing <br>Description</th>
                            <th data-field="payment_description" data-align="left" data-halign="left">Payment <br>Description</th>
                            <th data-field="total_value_description" data-align="left" data-halign="left">Total Value <br>Description</th>
                            <th data-field="initial_value_description" data-align="left" data-halign="left">Initial Value <br>Description</th>
                            <th data-field="outstanding_description" data-align="left" data-halign="left">Outstanding <br>Description</th>
                            <th data-field="payment_frequency" data-align="left" data-halign="left">Payment Frequency</th>
                            <th data-field="product" data-align="left" data-halign="left">Product</th>
                            <th data-field="edit_btn">Edit</th>
                            <th data-field="delete_btn">Delete</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-type-vue.js') !!}"></script>
    
<script>
 
    var hilbitAgreementType = hilbitAgreementType || {};
        
    hilbitAgreementType = function()
    {
        var getData = function()
        {
            $.ajax({
                url: "{{ url('api/agreement-type/get') }}"
            })  
            .done( function(response)
            {  
                $('#tbl-agreement-type').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_type_vue, props);
        };
        
        return {getData : getData, setVueProps : setVueProps}
        
    }();
    
    
    $(function ()
    {
        hilbitAgreementType.getData();
        
        $('#tbl-agreement-type').on('click', '.has-many-delete', function(event)
        {
            var table = $(event.delegateTarget);
            
            var agreement_type_id = $(this).data('id');
            var delete_message = $(this).data('message');

            hilbitAgreementType.setVueProps({ 'delete_agreement_type' : false });
            
            // Wait for vue to finish updating
            Vue.nextTick(function () {
                hilbitAgreementType.setVueProps({'agreement_type_id' : agreement_type_id,
                                        'delete_message': delete_message,
                                        'delete_agreement_type' : true});   
            });
        
        });
        
        
        $('#tbl-agreement-type').on('click', '.has-many-edit', function(event)
        {
            var table = $(event.delegateTarget); 
            var agreement_type_id = $(this).data('id');

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