@extends('app')

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

            <div class="panel-heading">
                <h3 class="panel-title">{{ ucfirst(trans('hilbit.bank.maintain')) }}</h3>     
            </div>
      
            <div class="panel-body">
                       
                @include('flash::message')
        
                @include('partials.alert')
                
                <hilbit-has-many-edit
                        form_url="{!! url('api/bank') !!}"
                        form_title="{{ ucfirst(trans('hilbit.bank.edit')) }}"
                        v-bind:record_id="bank_id"
                        v-bind:edit_record="edit_bank"
                        table_id="tbl-bank"
                        edit_button_id="btn-edit-bank"
                        modal_id="modal-edit-bank"
                        form_content_id="edit-bank-form-content"
                        v-bind:update_display_values="false">
                </hilbit-has-many-edit>
                        
                <hilbit-has-many-delete
                        delete_url="{!! url('bank') !!}"
                        title="{{ ucfirst(trans('hilbit.bank.delete')) }}"
                        v-bind:message="delete_message"
                        v-bind:update_display_values="false"
                        confirm_button_id="btn-delete-bank"
                        table_id="tbl-bank"
                        v-bind:record_id="bank_id"
                        v-bind:delete_record="delete_bank"
                        modal_id="modal-confirm-delete-bank">
                </hilbit-has-many-delete>
                
                <div id="bank-toolbar" class="small-bottom-padding">
                      
                    <hilbit-has-many-create
                        form_url="{!! url('api/bank/create') !!}"
                        form_title="{{ ucfirst(trans('hilbit.bank.new')) }}"
                        v-bind:allow_creates="true"
                        v-bind:update_display_values="false"
                        table_id="tbl-bank"
                        modal_id="modal-create-bank"
                        form_content_id="create-bank-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="#bank-toolbar"
                       data-sort-name="name"
                       id="tbl-bank"
                       data-undefined-text="">
                 
                    <thead>
                        <tr>
                            <th data-field="id" data-visible="false">ID</th>
                            <th data-field="name" data-align="left" data-halign="left">Name</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-bank-vue.js') !!}"></script>
    
<script>
 
    var hilbitBank = hilbitBank || {};
        
    hilbitBank = function()
    {
        var getData = function()
        {
                
            $.ajax({
                url: "{{ url('api/bank/get') }}"
            })  
            .done( function(response)
            {  
                $('#tbl-bank').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(bank_vue, props);
        };
        
        return {getData : getData, setVueProps : setVueProps}
    
    }();
    
    
    $(function ()
    {
        hilbitBank.getData();
        
        $('#tbl-bank').on('click', '.has-many-delete', function(event)
        {
            var table = $(event.delegateTarget); 
            var bank_id = $(this).data('id');
            var delete_message = $(this).data('message');

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

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