@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.AddNewCashCreditSaleOrder') }}</h4>
                </div>
            </div>
            <form method="post" action="{{ url('/') }}/possaleorderprocess" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label><strong>{{ __('sitelabel.BillNo') }}</strong></label>
                                    <input type="text" class="form-control" id="txtBillNo" name="txtBillNo"
                                        value="{{ $billNo }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label><strong>{{ __('sitelabel.TransactionId') }}</strong></label>
                                    <input type="text" class="form-control" id="txtTransactionId" name="txtTransactionId"
                                        value="#{{ $transactionId }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.SeleactMainCreditCustomer') }}</label>
                                    <select class="form-select" name="cmbCustomer" id="cmbCustomer">
                                        <option value="-1">{{ __('sitelabel.SeleactMainCreditCustomer') }}</option>
                                        @foreach ($customer as $customer)
                                            <option value="{{ $customer->Id }}">
                                                {{ $customer->CustomerCode }}-{{ $customer->CustomerName }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" id="hdChartOfAccountId" name="hdChartOfAccountId">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.SeleactSalesman') }}</label>
                                    <select class="form-select" name="cmbEmployee" id="cmbEmployee">
                                        <option value="-1">{{ __('sitelabel.SeleactSalesman') }}</option>
                                        @foreach ($employee as $employee)
                                            <option value="{{ $employee->Id }}">
                                                {{ $employee->ControlNumber }}-{{ $employee->FullName }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-lg-3 col-sm-6 col-12">
                                <label>
                                    <strong>{{ __('sitelabel.AddNewCustomer') }}</strong>
                                </label>
                                <a href="javascript:void(0);" class="btn btn-adds" data-bs-toggle="modal"
                                    data-bs-target="#create"><i
                                        class="fa fa-plus me-2"></i>{{ __('sitelabel.AddCustomer') }}</a>
                            </div> --}}
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label><strong>{{ __('sitelabel.OrderDate') }}</strong></label>
                                    <input class="form-control" type="date" name="txtOrderDate" id="txtOrderDate">
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="form-group">
                                    <label>
                                        <strong>{{ __('sitelabel.Cash') }}</strong>
                                    </label>
                                    <input type="radio" class="form-check-input" id="rdoCash" name="rdoCashCredit"
                                        value="1">
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="form-group">
                                    <label>
                                        <strong>{{ __('sitelabel.Credit') }}</strong>
                                    </label>
                                    <input type="radio" class="form-check-input" id="rdoCredit" name="rdoCashCredit"
                                        value="2" checked>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.Product') }}</th>
                                            <th>{{ __('sitelabel.SalePrice') }}</th>
                                            <th>{{ __('sitelabel.Bundle') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.AvailableQuantity') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select class="form-select" name="cmbProduct" id="cmbProduct">
                                                    <option value="">{{ __('sitelabel.SeleactMainProduct') }}
                                                    </option>
                                                    @foreach ($product as $product)
                                                        <option value="{{ $product->Id }}">
                                                            {{ $product->SKU }}-{{ $product->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" class="form-control" name="hdProductId"
                                                    id="hdProductId">
                                                <input type="number" class="form-control" name="txtSalePrice"
                                                    id="txtSalePrice" step="0.01">
                                                <input type="hidden" class="form-control" name="hdName" id="hdName">
                                                <input type="hidden" class="form-control" name="hdProductCode"
                                                    id="hdProductCode">
                                                <input type="hidden" class="form-control" name="hdPurchasePrice"
                                                    id="hdPurchasePrice">
                                                <input type="hidden" class="form-control" name="hdWholeSalePrice"
                                                    id="hdWholeSalePrice">
                                                <input type="hidden" class="form-control" name="hdTaxRate" id="hdTaxRate">
                                                <input type="hidden" class="form-control" name="hdTaxValue"
                                                    id="hdTaxValue">
                                                <input type="hidden" class="form-control" name="hdProductCode"
                                                    id="hdPicturePath">
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtBundle"
                                                    name="txtBundle" min="0" value="0">
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtQty" name="txtQty"
                                                    min="0" value="1">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="txtAvailableQuantity"
                                                    name="txtAvailableQuantity" value="0" readonly>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.Discount') }} </th>
                                            <th>{{ __('sitelabel.DiscountValue') }}</th>
                                            <th>{{ __('sitelabel.ScanBarCode') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select class="form-select" name="cmbPerFlat" id="cmbPerFlat">
                                                    <option value="-1">{{ __('sitelabel.SelectDiscount') }}</option>
                                                    <option value="Per">{{ __('sitelabel.Percentage') }}</option>
                                                    <option value="Flat">{{ __('sitelabel.Flat') }}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtDiscountValue"
                                                    name="txtDiscountValue">
                                                <span id="discountError" class="text-danger"
                                                    style="font-size: 12px;"></span>
                                            </td>
                                            <td>
                                                <input type="text" name="txtBarCode" id="txtBarCode"
                                                    class="form-control" placeholder="Enter Bar Code">
                                            </td>
                                            <td>
                                                <button id="btnAdd" type="button" name="btnAdd"
                                                    class="btn btn-my-primary">{{ __('sitelabel.Add') }}</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Product') }}</th>
                                            <th>{{ __('sitelabel.Bundle') }}</th>
                                            <th>{{ __('sitelabel.Qty') }}</th>
                                            <th>{{ __('sitelabel.SalePrice') }}</th>
                                            <th>{{ __('sitelabel.SubTotal') }}</th>
                                            <th>{{ __('sitelabel.Disc') }}</th>
                                            <th>{{ __('sitelabel.STax') }}</th>
                                            <th>{{ __('sitelabel.NetAmt') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tdOrderDetailBody">
                                        {{-- Rows Will Be Populated By Js --}}
                                    </tbody>
                                </table>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>
                                                <strong>{{ __('sitelabel.SubTotal') }}</strong>
                                            </th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th class="text-end">
                                                <strong>
                                                    <span id="spSubTotal"></span>
                                                    <input type="hidden" class="form-control" name="hdMainSubTotal"
                                                        id="hdMainSubTotal">
                                                </strong>
                                            </th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>
                                                <strong>{{ __('sitelabel.Discount') }}</strong>
                                            </th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th class="text-end">
                                                <strong>
                                                    <span id="spDiscount"></span>
                                                    <input type="hidden" class="form-control" name="hdMainDiscount"
                                                        id="hdMainDiscount">
                                                </strong>
                                            </th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>
                                                <strong>{{ __('sitelabel.Tax') }}</strong>
                                            </th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th class="text-end">
                                                <strong>
                                                    <span id="spTax"></span>
                                                    <input type="hidden" class="form-control" name="hdMainSaleTax"
                                                        id="hdMainSaleTax">
                                                </strong>
                                            </th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>
                                                <strong>{{ __('sitelabel.NetAmount') }}</strong>
                                            </th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th>&nbsp;</th>
                                            <th class="text-end">
                                                <strong>
                                                    <span id="spTotal"></span>
                                                    <input type="hidden" class="form-control" name="hdMainNetTotal"
                                                        id="hdMainNetTotal">
                                                </strong>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                        {{-- Expense Section --}}
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.Expense') }}</th>
                                            <th>{{ __('sitelabel.Amount') }}</th>
                                            <th>{{ __('sitelabel.PaidBy') }}</th>
                                            <th>{{ __('sitelabel.Note') }}</th>
                                            <th class="paybycustomer">{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select class="form-select" name="cmbExpense" id="cmbExpense">
                                                    <option value="-1">{{ __('sitelabel.SelectExpenseType') }}
                                                    </option>
                                                    @foreach ($expensetype as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" name="txtAmount"
                                                    id="txtAmount" step="0.01">
                                            </td>
                                            <td>
                                                <select class="form-select" name="cmbPaidBy" id="cmbPaidBy"
                                                    onchange="toggleNewRow()">
                                                    <option value="-1">{{ __('sitelabel.SelectPaidBy') }}</option>
                                                    <option value="Customer">{{ __('sitelabel.Customer') }}</option>
                                                    <option value="ByOwn">{{ __('sitelabel.ByOwn') }}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="txtNote"
                                                    name="txtNote">
                                            </td>
                                            <td>
                                                <button id="btnExpAdd" type="button" name="btnExpAdd"
                                                    class="btn btn-my-primary btn-expense-add paybycustomer">{{ __('sitelabel.Add') }}</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="table table-bordered" id="PaidBy" style="display: none;">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.PaymentType') }} </th>
                                            <th id="bankData" style="display: none">{{ __('sitelabel.Bank') }}</th>
                                            <th id="bankData" style="display: none">{{ __('sitelabel.Branch') }}</th>
                                            <th id="bankData" style="display: none">{{ __('sitelabel.ChequeNO') }}</th>
                                            <th id="bankData" style="display: none">{{ __('sitelabel.ChequeDate') }}
                                            </th>
                                            <th id="bankData" style="display: none">{{ __('sitelabel.ChequeCashDate') }}
                                            </th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select class="form-select" name="cmbPaymentType" id="cmbPaymentType"
                                                    onchange="togglePaymentFields()">
                                                    <option value="-1">{{ __('sitelabel.SeleactPaymentType') }}
                                                    </option>
                                                    @foreach ($paymenttype as $paymenttype)
                                                        <option value="{{ $paymenttype->Id }}">{{ $paymenttype->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td id="bankData" style="display: none">
                                                <select class="form-select" name="cmbBank[]" id="cmbBank">
                                                    <option value="-1">{{ __('sitelabel.SelectBank') }}</option>
                                                    @foreach ($bankWithBranches->unique('BankId') as $bank)
                                                        <option value="{{ $bank->BankId }}">{{ $bank->BankName }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td id="bankData" style="display: none">
                                                <select class="form-select" name="cmbBranch[]" id="cmbBranch">
                                                    <option value="-1">{{ __('sitelabel.SelectBranch') }}</option>
                                                    {{-- Branch options dynamically populated via JS --}}
                                                </select>
                                            </td>
                                            <td id="bankData" style="display: none">
                                                <input type="text" class="form-control" id="txtChequeNO"
                                                    name="txtChequeNO" value="{{ old('txtChequeNO', '') }}">
                                            </td>
                                            <td id="bankData" style="display: none">
                                                <input type="date" class="form-control" id="txtChequeDate"
                                                    name="txtChequeDate" value="{{ old('txtChequeDate', '') }}">
                                            </td>
                                            <td id="bankData" style="display: none">
                                                <input type="date" class="form-control" id="txtChequeCashDate"
                                                    name="txtChequeCashDate" value="{{ old('txtChequeCashDate', '') }}">
                                            </td>
                                            <td>
                                                <button id="btnExpAddPayment" type="button" name="btnExpAddPayment"
                                                    class="btn btn-my-primary btn-expense-add">{{ __('sitelabel.Add') }}</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Expense') }}</th>
                                            <th>{{ __('sitelabel.PaidBy') }}</th>
                                            <th>{{ __('sitelabel.Note') }}</th>
                                            <th>{{ __('sitelabel.Bank') }}</th>
                                            <th>{{ __('sitelabel.Branch') }}</th>
                                            <th>{{ __('sitelabel.ChequeNO') }}</th>
                                            <th>{{ __('sitelabel.ChequeDate') }}</th>
                                            <th>{{ __('sitelabel.ChequeCashDate') }}</th>
                                            <th>{{ __('sitelabel.Amount') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tdExpenseRows">
                                        {{-- Rows Will Be Add by Add Button via Js --}}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th colspan="9" style="text-align: right">
                                                <strong>{{ __('sitelabel.Total') }}</strong>
                                            </th>
                                            <th>
                                                <input type="text" class="form-control" name="hdTotalAmount"
                                                    id="hdTotalAmount" value="0" style="text-align: right" readonly>
                                            </th>
                                            <th>&nbsp;</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <a class="btn btn-my-primary" id="payment"
                                    style="color: #fff;">{{ __('sitelabel.Payment') }}</a>
                                <button type="button" onclick="javascript:window.location='{{ url('/saleorder') }}';"
                                    class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="paymentscreen" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{ __('sitelabel.Payment') }}</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <h4>
                                                Total Amount to Pay :
                                            </h4>
                                        </td>
                                        <td>

                                            <h4>
                                                <span id="spPaymentNetTotal">
                                                    0.00
                                            </h4>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4>
                                                Payment Mode:
                                            </h4>
                                        </td>
                                        <td>
                                            <h4>
                                                <span id="spPaymentMode">Credit</span>
                                            </h4>
                                        </td>
                                    </tr>
                                    <tr id="receivedAmountRow">
                                        <td>
                                            <h4>
                                                Received Amount
                                            </h4>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control" id="txtReceivedAmount"
                                                name="txtReceivedAmount">
                                        </td>
                                    </tr>
                                    <tr id="receivedAmountRow">
                                        <td>
                                            <h4>
                                                Amount to Return :
                                            </h4>
                                        </td>
                                        <td>
                                            <span class="form-control" id="spReturnAmount" name="spReturnAmount"></span>
                                            <input type="hidden" id="txtReturnAmount" name="txtReturnAmount">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <label>Note (if any)</label>
                                            <textarea class="form-control" name="txtNote" id="txtNote"></textarea>
                                        </td>

                                    </tr>
                                </table>

                                <div class="col-lg-12">
                                    <button id="printInvoice" type="submit" name="print_invoice" value="1"
                                        class="btn btn-block btn-outline-primary active btn-lg">{{ __('sitelabel.SaveAndPrint') }}</button>
                                    <button id="submitInvoice" type="submit"
                                        class="btn btn-block btn-outline-primary active btn-lg">{{ __('sitelabel.SaveAndNew') }}</button>
                                    <button type="button" class="btn btn-block btn-outline-secondary active btn-lg"
                                        data-bs-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- End Main Wrapper -->

        <div class="modal fade" id="calculator" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Define Quantity</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="calculator-set">
                            <div class="calculatortotal">
                                <h4>0</h4>
                            </div>
                            <ul>
                                <li>
                                    <a href="javascript:void(0);">1</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">2</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">3</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">4</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">5</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">6</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">7</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">8</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">9</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="btn btn-closes"><img
                                            src="{{ url('/') }}/admin/assets/img/icons/close-circle.svg"
                                            alt="img"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">0</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="btn btn-reverse"><img
                                            src="{{ url('/') }}/admin/assets/img/icons/reverse.svg"
                                            alt="img"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="holdsales" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Hold order</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="hold-order">
                            <h2>4500.00</h2>
                        </div>
                        <div class="form-group">
                            <label>Order Reference</label>
                            <input type="text">
                        </div>
                        <div class="para-set">
                            <p>The current order will be set on hold. You can retreive this order from the pending order
                                button.
                                Providing a reference to it might help you to identify the order more quickly.</p>
                        </div>
                        <div class="col-lg-12">
                            <a class="btn btn-submit me-2">Submit</a>
                            <a class="btn btn-cancel" data-bs-dismiss="modal">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="edit" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Order</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Product Price</label>
                                    <input type="text" value="20">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Product Price</label>
                                    <select class="form-select">
                                        <option>Exclusive</option>
                                        <option>Inclusive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label> Tax</label>
                                    <div class="input-group">
                                        <input type="text">
                                        <a class="scanner-set input-group-text">
                                            %
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Discount Type</label>
                                    <select class="form-select">
                                        <option>Fixed</option>
                                        <option>Percentage</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Discount</label>
                                    <input type="text" value="20">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Sales Unit</label>
                                    <select class="form-select">
                                        <option>Kilogram</option>
                                        <option>Grams</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <a class="btn btn-submit me-2">Submit</a>
                            <a class="btn btn-cancel" data-bs-dismiss="modal">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="create" tabindex="-1" aria-labelledby="create" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Customer Name</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Country</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>City</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Address</label>
                                    <input type="text">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <a class="btn btn-submit me-2">Submit</a>
                            <a class="btn btn-cancel" data-bs-dismiss="modal">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="delete" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Order Deletion</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="delete-order">
                            <img src="{{ url('/') }}/admin/assets/img/icons/close-circle1.svg" alt="img">
                        </div>
                        <div class="para-set text-center">
                            <p>The current order will be deleted as no payment has been <br> made so far.</p>
                        </div>
                        <div class="col-lg-12 text-center">
                            <a class="btn btn-danger me-2">Yes</a>
                            <a class="btn btn-cancel" data-bs-dismiss="modal">No</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="deletemsg" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Product Deletion</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <input type="hidden" id="hdDeleteRowId">
                    </div>
                    <div class="modal-body">
                        <div class="delete-order">
                            <img src="{{ url('/') }}/admin/assets/img/icons/close-circle1.svg" alt="img">
                        </div>
                        <div class="para-set text-center">
                            <h2 class="swal2-title" id="swal2-title">Are you sure?</h2>
                        </div>
                        <div class="col-lg-12 text-center">
                            <a onclick="RemoveRow();" data-bs-dismiss="modal" class="btn btn-danger me-2">Yes. delete
                                it!</a>
                            <button type="button" data-bs-dismiss="modal" class="swal2-confirm btn btn-my-primary"
                                aria-label="" style="display: inline-block;">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="posmsg" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="posMsgHeading">Pos Message</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>

                    </div>
                    <div class="modal-body">
                        <div class="delete-order">
                            <img src="{{ url('/') }}/admin/assets/img/icons/close-circle1.svg" alt="img">
                        </div>
                        <div class="para-set text-center">
                            <h2 class="swal2-title" id="swal2-title">
                                <span id="spPosMsgDetail"> Please select a customer from customer list</span>
                            </h2>
                        </div>
                        <div class="col-lg-12 text-center">
                            <a data-bs-dismiss="modal" class="btn btn-danger me-2">Ok</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="recents" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Recent Transactions</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="tabs-sets">
                            <ul class="nav nav-tabs" id="myTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="purchase-tab" data-bs-toggle="tab"
                                        data-bs-target="#purchase" type="button" aria-controls="purchase"
                                        aria-selected="true" role="tab">Purchase</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="payment-tab" data-bs-toggle="tab"
                                        data-bs-target="#payment" type="button" aria-controls="payment"
                                        aria-selected="false" role="tab">Payment</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="return-tab" data-bs-toggle="tab"
                                        data-bs-target="#return" type="button" aria-controls="return"
                                        aria-selected="false" role="tab">Return</button>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="purchase" role="tabpanel"
                                    aria-labelledby="purchase-tab">
                                    <div class="table-top">
                                        <div class="search-set">
                                            <div class="search-input">
                                                <a class="btn btn-searchset"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/search-white.svg"
                                                        alt="img"></a>
                                            </div>
                                        </div>
                                        <div class="wordset">
                                            <ul>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="pdf"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/pdf.svg"
                                                            alt="img"></a>
                                                </li>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="excel"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/excel.svg"
                                                            alt="img"></a>
                                                </li>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="print"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/printer.svg"
                                                            alt="img"></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table datanew">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Reference</th>
                                                    <th>Customer</th>
                                                    <th>Amount </th>
                                                    <th class="text-end">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>INV/SL0101</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>INV/SL0101</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>INV/SL0101</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>INV/SL0101</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>

                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="payment" role="tabpanel">
                                    <div class="table-top">
                                        <div class="search-set">
                                            <div class="search-input">
                                                <a class="btn btn-searchset"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/search-white.svg"
                                                        alt="img"></a>
                                            </div>
                                        </div>
                                        <div class="wordset">
                                            <ul>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="pdf"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/pdf.svg"
                                                            alt="img"></a>
                                                </li>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="excel"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/excel.svg"
                                                            alt="img"></a>
                                                </li>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="print"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/printer.svg"
                                                            alt="img"></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table datanew">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Reference</th>
                                                    <th>Customer</th>
                                                    <th>Amount </th>
                                                    <th class="text-end">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0101</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0102</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0103</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="return" role="tabpanel">
                                    <div class="table-top">
                                        <div class="search-set">
                                            <div class="search-input">
                                                <a class="btn btn-searchset"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/search-white.svg"
                                                        alt="img"></a>
                                            </div>
                                        </div>
                                        <div class="wordset">
                                            <ul>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="pdf"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/pdf.svg"
                                                            alt="img"></a>
                                                </li>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="excel"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/excel.svg"
                                                            alt="img"></a>
                                                </li>
                                                <li>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="print"><img
                                                            src="{{ url('/') }}/admin/assets/img/icons/printer.svg"
                                                            alt="img"></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table datanew">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Reference</th>
                                                    <th>Customer</th>
                                                    <th>Amount </th>
                                                    <th class="text-end">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0101</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0102</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0103</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0106</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2022-03-07 </td>
                                                    <td>0107</td>
                                                    <td>Walk-in Customer</td>
                                                    <td>$ 1500.00</td>
                                                    <td>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/eye.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/edit.svg"
                                                                alt="img">
                                                        </a>
                                                        <a class="me-3 confirm-text" href="javascript:void(0);">
                                                            <img src="{{ url('/') }}/admin/assets/img/icons/delete.svg"
                                                                alt="img">
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="printbill" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row  invoice-box">
                            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 ">
                                <div class="col-lg-12 col-md-12  col-xs-12 col-sm-12  text-center ">
                                    <h1 style="font-size:26px;">Cash Sale Invoice</h1>
                                </div>
                            </div>
                        </div>
                        <div class="row  table-row">
                            <div class="col-12 col-sm-12 col-md-12 col-xl-12 col-lg-12">
                                <table class="table table-bordered">
                                    <tr style="line-height:5px;">
                                        <td class="text-left"><strong>Customer Code/Name: </strong></td>
                                        <td class="text-left"></td>
                                        <td class="text-left"><strong>Invoice No:</strong></td>
                                        <td class="text-left"></td>
                                    </tr>
                                    <tr style="line-height:5px;">
                                        <td class="text-left"><strong>Telephone No: </strong></td>
                                        <td class="text-left"></td>
                                        <td class="text-left"><strong>System Date & Time:</strong></td>
                                        <td class="text-left"></td>
                                    </tr>
                                    <tr style="line-height:5px;">
                                        <td class="text-left"><strong>Channel: </strong></td>
                                        <td class="text-left"></td>
                                        <td class="text-left"><strong>User:</strong></td>
                                        <td class="text-left"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="row table-row">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width:5%">#</th>
                                        <th style="width:50%">Item</th>
                                        <th class="text-right" style="width:15%">Quantity</th>
                                        <th class="text-right" style="width:15%">Unit Price</th>
                                        <th class="text-right" style="width:15%">Total Price</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-center">1</td>
                                        <td>Flatter Theme</td>
                                        <td class="text-right">10</td>
                                        <td class="text-right">$18</td>
                                        <td class="text-right">$180</td>
                                    </tr>
                                    <tr>
                                        <td class="text-center">2</td>
                                        <td>Flat Icons</td>
                                        <td class="text-right">6</td>
                                        <td class="text-right">$59</td>
                                        <td class="text-right">$254</td>
                                    </tr>
                                    <tr>
                                        <td class="text-center">3</td>
                                        <td>Wordpress version</td>
                                        <td class="text-right">4</td>
                                        <td class="text-right">$95</td>
                                        <td class="text-right">$285</td>
                                    </tr>
                                    <tr class="last-row">
                                        <td class="text-center">4</td>
                                        <td>Server Deployment</td>
                                        <td class="text-right">1</td>
                                        <td class="text-right">$300</td>
                                        <td class="text-right">$300</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 margintop">
                                <p class="lead marginbottom">THANK YOU!</p>
                                <button class="btn btn-success" id="invoice-print"><i class="fa fa-print"></i> Print
                                    Invoice</button>
                                <button class="btn btn-danger"><i class="fa fa-envelope-o"></i> Mail Invoice</button>
                            </div>
                            <div class="col-xs-6 text-right pull-right invoice-total">
                                <p>Subtotal : $1019</p>
                                <p>Discount (10%) : $101 </p>
                                <p>VAT (8%) : $73 </p>
                                <p>Total : $991 </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var RowId = 1;
        var gSubTotal = 0;
        var gDiscount = 0;
        var gExpTotal = 0;
        var expRowId = 1;
        var gTax = 0;
        var gNetAmount = 0;

        function SetPaymentType(paytypeid) {

            $("#hdPaymentTypeId").val(paytypeid);
        }
        $(document).ready(function() {
            $('#cmbCustomer, #cmbEmployee, #cmbProduct, #cmbPerFlat, #cmbExpense, #cmbPaidBy, #cmbPaymentType, #cmbBank, #cmbBranch')
                .select2({
                    theme: "bootstrap-5",
                });


            togglePaymentFields();
            toggleNewRow();
            calculateInitialTotal();
            resetInputFields();

            $("#cmbBank").change(function() {
                var BanksId = $("#cmbBank").val();
                $('#cmbBranch').empty(); // Clear existing options

                if (BanksId !== "-1") { // Ensure a valid bank is selected
                    $.ajax({
                        type: "GET",
                        url: "{{ url('/') }}/api/getBankBranches/" + BanksId,
                        success: function(data) {
                            $('#cmbBranch').append(data); // Append returned options
                        },
                        error: function(xhr, status, error) {
                            console.error("Error fetching branches:", error);
                            alert("Failed to load branches. Please try again.");
                        }
                    });
                }
            });

            $("#hdPaymentTypeId").val(2);
            $("#receivedAmountRow, #returnAmountRow").hide();
            var now = new Date();

            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);

            var today = now.getFullYear() + "-" + (month) + "-" + (day);

            $('#txtOrderDate').val(today);
            $("#cmbCustomer").change(function() {
                var CustomerId = $("#cmbCustomer").val();
                if (CustomerId !== "-1") {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('/') }}/api/GetCustomerById/" + CustomerId,
                        success: function(data) {
                            if (data && data.length > 0) {

                                $("#hdChartOfAccountId").val(data[0][0].ChartOfAccountId);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error("Error fetching customer data:", error);
                        }
                    });
                }
            });

            $("#cmbProduct").change(function() {
                var ProductId = $("#cmbProduct").val();
                $.ajax({
                    type: "GET",
                    url: "{{ url('/') }}/api/GetProductById/" + ProductId,
                    contentType: "application/json;charset=utf-8",
                    success: function(data) {

                        $.each(data, function(key, item) {
                            for (var index = 0; index < item.length; index++) {

                                $("#hdProductId").val(item[index].Id);
                                $("#txtSalePrice").val(item[index].SalePrice);
                                $("#txtBundle").val(item[index].Bundle);
                                $("#hdPicturePath").val(item[index].Thumbnai);
                                $("#hdTaxValue").val(item[index].TaxValue);
                                $("#hdTaxRate").val(item[index].TaxRate);
                                $("#hdWholeSalePrice").val(item[index].WholeSalePrice);
                                $("#hdPurchasePrice").val(item[index].PurchasePrice);
                                $("#hdProductCode").val(item[index].SKU);
                                $("#hdName").val(item[index].Name);
                            }
                        });
                    }
                });
            });
            $("#btnAdd").click(function() {
                var ProductCode = $("#hdProductCode").val();
                var ProductName = $("#hdName").val();
                var Qty = $("#txtQty").val();
                var Bundle = $("#txtBundle").val();
                var SalePrice = $("#txtSalePrice").val();
                var WholeSalePrice = $("#hdWholeSalePrice").val();
                var PurchasePrice = $("#hdWholeSalePrice").val();
                var TaxRate = $("#hdTaxRate").val();
                var TaxValue = parseFloat($("#hdTaxValue").val()) * parseFloat(Qty);
                var SubTotal = parseFloat(SalePrice) * parseFloat(Qty);
                var Discount = 0;
                if ($("#cmbPerFlat").val() != "-1") {

                    if ($("#cmbPerFlat").val() == "Per") {
                        Discount = (SubTotal * parseFloat($("#txtDiscountValue").val())) / 100;
                    } else if ($("#cmbPerFlat").val() == "Flat") {
                        Discount = parseFloat($("#txtDiscountValue").val());
                    }
                }

                gSubTotal = gSubTotal + SubTotal
                $("#spSubTotal").html(formatNumber(gSubTotal));
                $("#hdMainSubTotal").val(gSubTotal);
                gDiscount = gDiscount + Discount;
                $("#spDiscount").html(formatNumber(gDiscount));
                $("#hdMainDiscount").val(gDiscount);
                gTax = gTax + parseFloat(TaxValue);
                $("#spTax").html(formatNumber(gTax));
                $("#hdMainSaleTax").val(gTax);
                var NetAmount = SubTotal - parseFloat(Discount) + parseFloat(TaxValue);
                gNetAmount = gNetAmount + NetAmount;
                $("#spTotal").html(formatNumber(gNetAmount));
                $("#spPaymentNetTotal").html(formatNumber(gNetAmount));
                $("#hdMainNetTotal").val(gNetAmount);

                var html = `
                            <tr id="tr${RowId}">
                                <td>${RowId}</td>
                                <td>
                                    <input type="hidden" name="hdOrdProductId[]" value="${$("#hdProductId").val()}">
                                    <div class="productimg">
                                        <div class="productcontet">
                                            <h4>
                                                ${ProductName}
                                                <a href="javascript:void(0);" class="ms-2" data-bs-toggle="modal" data-bs-target="#edit">
                                                    <img src="{{ url('/') }}/admin/assets/img/icons/edit-5.svg" alt="img">
                                                </a>
                                            </h4>
                                            <div class="productlinkset">
                                                <h5>${ProductCode}</h5>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="increment-decrement">
                                        <div class="input-groups">
                                            <input type="text" readonly name="txtBundle[]" value="${Bundle}" class="form-control" style="width:90px">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="increment-decrement">
                                        <div class="input-groups">
                                            <input type="text" readonly name="txtOrdQty[]" value="${Qty}" class="form-control" style="width:90px">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <input type="hidden" name="hdOrdSalePrice[]" value="${SalePrice}">
                                    ${SalePrice}
                                </td>
                                <td>
                                    <input type="hidden" id="hdOrdSubTotal${RowId}" name="hdOrdSubTotal[]" value="${SubTotal}">
                                    ${formatNumber(SubTotal)}
                                </td>
                                <td>
                                    <input type="hidden" id="hdOrdDiscountTotal${RowId}" name="hdOrdDiscount[]" value="${Discount}">
                                    ${formatNumber(Discount)}
                                </td>
                                <td>
                                    <input type="hidden" id="hdOrdTaxValueTotal${RowId}" name="hdOrdTaxValue[]" value="${TaxValue}">
                                    ${formatNumber(TaxValue)}
                                </td>
                                <td>
                                    <input type="hidden" id="hdOrdNetTotal${RowId}" name="hdOrdNetAmountValue[]" value="${NetAmount}">
                                    ${formatNumber(NetAmount)}
                                </td>
                                <td>
                                    <a href="javascript:void(0);" onclick="DeleteProduct(${RowId})" id="iddeleteproduct" data-bs-toggle="modal">
                                        <img src="{{ url('/') }}/admin/assets/img/icons/delete-2.svg" alt="img">
                                    </a>
                                </td>
                            </tr>
                        `;
                $('#tdOrderDetailBody').append(html);
                RowId = RowId + 1;
                $("#txtDiscountValue").val(0);
                $("#cmbPerFlat").val("-1");
            });

            // Update payment type when radio buttons change
            $("input[name='rdoCashCredit']").change(function() {
                const selectedValue = $("input[name='rdoCashCredit']:checked").val();
                $("#hdPaymentTypeId").val(selectedValue);

                // Update payment mode text and row visibility based on selected radio button
                if (selectedValue == "1") {
                    $("#spPaymentMode").html("Cash");
                    $("#receivedAmountRow, #returnAmountRow").show();
                } else if (selectedValue == "2") {
                    $("#spPaymentMode").html("Credit");
                    $("#receivedAmountRow, #returnAmountRow").hide();
                }
            });

            // Payment button click handler
            $("#payment").click(function() {
                const paymentType = $("#hdPaymentTypeId").val();

                if (paymentType == "4" && $("#cmbCustomer").val() == "-1") {
                    $("#posmsg").modal('show');
                } else {
                    // Update payment mode text
                    if (paymentType == "1") {
                        $("#spPaymentMode").html("Cash");
                        $("#receivedAmountRow, #returnAmountRow").show();
                    } else if (paymentType == "2") {
                        $("#spPaymentMode").html("Credit");
                        $("#receivedAmountRow, #returnAmountRow").hide();
                    }
                    $("#paymentscreen").modal('show');
                }
            });

            $("#txtReceivedAmount").on('keyup', function(e) {
                var dPayNetAmount = parseFloat($("#hdMainNetTotal").val());
                var dRecAmount = parseFloat($("#txtReceivedAmount").val());
                var dReturnAmount = dPayNetAmount - dRecAmount;
                $("#spReturnAmount").html(dReturnAmount);
                $("#txtReturnAmount").val(dReturnAmount);
            });
            var frm = $('#frmSaleOrder');

            frm.submit(function(e) {
                if ($("#txtReceivedAmount").val() == "") {
                    $("#txtReceivedAmount").val(0);
                }
                if (parseFloat($("#txtReceivedAmount").val()) < parseFloat($("#hdMainNetTotal").val())) {
                    e.preventDefault();
                    $("#spPosMsgDetail").html(
                        "Cash, Debit and Scan Received payment should be equal or greater than Amount to Pay "
                    );
                    $("#posmsg").modal('show');
                    return;
                } else {
                    e.preventDefault();
                    $.ajax({
                        type: frm.attr('method'),
                        url: frm.attr('action'),
                        data: frm.serialize(),
                        success: function(data) {
                            console.log('Submission was successful.');
                            console.log(data);
                            $("#paymentscreen").modal('hide');
                            $('#tdOrderDetailBody').html('');
                            $("#cmbProduct").val("-1");
                            $("#cmbPerFlat").val("-1");
                            $("#txtSalePrice").val(0);
                            $("#spSubTotal").html("0");
                            $("#hdMainSubTotal").val(0);
                            $("#hdMainDiscount").html("0");
                            $("#hdMainDiscount").val(0);
                            $("#spTax").html("0");
                            $("#hdMainSaleTax").val(0);
                            $("#spTotal").html("0");
                            $("#hdMainNetTotal").val(0);
                            RowId = 1;
                            gSubTotal = 0;
                            gDiscount = 0;
                            gTax = 0;
                            gNetAmount = 0;
                            $("#spPaymentNetTotal").html("0");
                            $("#txtReceivedAmount").val(0);
                            $("#spReturnAmount").html("0");
                            $("#txtReturnAmount").val(0);
                            $("#txtNote").val("");
                            var SaleOrderId = 0;
                            $.each(data, function(key, item) {
                                for (var index = 0; index < item.length; index++) {
                                    SaleOrderId = item[index].Id;
                                    var url =
                                        "{{ url('/') }}/printsaleinvoice/" +
                                        SaleOrderId;
                                    openInNewTab(url);

                                }
                            });

                        },
                        error: function(data) {
                            console.log('An error occurred.');
                            console.log(data);
                        },
                    });
                }
            });

            // Modified click handler for both Customer and ByOwn scenarios
            $(document).on('click', '.btn-expense-add', function(e) {
                e.preventDefault();

                // Common validations
                const expenseType = $("#cmbExpense option:selected");
                const amount = $("#txtAmount").val();
                const paidBy = $("#cmbPaidBy").val();
                const note = $("#txtNote").val();

                // Basic validations
                if (expenseType.val() === "-1") {
                    alert("Please select expense type");
                    return;
                }
                if (!amount || parseFloat(amount) <= 0) {
                    alert("Please enter valid amount");
                    return;
                }
                if (paidBy === "-1") {
                    alert("Please select who paid");
                    return;
                }

                let paymentType = {
                    val: "",
                    text: ""
                };
                let bankData = {
                    bank: "",
                    branch: "",
                    chequeNo: "",
                    chequeDate: "",
                    chequeCashDate: ""
                };

                // Only validate payment details if ByOwn is selected
                if (paidBy === "ByOwn") {
                    paymentType = $("#cmbPaymentType option:selected");

                    if (paymentType.val() === "-1") {
                        alert("Please select payment type");
                        return;
                    }

                    // Get bank details if payment type requires it
                    if (['4', '5', '6'].includes(paymentType.val())) {
                        const bankSelect = $("#cmbBank option:selected");
                        const branchSelect = $("#cmbBranch option:selected");

                        bankData = {
                            bank: bankSelect.val() !== "-1" ? bankSelect.val() : "", // BankId
                            branch: branchSelect.val() !== "-1" ? branchSelect.val() : "", // BranchId
                            chequeNo: $("#txtChequeNO").val() || "",
                            chequeDate: $("#txtChequeDate").val() || "",
                            chequeCashDate: $("#txtChequeCashDate").val() || ""
                        };

                        if (!validateBankFields(bankData)) {
                            return;
                        }
                    }
                }

                // Update total amount
                const amountValue = parseFloat(amount);
                gExpTotal += amountValue;
                $("#hdTotalAmount").val(formatNumber(gExpTotal));

                // Create new row - Modified to handle both Customer and ByOwn scenarios
                const html = `
                    <tr id="trExp${expRowId}">
                        <td>${expRowId}</td>
                        <td>${expenseType.text()}<input type="hidden" name="hdExpenseType[]" value="${expenseType.val()}"></td>
                        <td>${paidBy}<input type="hidden" name="hdPaidBy[]" value="${paidBy}"></td>
                        <td>${note}<input type="hidden" name="hdNote[]" value="${note}">
                            <input type="hidden" name="hdPaymentType[]" value="${paidBy === "ByOwn" ? paymentType.val() : ""}">
                        </td>
                        <td>${bankData.bank ? $("#cmbBank option[value='" + bankData.bank + "']").text() : ""}
                            <input type="hidden" name="hdBank[]" value="${bankData.bank}">
                        </td>
                        <td>${bankData.branch ? $("#cmbBranch option[value='" + bankData.branch + "']").text() : ""}
                            <input type="hidden" name="hdBranch[]" value="${bankData.branch}">
                        </td>
                        <td>${bankData.chequeNo}<input type="hidden" name="hdChequeNo[]" value="${bankData.chequeNo}"></td>
                        <td>${bankData.chequeDate}<input type="hidden" name="hdChequeDate[]" value="${bankData.chequeDate}"></td>
                        <td>${bankData.chequeCashDate}<input type="hidden" name="hdChequeCashDate[]" value="${bankData.chequeCashDate}"></td>
                        <td class="text-end">${formatNumber(amountValue)}<input type="hidden" name="hdAmount[]" value="${amountValue}"></td>
                        <td>
                            <a href="javascript:void(0);" onclick="DeleteExpenseRow(${expRowId})" class="delete-row">
                                <img src="/admin/assets/img/icons/delete-2.svg" alt="delete">
                            </a>
                        </td>
                    </tr>
                `;

                // Append new row and increment row ID
                $("#tdExpenseRows").append(html);
                expRowId++;

                // Reset input fields
                resetInputFields();

                // Reset select2 dropdowns
                $('#cmbExpense, #cmbPaidBy').val('-1').trigger('change');
            });
        });

        // Modify resetInputFields to properly reset select2 fields
        function resetInputFields() {
            $("#cmbExpense").val("-1").trigger('change');
            $("#txtAmount").val("");
            $("#cmbPaidBy").val("-1").trigger('change');
            $("#txtNote").val("");
            $("#cmbPaymentType").val("-1").trigger('change');
            resetBankFields();

            // Reset visibility
            togglePaymentFields();
            toggleNewRow();
        }

        function openInNewTab(url) {
            window.open(url, '_blank').focus();
        }

        function DeleteProduct(RemoveRowId) {
            $("#hdDeleteRowId").val(RemoveRowId);
            $("#deletemsg").modal('show');
        }

        function RemoveRow() {
            var RemoveRowId = $("#hdDeleteRowId").val();
            var sSubTotal = "#hdOrdSubTotal" + RemoveRowId;
            gSubTotal = gSubTotal - parseFloat($(sSubTotal).val());
            $("#spSubTotal").html(formatNumber(gSubTotal));
            $("#hdMainSubTotal").val(gSubTotal);
            var sSubDiscount = "#hdOrdDiscountTotal" + RemoveRowId;
            gDiscount = gDiscount - parseFloat($(sSubDiscount).val());
            $("#spDiscount").html(formatNumber(gDiscount));
            $("#hdMainDiscount").val(gDiscount);
            var sTax = "#hdOrdTaxValueTotal" + RemoveRowId;
            gTax = gTax - parseFloat($(sTax).val());
            $("#spTax").html(formatNumber(gTax));
            $("#hdMainSaleTax").val(gTax);
            gNetAmount = (gSubTotal - gDiscount) + gTax;
            $("#spTotal").html(formatNumber(gNetAmount));
            $("#hdMainNetTotal").val(gNetAmount);
            $("#spPaymentNetTotal").html(formatNumber(gNetAmount));
            var sRowId = "#tr" + RemoveRowId;
            $(sRowId).remove();
        }

        function validateBankFields(bankData) {
            if (['4', '5', '6'].includes($("#cmbPaymentType").val())) {
                if ($("#cmbBank").val() === "-1") {
                    alert("Please select bank");
                    return false;
                }
                if ($("#cmbBranch").val() === "-1") {
                    alert("Please select branch");
                    return false;
                }
            }
            return true;
        }

        function calculateInitialTotal() {
            gExpTotal = 0;
            $('input[name="hdAmount[]"]').each(function() {
                gExpTotal += parseFloat($(this).val() || 0);
            });
            $("#hdTotalAmount").val(formatNumber(gExpTotal));
        }

        function DeleteExpenseRow(rowId) {
            const row = $(`#trExp${rowId}`);
            const amount = parseFloat(row.find('input[name="hdAmount[]"]').val());

            // Update total
            gExpTotal -= amount;
            $("#hdTotalAmount").val(formatNumber(gExpTotal));

            // Remove row
            row.remove();
        }

        function toggleBankFields(elements, show) {
            elements.forEach(el => {
                el.style.display = show ? 'table-cell' : 'none';
            });
        }

        function togglePaymentFields() {
            const paymentType = $("#cmbPaymentType").val();
            const bankFields = $("[id='bankData']");
            const requiresBank = ['4', '5', '6'].includes(paymentType);

            toggleBankFields(bankFields.toArray(), requiresBank);

            if (!requiresBank) {
                resetBankFields();
            }
        }

        function toggleNewRow() {
            const paidBy = $("#cmbPaidBy").val();
            const paidByRow = $("#PaidBy");
            const payByCustomer = $(".paybycustomer");

            if (paidBy === 'ByOwn') {
                paidByRow.show();
                payByCustomer.hide();
            } else {
                paidByRow.hide();
                payByCustomer.show();
                $("#cmbPaymentType").val("-1");
                resetBankFields();
            }
        }

        function resetBankFields() {
            $("#cmbBank").val("-1");
            $("#cmbBranch").val("-1");
            $("#txtChequeNO").val("");
            $("#txtChequeDate").val("");
            $("#txtChequeCashDate").val("");
        }

        function formatNumber(number) {
            return parseFloat(number).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        $(document).ready(function () {
    function setupKeyNavigation() {
        const entryFields = [
            'cmbCustomer', 
            'cmbEmployee', 
            'txtOrderDate', 
            'cmbProduct', 
            'txtSalePrice', 
            'txtBundle', 
            'txtQty', 
            'btnAdd', 
            'cmbExpense', 
            'txtAmount', 
            'cmbPaidBy', 
            'txtNote', 
            'btnExpAdd'
        ];

        entryFields.forEach((fieldId, index) => {
            const element = document.getElementById(fieldId);
            if (element) {
                // Prevent default Enter behavior (e.g., form submission) and handle navigation
                element.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();  // Prevent form submission on Enter key press
                        
                        // If element is a dropdown (select), focus next element
                        if (element.tagName === 'SELECT') {
                            const nextElement = entryFields[index + 1];
                            if (nextElement) {
                                document.getElementById(nextElement).focus();
                            }
                        } 
                        // If it's a button, trigger the button click
                        else if (element.tagName === 'BUTTON') {
                            if (index === entryFields.length - 1) {
                                document.getElementById('btnAdd').click();
                            } else {
                                const nextElement = entryFields[index + 1];
                                if (nextElement) {
                                    document.getElementById(nextElement).focus();
                                }
                            }
                        } 
                        // For regular input fields, move focus to the next field
                        else {
                            const nextElement = entryFields[index + 1];
                            if (nextElement) {
                                document.getElementById(nextElement).focus();
                            }
                        }
                    }
                });
            }
        });
    }

    // Initialize the key navigation setup
    setupKeyNavigation();

    // Additional functionality for dropdown selection via arrow keys
    $(document).on('keydown', '.form-select', function (e) {
        var dropdown = $(this);
        var options = dropdown.find('option');
        var selectedIndex = options.index(options.filter(':selected'));

        if (e.key === 'ArrowDown') {
            e.preventDefault();  // Prevent default action (e.g., scrolling)
            // Move to the next option
            selectedIndex = (selectedIndex + 1) % options.length;
            options.eq(selectedIndex).prop('selected', true);
            dropdown.val(options.eq(selectedIndex).val());
        } 
        else if (e.key === 'ArrowUp') {
            e.preventDefault();  // Prevent default action (e.g., scrolling)
            // Move to the previous option
            selectedIndex = (selectedIndex - 1 + options.length) % options.length;
            options.eq(selectedIndex).prop('selected', true);
            dropdown.val(options.eq(selectedIndex).val());
        }
    });
});

    </script>
@endsection