@extends('app')

@section('content')

<!-- Start row -->  
<div class = "row">

    <!-- Start Left Panel -->   
    <div class="col-md-5">
    
    
        <h4>{{ ucfirst(trans('hilbit.client_facility.header')) }}: <small>{{ $client->name }}</small></h4>
        <a href="{!! url('client/'.$client->id.'/edit') !!}"><button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> {{ ucfirst(trans('hilbit.client.client')) }}: {{ $client->code }}</button></a>
        <hr> 
        
        <!-- Start client facility toolbar -->     
        <div id="client-facility-toolbar">
            <!-- bs-table styling to align buttons with search -->
            <div class="fixed-table-toolbar">
                <div class="bars">

                    <a href = "{{ url('client/facility/'.$client->id.'/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 client facility toolbar -->
            
        <!-- Start client facility listing -->
        <div>
       
            <!-- remove data-height if  you want headers to align properly on small devices -->
            <table  data-toggle="table"
                    data-maintain-selected=true
                    data-search ="true"
                    data-advanced-search="true"
                    data-toolbar="#client-facility-toolbar"
                    id ="tbl-client-facility" >
            
                <thead>
                    <tr>
                    <th data-field="id" data-visible="false">ID</th>
                    <th data-field="agreement_type" data-halign="center">Agreement Type</th>    
                    <th data-field="limit" data-align = "right">Limit</th>
                    </tr>
                </thead>
                    
                <tbody>
                @foreach ($facilities as $facility)
                    <tr id = "row-client-facility-{{$facility->id}}" name = "row-client-facility-{{$facility->id}}">
                        <td>{{ $facility->id }}</td>
                        <td>{{ $facility->agreement_type->description }}</td>
                        <td>{!! DisplayHelper::formatMoney($facility->facility_limit) !!}</td>
                    </tr>
                @endforeach
                </tbody>
    
            </table>
        </div>        
        <!-- End client facility listing -->    
    </div>
    <!-- End left panel -->
    
    <!-- Start right panel -->    
    <div class="col-md-7" id = "client-facility-details">
        @include('client.facility.single')   
    </div>
    <!-- End right panel -->
        
</div>
<!-- End row -->
    
@stop

@section('footer')
@stop

    
@section('scripts')
 
<script src = "{!! asset('js/hilbit-vue.js') !!}"></script>
<script src = "{!! asset('js/hilbit-client-facility-vue.js') !!}"></script>
<script>
    
    var hilbitClientFacility = hilbitClientFacility || {};
    
    hilbitClientFacility = function()
    {
        
        var removeAlerts = function()
        {
            $('.alert').hide();
        };
        
        
        var edit = function(id)
        {
            var url = "{{ url('client/facility')}}";
            
            window.location.href = url + '/' + id + '/edit';
        };
        
        var afterConfirm = function(id)
        {
            edit(id);
        };
        
        var afterUnConfirm = function(id)
        {
            edit(id);
        };
        
        
        var setVueProps = function(props)
        {
            hilbit.utils.setVueProps(client_facility_vue, props);
        };
        
        var onAgreementTypeChange = function(option)
        {
            if (option.data('discount') == 1) 
            {
                setVueProps({'discount_agreement_type': true});
            }
            else
            {
                setVueProps({'discount_agreement_type' : false });    
            }
        };
        
      return {
            edit: edit,
            afterConfirm : afterConfirm,
            afterUnConfirm : afterUnConfirm,
            setVueProps : setVueProps,
            onAgreementTypeChange : onAgreementTypeChange
        }
    }();
    
    $(function () {
        
        hilbit.ui.attachOnSearch('tbl-client-facility', 'facility'); 
        hilbit.ui.attachFormValidation('fm-client-facility');
        hilbit.ui.attachDatePicker('client-facility-details');
        
        
        @if (!$can_update) 
            hilbitClientFacility.setVueProps({'disable_input': true});
        @endif
        
        @if (isset($active_record))
            @if ($errors->any())
                hilbit.ui.activateTab($('#client-facility-main-tab'));
            @else
                hilbit.ui.activateTab($('#client-facility-dashboard-tab'));  
            @endif
    
            $('#row-client-facility-{{ $active_record->id }}').addClass('success').siblings().removeClass('success');  
        @else
            hilbit.ui.activateTab($('#client-facility-main-tab'));
        @endif
        
       
        $('#tbl-client-facility').on('click-row.bs.table', function (e, row, $element) { 
            hilbitClientFacility.edit(row.id);
        });
        
        
        $('#agreement_type_id').on('change', function()
        {
            var option = $('option:selected', this);
            hilbitClientFacility.onAgreementTypeChange(option);    
        });
        
        $('#agreement_type_id').trigger('change');
        

    });
    

</script>
    
@stop