@extends('app')

@section('content')

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

    <!-- Start Left Panel -->
    <div class="col-md-5">


        <h4>{{ ucfirst(trans('hilbit.'.$provider_type.'.description')).' '.trans('hilbit.provider_facility.header') }}: <small>{{$provider->name}}</small></h4>
        <a href = "{!! url('provider/'.$provider_type.'/'.$provider->id.'/edit') !!}"><button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> {{ ucfirst(trans('hilbit.'.$provider_type.'.description')) }}: {{$provider->code}}</button></a>
        <hr>

         @if (!$can_create)
            <div class="alert alert-info">{{ ucfirst(trans('hilbit.provider.cannot_create_facilities', ['provider_type' => $provider_type])) }}</div>
        @endif


        <!-- Start facility toolbar -->
        <div id="facility-toolbar">
            <!-- bs-table styling to align buttons with search -->
            <div class="fixed-table-toolbar">
                <div class="bars">

                    <a href = "{{ url('provider/'.$provider_type.'/facility/'.$provider->id.'/create') }}">
                        @if ($can_create)
                            <button type = "button" class = "btn btn-success">
                        @else
                            <button type = "button" class = "btn btn-success" disabled="disabled"
                        @endif
                            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> {{ucfirst(trans('hilbit.add_new')) }}
                        </button>
                    </a>
                </span>
                </div>
            </div>
        </div>
        <!-- End facility toolbar -->


        <!-- Start 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="#facility-toolbar"
                    id ="tbl-facility" >

                <thead>
                    <tr>
                    <th data-field="id" data-visible="false">ID</th>
                    <th data-field="code" data-halign = "center">Facility No</th>
                    <th data-field="client" data-halign="center">Client</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-facility-{{$facility->id}}" name = "row-facility-{{$facility->id}}">
                        <td>{{ $facility->id }}</td>
                        <td>{{ $facility->code }}</td>
                        <td>{{ $facility->client->code_name }}</td>
                        <td>{{ $facility->agreement_type->description }}</td>
                        <td>{!! App\Helpers\DisplayHelper::formatMoney($facility->facility_limit) !!}</td>
                    </tr>
                @endforeach
                </tbody>

            </table>
        </div>
        <!-- End facility listing -->
    </div>
    <!-- End left panel -->

    <!-- Start right panel -->
    <div class="col-md-7" id = "facility-details">
        @include('provider.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-provider-facility-vue.js') !!}"></script>
<script>

    var hilbitFacility = hilbitFacility || {};

    hilbitFacility = function()
    {

        var removeAlerts = function()
        {
            $('.alert').hide();
        };


        var edit = function(id)
        {
            var url = "{{ url('provider/'.$provider_type.'/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(facility_vue, props);
        };

        var onChangeClientFacility = function(option)
        {
            if (option.data('factoring') == 1) {
                setVueProps({'factoring_facility' : true});
            } else {
                setVueProps({'factoring_facility' : false});
            }

            if (option.data('instalment_sale') == 1) {
                setVueProps({'instalment_sale_facility' : true});
            } else {
                setVueProps({'instalment_sale_facility' : false});
            }
        };

      return {
            edit: edit,
            afterConfirm : afterConfirm,
            afterUnConfirm : afterUnConfirm,
            setVueProps : setVueProps,
            onChangeClientFacility : onChangeClientFacility
        }
    }();

    $(function () {

        hilbit.ui.attachOnSearch('tbl-facility', 'facility');
        hilbit.ui.attachFormValidation('fm-facility');
        hilbit.ui.attachDatePicker('facility-details');

        @if (!$can_update)
            hilbitFacility.setVueProps({'disable_input': true});
        @endif

        @if (isset($active_record))
            @if ($errors->any())
                hilbit.ui.activateTab($('#facility-main-tab'));
            @else
                hilbit.ui.activateTab($('#facility-dashboard-tab'));
            @endif

            $('#row-facility-{{ $active_record->id }}').addClass('success').siblings().removeClass('success');
        @else
            hilbit.ui.activateTab($('#facility-main-tab'));
        @endif


        $('#tbl-facility').on('click-row.bs.table', function (e, row, $element) {
            hilbitFacility.edit(row.id);
        });

        $('#client_facility_id').on('change', function() {
            var option = $('option:selected', this);
            hilbitFacility.onChangeClientFacility(option);
        });

        $('#client_facility_id').trigger('change');

    });


</script>

@stop