{!! Form::open(array('class' => 'stdform','id'=>'receipt_voucher_form','route'=>'receipt-vouchers.store')) !!}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">CREATE 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">
                <select id="month" name="start_month" class="searchable_select"
                        style="width: 80px">
                    <option value="ALL">ALL</option>
                    <option value="12" {{ date('m') == 12 ? 'selected' : '' }}>Dec</option>
                    <option value="11" {{ date('m') == 11 ? 'selected' : '' }}>Nov</option>
                    <option value="10" {{ date('m') == 10 ? 'selected' : '' }}>Oct</option>
                    <option value="09" {{ date('m') == 9 ? 'selected' : '' }}>Sept</option>
                    <option value="08" {{ date('m') == 8 ? 'selected' : '' }}>Aug</option>
                    <option value="07" {{ date('m') == 7 ? 'selected' : '' }}>Jul</option>
                    <option value="06" {{ date('m') == 6 ? 'selected' : '' }}>Jun</option>
                    <option value="05" {{ date('m') == 5 ? 'selected' : '' }}>May</option>
                    <option value="04" {{ date('m') == 4 ? 'selected' : '' }}>Apr</option>
                    <option value="03" {{ date('m') == 3 ? 'selected' : '' }}>Mar</option>
                    <option value="02" {{ date('m') == 2 ? 'selected' : '' }}>Febr</option>
                    <option value="01" {{ date('m') == 1 ? 'selected' : '' }}>Jan</option>
                </select>
                <select id="start_day" name="start_day" class="searchable_select" style="width: 80px">
                    <option value="ALL">D</option>
                    @foreach($days as $day)
                        <option value="{{$day}}" {{ $day == \Carbon\Carbon::now()->format('d') ? 'selected' : '' }}>{{$day}}</option>
                    @endforeach
                </select>
                <select id="start_year" name="start_year" class="searchable_select" style="width: 80px">
                    <option value="ALL">Y</option>
                    @foreach($years as $year)
                        <option value="{{$year}}" {{ date('Y') == $year ? 'selected' : '' }}>{{$year}}</option>
                    @endforeach
                </select>
            </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}}"> {{$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">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}}"> {{$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">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}}">{{$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}}">{{$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">YES</option>
                    <option value="NO">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"></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>