<div class="content-wrapper">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="card card-primary card-outline">

                        <div class="card-body">
                            <form id="salesForm" method="post" action="<?php echo site_url("inventory/sales/store"); ?>">
                                <input type="hidden" class="form-control" id="transactionType" name="transactionType" value="Sales Entry">
                                <div class="row mb-2">
                                    <div class="col-2">
                                        <fieldset>
                                            <legend>Transaction Date <span class="text-danger">*</span></legend>
                                            <input type="text" class="form-control2" id="salesDate" value="<?php echo NepaliDate(); ?>" data-start="<?php echo $fiscalStart;?>" data-end="<?php echo $fiscalEnd;?>" name="salesDate" required>
                                        </fieldset>
                                    </div>
                                    <div class="col-8">
                                        <h1 class="text-center"><?php echo $pageTitle; ?> Voucher</h1>  
                                        <!-- <fieldset>
                                            <legend><span id="selectedAccountName"></span> Balance</legend><span id="selectedAccountBalance" style="padding: 6px 0px;    display: inline-block;    text-align: right;    width: 100%;">Choose A/C First</span>
                                        </fieldset> -->
                                    </div>
                                    <div class="col-2">
                                        <fieldset>
                                            <legend> Voucher No. #</legend><input type="text" readonly class="form-control2" id="voucher_no" value="<?php echo generateVoucherNo(); ?>" name="voucher_no">
                                        </fieldset>
                                    </div>
                                </div>
                                <fieldset>
                                    <legend> Enter Transaction </legend>
                                    <div class="form-row mb-2">
                                        <div class="form-group col">
                                            <?php $this->myaccounts->showAccountsCombo("accounts_id", " Account <span class='text-danger'>*</span>", "accounts_id", "accategory_id=4","required"); ?>
                                        </div>
                                        <!-- <div class="form-group col">
                                            <label for="salesDate">Sales Date:</label>
                                            <input type="text" class="form-control" id="salesDate" name="salesDate">
                                        </div> -->
                                    </div>
                                </fieldset>
                                <div class="card mt-3">
                                    <div class="card-header">Sales Details</div>
                                    <div class="card-body p-0">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>S.No.</th>
                                                    <th width=50%>Items <span class="text-danger">*</span></th>
                                                    <th class="text-center" width=5%>Qty <span class="text-danger">*</span></th>
                                                    <th class="text-center" width=5%>Units</th>
                                                    <th class="text-center" width=13%>Rate <span class="text-danger">*</span></th>
                                                    <th class="text-right" width=20%>Amount</th>
                                                    <th width=5%></th>
                                                </tr>
                                            </thead>
                                            <tbody id="salesDetails">
                                                <tr class="sales-detail-duplicator">
                                                    <td class="text-center bbsn">1</td>
                                                    <td> <select name="item_id[]" class="form-control select_item" required>
                                                            <option value="">Select Item</option>
                                                            <?php foreach ($items as $item) : ?>
                                                                <option value="<?php echo $item->item_id; ?>" required><?php echo $item->title; ?></option>
                                                            <?php endforeach; ?>
                                                        </select></td>
                                                    <td> <input type="text" class="form-control input-group-sm" name="qty[]" required></td>
                                                    <td><input type="text" class="form-control item_unit" name="pcs/dozen/kgs" required> </td>
                                                    <td><input type="text" class="form-control" name="rate[]" required></td>
                                                    <td><input type="text" class="form-control" name="ltotal[]" required></td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary btn-xs  add-row">
                                                            <i class="fa fa-plus"></i></button>
                                                        <button type="button" class="btn btn-danger btn-xs remove-sales-detail">
                                                            <i class="fa fa-minus"></i>
                                                        </button>
                                                        <!-- <button type="button" class="btn btn-danger btn-sm remove-purchase-detail"></button></td> -->
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="4" rowspan="5">In words: </td>
                                                    <td class="text-right "><b>Total Amount</b></td>
                                                    <td class="text-right"><b>
                                                            <input type="text" class="form-control" name="subtotal" id="subtotal">
                                                        </b></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">
                                                        <input class="form-control1" type="text" name="discountpercentage" id="discountpercentage" value="0" width="2%"> <b>% Discount</b>
                                                    </td>
                                                    <td class="text-right"><b> <input type="text" class="form-control" name="discount" id="discount"></b></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right "><b>Taxable Amount</b></td>
                                                    <td class="text-right"><b> <input type="text" class="form-control" id="taxable"></b></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right "><b>13% VAT</b></td>
                                                    <td class="text-right">
                                                        <input type="text" class="form-control" id="tax">
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-right "><b>Grand Total Amount</b></td>
                                                    <td class="text-right">
                                                        <input type="text" class="form-control" id="grandtotal">
                                                    </td>
                                                    <td></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <!-- Sales Details Section -->
                                <div class="row mb-3">
                                    <div class="col">
                                        <textarea class="form-control" rows="3" name="narration" id="narration" placeholder="Narration:"></textarea>

                                    </div>
                                </div>
                                <!-- <div class="form-group">
                                    <label for="remarks">Remarks:</label>
                                    <textarea class="form-control" id="remarks" name="remarks" rows="3"></textarea>
                                </div> -->
                                <div class="float-right">
                                    <!-- <button type="reset" class="btn btn-default">Reset</button> -->
                                    <button class="btn btn-primary" type="submit" name="submit">Save</button>
                                </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(document).on("click", ".remove-sales-detail", function() {
        if ($("#salesDetails tr").length > 1) {
            $(this).closest("tr").remove();
            updateSerialNumbers(); 
            calculateTotals();
        }

    });
    $(document).on('input', '.sales-detail-duplicator input[name^="qty"], .sales-detail-duplicator input[name^="rate"]', function() {
        calculateLineTotal($(this).closest('tr'));
        calculateTotals();
    });

    $(document).on("change", "input[name=discountpercentage]", function() {
            calculateLineTotal($(this).closest("tr"));
            calculateTotals();
        });

    $(document).on("change", "input[name=discount]", function() {
            calculateLineTotal($(this).closest("tr"));
            calculateTotals('amount');
        });

        function updateSerialNumbers(){
            $('.purchase-detail').each(function(index){
                $(this).find('.bbsn').text(index + 1);
            })
            counter = $('.purchase-detail').length;
        }
    
    function calculateLineTotal(row) {
        var quantity = parseFloat(row.find('input[name^="qty"]').val());
        var rate = parseFloat(row.find('input[name^="rate"]').val());
        if (!isNaN(quantity) && !isNaN(rate)) {
            var lineTotal = quantity * rate;
            row.find("input[name^='ltotal[]']").val(lineTotal.toFixed(2));

        }

    }
    $(document).ready(function() {
        var counter = $('.sales-detail-duplicator').length;
        var currentRow = $(".sales-detail-duplicator").clone().show();
        $(document).on("click", ".add-row", function() {
            counter+=1;
            var newRow = currentRow.clone();
            newRow.find('.bbsn').text(counter);
            $("#salesDetails").append(newRow);
            // newRow.find('.select2').select2();
            // calculateTotals();
        });

        $(document).on('change', '.select_item', function(){
            
            var selectedOption = $(this).find(':selected');
            var selectedValue = selectedOption.val();
            var unitInput = $(this).closest('.sales-detail-duplicator').find('.item_unit');
            if (selectedValue) {
                $.ajax({
                    url: "<?php echo site_url("inventory/Sales/getunitbyitem/"); ?>" + selectedValue,
                    async: true,
                    dataType:"json",
                    method: 'POST',
                    success: function(response) {
                        console.log(response);
                        var unitName = response.title;
                        unitInput.val(unitName);
                    },
                    error: function() {
                        console.log(error);
                        alert("Error retrieving unit data.");
                    }
                });
            } else {
                unitInput.val('');
                alert("No item selected.");
            }
        });

        
        // $(document).on("click", ".remove-sales-detail", function() {
        //     $(this).closest(".sales-detail").remove();
        //     calculateTotals();
        // });
        // $(document).on('input', 'input[name="qty[]"], input[name="rate[]"]', function() {
        //     calculateTotals();
        // });
    });
</script>
<script>
    function calculateTotals(type='') {
        var subtotal = 0;
        $(".sales-detail-duplicator").each(function() {
            var lineTotal = parseFloat($(this).find("input[name^='ltotal']").val());
            if ((!isNaN(lineTotal))) {
                subtotal += lineTotal;
            }
        });
        var discountamount = 0;
        var discountpercent = 0;
        if(type=='amount'){
            alert("amount");
            discountamount = parseFloat($("input[name='discount']").val());
            discountpercent = (discountamount * 100) / subtotal; 
            alert(discountamount);
            $("#discountpercentage").val(discountpercent.toFixed(2));
        }else{
            discountpercent = parseFloat($("input[name='discountpercentage']").val());
            discountamount = subtotal * (discountpercent/100);
            $("#discount").val(discountamount.toFixed(2));
        }
        
        var taxable = subtotal - discountamount;
        var tax = taxable * 0.13;
        var grandTotal = taxable + tax;
        $('#subtotal').val(subtotal.toFixed(2));
        
        $("#taxable").val(taxable.toFixed(2));
        $('#tax').val(tax.toFixed(2));
        $('#grandtotal').val(grandTotal.toFixed(2));    
    }
</script>

<?php function footerFunctions()
{ ?>
  <script>
   $("#salesDate").nepaliDatePicker({
    dateFormat: "%y-%m-%d",
    closeOnDateSelect: true,
    minDate: $('#salesDate').data('start'),
    maxDate: $('#salesDate').data('end'),

});
  </script>
<?php } ?>