@extends('app')

@section('content')
 
 <div class = "row">   
    
    <div class="col-md-5">
        
        <div id="provider-toolbar">
            <!-- bs-table styling to align buttons with search -->
            <div class="fixed-table-toolbar">
                <div class="bars">
                    <a href = "{{ url('provider/'.$provider_type.'/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 provider_toolbar -->
               
        <!-- Provider Listing -->
            
        <table data-toggle="table"
               data-maintain-selected=true
               data-height="575"
               data-search ="true"
               data-advanced-search="true"
               data-toolbar = "#provider-toolbar"
               id ="tbl-provider" >
               
            <thead><tr>
                 <th data-visible=false data-field="id">ID</th>
                 <th data-visible=true data-field="code">Code</th>
                 <th data-visible=true data-field="name">Name</th>
             </tr></thead>
                 
             <tbody>
             @foreach ($providers as $provider)
                 <tr id = "row-provider-{{$provider->id}}" name = "row-provider-{{$provider->id}}">
                     <td>{{ $provider->id }}</td>
                     <td>{{ $provider->code }}</td>
                     <td>{{ $provider->name }}</td>
                 </tr>
             @endforeach
             </tbody>

        </table>
        
    </div> <!-- End col-md-5 -->    
    
    <div class="col-md-7" id = "provider-details">
        
        @include('provider.single')
            
    </div> <!-- End col-md-7 -->
            
</div> <!-- End Row -->
    
@stop

@section('footer')

@stop

    
@section('scripts')
    
<script src = "{!! asset('js/hilbit-vue.js') !!}"></script>
<script src = "{!! asset('js/hilbit-provider-vue.js') !!}"></script>

<script>
    
    var hilbitProvider = hilbitProvider || {};
    
    hilbitProvider = function()
    {
        var setVueProps = function(props)
        {
            hilbit.utils.setVueProps(provider_vue, props);
        };
        
        var edit = function(id)
        {
            var url = "{{ url('provider/'.$provider_type) }}";
            window.location.href = url + '/' + id + '/edit';
        };
       
        var fetchHasMany = function(id)
        {
            var url =  "{{ url('api/provider/'.$provider_type) }}";
            url = url + '/' + id + '/get-has-many'; 
            hilbit.ui.fetchHasMany(id, url, 'tbl-');
        };
        
        var afterConfirmFacility = function(id)
        {
            edit(id);
        };
        
        var afterUnConfirmFacility = function(id)
        {
            edit(id);
        };
        
        
        return {setVueProps : setVueProps,
                edit : edit,
                afterConfirmFacility : afterConfirmFacility,
                afterUnConfirmFacility : afterUnConfirmFacility,
                fetchHasMany : fetchHasMany}
                
    }();
    
    
    $(function () {
    
       var $url = "{!! url('provider/'.$provider_type) !!}";
       hilbit.ui.attachOnSearch('tbl-provider', 'provider');
       hilbit.ui.attachFormValidation('fm-provider');
       hilbit.ui.attachDatePicker('provider-details');
       hilbit.ui.attachNavPillsClick();
       
       @if (isset($active_record))
    
            @if ($errors->any())
                hilbit.ui.activateTab($('#provider-main-tab'));
            @else
                hilbit.ui.activateTab($('#provider-dashboard-tab'));  
            @endif
    
            $('#row-provider-{{$active_record->id}}').addClass('success').siblings().removeClass('success');
            
            hilbitProvider.fetchHasMany({{ $active_record->id }});
        @else
            hilbit.ui.activateTab($('#provider-main-tab'));
        @endif
        
        
         @if (!$can_update) 
            hilbitProvider.setVueProps({'disable_input': true});
         @endif
         
         @if (!$can_update_facility) 
            hilbitProvider.setVueProps({'disable_facility_input': true});
         @endif
         
         @if ($provider_type == 'supplier')
            hilbitProvider.setVueProps({'supplier': true});
         @endif
        
        $('#tbl-provider').on('click-row.bs.table', function (e, row, $element)
        {  
            hilbitProvider.edit(row.id);
        });
        
        $('.has-many-table').on('click', '.has-many-edit', function(event)
        {  
            var vm = provider_vue;
            var table = $(event.delegateTarget);
            var has_many_id = $(this).data('id');
            var has_many_edit_url =  table.data('edit-url');
            var has_many_edit_title = table.data('edit-form-title');
            var has_many_table = table.attr('id');
    
            hilbitProvider.setVueProps({ 'edit_has_many' : false });
            // Wait for vue to finish updating
            Vue.nextTick(function ()
            {
                hilbitProvider.setVueProps({'has_many_id' : has_many_id,
                                        'has_many_edit_url' : has_many_edit_url,
                                        'has_many_edit_title': has_many_edit_title,
                                        'has_many_table' : has_many_table,
                                        'edit_has_many' : true});    
            });
        });
        
        
        $( "#fm-provider").submit(function( event )
        {
            $('#facility_code').prop('disabled', false);
            $('#facility_date').prop('disabled', false);
            $('#facility_signatory').prop('disabled', false);
            $('#facility_limit').prop('disabled', false);
            $('#payment_term_id').prop('disabled', false);
            $('#facility_discount_percent').prop('disabled', false);
        });
        
        
        $('.has-many-table').on('click', '.has-many-delete', function(event)
        {
            var vm = provider_vue;
            var table = $(event.delegateTarget);
            var has_many_id = $(this).data('id');
            var has_many_delete_url =  table.data('delete-url');
            var has_many_delete_title = table.data('delete-form-title');
            var has_many_delete_message = $(this).data('message');
            var has_many_table = table.attr('id');
    
            hilbitProvider.setVueProps({ 'delete_has_many' : false });
            
            // Wait for vue to finish updating
            Vue.nextTick(function ()
            {
                hilbitProvider.setVueProps({'has_many_id' : has_many_id,
                                        'has_many_delete_url' : has_many_delete_url,
                                        'has_many_delete_title': has_many_delete_title,
                                        'has_many_delete_message': has_many_delete_message,
                                        'has_many_table' : has_many_table,
                                        'delete_has_many' : true});     
            });
        });
    });
    
    </script>
    
@stop