@extends('layouts.main_without_top_button')
@section('invoices')
    active
@stop
@section('title')
    {{$vendor->name}} Profile
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.index')}}">Vendors</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.show')}}">{{$vendor->name}} Profile</a> <span class="divider">/</span></li>
        <li class="active">Invoices</li>
    </ul>
@stop
@section('contentinner')
    <style>
        table tbody td .number {
            text-align: right;
        }
        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('vendors.includes.vendor_profile')
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="msghead">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            <div class="btn-group">
                                <button class="btn dropdown-toggle" data-toggle="dropdown" id="create_journal_voucher">
                                    MAKE PAYMENTS
                                </button>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->
                <br>
                <table class="table table-bordered table-condensed" id="journal-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">JNVNO.</th>
                        <th class="head1" style="width: 90px">Date</th>
                        <th class="head0">Cr Account</th>
                        <th class="head0">Currency</th>
                        <th class="head0">Exchange Rate</th>
                        <th class="head0">Amount</th>
                        <th class="head0">Discount</th>
                        <th class="head1">Remarks</th>
                        <th class="head0">Action</th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->
    <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="grn_payment_modal"
         tabindex="-1">
        {!! Form::open(array('class' => 'stdform','id'=>'grn_payment_form','route'=>'goods-received-notes.journal-vouchers.store')) !!}
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel"><span class="vendors_name"></span></h3>
        </div>
        <div class="modal-body">
            <div id="grn_payment_body"></div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-success" name="update_vendor" id="update_vendor" type="submit">MAKE PAYMENT</button>
        </div>
        {!! Form::close() !!}
    </div>
    <script>
        jQuery('.make_payment_date').datepicker();


        var oTable = jQuery('#journal-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.journals',array('account_id'=>$vendor->accountable->account_id))}}',
                data: function (d) {
//                d.route_id = jQuery('#name').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.');
                    }
                    oTable.fnProcessingIndicator(false);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "aoColumnDefs": [{
                "aTargets": [7],
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    jQuery(nTd).css('text-align', 'right')
                    if ((sData == 0.00)) {
                        jQuery(nTd).addClass('highlight-red')
                    }
                }
            }],
            "columns": [
                {data: 'checkbox'},
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {"class": "link", data: 'journal_number'},
                {"class": "link", data: 'date'},
                {"class": "link number", data: 'credit_account'},
                {"class": "link number", data: 'currency'},
                {"class": "link number", data: 'exchange_rate'},
                {"class": "link", data: 'amount'},
                {"class": "link number", data: 'discount'},
                {"class": "link number", data: 'descriptions'},
                {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;
                });
            },
            "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'));
                }
            }
        });

        jQuery('#add_vendor_grn').on('click', function () {
            if (jQuery('#vendor_debited_account').val() != 'NONE') {
                getGoodReceivedNote();
            } else {
                alert('SELECT THE VALID CREDITOR ACCOUNT');
            }
        });
        jQuery('#vendor_debited_account').on('change', function () {
            getGoodReceivedNote();
        });
        getGoodReceivedNote();
        function getGoodReceivedNote() {
            if (jQuery('#vendor_debited_account').val() != 'NONE') {
                var vendor_debited_account_id = jQuery('#vendor_debited_account').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('payment-vouchers.create')}}",
                    data: {
                        vendor_debited_account_id: vendor_debited_account_id,
                        good_receive_note_id: good_receive_note_id,
                    },
                    success: function (data) {
                        jQuery('#added_vendor_grn').empty().append(data);

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

                    }
                });

            }
        }
    </script>
@stop