@extends('layouts.main_without_top_button')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('clients.index')}}">Clients</a> <span class="divider">/</span></li>
        <li class="active">Journals</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('clients.includes.client_summary')
        <div class="tab-content">

            <div id="glyphs" class="tab-pane active">
                <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                    <ul class="msghead_menu">
                        
                        <li class="right btn-group">
                            <button class="btn" onclick="openAdvancedSearch()" style="margin-right: 2px">
                                <span class="icon-search"></span> &nbsp; FILTER
                            </button>

                        </li>

                        <li class="right btn-group">
                            <div class="btn-group">
                                <a class="btn" href="{{route('credit-notes.invoice-losses.report.index',$client->id)}}">
                                    REPORT
                                </a>
                            </div><!--btn-group-->
                        </li>

                        <li class="right btn-group">
                            <div class="btn-group">
                                <button class="btn" onclick="create('{{route('credit-notes.invoice-losses.create',$client->id)}}')">
                                    <i class="icon-th"></i> &nbsp; LOAD LOSS DETAILS
                                </button>
                            </div>
                        </li>

                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->



                    <div style="margin-bottom: 8px">
                        <div class="row-fluid">
                            <div class="span12">
                                <table class="table table-bordered table-condensed logistics_table" id="journal-vouchers-list-3">
                                    <thead>
                                    <tr>
                                        <th style="width:3%"><input type="checkbox" class="checkall"/></th>
                                        <th style="width: 3%">MORE</th>
                                        <th style="width: 4%">JNVNO.</th>

                                        <th style="width: 10%">Date</th>
                                        <th style="width: 10%">Ref Number</th>
                                        <th style="width: 10%">Exchange Rate</th>
                                        <th style="width: 15%">Amount</th>
                                        <th style="width: 40%">Remarks</th>
                                        <th style="width: 5%">Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div><!--span12-->
                        </div><!--row-fluid-->
                    </div>
       


            </div><!--tab-pane-->
        </div>
    </div>


    <script>
        $('#transaction_date').datepicker();
        $('.searchable_select').select2();


        let mainDataTable = jQuery('#journal-vouchers-list-3').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading Journal Voucher...",
                "sZeroRecords": "No Journal Voucher to Display.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('vouchers.data-table.journals')}}',
                data: function (d) {
                    d.journal_voucher_id = jQuery('#journal_voucher_id').val();
                    d.account_id = jQuery('#account_id').val();
                    d.transaction_date = jQuery('#transaction_date').val();
                    d.grn_id = jQuery('#grn_id').val();
                },
                error: function (xhr, textStatus, error) {
                    if (textStatus === 'timeout') {
                        alert('Timeout error. The server took too long to send back the data.\nPlease try again.');
                    }
                    mainDataTable.fnProcessingIndicator(false);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            // "order": [[ 2, "desc" ]],
            // "aoColumnDefs": [{
            //     "aTargets": [6],
            //     "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
            //         jQuery(nTd).css('text-align', 'right');
            //         if ((sData == 0.00)) {
            //             jQuery(nTd).addClass('highlight-red')
            //         }
            //     }
            // }],

            // "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            //     if ( aData[2] == "5" )
            //     {
            //         $('td', nRow).css('background-color', 'Red');
            //     }
            // },
            "columns": [
                {data: 'checkbox'},
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {"class": "link", data: 'journal_number'},
                {"class": "link", data: 'date'},
                {"class": "link", data: 'reference_number'},
                {"class": "link number", data: 'exchange_rate'},
                {"class": "link", data: 'amount'},
                {"class": "link number", data: 'descriptions'},
                {data: 'action'}
            ],
            "bStateSave": true
        });

        function format(d) {
            return d.journal_voucher_details;
        }


        $('#filter_journal_voucher').on('click', function (e) {
            e.preventDefault();
            mainDataTable.draw();
        });
        // Array to track the ids of the details displayed rows
        var payment_voucher_more = [];

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

            var tr = jQuery(this).closest('tr');
            var row = mainDataTable.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'));
                }
            }
        });


        pupulate();

        function pupulate() {
            jQuery('.payment-voucher-amount').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, ",");
                });
            });
        }


        jQuery('#add_vendor_grn').on('click', function () {
            if (jQuery('#vendor_cr_account_id').val() != 'NONE') {
                jQuery('#vendor_goods_received_notes').appendTo("body").modal({show: true})
            } else {
                alert('SELECT THE VALID VENDOR ACCOUNT');
            }
        });


        jQuery('#vendor_cr_account_id').on('change', function () {
            getGoodReceivedNote();
        });

        getGoodReceivedNote();

        function getGoodReceivedNote() {
            if (jQuery('#vendor_cr_account_id').val() != 'NONE') {
                var vendor_cr_account_id = jQuery('#vendor_cr_account_id').val();
                var good_receive_note_id = [];
                jQuery('.good_receive_note_id').each(function () {
                    good_receive_note_id.push(jQuery(this).val());
                });

                jQuery.ajax({
                    type: "GET",
                    url: "{{route('journal_vouchers.create')}}",
                    data: {
                        vendor_debited_account_id: vendor_cr_account_id,
                        good_receive_note_id: good_receive_note_id,
                    },
                    success: function (data) {
                        jQuery('#added_vendor_grn').empty().append(data);
                        jQuery('.goods_received_note_id').on('change', function () {
                            var table = jQuery(this).parent().parent();

                            var amount = table.find('.amount');
                            var payable = table.find('.payable');
                            var disabled_field = table.find('.disabled_field');
                            disabled_field.each(function () {
                                jQuery(this).removeAttr('disabled');
                            });
//                        var outstanding_amount = table.find('.outstanding_amount');
                            if (this.checked) {
                                payable.val(amount.val());
                            } else {
                                payable.val('');
                                disabled_field.val('');
                                disabled_field.attr({'disabled': 'disabled'});
                            }
                        });

                        jQuery('.discount_amount').on('keyup', function () {
                            var tr = jQuery(this).closest('tr');
                            var payable = tr.find('.payable');
                            var amount = tr.find('.amount').val();
                            var discount_amount = jQuery(this).val();
                            var discount_percent = tr.find('.discount_percent');

                            discount_percent.val(((discount_amount / amount) * 100));
                            payable.val((amount - discount_amount).toLocaleString());

                            getOverAllAmount();
                        });

                        jQuery('.discount_percent').on('keyup', function () {
                            var tr = jQuery(this).closest('tr');
                            var payable = tr.find('.payable');
                            var amount = tr.find('.amount').val();
                            var discount_amount = tr.find('.discount_amount');
                            var discount_percent = jQuery(this).val();


                            discount_amount.val((discount_percent * amount * 0.01));
                            payable.val((amount - (discount_percent * amount * 0.01)).toLocaleString());
                            getOverAllAmount();
                        });

                        jQuery(".remove_good_received_note_from_payment").on('click', function () {
                            jQuery(this).parents('tr').remove();
                        });
                    },
                    error: function (data) {

                    }
                });
            }
        }


        function getOverAllAmount() {
            var over_all_amount = 0;
            jQuery('.payable').each(function () {
                var amount = jQuery(this).val();
                if (amount > 0) {
                    over_all_amount += parseInt(removeComma(jQuery(this).val()));
                }
            });
            jQuery('.over_all_amount').val(over_all_amount.toLocaleString());
        }

        jQuery('#vendor_goods_received_note_edit').click(function () {
            if (jQuery('#vendor_credit_account_edit').val() != 'NONE') {
                jQuery('#vendor_goods_received_notes_edit').appendTo("body").modal({
                    show: true
                })
            } else {
                alert('SELECT THE VALID VENDOR ACCOUNT');
            }
        });

        function getGrnEdit() {
            var cr_account_id = jQuery('#vendor_credit_account_edit').val();
            var journal_voucher_id = jQuery('#journal_voucher_id').val();

            jQuery.ajax({
                type: "GET",
                url: "{{route('journal-vouchers.goods-received-notes.edit')}}",
                data: {
                    cr_account_id: cr_account_id,
                    journal_voucher_id: journal_voucher_id
                },
                success: function (data) {
                    jQuery('#grn_selection_option_edit').empty().append(data);

                    jQuery('.edit_goods_received_note_id').on('change', function () {
                        var table = jQuery(this).parent().parent();

                        var amount = table.find('.amount');
                        var payable = table.find('.payable');
                        var disabled_field = table.find('.disabled_field');
                        disabled_field.each(function () {
                            jQuery(this).removeAttr('disabled');
                        });
//                        var outstanding_amount = table.find('.outstanding_amount');
                        if (this.checked) {
                            payable.val(amount.val());
                        } else {
                            payable.val('');
                            disabled_field.val('');
                            disabled_field.attr({'disabled': 'disabled'});
                        }
                    });

                    jQuery('.discount_amount').on('keyup', function () {
                        var tr = jQuery(this).closest('tr');
                        var payable = tr.find('.payable');
                        var amount = removeComma(tr.find('.amount').val());
                        var discount_amount = removeComma(jQuery(this).val());
                        var discount_percent = tr.find('.discount_percent');

                        discount_percent.val(((discount_amount / amount) * 100));
                        payable.val((amount - discount_amount).toLocaleString());

                        getOverAllAmount();
                    });

                    jQuery('.discount_percent').on('keyup', function () {
                        var tr = jQuery(this).closest('tr');
                        var payable = tr.find('.payable');
                        var amount = removeComma(tr.find('.amount').val());
                        var discount_amount = tr.find('.discount_amount');
                        var discount_percent = jQuery(this).val();


                        discount_amount.val((discount_percent * amount * 0.01).toLocaleString());
                        payable.val((amount - (discount_percent * amount * 0.01)).toLocaleString());
                        getOverAllAmount();
                    });
                },
                error: function (data) {

                }
            });
        }

        jQuery('#vendor_goods_received_notes_edit').on('hidden.bs.modal', function (e) {
            var invoice_amount = [], text = '', grn_amount_total = 0, grn_amount_before_discount_total = 0,
                grn_discount_amount_total = 0, i = 1;

            jQuery('.edit_goods_received_note_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    var table = jQuery(this).parent().parent();
                    var payable = table.find('.payable');
                    var journal_voucher_item_id = table.find('.journal_voucher_item_id');
                    var journal_voucher_item_description_id = table.find('.journal_voucher_item_description_id');
                    var amount = table.find('.amount');
                    var currency = table.find('.currency');
                    var discount_amount = table.find('.discount_amount');
                    var discount_percent = table.find('.discount_percent');
                    var dr_account_id = table.find('.dr_account_id');
                    text += "<tr>" +
                        "<td>" + i + "</td>" +
                        "<td><input type='hidden' name='goods_received_note_id[]' value='" + jQuery(this).val() + "'> GRN " + jQuery(this).val() + "</td>" +
                        "<td><input type='hidden' name='currency[]' value='" + currency.val() + "'>" + currency.val() + "</td>" +
                        "<td>" +
                        "<input type='hidden' name='journal_voucher_item_id[]' value='" + journal_voucher_item_id.val() + "'>" +
                        "<input type='hidden' name='journal_voucher_item_description_id[]' value='" + journal_voucher_item_description_id.val() + "'>" +
                        "<input type='hidden' name='dr_account_id[]' value='" + dr_account_id.val() + "'>" +
                        "<input type='hidden' name='journal_voucher_item_description_type[]' value='GRN'>" +
                        "<input type='hidden' name='amount[]' value='" + payable.val() + "'>" + amount.val() + "</td>" +
                        "<td><input type='hidden' name='discount_amount[]' value='" + discount_amount.val() + "'>" + discount_amount.val() + "</td>" +
                        "<td><input type='hidden' name='discount_percent[]' value='" + discount_percent.val() + "'>" + discount_percent.val() + "</td>" +
                        "<td style='text-align: right'>" + payable.val() + "</td>" +
                        "</tr>";
                    grn_amount_total += parseFloat(removeComma(payable.val()));
                    grn_amount_before_discount_total += parseFloat(removeComma(amount.val()));
                    grn_discount_amount_total += parseFloat(removeComma(discount_amount.val()));
                    i += 1;
                }
            });

            text += "<tr>" +
                "<td colspan='6' style='text-align: right'>GRNs AMOUNT</td>" +
                "<td style='text-align: right'>" + grn_amount_before_discount_total.toLocaleString() + "</td>" +
                "</tr>";
            text += "<tr>" +
                "<td colspan='6' style='text-align: right'>DISCOUNT AMOUNT</td>" +
                "<td style='text-align: right'>" + grn_discount_amount_total.toLocaleString() + "</td>" +
                "</tr>";
            text += "<tr>" +
                "<td colspan='6' style='text-align: right'>PAYABLE AMOUNT</td>" +
                "<td style='text-align: right'>" + grn_amount_total.toLocaleString() + "</td>" +
                "</tr>";

            if (grn_amount_total > 0) {
                jQuery('#selected_vendor_grn_edit').empty().append(text);
            }
        })
        jQuery('#vendor_goods_received_notes').on('hidden.bs.modal', function (e) {
            var invoice_amount = [], text = '', grn_amount_total = 0, grn_amount_before_discount_total = 0,
                grn_discount_amount_total = 0, i = 1;

            jQuery('.goods_received_note_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    var table = jQuery(this).parent().parent();
                    var payable = table.find('.payable');
                    var amount = table.find('.amount');
                    var currency = table.find('.currency');
                    var discount_amount = table.find('.discount_amount');
                    var discount_percent = table.find('.discount_percent');
                    var dr_account_id = table.find('.dr_account_id');
                    text += "<tr>" +
                        "<td>" + i + "</td>" +
                        "<td><input type='hidden' name='invoice_id[]' value='" + jQuery(this).val() + "'> GRN " + jQuery(this).val() + "</td>" +
                        "<td><input type='hidden' name='currency[]' value='" + currency.val() + "'>" + currency.val() + "</td>" +
                        "<td>" +
                        "<input type='hidden' name='dr_account_id[]' value='" + dr_account_id.val() + "'>" +
                        "<input type='hidden' name='journal_voucher_item_description_type[]' value='GRN'>" +
                        "<input type='hidden' name='journal_voucher_item_description_id[]' value='" + jQuery(this).val() + "'>" +
                        "<input type='hidden' name='amount[]' value='" + payable.val() + "'>" + amount.val() + "</td>" +
                        "<td><input type='hidden' name='discount_amount[]' value='" + discount_amount.val() + "'>" + discount_amount.val() + "</td>" +
                        "<td><input type='hidden' name='discount_percent[]' value='" + discount_percent.val() + "'>" + discount_percent.val() + "</td>" +
                        "<td style='text-align: right'>" + payable.val() + "</td>" +
                        "</tr>";
                    grn_amount_total += parseFloat(removeComma(payable.val()));
                    grn_amount_before_discount_total += parseFloat(removeComma(amount.val()));
                    grn_discount_amount_total += parseFloat(removeComma(discount_amount.val()));
                    i += 1;
                }
            });

            text += "<tr>" +
                "<td colspan='6' style='text-align: right'>GRNs AMOUNT</td>" +
                "<td style='text-align: right'>" + grn_amount_before_discount_total.toLocaleString() + "</td>" +
                "</tr>";
            text += "<tr>" +
                "<td colspan='6' style='text-align: right'>DISCOUNT AMOUNT</td>" +
                "<td style='text-align: right'>" + grn_discount_amount_total.toLocaleString() + "</td>" +
                "</tr>";
            text += "<tr>" +
                "<td colspan='6' style='text-align: right'>PAYABLE AMOUNT</td>" +
                "<td style='text-align: right'>" + grn_amount_total.toLocaleString() + "</td>" +
                "</tr>";

            if (grn_amount_total > 0) {
                jQuery('#selected_vendor_grn').empty().append(text);
            }
        })

    </script>
@stop