{!! Form::open(array('class' => 'stdform','id'=>'receipt_voucher_form','route'=>'accounts.update_receipt_voucher')) !!}

<input type="hidden" name="receipt_voucher_id" value="{{$receipt_voucher->id}}">

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">EDIT RECEIPT VOUCHER</h3>
</div>
<div class="modal-body">

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

            <div class="field span8">
                <input type="text" name="date" class="span12 receive_payment_date" value="{{$receipt_voucher->date}}"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="span6">
            <label class="span4">Debited Account</label>

            <div class="field span8">
                <select name="dr_account_id" data-placeholder="Credited Account" required
                        id="vendor_credited_account" class="searchable_select" style="width: 100%">
                    @foreach($client_debit_account_groups as $client_debit_account_group)
                        <optgroup label="{{$client_debit_account_group->name}}">
                            @foreach($client_debit_account_group->accounts as $account)
                                <option class="account-select"
                                        value="{{$account->id}}" {{$receipt_voucher->receiptVoucherItem->dr_account_id == $account->id ? 'selected' : ''}}> {{$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" value="{{$receipt_voucher->reference_number}}"
                       class="span12"/>
            </div>
        </div>
        <div class="span6">
            <label class="span4">Credited Account </label>

            <span class="field span8">
                    <select name="cr_account_id" data-placeholder="Credited Account" required
                            id="client_credit_account" class="searchable_select" style="width: 100%">
                        <option class="account-select" value="NONE"> Select Client Account</option>
                        @foreach($client_credit_account_groups as $client_credit_account_group)
                            <optgroup label="{{$client_credit_account_group->name}}">
                                @foreach($client_credit_account_group->accounts as $account)
                                    <option class="account-select"
                                            value="{{$account->id}}" {{$receipt_voucher->cr_account_id == $account->id ? 'selected' : ''}}> {{$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" value="{{$receipt_voucher->exchange_rate}}" name="exchange_rate" class="span12"
                       required/>
            </div>
        </div>
        <div class="span6">
            <label class="span4">Currency </label>

            <span class="field span8">
                        <select name="currency_id" class="searchable_select" style="width: 100%" required>
                            <option value=""></option>
                            @foreach($currencies as $currency)
                                <option value="{{$currency->id}}" {{$receipt_voucher->currency_id == $currency->id ? 'selected' : ''}}>{{$currency->name}}</option>
                            @endforeach
                        </select>
                    </span>
        </div>

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

            <div class="field span8">
                <select name="received_by" class="searchable_select" style="width: 100%">
                    <option value=""></option>
                    @foreach($employees as $employee)
                        <option value="{{$employee->employee_id}}" {{$receipt_voucher->received_by == $employee->employee_id ? 'selected' : ''}} >{{$employee->full_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="span6">

        </div>

    </div>
    <div class="row-fluid" style="margin-top: 4px">
        <div class="span6">
            <label class="span4"> Is Against invoice?</label>

            <div class="field span8">
                <select name="is_payment_against_invoice" id="is_payment_against_invoice" class="searchable_select"
                        style="width: 100%">
                    <option value="YES" {{isset($receipt_voucher->receiptVoucherItem->invoiceReceiptVoucherItems[0]) ? 'selected' : ''}}>
                        YES
                    </option>
                    <option value="NO" {{!isset($receipt_voucher->receiptVoucherItem->invoiceReceiptVoucherItems[0]) ? 'selected' : ''}}>
                        NO
                    </option>
                </select>
            </div>
        </div>
        <div class="span6" id="amount_paid_with_no_invoice_details">

        </div>

    </div>
    <div class="row-fluid" id="invoice_detail_for_receipt">
        <div class="span12">
            <table class="table table-bordered" style="width: 100%;margin-top: 10px;margin-bottom: 10px">
                <thead>
                <tr>
                    <th style="width: 35%">Invoice NO./Account</th>
                    <th style="width: 47%">Descriptions</th>
                    <th style="width: 18%">Amount</th>
                </tr>
                </thead>
                <tbody id="invoices_selected"></tbody>
                <tbody id="account_selected">

                @if(isset($receipt_voucher->receiptVoucherItem))

                    @if(isset($receipt_voucher->receiptVoucherItem->invoiceReceiptVoucherItems[0]))

                        @foreach($receipt_voucher->receiptVoucherItem->invoiceReceiptVoucherItems as $item)
                            <tr>
                                <td>
                                 {{\App\Logistics\Facades\Logistics::add_leading_zeros($item->invoice_id)}}
                                </td>
                                <td>
                                   {{$receipt_voucher->remarks}}
                                </td>
                                <td>{{number_format($receipt_voucher->receiptVoucherItem->amount)}}
                                </td>
                            </tr>
                        @endforeach

                    @else
                        <tr>
                            <td>
                                {{$receipt_voucher->receiptVoucherItem->account_details($receipt_voucher->receiptVoucherItem->dr_account_id) != '' ? $receipt_voucher->receiptVoucherItem->account_details($receipt_voucher->receiptVoucherItem->dr_account_id)->name : 'N/A' }}
                            </td>
                            <td>
                                <input style="width: 95%" type="text" value="{{$receipt_voucher->remarks}}">
                            </td>
                            <td>
                                <input style="width: 94%; text-align: right" type="text"
                                       value="{{number_format($receipt_voucher->receiptVoucherItem->amount)}}">
                            </td>
                        </tr>
                    @endif

                @endif

                </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" required></textarea>
                </span>
        </div>
    </div>

</div>
<div class="modal-footer">
    <button class="btn btn-success" type="submit">RECEIVE PAYMENT(S)</button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn" type="button" id="add_client_invoices"><i class="icon-plus-sign"></i> Add Invoice</button>
</div>
{!! Form::close() !!}

<script>
    jQuery('.receive_payment_date').datepicker();
    jQuery('.searchable_select').select2();
    // Array to track the ids of the details displayed rows
    var receipt_voucher_more = [];
    jQuery('#receipts-vouchers-list 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'), receipt_voucher_more);

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

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

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

    jQuery('#add_client_invoices').click(function () {
        if (jQuery('#client_credit_account').val() !== 'NONE') {
            getInvoice();
            jQuery('#client_invoices').appendTo("body").modal({
                show: true
            })
        } else {
            alert('SELECT THE VALID DEBTOR ACCOUNT');
        }
    });

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

        jQuery('.invoice_id').each(function () {
            if (jQuery(this).is(':checked')) {
                var table = jQuery(this).parent().parent().parent();
                var invoice_amount = table.find('.invoice_amount');
                text += "<tr>" +
                    "<td>" + i + "</td>" +
                    "<td><input type='hidden' name='invoice_id[]' value='" + jQuery(this).val() + "'> INV " + jQuery(this).val() + "</td>" +
                    "<td style='text-align: right'>" +
                    "<input type='hidden' name='amount[]' value='" + invoice_amount.val() + "'>" + invoice_amount.val() + "</td>" +
                    "</tr>";
                invoice_amount_total += parseFloat(removeComma(invoice_amount.val()));
                i += 1;
            }
        });

        text += "<tr>" +
            "<td colspan='2' style='text-align: right'>TOTAL AMOUNT <input type='hidden' name='receipt_total_amount' value='" + invoice_amount_total + "'></td>" +
            "<td style='text-align: right'>" + invoice_amount_total.toLocaleString() + "</td>" +
            "</tr>";

        if (invoice_amount_total > 0) {
            jQuery('#invoices_selected').empty().append(text);
        }
    });

    jQuery('#client_credit_account').on('change', function () {
        getInvoice();
    });
    jQuery('#add_client_invoices_edit').click(function () {
        if (jQuery('#client_credit_account_edit').val() !== 'NONE') {
            getInvoiceEdit();
            jQuery('#client_invoices_edit').appendTo("body").modal({
                show: true
            })
        } else {
            alert('SELECT THE VALID DEBTOR ACCOUNT');
        }
    });
    jQuery('#client_invoices_edit').on('hidden.bs.modal', function (e) {
        var invoice_amount = [], text = '', invoice_amount_total = 0, i = 1;

        jQuery('.invoice_id').each(function () {
            if (jQuery(this).is(':checked')) {
                var table = jQuery(this).parent().parent().parent();
                var invoice_amount = table.find('.invoice_amount');
                text += "<tr>" +
                    "<td>" + i + "</td>" +
                    "<td><input type='hidden' name='invoice_id[]' value='" + jQuery(this).val() + "'> INV " + jQuery(this).val() + "</td>" +
                    "<td style='text-align: right'>" +
                    "<input type='hidden' name='amount[]' value='" + invoice_amount.val() + "'>" + invoice_amount.val() + "</td>" +
                    "</tr>";
                invoice_amount_total += parseFloat(removeComma(invoice_amount.val()));
                i += 1;
            }
        });

        text += "<tr>" +
            "<td colspan='2' style='text-align: right'>TOTAL AMOUNT</td>" +
            "<td style='text-align: right'>" + invoice_amount_total.toLocaleString() + "</td>" +
            "</tr>";

        if (invoice_amount_total > 0) {
            jQuery('#invoices_selected_edit').empty().append(text);
        }
    });

    jQuery('#is_payment_against_invoice').on('change', function () {
        getReceiptVoucherFormart();
    });

    function getReceiptVoucherFormart() {
        var value = jQuery('#is_payment_against_invoice').val();
        if (value == 'YES') {
            jQuery('#amount_paid_with_no_invoice_details').empty();
            jQuery('#invoice_detail_for_receipt').show();
            jQuery('#add_client_invoices').show();
        } else {
            var html_generator = jQuery('#dr_accounts');
            var response = html_generator.find('.amount_to_be_received').clone();
            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(".");
                });
            });
            jQuery('#amount_paid_with_no_invoice_details').empty().append(response);
            jQuery('#invoice_detail_for_receipt').hide();
            jQuery('#add_client_invoices').hide();
        }
    }
</script>