@extends('app')

@section('content')
 
 <div class = "row">   
    
        <div class="col-md-5">
            
            <h4>{{ ucfirst(trans('hilbit.company_bank_account.menu_title')) }}</h4>
            <a href = "{!! url('company') !!}"><button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> {{ ucfirst(trans('hilbit.company.menu_title')) }}</button></a>
        
        <hr>

            <div id="company-bank-account-toolbar">
                <!-- bs-table styling to align buttons with search -->
                <div class="fixed-table-toolbar">
                    <div class="bars">
                        <a href="{{ action('CompanyBankAccountController@create') }}">
                            <button type="button" class="btn btn-success">
                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> {{ ucfirst(trans('hilbit.add_new')) }}
                            </button>
                        </a>
                    </div>
                </div>
                
            </div>  <!-- End ToolBar -->
               
            <!-- Bank Listing -->
            
            <table data-toggle="table"
                    data-maintain-selected=true
                    data-height="575"
                    data-search ="true"
                    data-id-field="id"
                    data-advanced-search="true"
                    data-toolbar = "#company-bank-account-toolbar"
                    id ="tbl-company-bank-account" >
                <thead><tr>
                    <th data-visible=false data-field="id">ID</th>
                    <th data-visible=true data-field="bank_name">Name</th>
                    <th data-visible=true data-field="branch_name">Branch</th>
                    <th data-visible=true data-field="account_no">Account No</th>   
                </tr></thead>
                <tbody>
                
                @foreach ($company_bank_accounts as $bank_account)
                    <tr id="row-company-bank-account-{{ $bank_account->id }}">
                        <td>{{ $bank_account->id }}</td>
                        <td>{{ $bank_account->bank_name }}</td>
                        <td>{{ $bank_account->branch_name }}</td>
                        <td>{{ $bank_account->account_no }}</td>
                    </tr>
                @endforeach
                </tbody>

            </table>
           
                
        </div> <!-- End col-md-5 -->
            
        <div class="col-md-7" id = "company-bank-account-details">
        
            @include('company.bank_account.single')
            
        </div> <!-- End col-md-7 -->
            
    </div> <!-- End Row -->
    
@stop
    
@section('scripts')
    
    <script src = "{!! asset('js/hilbit-vue.js') !!}"></script>
    <script src = "{!! asset('js/hilbit-company-bank-account-vue.js') !!}"></script>
   
    <script>
    
    var hilbitCompanyBankAccount = hilbitCompanyBankAccount || {};
    
    hilbitCompanyBankAccount = function()
    {
        var edit = function(id)
        {
            var url = "{{ url('company-bank-account')}}";
            
            window.location.href = url + '/' + id + '/edit';
        };
        
       
        return {edit : edit}
    }();
    
    
    $(function ()
    {
        $('#tbl-company-bank-account').on('click-row.bs.table', function (e, row, $element) {
            
            hilbitCompanyBankAccount.edit(row.id);

        });
        
        $('#tbl-company-bank-account').on('search.bs.table', function (e)
        {
            var id = $('#id').val();
                
            $('#row-company-bank-account-' + id).addClass('active').siblings().removeClass('active');
               
        });
        
        
        hilbit.ui.attachFormValidation('fm_company_bank_account');
        hilbit.ui.attachDatePicker('company-bank-account-details');
       
        @if (isset($active_record))
            $('#row-company-bank-account-{{$active_record->id}}').addClass('success').siblings().removeClass('success');
        @endif
        
    });    
    
    </script>
    
@stop