@extends('layouts.main_without_top_button')
@section('title')
    Route Profile:On Route Costs
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('clients.route-assignments.index')}}">Route Logs</a> <span class="divider">/</span></li>
        <li class="active">On Route Cost</li>
    </ul>
@stop
@section('contentinner')
    <style>
        table tbody td .number {
            text-align: right;
        }

        td.details-control {
            background: url('{{ URL::asset('img/details_open.png') }}') no-repeat center center;
            cursor: pointer;
        }

        tr.details td.details-control {
            background: url('{{ URL::asset('img/details_close.png') }}') no-repeat center center;
        }
    </style>
    <div class="tabbable">
        @include('operations.route_assignments.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active" style="min-height: 450px">
                <br>
                <table class="table table-bordered table-condensed" id="payments-vouchers-list-1">
                    <thead>
                    <tr>
                        <th class="head0 nosort" style="width: 20px"><input type="checkbox" class="checkall"/></th>
                        <th class="head0" style="width: 20px">MORE</th>
                        <th class="head0" style="width: 20px">PVNO.</th>
                        <th class="head1" style="width: 90px">Date</th>
                        <th class="head1">Paid By</th>
                        <th class="head0">Cr</th>
                        <th class="head0">Received By</th>
                        {{--<th class="head0">Reference</th>--}}
                        <th class="head1">Remarks</th>
                        <th class="head0">Amount</th>
                        <th style="width: 60px">Action</th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div>
    </div>
    {{--@include('cash_books.payment_vouchers.includes.payment_voucher_modals')--}}
    <script type="text/javascript" src="{{asset('js/logistics/logistics-accounts.js')}}"></script>
    <script>
        jQuery('.make_payment_date').datepicker();
        jQuery('.searchable_payment_voucher_select').select2();
        loadPaymentVoucherDetails();
        onChangeExpenseType();
        populate();
        addMorePaymentVoucherItems();


        var oTable = jQuery('#payments-vouchers-list-1').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading Goods Received Note...",
                "sZeroRecords": "No Goods Received Note to Display.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('vouchers.data-table.expense_payments',array('route_assignments'=>$route_assignment->id))}}',
                data: function (d) {
                },
                error: function (xhr, textStatus, error) {
                    if (textStatus === 'timeout') {
                        alert('Timeout error. The server took too long to send back the data.\nPlease try again.');
                    }
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "aoColumnDefs": [{
                "aTargets": [8],
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    jQuery(nTd).css('text-align', 'right')
                    if ((sData == 0.00)) {
                        jQuery(nTd).addClass('highlight-red')
                    }
                }
            }, {
                "aTargets": [9],
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    jQuery(nTd).css('text-align', 'right')
                }
            }],
            "columns": [
                {data: 'checkbox'},
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {"class": "link", data: 'payment_number'},
                {"class": "link", data: 'date_created'},
                {"class": "link number", data: 'paid_by'},
                {"class": "link number", data: 'credit_account'},
                {"class": "link number", data: 'received_by'},
//                {"class": "link number", data: 'reference'},
                {"class": "link number", data: 'remarks'},
                {"class": "link", data: 'amount'},
                {data: 'action'}
            ],
            "fnDrawCallback": function () {
                {{--jQuery('.deleterow_c').click(function () {--}}
                    {{--var conf = confirm('Are you sure?');--}}
                    {{--if (conf)--}}
                        {{--var tr_p = jQuery(this).parents('tr');--}}
                    {{--var payment_voucher_id = tr_p.find('.payment_voucher_id').val();--}}

                    {{--jQuery.ajax({--}}
                        {{--type: "post",--}}
                        {{--cache: false,--}}
                        {{--url: "{{route('payment-vouchers.delete')}}",--}}
                        {{--data: {--}}
                            {{--payment_voucher_id: payment_voucher_id--}}
                        {{--},--}}
                        {{--success: function (data) {--}}
                            {{--if (data == 'DONE') {--}}
                                {{--notify('Payment Voucher Deleted Successful!');--}}
                                {{--jQuery('#payments-vouchers-list-1').dataTable().fnFilter(this.value);--}}
                            {{--} else {--}}
                                {{--alert("Fail To delete Payment Voucher.");--}}
                            {{--}--}}
                        {{--},--}}
                        {{--error: function (data) {--}}

                        {{--}--}}
                    {{--});--}}
                    {{--return false;--}}
                {{--});--}}

                jQuery('.update_payment').click(function () {
                    var tr_p = jQuery(this).parents('tr');
                    var payment_voucher_id = tr_p.find('.payment_voucher_id').val();

                    jQuery.ajax({
                        type: "get",
                        cache: false,
                        url: "{{route('payment-vouchers.edit')}}",
                        data: {
                            payment_voucher_id: payment_voucher_id
                        },
                        success: function (data) {
                            jQuery('#edit_expenses_payments_voucher').empty().append(data);
                            jQuery('#edit_expenses_payments_voucher_modal').appendTo("body").modal('toggle');
                            jQuery('.cost_center_searchable_select').select2();
                            populate();
                            loadAppendRow();
                            onChangeExpenseType();
                            jQuery(".remove_row").on('click', function () {
                                jQuery(this).parent().parent().remove();
                            });
                        },
                        error: function (data) {

                        }
                    });

                    jQuery.ajax({
                        type: "get",
                        cache: false,
                        url: "{{route('payment-vouchers.edit.expense-type')}}",
                        data: {
                            payment_voucher_id: payment_voucher_id
                        },
                        success: function (data) {
                            loadAppendRow(data);
                        },
                        error: function (data) {

                        }
                    });
                    return false;
                });
            },
            "bStateSave": true,
        });

        function format(d) {
            return d.payment_voucher_details;
        }
        // Array to track the ids of the details displayed rows
        var payment_voucher_more = [];

        jQuery('#payments-vouchers-list-1 tbody').on('click', 'tr td.details-control', function () {

            var tr = jQuery(this).closest('tr');
            var row = oTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), payment_voucher_more);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                payment_voucher_more.splice(idx, 1);
            }
            else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    payment_voucher_more.push(tr.attr('id'));
                }
            }
        });

        function onChangeExpenseType() {
            jQuery('.expense_type').on('change', function () {
                var expense_type = jQuery(this);
                //find the modal that contrain the changed Expense Type i.e payment_voucher_item_more_added
                var payment_voucher_item_more_added = expense_type.parents('.modal-body').find('.payment_voucher_item_more_added');
                var append_expenses_details = expense_type.parents('.modal-body').find('.append_expenses_details');
                var expense_type_value = expense_type.val(); //expenses value
                if (expense_type_value) { //on when the value is found
                    jQuery.ajax({
                        url: '{{route('payment-vouchers.payment-items.create')}}',
                        type: 'get',
                        data: {
                            expense_type: expense_type_value
                        },
                        success: function (html) {
                            var html_generator = jQuery('#payment_voucher_item_additional_row');
                            html_generator.empty().append(html); //append the expenses setup under the given payment type above
                            var response = html_generator.find('tr').clone();
                            response.addClass('tempo');
                            response.find('select[name="dr_account_id[]"]').select2();
                            response.find('select[name="currency[]"]').select2();
                            response.find('input[name="amount[]"]').keyup(function (event) {
                                // skip for arrow keys
                                if (event.which >= 37 && event.which <= 40) return;
                                // format number
                                jQuery(this).val(function (index, value) {
                                    var parts = value.toString().split(".");

                                    parts[0] = parts[0].replace(/\D/g, "")
                                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    return parts.join(".");
                                });
                            });
                            response.find('.remove_payment_voucher_item').on('click', function () {
                                jQuery(this).parent().parent().remove();
                            });
                            payment_voucher_item_more_added.empty().append(response);
                            jQuery('.cost_center_searchable_select').select2();

                        }
                    });
                    jQuery.ajax({
                        url: '{{route('payment-vouchers.expenses-types.create')}}',
                        type: 'get',
                        data: {
                            expense_type: expense_type_value
                        },
                        success: function (html) {
                            append_expenses_details.empty().append(html);
                            jQuery('.cost_center_searchable_select').select2();
                        }
                    });
                }
            });
        }

        function loadPaymentVoucherDetails() {
            jQuery('.expense_type').each(function () {
                var expense_type = jQuery(this);
                //find the modal that contrain the changed Expense Type i.e payment_voucher_item_more_added
                var payment_voucher_item_more_added = expense_type.parents('.modal-body').find('.payment_voucher_item_more_added');
                var append_expenses_details = expense_type.parents('.modal-body').find('.append_expenses_details');
                var expense_type_value = expense_type.val(); //expenses value
                if (expense_type_value) { //on when the value is found
                    jQuery.ajax({
                        url: '{{route('payment-vouchers.payment-items.create')}}',
                        type: 'get',
                        data: {
                            expense_type: expense_type_value
                        },
                        success: function (html) {
                            var html_generator = jQuery('#payment_voucher_item_additional_row');
                            html_generator.empty().append(html); //append the expenses setup under the given payment type above

                            var response = html_generator.find('tr').clone();
                            response.addClass('tempo');
                            response.find('select[name="dr_account_id[]"]').select2();
                            response.find('select[name="currency[]"]').select2();
                            response.find('input[name="amount[]"]').keyup(function (event) {
                                // skip for arrow keys
                                if (event.which >= 37 && event.which <= 40) return;
                                // format number
                                jQuery(this).val(function (index, value) {
                                    var parts = value.toString().split(".");

                                    parts[0] = parts[0].replace(/\D/g, "")
                                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    return parts.join(".");
                                });
                            });
                            response.find('.remove_payment_voucher_item').on('click', function () {
                                jQuery(this).parent().parent().remove();
                            });
                            payment_voucher_item_more_added.empty().append(response);
                            jQuery('.cost_center_searchable_select').select2();
                        }
                    });
                    jQuery.ajax({
                        url: '{{route('payment-vouchers.expenses-types.create')}}',
                        type: 'get',
                        data: {
                            expense_type: expense_type_value
                        },
                        success: function (html) {
                            append_expenses_details.empty().append(html);
                            jQuery('.cost_center_searchable_select').select2();
                        }
                    });
                }
            });
        }
        function addMorePaymentVoucherItems() {
            jQuery(".add_another_paymeny_voucher_item").click(function () {
                var payment_voucher_item_more_added = jQuery(this).parents('form').find('.payment_voucher_item_more_added');
                var response = jQuery('#payment_voucher_item_additional_row').find('tr').clone();
                response.addClass('tempo');
                response.find('select[name="dr_account_id[]"]').select2();
                response.find('select[name="currency[]"]').select2();
                response.find('input[name="amount[]"]').keyup(function (event) {
                    // skip for arrow keys
                    if (event.which >= 37 && event.which <= 40) return;
                    // format number
                    jQuery(this).val(function (index, value) {
                        var parts = value.toString().split(".");

                        parts[0] = parts[0].replace(/\D/g, "")
                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        return parts.join(".");
                    });
                });
                response.find('.remove_payment_voucher_item').on('click', function () {
                    jQuery(this).parent().parent().remove();
                });
                payment_voucher_item_more_added.append(response);
            });
        }
        function populate() {
            jQuery('.number_format').keyup(function (event) {
                // skip for arrow keys
                if (event.which >= 37 && event.which <= 40) return;
                jQuery(this).val(function (index, value) {
                    return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                });
            });
        }

        function loadAppendRow(expense_type_id) {

            if (expense_type_id) { //on when the value is found
                jQuery.ajax({
                    url: '{{route('payment-vouchers.payment-items.create')}}',
                    type: 'get',
                    data: {
                        expense_type: expense_type_id
                    },
                    success: function (html) {
                        var html_generator = jQuery('#payment_voucher_item_additional_row');
                        html_generator.empty().append(html); //append the expenses setup under the given payment type above
                    }
                });
            }
        }
    </script>
@stop