@extends('app')

@section('content')

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

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

        <h4>Agreements: <small>{{$client->name}}</small></h4>
        <hr>

        <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> Client: {{$client->code}}</button></a>

        <!-- Start Agreement Toolbar -->
        <div id="agreement_toolbar">

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

        <!-- Start Agreement Listing -->
        <div>

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

                <thead>
                    <tr>
                        <th data-field="id" data-visible="false">ID</th>
                        <th data-field="closed" data-visible="false">Closed</th>
                        <th data-field="capital_interest_split" data-visible="false"></th>
                        <th data-field="transactions_by_date" data-visible="false"></th>
                        <th data-field="code" data-halign = "center">Agreement No</th>
                        <th data-field="description" data-halign="center">Description</th>
                        <th data-field="settlement" data-align="right">Settlement</th>
                    </tr>
                </thead>

                <tbody>
                @foreach ($agreements as $client_agreement)
                    <tr id = "row_agreement_{{ $client_agreement->id }}" name = "row_agreement_{{ $client_agreement->id }}">
                        <td>{{ $client_agreement->id }}</td>
                        <td>{{ $client_agreement->closed }}</td>
                        <td>{{ $client_agreement->capital_interest_split }}</td>
                        <td>{{ $client_agreement->transactions_by_date }}</td>
                        <td>{{ $client_agreement->code }}</td>
                        <td>{{ $client_agreement->description }}</td>
                        <td><span id = "agreement_{{ $client_agreement->id }}_settlement_display">{{ $client_agreement->settlement }}</span></td></tr>
                @endforeach
                </tbody>

            </table>
        </div>

    </div>


    <!-- End Left panel -->

    <!-- Start Right panel -->
    <div class="col-md-8" id = "transactions">

        @include('partials.alert')

        <div class="panel panel-default">

            <div class="panel-heading">
                <h3 class="panel-title">Transactions: @{{ transactions_header }}</h3>
            </div>

            <!-- Start panel-body  -->
            <div class="panel-body">

                <!-- Start Transaction Toolbar -->
                <div id="transactions-toolbar">

                    <div class="pull-left panel panel-danger" v-if="transactions_by_payment_no">
                        <div class="panel-heading">Highlight payment no against which transaction must be posted before adding new transaction.<br>
                            (Except for payments which will be automatically allocated)
                        </div>
                    </div>

                    <div id="hilbit-modal-create" class="pull-right small-bottom-padding">

                            {{-- Vue component see hilbit-client-transaction-vue.js for create_transaction_url, can_add_transactions,
                                  form_fields and get-transaction_params --}}
                            <hilbit-modal-create
                                    v-bind:form_url="create_transaction_url"
                                    javascript_url="{!! asset('js/hilbit-transaction-create.js') !!}"
                                    v-bind:form_title="form_title"
                                    after_create="hilbitTransactions.getTransactions"
                                    on_open_form="hilbitTransactionCreate.setFields"
                                    v-bind:allow_creates="can_add_transactions"
                                    v-bind:form_fields="form_fields"
                                    v-bind:after_create_params="get_transactions_params"
                                    alert_message_id="hilbit-alert-message-text">
                            </hilbit-modal-create>
                    </div>

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

                <!-- Start transaction by date  listing -->
                <div id = "transactions-by-date">
                    <!-- remove data-height for headers to align properly on small devices -->
                    <table  data-toggle="table"
                            data-height=475
                            data-maintain-selected=true
                            data-search="false"
                            id ="tbl-transactions-by-date"
                            data-undefined-text=""
                            data-click-to-select="true"
                            data-single-select="true"
                            class = "tbl-transactions">

                            <thead>
                                <tr>
                                    <th data-field="effective_date">Effective Date</th>
                                    <th data-field="type">Type</th>
                                    <th data-field="invoice_no">Invoice<br>No</th>
                                    <th data-field="comment">Comment</th>
                                    <th data-field="reference">Reference</th>
                                    <th data-field="interest" data-align = "right">Interest</th>
                                    <th data-field="capital" data-align = "right">Capital</th>
                                    <th data-field="amount" data-align = "right">Amount</th>
                                    <th data-field="balance" data-align = "right">Balance</th>
                                </tr>
                            </thead>

                            <tbody>
                            </tbody>

                    </table>
                </div>
                <!-- End transaction by date  listing -->

                <!-- Start transaction by payment no listing -->
                <div id = "transactions-by-payment-no">

                    <!-- remove data-height for headers to align properly on small devices -->
                    <table  data-toggle="table"
                            data-maintain-selected=true
                            data-search="false"
                            id ="tbl-transactions-by-payment-no"
                            data-group-by="true"
                            data-group-by-field="payment_no"
                            data-group-by-init-expanded="all"
                            data-undefined-text=""
                            data-click-to-select="true"
                            data-single-select="true"
                            class = "tbl-transactions">

                        <thead>
                            <tr>
                                <th data-field="payment_no">Payment<br>No</th>
                                <th data-field="effective_date">Effective Date</th>
                                <th data-field="type">Type</th>
                                <th data-field="invoice_no">Invoice<br>No</th>
                                <th data-field="comment">Comment</th>
                                <th data-field="reference">Reference</th>
                                <th data-field="interest" data-align = "right">Interest</th>
                                <th data-field="capital" data-align = "right">Capital</th>
                                <th data-field="amount" data-align = "right">Amount</th>
                                <th data-field="balance" data-align = "right">Balance</th>
                            </tr>
                        </thead>

                        <tbody>
                        </tbody>

                    </table>
                </div>
                <!-- End transaction by payment nolisting -->
            </div>
            <!-- End panel-body  -->
    </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-transaction-vue.js') !!}"></script>

<script>

var hilbitTransactions = hilbitTransactions || {};

hilbitTransactions = function()
{

    var getTransactions = function(agreement_id, transaction_table, update_settlement=true)
    {
        var url = "{!! url('api/transactions') !!}";

        $.ajax({
            url: url + '/' + agreement_id,
            dataType: 'json'
        })
        .success( function(response)
        {
            $('#' + transaction_table).bootstrapTable('load', response.transactions);

            // Update settlement
            var agreements = $('#tbl-agreement').bootstrapTable('getData');

            if (update_settlement)
            {
                $.each(agreements, function(index, item)
                {
                    if (item.id == agreement_id)
                    {
                        $('#tbl-agreement').bootstrapTable('updateCell', {
                            index: index,
                            field: 'settlement',
                            value: response.settlement
                       });

                        $('#row_agreement_' + agreement_id).addClass('success').siblings().removeClass('success');

                        return false;
                    }
                });
            }

            setVuePaymentNo(0);
        })
        .fail( function(jqXHR, textStatus, errorThrown)
        {
            // in hilbit-global.js
            hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);

        });
    };


    var setVueAgreementData = function(id, code, description, closed, capital_interest_split, transactions_by_date)
    {

        {{-- client_transaction_vue defined in hilbit-client-transaction-vue.js --}}
        {{-- component hilbit-modal-create uses client_transaction_vue data --}}

        var vm = client_transaction_vue;

        vm.$data.agreement_id = id;
        vm.$data.agreement_code = code;
        vm.$data.agreement_description = description;
        vm.$data.capital_interest_split = capital_interest_split;
        vm.$data.transactions_by_payment_no = transactions_by_date == 0 ? 1 : 0;
        vm.$data.can_add_transactions = (closed == 0) ? true : false;
        vm.$data.transaction_table = (transactions_by_date == 1 ? 'tbl-transactions-by-date' : 'tbl-transactions-by-payment-no');
    };


    var setVueData = function(data)
    {

        var vm = client_transaction_vue;

        $.each(data, function(element, value)
        {
            vm.$data[element] = value;
        });
    };


    var setVueUrl = function()
    {
        {{-- client_transaction_vue is defined in hilbit-client-transaction-vue.js --}}
        var vm = client_transaction_vue;
        var url = "{!! url('api/transactions') !!}";

        vm.$data.url = url;
    };

    var setVuePaymentNo = function(payment_no)
    {
        var vm = client_transaction_vue;
        vm.$data.payment_no = payment_no;
    };


    {{--
    Switch between two types of transaction processing
    1) By payment no - transactions are grouped by payment no and a new transaction
       is allocated to a payment no (schedule entry)
    2) By date - transactions are listed in date order - new transactions
       are not allocated to a payment no schedule entry
    --}}

    var fetchTransactions = function(transactions_by_date, capital_interest_split, id, code, description, closed, update_settlement=true)
    {
        var transaction_table;

        if (transactions_by_date == 1)
        {
            transaction_table= 'tbl-transactions-by-date';
            $('#transactions-by-payment-no').hide();
            $('#transactions-by-date').show();
        }
        else
        {
            transaction_table = 'tbl-transactions-by-payment-no';
            $('#transactions-by-date').hide();
            $('#transactions-by-payment-no').show();
        }

        {{-- If the selected agreement has transactions split into capital and interest
         then show these columns --}}

        if (capital_interest_split == 1)
        {
           $('#' + transaction_table).bootstrapTable('showColumn', 'capital');
           $('#' + transaction_table).bootstrapTable('showColumn', 'interest');
        }
        else
        {
            $('#' + transaction_table).bootstrapTable('hideColumn', 'capital');
            $('#' + transaction_table).bootstrapTable('hideColumn', 'interest');
        }

        setVueAgreementData(id, code, description, closed, capital_interest_split, transactions_by_date);

        getTransactions(id, transaction_table, update_settlement);
    };

    return {fetchTransactions : fetchTransactions,
            setVueUrl : setVueUrl,
            setVuePaymentNo: setVuePaymentNo,
            getTransactions: getTransactions}

}();


$(function () {

    hilbitTransactions.setVueUrl();

    $('#transactions-by-payment-no').hide();
    $('#transactions-by-date').hide();

    @if ($agreement)

        $('#row_agreement_{{ $agreement->id }}').addClass('success');

        hilbitTransactions.fetchTransactions({{ $agreement->transactions_by_date }}, {{ $agreement->capital_interest_split }}, {{ $agreement->id }}, '{{ $agreement->code }}', '{{ $agreement->description }}', {{ $agreement->closed }}, false);

    @endif


    $('#tbl-transactions-by-payment-no').bootstrapTable({
        groupByInitExpanded : 'all'
    });

    $('.tbl-transactions').on('click-row.bs.table', function (e, row, $element, field)
    {
        $($element).addClass('success').siblings().removeClass('success');
        hilbitTransactions.setVuePaymentNo(row.payment_no);
    });

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

        hilbitTransactions.fetchTransactions(row.transactions_by_date, row.capital_interest_split, row.id, row.code, row.description, row.closed, false);

    });

});





</script>

@stop