@extends('app')

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

            <div class="panel-heading">
                <h3 class="panel-title">{{ ucfirst(trans('hilbit.transaction_type.maintain')) }}</h3>     
            </div>
      
            <div class="panel-body">
                       
                @include('flash::message')
        
                @include('partials.alert')
                
                
                <hilbit-has-many-edit
                        form_url="{!! url('api/transaction-type') !!}"
                        form_title="{{ ucfirst(trans('hilbit.transaction_type.edit')) }}"
                        v-bind:record_id="transaction_type_id"
                        v-bind:edit_record="edit_transaction_type"
                        table_id="tbl-transaction-type"
                        edit_button_id="btn-edit-transaction-type"
                        modal_id="modal-edit-transaction-type"
                        form_content_id="edit-transaction-type-form-content"
                        v-bind:update_display_values="false">
                </hilbit-has-many-edit>
               
                        
                <hilbit-has-many-delete
                        delete_url="{!! url('transaction-type') !!}"
                        title="{{ ucfirst(trans('hilbit.transaction_type.delete')) }}"
                        v-bind:message="delete_message"
                        v-bind:update_display_values="false"
                        confirm_button_id="btn-delete-transaction-type"
                        table_id="tbl-transaction-type"
                        v-bind:record_id="transaction_type_id"
                        v-bind:delete_record="delete_transaction_type"
                        modal_id="modal-confirm-delete-transaction-type">
                </hilbit-has-many-delete>
                
                <div id="transaction-type-toolbar" class="small-bottom-padding">
                      
                    <hilbit-has-many-create
                        form_url="{!! url('api/transaction-type/create') !!}"
                        form_title="{{ ucfirst(trans('hilbit.transaction_type.new')) }}"
                        v-bind:allow_creates="true"
                        v-bind:update_display_values="false"
                        table_id="tbl-transaction-type"
                        modal_id="modal-create-transaction-type"
                        form_content_id="create-transaction-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="#transaction-type-toolbar"
                       data-sort-name="description"
                       id="tbl-transaction-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="credit" data-align="left" data-halign="left">Credit?</th>
                            <th data-field="automatic" data-align="left" data-halign="left">Automatic allocation?</th>
                            <th data-field="journal" data-align="left" data-halign="left">Journal?</th>
                            <th data-field="selectable" data-align="left" data-halign="left">Selectable?</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-transaction-type-vue.js') !!}"></script>
    
<script>
 
    var hilbitTransactionType = hilbitTransactionType || {};
        
    hilbitTransactionType = function()
    {
        var getData = function()
            {
                
                $.ajax({
                    url: "{{ url('api/transaction-type/get') }}"
                })  
                .done( function(response)
                {  
                    $('#tbl-transaction-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(transaction_type_vue, props);
            };
            
            return {getData : getData, setVueProps : setVueProps}
        
    }();
    
    
    $(function ()
    {
        hilbitTransactionType.getData();
        
        $('#tbl-transaction-type').on('click', '.has-many-delete', function(event)
        {
            var table = $(event.delegateTarget);
            
            var transaction_type_id = $(this).data('id');
            var delete_message = $(this).data('message');

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

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