@extends('app')

@section('content')

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

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

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

        <div>
            <button id = "btn_agreement_process_tree" type = "button" class = "btn btn-warning btn-process-tree" data-process-tree = "agreement_process_tree"><span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span> Acquisition Status</button>
            <span id = "agreement_process_description" class = "text-warning"></span>

            <div id="agreement_process_tree" class = "process-tree hidden" data-button="btn_agreement_process_tree" data-description="agreement_process_description"></div>
        </div>


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

                    @if ($archived)
                        <a href = "{{ url('agreement/'.$client->id) }}">
                            <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Active</button>
                        </a>
                        <button type="button" class="btn btn-primary">Archived</button>
                     @else
                        <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Active</button>

                        <a href = "{{ url('agreement/archived/'.$client->id) }}">
                            <button type="button" class="btn btn-default">Archived</button>
                        </a>
                    @endif

                    <a href = "{{ url('agreement/'.$client->id.'/create/0') }}">
                        <button type = "button" class = "btn btn-success">
                            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Add new
                        </button>
                    </a>
                </div>
            </div>
        </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-height="450"
                    data-advanced-search="true"
                    data-toolbar="#agreement_toolbar"
                    id ="tbl_agreement" >

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

                <tbody>
                @foreach ($agreements as $agreement)
                    <tr id = "row_agreement_{{$agreement->id}}" name = "row_agreement_{{$agreement->id}}">
                        <td>{{ $agreement->id }}</td>
                        <td>{{ $agreement->code }}</td>
                        <td>{{ $agreement->description }}</td>
                        <td>{{ $agreement->type->description }}</td>
                        <td><span id = "agreement_{{$agreement->id}}_settlement_display">{!! App\Helpers\DisplayHelper::formatMoney($agreement->settlement) !!}</span></td>
                    </tr>
                @endforeach
                </tbody>

            </table>
        </div>

        <div class = "small-bottom-padding"></div>

            <table data-toggle="table" data-maintain-selected=true  id ="tbl_client_summary" >
                <thead><tr><th>Summary</th><th data-align="right">Amount</th></tr></thead>
                <tbody>
                    <tr><td>Principal</td><td><span id = "sum_principal_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_principal) !!} </span></td></tr>
                    <tr><td>Charges</td><td><span id = "sum_agreement_charges_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_agreement_charges) !!} </span></td></tr>
                    <tr><td>Now Due</td><td><span id = "sum_now_due_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_now_due) !!}</span></td></tr>
                    <tr><td>Instalment</td><td><span id = "sum_instalment_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_instalment) !!}</span></td></tr>
                    <tr><td>Total Payable</td><td><span id = "sum_total_payable_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_total_payable) !!}</span></td></tr>
                    <tr><td>Balance OS</td><td><span id = "sum_balance_os_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_balance_os) !!}</span></td></tr>
                    <tr><td>Movements</td><td><span id = "sum_movement_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_movement) !!} </span></td></tr>
                    <tr><td>Settlement</td><td><span id = "sum_settlement_display">{!! App\Helpers\DisplayHelper::formatMoney($client->sum_settlement) !!} </span></td></tr>
            </tbody>

        </table>

    </div>

    <!-- End Left panel -->

    <!-- Start Right panel -->
    <div class="col-md-7" id = "agreement-details">

        @include('agreement.single')

    </div>
    <!-- End Right panel -->

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

@stop

@section('footer')

@stop


@section('scripts')


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


    var hilbitAgreement = hilbitAgreement || {};

    hilbitAgreement = function() {
        var asset_data = [];
        var _client_vat_registered;
        var retention_refunded;

        // Store array of asset type option values for hiding/showing
        // options depending on agreement type selection

        var asset_type_options = [];
        var asset_type_options_length = 0;

        // Store array of debtor option values for hiding/showing
        // options depending on agreement type selection
        var debtor_options = [];
        var debtor_options_length = 0;


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


        var afterArchive = function (client_id) {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + client_id;
        };

        var afterCancelCreateMultipleAssets = function () {
            setVueProps({'asset_type_changed' : false});
        };


        var afterConfirm = function (id) {
            edit(id);
        };


        {{-- //----------------------------------------------------------------------
             // Populate cheque related fields on agreement screen
             //
             // @param string form_id     The id of the form from which field values
             //                           will be pulled
             // @return void
             //----------------------------------------------------------------------
        --}}

        var afterCreateChequeAsset = function (form_id) {
            populateChequeAssetFields(form_id);
            setAssetData(form_id);
        };



        {{-- //----------------------------------------------------------------------
             // Populate invoice, vehicle, equipment related fields on agreement screen
             //
             // @param string form_id     The id of the form from which field values
             //                             will be pulled
             // @return void
             //----------------------------------------------------------------------
        --}}

        var afterCreateMultipleAssets = function (form_id) {
            populateMultipleAssetFields(form_id);
            setVueProps({'asset_type_changed' : false});
            setAssetData(form_id);
        };


        {{-- //----------------------------------------------------------------------
             // Update payment table
             //
             // @param Object response    JSON object containing payment rows
             //
             // @return void
             //----------------------------------------------------------------------
        --}}
        var afterCreatePayment = function (response) {
            if (response.rows) {
                $('#tbl_payment').bootstrapTable('load', response.rows);
            }
            setVueProps({'can_unconfirm' : response.can_unconfirm});
            setRetentionRefunded(response.retention_refunded);
        };


        {{-- //----------------------------------------------------------------------
             // Populate property related fields on agreement screen
             //
             // @param string form_id     The id of the form from which field values
             //                           will be pulled
             // @return void
             //----------------------------------------------------------------------
        --}}

        var afterCreatePropertyAsset = function (form_id) {
            populatePropertyAssetFields(form_id);
            setAssetData(form_id);
        };

        {{-- //----------------------------------------------------------------------
            // Populate right related fields on agreement screen
            //
            // @param string form_id     The id of the form from which field values
            //                           will be pulled
            // @return void
            //----------------------------------------------------------------------
        --}}

        var afterCreateRightAsset = function (form_id) {
            populateRightAssetFields(form_id);
            setAssetData(form_id);
        };


        var afterDelete = function (client_id) {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + client_id;
        };


        var afterDiscount = function (id) {
            edit(id);
        };

        {{-- //----------------------------------------------------------------------
            // Populate fields related to 'multiple' assets
            //
            // Display message prompting user to click 'update' to
            // save agreement values that have been affected by alterations to
            // assets
            //
            // @param integer agreement_id   The agreement id
            // @param string form_id         The id of the form element from which
            //                               field values will be pulled
            // @return void
            //----------------------------------------------------------------------
        --}}

        var afterEditMultipleAssets = function (agreement_id, form_id) {
            populateMultipleAssetFields(form_id);
            populateAssetDisplayFields();
            fetchAssets(agreement_id);
            hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.assets.update_warning')) }}",'warning', true);
        };

        {{-- //----------------------------------------------------------------------
            // Populate cheque related fields on agreement screen
            // Display message prompting user to click 'update' to
            // save agreement values that have been affected by alterations to
            // cheque
            //
            // @param string form_id     The id of the form element from which
            //                           field values will be pulled
            // @return void
            //----------------------------------------------------------------------
        --}}

        var afterEditChequeAsset = function (form_id) {
            populateChequeAssetFields(form_id);
            populateAssetDisplayFields();
            hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.assets.update_cheque_warning')) }}",'warning', true);
        };


        {{-- //----------------------------------------------------------------------
            // Populate property related fields on agreement screen
            // Display message prompting user to click 'update' to
            // save agreement values that have been affected by alterations to
            // cheque
            //
            // @param string form_id     The id of the form element from which
            //                           field values will be pulled
            // @return void
            //----------------------------------------------------------------------
        --}}

        var afterEditPropertyAsset = function (form_id) {
            populatePropertyAssetFields(form_id);
            populateAssetDisplayFields();
            hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.assets.update_property_warning')) }}",'warning', true);
        };


        {{-- //----------------------------------------------------------------------
            // Populate cheque related fields on agreement screen
            // Display message prompting user to click 'update' to
            // save agreement values that have been affected by alterations to
            // cheque
            //
            // @param string form_id     The id of the form element from which
            //                           field values will be pulled
            // @return void
            //----------------------------------------------------------------------
        --}}

        var afterEditRightAsset = function (form_id) {
            populateRightAssetFields(form_id);
            populateAssetDisplayFields();
            hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.assets.update_right_warning')) }}",'warning', true);
        };


        var afterGenerateInvoice = function (id) {
            edit(id);
        };


        var afterUnConfirm = function (id) {
            edit(id);
        };

        {{-- //----------------------------------------------------------------------
            // Populate certain field values in cheque form
            //
            // @param string form_id The id of the cheque form element
            // @return void
            //----------------------------------------------------------------------
        --}}

        var beforeEditChequeAsset = function (form_id) {
            {{--
                // Called in agreement.asset.cheque.edit , agreement.asset.cheque.create}}
                // See agreement.asset.cheque.form for #payment_term_id
            --}}

            var payment_term_id = getAssetPaymentTermId();
            $('#' + form_id + ' #cheque_payment_term_id').val(payment_term_id);
        };

        {{-- //----------------------------------------------------------------------
            // Populate certain field values in property form
            //
            // @param string form_id The id of the property form element
            // @return void
            //----------------------------------------------------------------------
        --}}

        var beforeEditPropertyAsset = function (form_id) {
            {{--
                // Called in agreement.asset.property.edit , agreement.asset.property.create}}
                // See agreement.asset.property.form for #property_payment_term_id
            --}}

            var payment_term_id = getAssetPaymentTermId();
            $('#' + form_id + ' #property_payment_term_id').val(payment_term_id);
        };





        {{-- //----------------------------------------------------------------------
            // Populate certain field values in right form
            //
            // @param string form_id The id of the cheque form element
            // @return void
            //----------------------------------------------------------------------
        --}}

        var beforeEditRightAsset = function (form_id) {
            {{--
                // Called in agreement.asset.right.edit , agreement.asset.right.create}}
                // See agreement.asset.right.form for #payment_term_id
            --}}

            var payment_term_id = getAssetPaymentTermId();
            $('#' + form_id + ' #right_payment_term_id').val(payment_term_id);
        };

        {{-- //----------------------------------------------------------------------
            // Calculate due date from payment terms
            //
            // @param Moment object  from_date   Date from which due date is to be calculated
            //
            // @return string formatted as DD/MM/YYYY
            //----------------------------------------------------------------------
        --}}

        var calcDueDate = function (from_date) {

            var facility_id;
            var cut_off_day;
            var term_days;
            var term_statement;
            var day;
            var add_months;
            var due_date;


            if (!from_date) {
                return '';
            }

            day = from_date.get('day');
            facility_id = getDebtorFacilityId();
            if ((facility_id !== undefined) && (facility_id !== null)) {
                cut_off_day = getDebtorCutOffDay();
                term_days = getDebtorTermDays();
                term_statement = getDebtorTermStatement();

                if (term_statement) {
                    add_months = Math.floor(term_days / 30);
                    if (day > cut_off_day) {
                        add_months++;
                    }
                    due_date = from_date.clone().add(add_months, "months").endOf("month");
                } else {
                    due_date = from_date.clone().add(term_days, "days");
                }

                return due_date.format(hilbit.getDateFormat());
            }
        };

        {{--//----------------------------------------------------------------------
            // Redirect to edit specified agreement
            //
            // @param integer    id  agreement id
            // @return void
            //----------------------------------------------------------------------
        --}}

        var edit = function (id) {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + id + '/edit';
        };


        var fetchAssets = function (id) {
            var url =  "{{ url('api/agreement') }}" + '/' + id + '/assets/fetch';
            hilbit.ui.fetchHasMany(id, url);
        }


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


        var getAgreementType = function () {
            @if (isset($active_record))
            return $('#type_id').val();
            @else
            return $('#type_id option:selected').val();
            @endif
        };


        var getAssetData = function()
        {
            return asset_data;
        };

        /*******************************************************************************
        * Get due date from agreement.asset.invoice.form
        *
        * @return string
        *
        *******************************************************************************/
        var getAssetsDueDate = function () {
            // See agreement.asset.invoice.form for #assets_header_due_date
            var due_date = $('#assets_header_due_date').val();

            return due_date;
        };

        var getAssetPaymentTermId = function () {
            return getVueProp('asset_payment_term_id');
        };


        var getAssetType = function () {
            var selected_asset_type;

            @if (isset($active_record))
                selected_asset_type = $('#asset_type_id');
            @else
                selected_asset_type = $('#asset_type_id option:selected');
            @endif

            if (selected_asset_type.data('vehicle') == 1) {
                return 'vehicle';
            }

            if (selected_asset_type.data('equipment') == 1) {
                return 'equipment';
            }

            if (selected_asset_type.data('invoice') == 1) {
                return 'invoice';
            }

            if (selected_asset_type.data('discount_right') == 1) {
                return 'discount_right';
            }

            if (selected_asset_type.data('cheque') == 1) {
                return 'cheque';
            }

            if (selected_asset_type.data('property') == 1) {
                return 'property';
            }
        };

        var getAssociateSelectElement = function () {
            return $('#associate-select [name="provider_id"]');
        };


        var getClientVatRegistered = function () {
            return _client_vat_registered;
        };


        var getDebtor = function () {
            @if (isset($active_record))
            return $('#type_id').data('debtor');
            @else
            return $('#type_id option:selected').data('debtor');
            @endif
        };



        var getDebtorCutOffDay = function () {
            return getVueProp('debtor_cut_off_day');
        };


        var getDebtorFacilityId = function () {
            return getVueProp('debtor_facility_id');
        };


        var getDebtorSelectElement = function () {
            return $('#debtor-select [name="provider_id"]');
        };


        var getDebtorTermDays = function () {
            return getVueProp('debtor_term_days');
        };


        var getDebtorTermStatement = function () {
            return getVueProp('debtor_term_statement');
        };

        {{--//----------------------------------------------------------------------
            // Has retention refund payment been made against the
            // agreement currently being viewed / edited?
            //
            // @return boolean
            //----------------------------------------------------------------------
        --}}

        var getRetentionRefunded = function () {
            return hilbitAgreement.retention_refunded;
        }


        var getSupplier = function () {
            @if (isset($active_record))
            return $('#type_id').data('supplier');
            @else
            return $('#type_id option:selected').data('supplier');
            @endif
        };


        var getSupplierSelectElement = function () {
            return $('#supplier-select [name="provider_id"]');
        };


        var getSupplierVatRegistered = function () {
            return getVueProp('supplier_vat_registered');
        };

        var getSumAssetsField = function () {
            @if (isset($active_record))
                return $('#type_id').data('sum_assets_field');
            @else
                return $('#type_id option:selected').data('sum_assets_field');
            @endif
        }

        var getVueProp = function(prop) {
            return hilbit.utils.getVueProp(agreement_vue, prop);
        };


        var isDiscountAgreement = function()
        {
            @if (isset($active_record))
            return $('#type_id').data('discount');
            @else
            return $('#type_id option:selected').data('discount');
            @endif
        };


        var isFactoringAgreement = function()
        {
            @if (isset($active_record))
                return $('#type_id').data('factoring');
            @else
                return $('#type_id option:selected').data('factoring');
            @endif
        };


        /*******************************************************************************
        * Is the current agreement an instalment sale agreement
        *
        * @return boolean
        *
        */
        var isInstalmentSaleAgreement = function()
        {
            return getVueProp('instalment_sale_product');
        };



        var isInvoiceDiscountAgreement = function()
        {
            @if (isset($active_record))
                return $('#type_id').data('invoice_discount');
            @else
                return $('#type_id option:selected').data('invoice_discount');
            @endif
        };

        /*******************************************************************************
        * Is the current agreement a lease agreement
        *
        * @return boolean
        *
        */
        var isLeaseAgreement = function()
        {
            return getVueProp('lease_product');
        };

        /*******************************************************************************
        * Is the current agreement a lending product
        *
        * @return boolean
        *
        */
        var isLendingAgreement = function()
        {
            return getVueProp('lending_product');
        };




        var makeBadDebt = function(id)
        {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + id + '/make-bad-debt';
        };


        var makePaidUp = function(id)
        {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + id + '/make-paid-up';
        };


        /**
         * Should vat be added to assets?
         *
         * Add vat in either of the following circumstances :
         * 1) the agreement is not an instalment sale agreement but is associated with a supplier
         *    and the supplier is vat registered.
         * 2) The agreement is associated with a debtor and the corresponding client is vat
         *    registered.
         *
         * @return boolean
        */

        var mustAddVatToAssets = function (id) {
            return ((getSupplier() && getSupplierVatRegistered() && !isInstalmentSaleAgreement()) ||
               (getDebtor() && getClientVatRegistered()));
        }


        var onAssetTypeChange = function (option) {
            setVueProps({'asset_type_changed' : true,
                        'asset_type_id' : option.val()});

            // Set agreement descripion to default value for the asset type
            $('#description').val(option.data('agreement_description'));
        };



        var onProviderChange = function (option, debtor, supplier) {
            var facilities;
            var agreement_type_id;
            var asset_type = getAssetType();

            setVueProps({'debtor_term_days'         : null,
                         'debtor_cut_off_day'       : null,
                         'debtor_term_statement'    : null,
                         'debtor_facility_id'       : null,
                         //'debtor_payment_term_id'   : null,
                         'asset_payment_term_id'    : null,
                         'supplier_term_days'       : null,
                         //'supplier_payment_term_id' : null,
                         'supplier_term_statement'  : null,
                         'supplier_vat_registered'  : null
                         });

            $('#supplier_discount_percent').val('');

            if (debtor) {
                setFacilityValues(option);

                if ($('#discount-start-date-picker').length) {
                    from_date = $('#discount-start-date-picker').data("DateTimePicker").date();
                    updateDiscountDueDate(from_date);
                }
            }

            if (supplier) {
                setSupplierValues(option);
                if (getVueProp('instalment_sale_product')) {
                    $('#supplier_discount_percent').val(option.data('facility_discount_percent'));
                }
            }

            if (option.val() == "") {
                setVueProps({'create_assets' : false,
                             'create_property' : false,
                             'create_right' : false,
                             'create_cheque' : false,
                             'provider_name' : null});
            }
            else {
                setVueProps({'provider_name' : option.text()});

                switch (asset_type) {
                    case 'property':
                        setVueProps({'create_property' : true});
                        break;

                    case 'discount_right':
                        setVueProps({'create_right' : true});
                        break;

                     case 'cheque':
                        setVueProps({'create_cheque' : true});
                        break;

                    case 'invoice':
                    case 'equipment':
                    case 'vehicle':
                        setVueProps({'create_assets' : true});
                        break;
                }
            }
        };


        var onReadvanceChange = function (readvance_element) {
            var reschedule_element = null;
            var total_element = null;
            var total_amount = null;
            var readvance_amount = parseFloat(readvance_element.val());

            if (isInstalmentSaleAgreement()) {
                reschedule_element = $('#reschedule_cash_amount');
                total_element = $('#asset_cash_amount');
            } else if (isLeaseAgreement()) {
                reschedule_element = $('#reschedule_total_cost');
                total_element = $('#total_cost');
            } else if (isLendingAgreement()) {
                reschedule_element = $('#reschedule_total_advanced');
                total_element = $('#total_advanced');
            }

            if (total_element !== null) {
                reschedule_amount = parseFloat(reschedule_element.val());

                if (!isNaN(readvance_amount)) {
                    total_amount = reschedule_amount + readvance_amount;
                } else {
                    total_amount = reschedule_amount;
                }
                total_element.val(total_amount.toFixed(2));

            }

        };


        var onTypeChange = function(option) {
            var type_id;

            removeAlerts();
            setVueProps({   'select_asset_type': false,
                            'select_debtor' : false,
                            'select_supplier' : false,
                            'select_associate' : false,
                            'disable_debtor' : true,
                            'debtor_description': '',
                            'disable_supplier' :true,
                            'disable_associate' :true,
                            'create_assets': false,
                            'create_property' : false,
                            'create_right' : false,
                            'create_cheque' : false,
                            'asset_type_changed' : true,
                            'asset_type_id': null,
                            'agreement_type_id' : null,
                            'lease_product' : false,
                            'instalment_sale_product' : false,
                            'lending_product' : false});

            if (option.val() == "") {
                type_id = 0;
                $("#form-content").hide();
            } else {
                type_id = option.val();

                // Fetch form content (dependent on agreement type)
                $.ajax({
                        url: "{!! url('api/agreement') !!}" + "/" + {{$client->id}} + "/new/" + type_id
                })
                .done( function (response) {
                    var asset_type_ids = option.data('asset_type_ids');

                    setVueProps({'agreement_type_id': option.val()});

                    // Form
                    $("#form-content").html(response.form);
                    hilbit.ui.attachFormValidation('fm_agreement');
                    hilbit.ui.attachDatePicker('agreement-details');
                    $('#agreement-details #discount-start-date-picker').on("dp.change", function (event) {
                       updateDiscountDueDate(event.date);
                    });

                    hilbit.ui.attachBSTable();
                    hilbit.ui.activateTab($("#agreement_main_tab"));
                    $("#form-content").show();

                    // Only include those asset types (in dropdown) that are associated with
                    // the selected agreement type.
                    showAssetTypes(option.data('asset_type_ids'));
                    $('#asset_type_id').trigger("change");

                    // Only include those debtors (in drop down) that have facilities for the
                    // selected agreement type.
                    showDebtors(option.val());

                    if (option.data('instalment_sale_product') == 1) {
                        hilbitAgreement.setVueProps({'instalment_sale_product': true});
                    }

                    if (option.data('lending_product') == 1) {
                        hilbitAgreement.setVueProps({'lending_product': true});
                    }

                    if (option.data('lease_product') == 1) {
                        hilbitAgreement.setVueProps({'lease_product': true});
                    }

                    if (option.data('debtor') == 1) {
                        setVueProps({'select_debtor': true,
                                     'disable_debtor' : false,
                                     'debtor_description' : option.data('provider_description') });
                        getDebtorSelectElement().trigger("change");
                    }

                    if (option.data('supplier') == 1) {
                        setVueProps({'select_supplier' : true, 'disable_supplier': false});
                        getSupplierSelectElement().trigger("change");
                    }

                    if (option.data('associate') == 1) {
                        setVueProps({'select_associate': true, 'disable_associate' : false});
                        getAssociateSelectElement().trigger("change");
                    }

                    $('#interest_rate').val(option.data('client_facility_interest_rate'));
                    $('#discount_rate').val(option.data('client_facility_discount_rate'));
                })
                .fail( function (jqXHR, textStatus, errorThrown) {
                // in hilbit-global.js
                    hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
                });
            }
        };

        var populateAssetDisplayFields = function () {
            var display_name;
            var asset_type = getAssetType();

            switch (asset_type) {
                case 'property':
                    display_name = 'property';
                    break;
                case 'cheque':
                    display_name = 'cheque';
                    break;
                case 'discount_right':
                    display_name = 'right';
                    break;
                case 'vehicle':
                case 'equipment':
                case 'invoice':
                    display_name = 'assets_header';
                    break;
                default:
                   return;
            }

            $("[name^='display_" + display_name + "']").each(function (index) {
                input_field = $(this).attr('name').substring(8);

                if ($(this).data('hilbit-select')) {
                    display_value = $('#' + input_field + ' option:selected').text();
                }
                else {
                    display_value = $('#' + input_field).val();
                }

                if ($(this).data('hilbit-currency')) {
                    display_value = hilbit.ui.formatCurrency(display_value);
                }

                $(this).html(display_value);
            });
        };


        {{-- //----------------------------------------------------------------------
            // Update agreement fields whose values are determined by cheque asset fields
            //
            // @param    string  form_id The id of the form from which asset values
            //                           are to be pulled
            // @return boolean
            //----------------------------------------------------------------------
        --}}

        var populateChequeAssetFields = function (form_id) {
            var cheque_amount = parseFloat($('#' + form_id + ' #cheque_amount').val()).toFixed(2);
            $('#face_value').val(cheque_amount);
        };

        {{-- //----------------------------------------------------------------------
            // Update agreement fields whose values are determined by multiple assets
            //
            // @param    string  form_id The id of the form from which asset values
            //                           are to be pulled
            // @return boolean
            //----------------------------------------------------------------------
        --}}

        var populateMultipleAssetFields = function (form_id) {
            var asset_type = getAssetType();
            var discount_due_date;
            var sum_assets_field = getSumAssetsField();
            var sum_assets = sumAssets(form_id);

            if (sum_assets_field) {
                $('#' + sum_assets_field).val(sum_assets);
            }

            switch (asset_type) {
                case 'invoice':
                    discount_due_date = moment(getAssetsDueDate(), hilbit.getDateFormat());
                    $('#discount-due-date-picker').data("DateTimePicker").date(discount_due_date);
                    updateDiscountStartDate(discount_due_date);
                    break;

                default:
                    break;
            }
        };


        {{-- //----------------------------------------------------------------------
            // Update agreement fields whose values are determined by property asset fields
            //
            // @param    string  form_id The id of the form from which asset values
            //                           are to be pulled
            // @return boolean
            //----------------------------------------------------------------------
        --}}

        var populatePropertyAssetFields = function (form_id) {
            var property_amount = parseFloat($('#' + form_id + ' #property_amount').val()).toFixed(2);
            $('#face_value').val(property_amount);
        };


        {{-- //----------------------------------------------------------------------
            // Update agreement fields whose values are determined by right asset fields
            //
            // @param    string  form_id The id of the form from which asset values
            //                           are to be pulled
            // @return boolean
            //----------------------------------------------------------------------
        --}}

        var populateRightAssetFields = function (form_id) {
            var right_amount = parseFloat($('#' + form_id + ' #right_amount').val()).toFixed(2);
            $('#face_value').val(right_amount);
        };

        var readvance = function (id) {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + id + '/readvance';
        };

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


        var reschedule = function (id) {
            var url = "{{ url('agreement')}}";

            window.location.href = url + '/' + id + '/reschedule';
        };



        var setChequeAssetData = function (form_id)
        {

        }

        {{-- //----------------------------------------------------------------------
            // Serialize input from asset form for adding to agreement form
            // when submitting new agreement
            //
            // @param string form_id     The id of the form from which input is to be
            //                           pulled
            //
            // @return boolean
            //----------------------------------------------------------------------
        --}}

        var setAssetData = function (form_id) {
            asset_data = $("#" + form_id).find(':input').not('.hilbit-exclude').not('[name="_token"]').serializeArray();
        };


        {{--
        // see agreement.asset.create-multiple and agreement.asset.edit-multiple
        // for calling setMultipeAssetsFormFields
        // hilbitAssets in /resources/assets/js/hilbit-assets-edit.js
        --}}
        var setMultipleAssetsFormFields = function () {
            var payment_term_id = getVueProp('asset_payment_term_id');;
            var term_statement;
            var cut_off_day;
            var term_days;
            var agreement_type_id = getAgreementType();
            var debtor = getDebtor();
            var supplier = getSupplier();

            if (debtor) {
                //payment_term_id = getVueProp('debtor_payment_term_id');
                term_statement = getVueProp('debtor_term_statement');
                cut_off_day = getVueProp('debtor_cut_off_day');
                term_days = getVueProp('debtor_term_days');
                vat_registered = getClientVatRegistered();
                hilbitAssets.setDebtorFields(payment_term_id, term_statement, cut_off_day, term_days, agreement_type_id, vat_registered);
            }

            if (supplier) {
                //payment_term_id = getVueProp('supplier_payment_term_id');
                term_statement = getVueProp('supplier_term_statement');
                term_days = getVueProp('supplier_term_days');
                vat_registered = getSupplierVatRegistered();
                hilbitAssets.setSupplierFields(payment_term_id, term_statement, term_days, vat_registered);
            }
        };


        var setAssetTypeOptions = function () {
             // Populate global array of asset type option values
            $('#asset_type_id').children('option').each(function () {
                asset_type_options.push({'value' : $(this).val()});
            });

            // Store array length
            asset_type_options_length = asset_type_options.length;
        };


        var setAssetVatColumns = function (vat) {
            if (vat) {
                $('#tbl_asset').bootstrapTable('showColumn', 'vat');
                $('#tbl_asset').bootstrapTable('showColumn', 'amount_inclusive');
            } else {
                $('#tbl_asset').bootstrapTable('hideColumn', 'vat');
                $('#tbl_asset').bootstrapTable('hideColumn', 'amount_inclusive');
            }
        };



        var setClientVatRegistered = function (vat_registered) {
            _client_vat_registered = vat_registered;
            setAssetVatColumns(vat_registered);
        };


        var setConfirmButtons = function(confirmed) {
            if (confirmed == 1) {
                $("#unconfirm_agreement").show();
                $("#confirm_agreement").hide();
                $("#confirm-display").show();
                $("#bill_agreement").show();
            } else {
                $("#unconfirm_agreement").hide();
                $("#confirm_agreement").show();
                $("#confirm-display").hide();
                $("#bill_agreement").hide();
            }
        };


        var setDebtorOptions = function () {
             // Populate global array of debtor option values
            $('#debtor-select [name="provider_id"]').children('option').each(function () {
                debtor_options.push({'value' : $(this).val(),
                                     'agreement_types' : $(this).data('agreement_types')});
            });

            // Store array length
            debtor_options_length = debtor_options.length;
        };


        var setFacilityValues = function (option) {
            var facilities = option.data('facilities');
            var agreement_type_id = getAgreementType();

            $.each(facilities, function (index, item) {
                if (item.agreement_type_id == agreement_type_id) {
                    setVueProps({'debtor_term_days'         : item.term_days,
                                 'debtor_cut_off_day'       : item.cut_off_day,
                                 'debtor_term_statement'    : item.term_statement,
                                 'debtor_facility_id'       : item.facility_id,
                                 //'debtor_payment_term_id'   : item.payment_term_id,
                                 'asset_payment_term_id'    : item.payment_term_id});

                    // break out of iteration
                    return false;
                }
            });
        };


        {{--//----------------------------------------------------------------------
            // Set global variable storing whether retention refund payment
            // transaction has been made against agreement being viewed / edited
            //
            // @param boolean refunded
            //
            // @return voide
            //----------------------------------------------------------------------
        --}}

        var setRetentionRefunded = function (refunded) {
            hilbitAgreement.retention_refunded = refunded;
        }

        var setSupplierValues = function (option) {
            setVueProps({//'supplier_payment_term_id' : option.data('payment_term_id'),
                         'asset_payment_term_id' : option.data('payment_term_id'),
                         'supplier_term_statement'  : option.data('term_statement'),
                         'supplier_term_days'       : option.data('term_days'),
                         'supplier_vat_registered'  : option.data('vat_registered')});

            setAssetVatColumns(option.data('vat_registered'));
        };


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


        var setVueProps = function (props) {
            // See resources/assets/js/hilbit-agreement-vue.js for agreement_vue
            hilbit.utils.setVueProps(agreement_vue, props);
        };


        var showAssetTypes = function (asset_type_ids) {
            if (asset_type_ids.length > 0) {
                // Loop through array of stored asset type option values and show those with
                // type_id in selected agreement type's asset_type_id (is array) data attribute.
                // Hide the rest.
                for (var i = 0; i < asset_type_options_length; i++) {
                    if ($.inArray(parseInt(asset_type_options[i].value), asset_type_ids) != -1) {
                       $('#asset_type_id').showOption(asset_type_options[i].value);
                    } else {
                        $('#asset_type_id').hideOption(asset_type_options[i].value);
                    }
                }
            }
            else {
                for (var i = 0; i < asset_type_options_length; i++) {
                    $('#asset_type_id').hideOption(asset_type_options[i].value);
                }
            }

            if ($('#asset_type_id').children('option').length > 0) {
                setVueProps({'select_asset_type': true,
                             'asset_type_id' : $('#asset_type_id option:selected').val()});
            }
        };


        var showDebtors = function (type_id) {
            // Loop through array of stored debtor option values and show those whose
            // allowed agreement type id's includes the given agreement type id.
            // Hide the rest.
            for (var i = 0; i < debtor_options_length; i++) {
                if ($.inArray(parseInt(type_id), debtor_options[i].agreement_types) != -1) {
                   $('#debtor-select [name="provider_id"]').showOption(debtor_options[i].value);
                } else {
                    $('#debtor-select [name="provider_id"]').hideOption(debtor_options[i].value);
                }
            }
        };


        var submitNewAgreement = function () {
            var form_data = [];
            var asset_data = [];
            var data = [];

            if (!$("#fm_agreement").valid()) {
                return;
            }

            form_data = $("#fm_agreement").serializeArray();
            asset_data = getAssetData();
            data = $.merge(form_data, asset_data);

            // Do ajax post
            post_url =  $("#fm_agreement").attr('action');

            $.ajax({
                method: "POST",
                url: post_url,
                data: data
            })
            .done(function( response )
            {
                if (response.warning)
                {
                    alert(response.warning);
                }
                hilbit.ui.alertMessage('hilbit-alert-message-text', response.message, 'info');
                hilbitAgreement.edit(response.id);
            })
            .fail( function(jqXHR, textStatus, errorThrown)
            {
                // in hilbit-global.js
                hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
            });
        };


        /*******************************************************************************
        * Determine the sum of the value of the assets listed in the table in
        * the specified form
        *
        * @param string     form_id     The id of the form element
        *
        * @return boolean
        *
        */
        var sumAssets = function (form_id) {
            var sum_excl = 0;
            var sum_vat = 0;
            // loop through assets and sum amounts
            $('#' + form_id + ' #tbl-asset-edit tr').not('thead tr, tfoot tr').each(function () {
                var row = $(this);

                if (!row.hasClass('hilbit-exclude')) {
                    quantity = row.find('input.asset-quantity').val();
                    unit_price = row.find('input.asset-unit-price').val();
                    sum_excl += parseFloat(quantity) * parseFloat(unit_price);
                }
            });

            if (mustAddVatToAssets()) {
                    sum_vat = Number(parseFloat(sum_excl) * hilbit.getVatPercent() / 100);
            }

            return Number(sum_excl + sum_vat).toFixed(2);
        };


        var unArchive = function(id)
        {
            var url = "{{ url('agreement')}}";
            window.location.href = url + '/' + id + '/un-archive';
        };


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




        var updateDiscountDueDate = function (from_date)
        {
            var due_date;

            if (!isFactoringAgreement() && !isInvoiceDiscountAgreement())
            {
                due_date = calcDueDate(from_date);
                $('#discount_due_date').val(due_date);
            }
        };


        /*******************************************************************************
        * Update discount start date working back from given date
        *
        * @param Moment object  date   Date from which start date is to be calculated
        *
        * @return void
        */

        var updateDiscountStartDate = function(date)
        {
            var facility_id;
            var cut_off_day;
            var term_days;
            var term_statement;
            var sub_months;
            var start_date;

            if (isFactoringAgreement() || isInvoiceDiscountAgreement())
            {
                if (date == null)
                {
                    $('#discount_start_date').val('');
                }
                else
                {
                    facility_id = getDebtorFacilityId();
                    if ((facility_id !== undefined) && (facility_id !== null))
                    {
                        cut_off_day = getDebtorCutOffDay();
                        term_days = getDebtorTermDays();
                        term_statement = getDebtorTermStatement();

                        if (term_statement == 1)
                        {
                            sub_months = Math.floor(term_days / 30) - 1;
                            start_date = date.clone().subtract(sub_months, "months").startOf("month");
                        }
                        else
                        {
                            start_date = date.clone().subtract(term_days, "days");
                        }
                        $('#discount_start_date').val(start_date.format('DD/MM/YYYY'));
                    }
                }
            }

        };


        var updateInterestRates = function(interest_rate, discount_rate)
        {
            $('#interest_rate').val(interest_rate);
            $('#discount_rate').val(interest_rate);
        };


        return {
            activate: activate,
            afterArchive: afterArchive,
            afterCancelCreateMultipleAssets : afterCancelCreateMultipleAssets,
            afterConfirm : afterConfirm,
            afterCreateMultipleAssets : afterCreateMultipleAssets,
            afterCreateChequeAsset : afterCreateChequeAsset,
            afterCreatePayment : afterCreatePayment,
            afterCreatePropertyAsset : afterCreatePropertyAsset,
            afterCreateRightAsset : afterCreateRightAsset,
            afterDelete: afterDelete,
            afterDiscount: afterDiscount,
            afterEditChequeAsset : afterEditChequeAsset,
            afterEditMultipleAssets : afterEditMultipleAssets,
            afterEditPropertyAsset : afterEditPropertyAsset,
            afterEditRightAsset : afterEditRightAsset,
            afterGenerateInvoice : afterGenerateInvoice,
            afterUnConfirm : afterUnConfirm,
            beforeEditChequeAsset : beforeEditChequeAsset,
            beforeEditPropertyAsset : beforeEditPropertyAsset,
            beforeEditRightAsset : beforeEditRightAsset,
            calcDueDate : calcDueDate,
            edit: edit,
            fetchHasMany : fetchHasMany,
            getDebtor : getDebtor,
            getSupplier : getSupplier,
            getRetentionRefunded : getRetentionRefunded,
            isDiscountAgreement : isDiscountAgreement,
            makeBadDebt : makeBadDebt,
            makePaidUp : makePaidUp,
            onAssetTypeChange : onAssetTypeChange,
            onProviderChange : onProviderChange,
            onReadvanceChange : onReadvanceChange,
            onTypeChange : onTypeChange,
            reschedule : reschedule,
            readvance : readvance,
            setAssetTypeOptions: setAssetTypeOptions,
            setConfirmButtons : setConfirmButtons,
            setClientVatRegistered : setClientVatRegistered,
            setDebtorOptions : setDebtorOptions,
            setFacilityValues : setFacilityValues,
            setMultipleAssetsFormFields : setMultipleAssetsFormFields,
            setRetentionRefunded : setRetentionRefunded,
            setSupplierValues : setSupplierValues,
            settle : settle,
            setVueProps : setVueProps,
            showDebtors : showDebtors,
            submitNewAgreement : submitNewAgreement,
            unArchive: unArchive,
            updateDiscountDueDate : updateDiscountDueDate
        };
    }();

    $(function () {

        hilbit.processTree.init($('#agreement_process_tree'), {!!$process_tree!!});
        hilbit.ui.attachOnSearch('tbl_agreement', 'agreement');
        hilbit.ui.attachFormValidation('fm_agreement');
        hilbit.ui.attachDatePicker('agreement-details');

        hilbitAgreement.setAssetTypeOptions();
        hilbitAgreement.setDebtorOptions();
        hilbitAgreement.setClientVatRegistered({{ $client_vat_registered }});

        @if ($can_unconfirm)
        hilbitAgreement.setVueProps({'can_unconfirm' : true });
        @else
        hilbitAgreement.setVueProps({'can_unconfirm' : false });
        @endif

        $('#discount-start-date-picker').on("dp.change", function (event) {
            hilbitAgreement.updateDiscountDueDate(event.date);
        });

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

        @if (isset($active_record))
            @if ($errors->any())
                hilbit.ui.activateTab($('#agreement_main_tab'));
            @else
                hilbit.ui.activateTab($('#agreement_dashboard_tab'));
            @endif

            $('#row_agreement_{{ $active_record->id }}').addClass('success').siblings().removeClass('success');

            @if ($active_record->lease_product)
                hilbitAgreement.setVueProps({'lease_product' : true});
            @endif

            @if ($active_record->instalment_sale_product)
                hilbitAgreement.setVueProps({'instalment_sale_product' : true});
            @endif

            @if ($active_record->lending_product)
                hilbitAgreement.setVueProps({'lending_product' : true});
            @endif

            hilbitAgreement.setVueProps({'asset_type' : '{{ $active_record->assets }}'});
            hilbitAgreement.fetchHasMany({{ $active_record->id }});
            hilbitAgreement.setRetentionRefunded({{ $active_record->retention_refunded }});

        @else
            hilbit.ui.activateTab($('#agreement_main_tab'));
        @endif


        hilbit.ui.attachNavPillsClick();

        $("#agreement_form").on("change", '#type_id', function (event) {
            var option = $('option:selected', this);
            hilbitAgreement.onTypeChange(option);
        });

        $("#agreement_form").on("change", '#asset_type_id', function (event) {
            var option = $('option:selected', this);
            hilbitAgreement.onAssetTypeChange(option);
        });

        $("#agreement_form").on("change", '.provider-select', function () {
            var option = $('option:selected', this);
            var debtor = $(this).data('debtor-select');
            var supplier = $(this).data('supplier-select');

            hilbitAgreement.onProviderChange(option, debtor, supplier);
        });

        $("#agreement_form").on("change",'#readvance_amount', function () {
            hilbitAgreement.onReadvanceChange($(this));

        });



        @if (isset($active_record))

            {{--
            // Trigger provider on change if agreement has not yet been confirmed
            // Once agreement has been confirmed the provider and associated
            // fields, e.g. payment terms are fixed and stored with the agreement and
            // its associated assets
            --}}

            @if ($active_record->confirmed)
                @if ($active_record->assets_added)
                    hilbitAgreement.setVueProps({
                        'provider_name' : '{{ $active_record->provider_code_name }}',
                        'asset_payment_term_id' : '{{ $active_record->asset_payment_term_id}}' });
                @endif
            @else
            // Trigger change in provider to set vue properties
            $('[name="provider_id"]').change();
            @endif
        @endif

        $('.has-many-table').on('click', '.has-many-edit', function (event) {
            var table = $(event.delegateTarget);
            var has_many_id = $(this).data('id');
            var has_many_edit_url =  table.data('edit-url');
            var has_many_edit_title = table.data('edit-form-title');
            var has_many_table = table.attr('id');

            hilbitAgreement.setVueProps({ 'edit_has_many' : false });

            // Wait for vue to finish updating
            Vue.nextTick(function () {
                hilbitAgreement.setVueProps({'has_many_id' : has_many_id,
                                        'has_many_edit_url' : has_many_edit_url,
                                        'has_many_edit_title': has_many_edit_title,
                                        'has_many_table' : has_many_table,
                                        'edit_has_many' : true});

            });
        });


        $('.has-many-table').on('click', '.has-many-delete', function (event) {
            var table = $(event.delegateTarget);
            var has_many_id = $(this).data('id');
            var has_many_delete_url =  table.data('delete-url');
            var has_many_delete_title = table.data('delete-form-title');
            var has_many_delete_message = $(this).data('message');
            var has_many_table = table.attr('id');

            hilbitAgreement.setVueProps({ 'delete_has_many' : false });

            // Wait for vue to finish updating
            Vue.nextTick(function () {

                hilbitAgreement.setVueProps({'has_many_id' : has_many_id,
                                        'has_many_delete_url' : has_many_delete_url,
                                        'has_many_delete_title': has_many_delete_title,
                                        'has_many_delete_message': has_many_delete_message,
                                        'has_many_table' : has_many_table,
                                        'delete_has_many' : true});
            });

        });

        $("#fm_agreement").submit(function (event) {

            if (hilbitAgreement.isDiscountAgreement()) {
                $('#face_value').prop("disabled", false);
            }

            @if (!isset($new_agreement))
                return true;
            @else
                event.preventDefault();
                hilbitAgreement.submitNewAgreement();
            @endif
        });

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


        $('#tbl_payment').on('expand-row.bs.table', function(e, index, row, $detail) {
            //var html = '<strong>Comment : </strong>' + row.comment + '<br>' +
            //'<strong>Detail : </strong>' + row.detail;
            var html = '<strong>Detail : </strong>' + row.detail;
            $detail.html(html);
        });
    });

</script>

@stop