{!! Form::open(array('class' => 'stdform','id'=>'payment_voucher_form','route'=>'payment_vouchers.expenses.store')) !!}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">EXPENSES:PAYMENTS VOUCHER</h3>
</div>
<div class="modal-body body_of_modal">
    <input type="hidden" name="type" value="EXPENSES">
    <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 autocomplete="off"/>
            </div>
        </div>
        <div class="span6">
            <label class="span4">Credit Account</label>

            <div class="field span8">
                <select name="cr_account_id" data-placeholder="Credited Account" required
                        class="searchable_payment_voucher_select"
                        style="width: 100%">
                    <option>Select Credit Acc</option>
                    @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>
            <input type="hidden" id="paid_from_amount" value="0">
        </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" autocomplete="off"/>
            </div>
        </div>
        <div class="span6">
            <label class="span4">Payee </label>

            <span class="field span8">
            <input type="text" name="received_by" class="span12" autocomplete="off"/>
        </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" id="exchange_rate" class="span12" required autocomplete="off"/>
            </div>
        </div>
        <div class="span6">
            <label class="span4">Paid By </label>

            <span class="field span8">
            <select name="paid_by" id="paid_by" class="searchable_payment_voucher_select" style="width: 100%" required>
                @foreach($employees as $employee)
                    <option value="{{$employee->employee_id}}">{{$employee->fullName}}</option>
                @endforeach
            </select>
        </span>
        </div>

    </div>

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

            <span class="field span8">
            <select name="payment_type" id="payment_type" class="searchable_payment_voucher_select" style="width: 100%"
                    required>
                <option value="">Select Type</option>
                <option value="GENERAL">General Payment</option>
                <option value="TRIP"> Trip Payment</option>
            </select>
        </span>
        </div>
        <div class="span6">
            <div class="par control-group">
                <label class="control-label span4" for="address">Payment For</label>

                <div class="controls span8">
                    <select style="width: 100%" name="payment_for_id" id="route_append" class="searchable_select">
                        <option value="" id="employee_id_default"></option>
                    </select>
                </div>
            </div>
        </div>

    </div>


    <div class="row-fluid">
        <div class="span12">
            <table class="table" style="width: 100%">
                <thead>
                <tr>
                    <th style="width: 35%">Paid Account(DR)</th>
                    <th style="width: 10%">Currency</th>
                    <th style="width: 15%">Amount</th>
                    <th style="width: 3%"></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="4" class="payment_voucher_item_more_added" style="width: 100%;text-align: right">

                    </td>
                </tr>
                </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 add_another_payment_voucher_item" type="button"><i class="icon-plus-sign"></i> Add Expenses
    </button>
</div>
{!! Form::close() !!}


<table class="hide fade" id="payment_voucher_item_additional_row" style="width: 100%">
    <tbody>
    <tr>
        <td style="width: 40%">
            <select name="dr_account_id[]" data-placeholder="Debit Account" required
                    id="debited_account" style="width: 100%">
                <option></option>
                @foreach($expense_debit_account_groups as $expense_debit_account_group)
                    <optgroup label="{{$expense_debit_account_group->name}}">
                        @foreach($expense_debit_account_group->accounts as $account)
                            <option value="{{$account->id}}">{{$account->name}}</option>
                        @endforeach
                    </optgroup>
                @endforeach
            </select>
        </td>
        <td style="width: 15%">
            <select name="currency_id[]" style="width: 100%">
                <option value="TSH">TSH</option>
                @foreach($currencies as $currency)
                    <option value="{{$currency->id}}">{{$currency->name}}</option>
                @endforeach
            </select>
        </td>
        <td style="width: 25%">
            <input type="text" name="amount[]" id="amount" value="" placeholder="Paid Amount"
                   class="span12 payment-voucher-amount" style="text-align: right"/>
        </td>
        <td style="width: 5%">
            <a class="list_inventory_items hide" id="removerow"><i class="icon-list-alt"></i></a>
            <a class="remove_payment_voucher_item alert-danger" id="removerow"><i class="icon-trash"></i></a>
        </td>
    </tr>
    <tr>
        <td colspan="4" class=" hide payment_voucher_item_inventory_items" style='margin-left:10%;width:90%'>
            <table style="width: 90%;margin-left: 10%">
                <thead>
                <tr>
                    <th style="width: 40%">Item</th>
                    <th style="width: 15%">VAT</th>
                    <th style="width: 12%">Quantity</th>
                    <th style="width: 13%">Cost</th>
                    <th style="width: 15%">Amount</th>
                    <th style="width: 5%">
                        <button class="btn btn-mini add_item" type="button"><i class="icon-plus-sign"></i></button>
                    </th>
                </tr>
                </thead>
                <tbody class="cash_purchase_order_body">
                <input type="hidden" class="dr_account_row_id" value="">
                <input type="hidden" class="dr_account_id" value="">
                <tr class=" hide fade inventory_items">
                    <td>
                        <select name="item_id[]" class="span12" style="width: 100%">
                            <option></option>
                            @foreach($items as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <select name="vat[]" class="span12" style="width: 100%">
                            <option value="INCLUSIVE">INCLUSIVE</option>
                            <option value="EXCLUSIVE">EXCLUSIVE</option>
                            <option value="EXEMPT">EXEMPT</option>
                        </select>
                    </td>
                    <td><input type="text" name="quantity[]" class="span12" style="text-align: right"
                               autocomplete="off"/></td>
                    <td><input type="text" name="price[]" class="span12" style="text-align: right" autocomplete="off"/>
                    </td>
                    <td><input type="text" name="item_amount[]" class="span12" style="text-align: right"
                               autocomplete="off" readonly/></td>
                    <td>
                        <a class="remove_row alert-danger"><i class="icon-trash"></i></a>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>

<script>
    jQuery('.make_payment_date').datepicker();
    jQuery('.searchable_payment_voucher_select').select2();
    loadPaymentVoucherDetails();
    onChangeExpenseType();
    populate();

    jQuery('#payment_type').change(function () {
        var payment_type = jQuery(this).val();
        {{--jQuery.ajax({--}}
        {{--type: "get",--}}
        {{--url: "{{route('vehicle.route.retrieve')}}",--}}
        {{--data: {--}}
        {{--vehicle_id: payment_type--}}
        {{--},--}}
        {{--dataType: 'json',--}}
        {{--success: function (data) {--}}

        {{--// var newOption = new Option(data.text, data.id, false, false);--}}
        {{--jQuery('#route_append').append(data).trigger('change');--}}
        {{--},--}}
        {{--error: function (data) {}--}}
        {{--});--}}

        $("#route_append").select2({
            ajax: {
                url: "{{route('vehicle.route.retrieve')}}",
                dataType: 'json',
                delay: 250,
                data: {
                    vehicle_id: payment_type
                },
                processResults: function (data, page) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            }, // let our custom formatter work
            minimumInputLength: 1
        });
    });


    jQuery(".remove_row").on('click', function () {
        jQuery(this).parent().parent().remove();
    });

    jQuery(".add_another_payment_voucher_item").click(function () {

        var payment_voucher_item_more_added = jQuery(this).parents('form').find('.payment_voucher_item_more_added');
        var number_of_row = payment_voucher_item_more_added.find('.dr_account_row').length + 1;

        var response = jQuery('#payment_voucher_item_additional_row').clone();
        response.removeClass('hide fade');
        response.addClass('tempo dr_account_row');
        response.attr('id', 'dr_account_row_' + number_of_row);
        response.attr('data-id', number_of_row);
        response.find('select[name="dr_account_id[]"]').select2();
        response.find('select[name="dr_account_id[]"]').on('change', function () {
            var tr = $(this).closest('table');
            var dr_account_id = $(this).val();
            var dr_account_row_id = tr.attr('id');
            if ($(this).find(':selected').attr('data-id')) {
                if ($(this).find(':selected').attr('data-id') == 'ITEM') {
                    response.find('.payment_voucher_item_inventory_items').removeClass('hide');
                    var cash_purchase_order_body = response.find('.cash_purchase_order_body').empty();

                    jQuery('.add_item').on('click', function (e) {
                        e.preventDefault();
                        var add_row = jQuery('.inventory_items').clone();
                        add_row.removeClass('hide fade inventory_items');
                        add_row.addClass('tempo cash_purchase_order_item');
                        add_row.find('select[name="item_id[]"]').attr('name', 'item_id[' + dr_account_id + '][]').select2();
                        add_row.find('select[name="vat[]"]').attr('name', 'vat[' + dr_account_id + '][]').select2();
                        add_row.find('input[name="quantity[]"]').attr('name', 'quantity[' + dr_account_id + '][]').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, ",");
                            });

                            var payment_voucher_item_more = $(this).closest('.payment_voucher_item_more_added');
                            var input_tr = $(this).closest('tr');

                            var item_amount = input_tr.find('input[name="item_amount[]"]');
                            var price = removeComma(input_tr.find('input[name="price[' + dr_account_id + '][]"]').val());
                            var quantity = removeComma(input_tr.find('input[name="quantity[' + dr_account_id + '][]"]').val());
                            var amount = price * quantity;
                            item_amount.val(amount.toLocaleString());

                            var table_amount_val = 0;
                            var table_amount = payment_voucher_item_more.find('input[name="amount[]"]');
                            var item_amounts = payment_voucher_item_more.find('input[name="item_amount[]"]');
                            item_amounts.each(function () {
                                var item_total_amount = parseFloat(removeComma($(this).val()));
                                if (item_total_amount > 0) {
                                    table_amount_val += item_total_amount;
                                }
                            });
                            table_amount.val(table_amount_val.toLocaleString());
                        });
                        add_row.find('input[name="price[]"]').attr('name', 'price[' + dr_account_id + '][]').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, ",");
                            });

                            var payment_voucher_item_more = $(this).closest('.payment_voucher_item_more_added');
                            var input_tr = $(this).closest('tr');

                            var item_amount = input_tr.find('input[name="item_amount[]"]');
                            var price = removeComma(input_tr.find('input[name="price[' + dr_account_id + '][]"]').val());
                            var quantity = removeComma(input_tr.find('input[name="quantity[' + dr_account_id + '][]"]').val());
                            var amount = price * quantity;
                            item_amount.val(amount.toLocaleString());

                            var table_amount_val = 0;
                            var table_amount = payment_voucher_item_more.find('input[name="amount[]"]');
                            var item_amounts = payment_voucher_item_more.find('input[name="item_amount[]"]');
                            item_amounts.each(function () {
                                var item_total_amount = parseFloat(removeComma($(this).val()));
                                if (item_total_amount > 0) {
                                    table_amount_val += item_total_amount;
                                }
                            });
                            table_amount.val(table_amount_val.toLocaleString());
                        });
                        add_row.find('.remove_row').on('click', function () {
                            jQuery(this).closest('tr').remove();
                        });
                        cash_purchase_order_body.prepend(add_row);

                    });
                }
            } else {

            }
        });
        response.find('select[name="currency[]"]').select2();
        response.find('select[name="cost_center[]"]').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();
        });
        response.find('.list_inventory_items').on('click', function () {
            var table = $(this).closest('table');
            var list_inventory_items_trs = table.find('.list_inventory_items_trs').html();
            var dr_account_id = table.find('select[name="dr_account_id[]"]').val();
            var dr_account_row_id = table.attr('id');
            jQuery.ajax({
                url: '{{route('payment_vouchers.inventory_expenses.create')}}',
                type: 'GET',
                data: {
                    dr_account_row_id: dr_account_row_id,
                    dr_account_id: dr_account_id,
                    list_inventory_items_trs: list_inventory_items_trs
                },
                success: function (data) {

                    jQuery('#cash_purchase_orders').empty().append(data);
                    jQuery('#cash_purchase_orders').appendTo("body").modal({show: true});
                }
            });
        });
        payment_voucher_item_more_added.append(response);
    });
    jQuery('#cash_purchase_orders').on('hidden.bs.modal', function (e) {

        var account_amount = 0;
        var dr_account_row_id = jQuery('#cash_purchase_order_body').find('.dr_account_row_id').val();
        var dr_account_id = jQuery('#cash_purchase_order_body').find('.dr_account_id').val();
        text = ''
        jQuery(this).find('.cash_purchase_order_item').each(function () {
            var table_body = jQuery(this);
            var item_id = table_body.find('select[name="item_id[]"]');
            var quantity = table_body.find('input[name="quantity[]"]');
            var price = table_body.find('input[name="price[]"]');
            var item_amount = table_body.find('input[name="item_amount[]"]');
            account_amount += parseFloat(removeComma(item_amount.val()));

            text += "<tr>" +
                //                "<td> " +
                    {{--"<select name='item_id[" + dr_account_id + "][]' class='span12' style='width: 100%'>" +--}}
                            {{--@foreach($items as $item)--}}
                            {{--"<option value='{{$item->id}}' @if($item->id == "+item_id.val()+") selected @endif>{{$item->name}}</option>" +--}}
                            {{--@endforeach--}}
                            {{--"</select>" +--}}
                            {{--"</td>" +--}}
                        "<td><input type='text' name='item_id[" + dr_account_id + "][]' class='span12' value='" + item_id.val() + "'/></td>" +
                "<td><input type='text' name='quantity[" + dr_account_id + "][]' class='span12' value='" + quantity.val() + "'/></td>" +
                "<td><input type='text' name='price[" + dr_account_id + "][]' class='span12' value='" + price.val() + "'/></td>" +
                "<td><input type='text' name='item_amount[" + dr_account_id + "][]' class='span12' value='" + item_amount.val() + "'/></td>" +
                "<td><a class='remove_row alert-danger'><i class='icon-trash'></i></a></td>" +
                "</tr>";

        });
        $('#' + dr_account_row_id).find('input[name="amount[]"]').val(account_amount.toLocaleString());
        $('#' + dr_account_row_id).find('input[name="amount[]"]').readOnly = true;
        $('#' + dr_account_row_id).append('<span class="hide fade list_inventory_items_trs">' + text + '</span>');
        $('#' + dr_account_row_id).find('.list_inventory_items').removeClass('hide');
//        $('#' + dr_account_row_id).find('.payment_voucher_item_inventory_items').append(text);
//        $('#payment_voucher_item_inventory_item_id_' + dr_account_row_id).append(text);
//        response.find('.').attr('id', 'payment_voucher_item_inventory_item_id_' + number_of_row);

//        $('#' + dr_account_row_id).on('click', function () {
//
//            var tr = $(this).closest('tr');
//            var row = mainDataTable.row(tr);
//            var idx = $.inArray(tr.attr('id'), detailRows);
//
//            if (row.child.isShown()) {
//                tr.removeClass('details');
//                row.child.hide();
//
//                // Remove from the 'open' array
//                detailRows.splice(idx, 1);
//            }
//            else {
//                tr.addClass('details');
//                row.child(format(row.data())).show();
//
//                // Add to the 'open' array
//                if (idx === -1) {
//                    detailRows.push(tr.attr('id'));
//                }
//            }
//        });
    })
</script>