@extends('layouts.main')
@section('title')
    Payment Vouchers
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Account Managements</a> <span class="divider">/</span></li>
        <li><a href="">Cash Books</a> <span class="divider">/</span></li>
        <li class="active">Payments Vouchers</li>
    </ul>
@stop
@section('msghead_menu')
    {{--<style>--}}
    {{--#logistics_modal {--}}
    {{--width: 95%;--}}
    {{--margin-left: -32%;--}}
    {{--}--}}
    {{--</style>--}}
    {{--Nimepacoment Kusibiri maelekezo ya Adriano--}}
    <li class="right btn-group">
        <div class="btn-group">
{{--            <button class="btn dropdown-toggle" data-toggle="dropdown">--}}
{{--            <i class="icon-th"></i> &nbsp;MAKE PAYMENTS <span class="caret"></span>--}}
{{--            </button>--}}
            <button class="btn" onclick="openAdvancedSearch('route_truck_allocation')">
                <span class="icon-search"></span> &nbsp; FILTER
            </button>
            <ul class="dropdown-menu" style="margin-left: -50px">
            <li>
            <a style="margin-right: 2px"
            onclick="create('{{route('payment-vouchers.expenses.create')}}'),event.preventDefault();">
            <span class="iconsweets-create"></span> EXPENSES PAYMENTS</a>
            </li>
            {{--<li>--}}
            {{--<a style="margin-right: 2px" onclick="modelShow('vendor_payment_voucher_modal')">--}}
            {{--<span class="iconsweets-create"></span> VENDOR PAYMENTS</a>--}}
            {{--</li>--}}
            </ul>
        </div><!--btn-group-->
    </li>

@stop
@section('contentinner')
    <style>
        table tbody td .number {
            text-align: right;
        }
    </style>
    <div id="route_truck_allocation" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('route_truck_allocation')">&times;</a>


        <form target="_blank" class="form-inline form-filter" method="get"
              action="#">

            <label class="control-label" for="Category">PV #</label>
            <input id="payment_voucher_id" class="span12">
            <label class="control-label" for="Category">Date</label>
            <input name="transaction_date" id="transaction_date" class="span12" autocomplete="off">
            <label class="control-label" for="truck_id">Truck</label>
            <select name="select" width="100%" id="truck_id" class="searchable_select">
                <option value="">All</option>
                @foreach($trucks as $truck)
                    <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                @endforeach
            </select>

            <button class="btn" style="" id="filter_payment_voucher">FILTER</button>
            {{--<input class="btn" id="print_permits" type="submit" value="PRINT">--}}
        </form>


    </div>
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed logistics_table" id="payments-vouchers-list-1">
                <thead>
                <tr>
                    <th class="nosort" style="width: 2%"><input type="checkbox" class="checkall"/></th>
                    <th style="width: 2%">MORE</th>
                    <th style="width: 3%">PVNO.</th>
                    <th style="width: 7%">Date</th>
                    <th style="width: 10%">Paid By</th>
                    <th style="width: 15%">Cr</th>
                    <th style="width: 10%">Payee</th>
                    <th style="width: 31%">Remarks</th>
                    <th style="width: 10%">Amount</th>
                    <th style="width: 10%">Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="vendor_payment_voucher_modal">
        {!! Form::open(array('class' => 'stdform','id'=>'payment_voucher_form','route'=>'payment-vouchers.store')) !!}
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">CREATE VENDOR PAYMENTS VOUCHER</h3>
        </div>
        <div class="modal-body">
            <input type="hidden" name="type" value="VENDOR">

            <div class="row-fluid" style="margin-top: 4px">
                <div class="span6">
                    <label class="span4">Payment Date</label>
                    <div class="field span8">
                        <input type="text" name="date" class="span12 make_payment_date" required/>
                    </div>
                </div>
                <div class="span6">
                    <label class="span4">Paid From</label>
                    <div class="field span8">
                        <select name="cr_account_id" data-placeholder="Credited Account" required
                                class="searchable_payment_voucher_select"
                                style="width: 100%">
                            @foreach($credit_account_groups as $credit_account_group)
                                <optgroup label="{{$credit_account_group->name}}">
                                    @foreach($credit_account_group->accounts as $account)
                                        <option class="account-select"
                                                value="{{$account->id}}"> {{$account->name}} </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="row-fluid" style="margin-top: 4px">
                <div class="span6">
                    <label class="span4">Reference Number</label>

                    <div class="field span8">
                        <input type="text" name="reference_number" class="span12"/>
                    </div>
                </div>
                <div class="span6">
                    <label class="span4">Paid to </label>

                    <span class="field span8">
                    <select data-placeholder="Credited Account" name="dr_account_id" required
                            id="vendor_debited_account" class="searchable_payment_voucher_select"
                            style="width: 100%">
                        <option class="account-select" value="NONE"> Select Vendor Account</option>
                        @foreach($vendor_debit_account_groups as $vendor_debit_account_group)
                            <optgroup label="{{$vendor_debit_account_group->name}}">
                                @foreach($vendor_debit_account_group->accounts as $account)
                                    <option class="account-select"
                                            value="{{$account->id}}"> {{$account->name}} </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
        </span>
                </div>
            </div>

            <div class="row-fluid" style="margin-top: 4px">
                <div class="span6">
                    <label class="span4">Exchange Rate</label>

                    <div class="field span8">
                        <input type="text" name="exchange_rate" class="span12" required/>
                    </div>
                </div>

                <div class="span6">
                    <label class="span4">Paid By </label>

                    <span class="field span8">
            <select name="paid_by" id="vendor_paid_by" required class="searchable_payment_voucher_select"
                    style="width: 100%">
                @foreach($employees as $employee)
                    <option value="{{$employee->employee_id}}">{{$employee->fullName}}</option>
                @endforeach
            </select>
        </span>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <table class="table table-condensed">
                        <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Currency</th>
                            <th>Payable</th>
                            <th>Amount</th>
                            {{--<th>Balance</th>--}}
                            <th></th>
                        </tr>
                        </thead>
                        <tbody id="added_vendor_grn">

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row-fluid" style="margin-top: 2px">
                <div class="span12">
                    <label class="span2">Narration</label>

                    <span class="field span10">
           <textarea cols="80" rows="1" class="span12" name="remarks"></textarea>
        </span>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-success" type="submit">SUBMIT PAYMENT(S)</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            {{--<button class="btn" type="button" id="add_vendor_grn"><i class="icon-plus-sign"></i> Add GRN</button>--}}
        </div>
        {!! Form::close() !!}
    </div>
    {{--expense_payment_voucher_modal--}}
    <form method="post" id="attachment_form" enctype="multipart/form-data" style="display:none">
        <input type="file" name="file">
    </form>
    <script type="text/javascript" src="{{asset('js/logistics/logistics-accounts.js')}}"></script>
    <script>
        $('#transaction_date').datepicker();
        var attachment_form = $('#attachment_form');
        var file_field = attachment_form.find('input:file');
        function uploadPaymentVoucherPrintout(url) {
            attachment_form.attr('action', url);
            file_field.trigger('click');
            file_field.change(function () {
                if (file_field.val()) {
                    $.ajax({
                        url: attachment_form.attr('action'),
                        data: new FormData($("#attachment_form")[0]),
                        dataType: 'json',
                        async: false,
                        type: 'post',
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            startSpinner()
                        },
                        success: function (data) {
                            onAjaxSuccess(data);
                            if (data.state == 'Done') mainDataTable.draw();
                        },
                        error: function (xhr, textStatus, error) {
                            onAjaxError(xhr, textStatus, error)
                        },
                        complete: function () {
                            stopSpinner();
                            file_field.val(null)
                        }
                    });
                }
            });
        }

        populate();
        loadPaymentVoucherDetails();
        getGoodReceivedNote();
        jQuery('.make_payment_date').datepicker();
        jQuery('.searchable_payment_voucher_select').select2();
        var mainDataTable = jQuery('#payments-vouchers-list-1').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            jQuery.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No Payment Voucher to Display.",
                    "sInfoEmpty": "No entries to display."
                },
                ajax: {
                    url: '{{route('vouchers.data-table.payments')}}',
                    data: function (d) {
                        d.search_field = $('input[name=search_field]').val();
                        d.payment_voucher_id = $('#payment_voucher_id').val();
                        d.transaction_date = jQuery('#transaction_date').val();
                        d.truck_id = jQuery('#truck_id').val();
                    }
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[3, "desc"]],
                "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')
                        }
                    }
                }],
                "columns": [
                    {
                        data: 'checkbox',
                        "orderable": false
                    },
                    {
                        "class": "details-control",
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },
                    {"class": "link", data: 'id'},
                    {"class": "link", data: 'date'},
                    {"class": "link number", data: 'paid_by'},
                    {"class": "link number", data: 'credit_account'},
                    {"class": "link number", data: 'payee'},
                    {"class": "link number", data: 'remarks'},
                    {"class": "link", data: 'amount'},
                    {data: 'action'}
                ],
                "bStateSave": true
            });

        function format(d) {
            return d.payment_voucher_details;
        }
        $('#payment_voucher_id').on('keyup change', function (e) {
            e.preventDefault();
            mainDataTable.draw();
        });

        $('#filter_payment_voucher').on('click', function (e) {
            e.preventDefault();
            mainDataTable.draw();
        });
        // 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 = 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'));
                }
            }
        });


        jQuery('#payment_voucher_form').on('submit', function (e) {
            e.preventDefault();
            var this_form = jQuery(this);
            var action = this_form.attr('action');

            jQuery.ajax({
                url: action,
                type: 'POST',
                data: this_form.serialize(),
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    if (data.state === 'Done') {
                        jQuery.jGrowl(data.msg);
                        if (typeof mainDataTable !== 'undefined') {
                            mainDataTable.draw();
                        }
                        resetFormAndClose(this_form);
                    }
                    else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);

                    } else {
                        var num = 0;
                        jQuery.each(data, function (k, v) {
                            if (num == 0) jQuery.jGrowl(v);
                            num++;
                        });
                    }
                    stopSpinner();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });

        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();
        });

        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
                    },
                    beforeSend: function () {
                        startSpinner();
                    },
                    success: function (data) {
                        stopSpinner();
                        jQuery('#added_vendor_grn').empty().append(data);

                        jQuery(".remove_good_received_note_from_payment").on('click', function () {
                            jQuery(this).parents('tr').remove();
                        });
                    },
                    error: function (xhr, textStatus, error) {
                        onAjaxError(xhr, textStatus, error);
                    },
                    complete: function () {
                        stopSpinner();
                    }
                });

            }
        }
        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();
                            jQuery('select[name="paymentable_id"]').on('change', function () {
                                var expense_type_value_ = jQuery('.expense_type').val();
                                var route_assignment_id = jQuery(this).val();
                                if (expense_type_value_ == 'DRIVER_MILEAGE_EXPENSES') {
                                    jQuery.ajax({
                                        url: '{{route('payment-vouchers.driver-mileage-expenses.create')}}',
                                        type: 'get',
                                        data: {
                                            route_assignment_id: route_assignment_id
                                        },
                                        success: function (html) {
                                            payment_voucher_item_more_added.empty().append(html);
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
            });
        }

        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 checkForValidPayment() {
            jQuery('input[name="amount[]"]').keyup(function () {
                var amounts = jQuery('input[name="amount[]"]');
                var exchange_rate = jQuery('#exchange_rate').val();
                var amount = 0;
                amounts.each(function () {
                    var dr_account_tr = amounts.closest('tr');
                    var currency = dr_account_tr.find('select[name="currency[]"]').val();
                    if (currency == 'TSH') {
                        amount += jQuery(this).val();
                    } else {
                        amount += jQuery(this).val() * exchange_rate;
                    }
                });
                alert(amount);
            });
        }
        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
                    }
                });
            }
        }

        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.expenses-types.create')}}',
                        type: 'get',
                        data: {
                            expense_type: expense_type_value
                        },
                        beforeSend: function () {
                            startSpinner();
                        },
                        success: function (html) {
                            append_expenses_details.empty().append(html);
                            jQuery('.cost_center_searchable_select').select2();
                        },
                        error: function (xhr, textStatus, error) {
                            onAjaxError(xhr, textStatus, error);
                        },
                        complete: function () {
                            stopSpinner();
                        }
                    });
                }
            });
        }
    </script>
@stop