<div class="content-wrapper">

    <div class="content-header">

        <div class="container-fluid">

            <div class="row mb-2">

                <div class="col-sm-6">

                    <h1 class="m-0">
<?php echo $pageTitle; ?></h1>
                </div>
                <div class="col-sm-6">

                    <ol class="breadcrumb float-sm-right">

                        <li class="breadcrumb-item">
<a href="<?php echo base_url(); ?>">
Dashboard</a></li>
                        <li class="breadcrumb-item active">
<?php echo $pageTitle; ?></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content">

        <div class="container-fluid">

            <div class="row">

                <div class="col">

                    <div class="card card-primary card-outline">

                        <div class="card-header">

                            <h5 class="m-0">
Create <?php echo $pageTitle; ?> </h5>
                        </div>
                        <div class="card-body">

                            <?php if($VoucherType->voucher_options==""): ?>
                            <form method=POST action="" enctype="multipart/form-data" name="tbl_accounts">

                                <div class="row">

                                    <div class="col-3">

                                        <fieldset>
                                            <legend>Transaction Date</legend><input type="text" class="form-control nepaliDatePicker" id="voucher_date" value="<?php echo NepaliDate(); ?>" name="voucher_date">

                                        </fieldset>
                                    </div>
                                    <div class="col-3">

                                        <fieldset>
                                            <?php $DefaultAccount=$this->myaccounts->getAccountDetails($VoucherType->default_account);?>
                                            <legend><?php  echo $DefaultAccount->account_name; ?> Balance</legend><?php  echo myCurrency($DefaultAccount->Balance); ?>
                                        </fieldset>
                                    </div>
                                    <div class="col-3 offset-3">

                                        <fieldset>
                                            <legend>Voucher #</legend><input type="text" readonly class="form-control" id="voucher_no" value="<?php echo generateVoucherNo(); ?>" name="voucher_no">

                                        </fieldset>
                                    </div>
                                </div>
                                <div class="row">

                                    <div class="col">

                                        <fieldset>
                                            <legend>Enter Transaction</legend>
                                            <table id="EntryTable" class="table order-list">

                                                <thead>
                                                    <tr>
                                                        <td>Account</td>
                                                        <td>Narration</td>
                                                        <td>Amount</td>
                                                        <td></td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="col-3">
 <?php fillComboWithValue("account_id", "", "account_id", "tbl_accounts", "account_name", "account_id", "", "", "", "status=1"); ?> </td>
                                                        <td class="col-4">
 <input type="text" name="narration" id="narration" class="form-control" /> </td>
                                                        <td class="col-1">
 <input type="text" name="debit" id="debit" value="0" class="form-control" /> </td>
                                                        <td class="col-1">
 <input type="button" class="btn btn-primary full-width" id="addrow" value="Add" /> </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div id="errorBox" class="alert alert-secondary hidden" role="alert">

                                                <h5></h5>
                                            </div>
                                        </fieldset>
                                        <div class="card card-primary card-outline">

                                            <div class="card-header">
Transaction List </div>
                                            <div class="card-body">

                                                <table id="myTable" class=" table order-list table-striped table-bordered">

                                                    <thead>
                                                        <tr>
                                                            <td>Account</td>
                                                            <td>Narration</td>
                                                            <td>Amount</td>
                                                        </tr>
                                                    </thead>
                                                    <tbody> </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <th colspan="2" class="text-right">
Total</th>
                                                            <td>
                                                                <div id="debitTotal">
</div>
                                                            </td>
                                                            <td>
                                                               
                                                            </td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">

                                    <!--COL START-->
                                    <div class="col">

                                        <div class="form-group">
 <label for="remarks">
Remarks</label> <textarea class="form-control" id="remarks" name="remarks">
</textarea> </div>
                                    </div>
                                    <!--COL END-->
                                </div> <button class="btn btn-primary" type="submit" id="saveButton" name="submit">
Save Voucher</button>
                            </form>
                            <?php else: ?>
                                <?php echo $VoucherType->voucher_options; ?>
                                <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var counter = 0;
        $("#addrow").on("click", function() {
            var msg = "Transaction Row Added !!";
            if ($("#account_id").val() != "") {
                if (!isAccountAdded($("#account_id").val())) {
                    if ($("#narration").val() != "") {
                        var debit = ($.isNumeric($("#debit").val()) ? $("#debit").val() : 0);
                        if ($.isNumeric(debit)) {
                            if (debit > 0) {
                                addRow()
                            } else {
                                msg = "Amount contain some value";
                            }
                        } else {
                            msg = "Non numberic value entered in amount. ";
                        }
                    } else {
                        msg = "Narration can't be empty!";
                    }
                } else {
                    msg = "Account already added in transactions";
                }
            } else {
                msg = "Account Head Not Selected!";
            }
            $("#errorBox h5").html(msg);
            $("#errorBox").fadeTo(2000, 500).slideUp(500, function() {
                $("#errorBox").slideUp(500);
            });
        });
        $("table.order-list").on("click", ".ibtnDel", function(event) {
            $(this).closest("tr").remove();
            calculateTotals();
        });
    });

    function isAccountAdded(account_id) {
        var arr = $('input[name="account_id[]"]').map(function() {
            return this.value;
        }).get();
        if ($.inArray(account_id, arr) >= 0) return true;
        else return false;
    }

    function addRow() {
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="hidden" class="form-control" name="account_ids[]" value="' + $("#account_id").val() + '"/><input type="text" readonly class="form-control" name="account_name[]" value="' + $("#account_id option:selected").text() + '"/></td>';
        cols += '<td><input type="text" readonly class="form-control" name="narration[]" value="' + $("#narration").val() + '"/></td>';
        cols += '<td><input type="text" readonly class="form-control" name="debit[]" value="' + ($.isNumeric($("#debit").val()) ? $("#debit").val() : 0) + '"/></td>';
        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("#myTable.order-list").append(newRow);
        calculateTotals();
    }

    function calculateTotals() {
        var debitTotal = 0;
        var creditTotal = 0;
        var balance = 0;
        $("table.order-list").find('input[name^="debit[]"]').each(function() {
            debitTotal += +$(this).val();
        });
        $("#debit").val(0);
        $("#narration").val("");
        $("#debitTotal").text(debitTotal.toFixed(2));
        $("#balance").text(balance.toFixed(2));
        $("#saveButton").prop("disabled", false);        
    }
    $("#saveButton").prop("disabled", true);
</script>