@extends('app')

@section('content')
    
@include('flash::message')

 
<div class = "small-bottom-padding">
    <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: {{$agreement->code}}
        </button>
    </a>
</div>
    
<div class="panel panel-default">
  
    <div class="panel-heading">

        <h3 class="panel-title">Transaction History: Agreement {{$agreement->code}} - {{$agreement->description}}</h3>
            
    </div>
            
       
        
        
    <div class="panel-body">
       
       
        <!-- Start Transaction Toolbar -->     
        <div id="transaction-toolbar" class="small-bottom-padding">
        
            {{--@if (!$agreement->history)
            <div id="hilbit-modal-create">
                <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> Agreement: {{$agreement->code}}</button></a>
        
                <!-- Vue component -->
                <hilbit-modal-create
                        form_url="{!! url('api/transactions/'.$agreement->id.'/create') !!}"
                        javascript_url = "{!! asset('js/hilbit-transaction-create.js') !!}"
                        form_title="Add new transaction"
                        after_create="fetchTransactions"
                        on_open_form="changeType"
                        linked_field="payment_no"> 
                </hilbit-modal-create>
            </div>
            @endif--}}
     
        </div>
        <!-- End Transaction Toolbar -->
            
        <!-- Start Transaction Listing -->

    @if ($agreement->transactions_by_date)
        <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="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>
            
    @else        
        <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="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>            
    @endif
        
                
    </div>
  
    
@stop



@section('footer')
 
@stop

    
@section('scripts')
    
<script>
 
$(function () {

    var fetchTransactions = function()
    {     
        var url = "{!! url('api/transactions/'.$agreement->id) !!}";
    
        $.ajax({
            url: url,
            dataType: 'json'
        })
        .success( function(response)
        { 
            $('#' + transaction_table).bootstrapTable('load', response.transactions);
        })
        .fail( function(jqXHR, textStatus, errorThrown)
        {
            // in hilbit-global.js
            hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
        });       
    };
    
    
    @if ($agreement->transactions_by_date)
        transaction_table = 'tbl-transactions-by-date';
    @else
        transaction_table = 'tbl-transactions-by-payment-no';
    @endif
    
    @if ($agreement->capital_interest_split)
       $('#' + transaction_table).bootstrapTable('showColumn', 'capital');
       $('#' + transaction_table).bootstrapTable('showColumn', 'interest');  
    @else
        $('#' + transaction_table).bootstrapTable('hideColumn', 'capital');
        $('#' + transaction_table).bootstrapTable('hideColumn', 'interest'); 
   @endif   


    $('#' + transaction_table).on('click-row.bs.table', function (e, row, $element, field) {
        $($element).addClass('success').siblings().removeClass('success');
    });
    
        
    fetchTransactions();

    
});
       
</script>
    
@stop