@extends('app')

@section('content')

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

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

        <a href = "{!! url('agreement/'.$agreement->id.'/edit') !!}"><button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> Back to agreement</button></a>

        <h4>Reschedule History: <small>{{$agreement->code}}</small></h4>

        <hr>

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

                </div>
            </div>
        </div>
        <!-- End Agreement Toolbar -->

        <!-- Start Agreement Listing -->


        <!-- remove data-height if  you want headers align properly on small devices -->
        <table  data-toggle="table"
                data-maintain-selected=true
                data-unique-id = "id"
                data-toolbar="#agreement-history-toolbar"
                id ="tbl-agreement-history" >

            <thead>
                <tr>
                <th data-field="id" data-visible="false">ID</th>
                <th data-field="description" data-halign="center">Description</th>
                <th data-field="history_date" data-align = "right">Date</th>
                </tr>
            </thead>

            <tbody>
            @foreach ($agreement_history as $history)
                <tr id = "row-{{$history->id}}">
                    <td>{{ $history->id }}</td>
                    <td>{{ $history->description }}</td>
                    <td>{!! App\Helpers\DisplayHelper::formatDate($history->history_date) !!}</td>
                </tr>
            @endforeach
            </tbody>

        </table>
    </div>


    <!-- End Left panel -->

    <!-- Start Right panel -->
    <div class="col-md-7" id = "agreement-details">
        @include('agreement.single', ['active_record' => $active_record])
    </div>
    <!-- End Right panel -->

</div>
<!-- End Row -->

@stop


@section('footer')
@stop


@section('scripts')

<script src = "{!! asset('js/hilbit-agreement-vue.js') !!}"></script>

<script>

    var hilbitAgreementHistory = hilbitAgreementHistory || {};

    hilbitAgreementHistory = function() {

        var view = function(id) {
            var url =  "{{ url('agreement') }}" + '/' + id + '/edit';
            window.location.href = url;
        };

        var fetchHasMany = function (id) {
            var url =  "{{ url('api/agreement') }}" + '/' + id + '/get-has-many';
            hilbit.ui.fetchHasMany(id, url, 'tbl_');
        };

        var setVueProps = function(props) {
            hilbit.utils.setVueProps(agreement_vue, props);
        };

        return {
            view : view,
            fetchHasMany : fetchHasMany,
            setVueProps : setVueProps
        }

    }();

    $(function () {

        hilbit.ui.activateTab($('#agreement_main_tab'));
        hilbit.ui.attachNavPillsClick();

        $('#tbl-agreement-history').on('click-row.bs.table', function (e, row, $element) {
            $element.addClass('success').siblings().removeClass('success');
            hilbitAgreementHistory.view(row.id);
        });

        @if (isset($active_record))
            $("#row-{{ $active_record->id }}").addClass('success').siblings().removeClass('success');
            hilbitAgreementHistory.fetchHasMany({{ $active_record->id }});
            @if ($active_record->assets_added)
            hilbitAgreementHistory.setVueProps({
                'provider_name' : '{{ $active_record->provider_code_name }}',
                'asset_payment_term_id' : '{{ $active_record->asset_payment_term_id}}'});
            @endif
        @endif

        hilbitAgreementHistory.setVueProps({'disable_input': true});
    });


</script>

@stop