@extends('masterorder')
@section('title', $title)
@section('content')
    <!-- Main Wrapper -->

    <form method="POST" action="{{ url('/') }}/editpossaleorderprocess/{{ $saleOrder->Id }}" id="frmSaleOrder">
        @csrf
        <div class="main-wrappers">

            <div class="page-wrapper ms-0" style="padding: 0px 0 0">
                <div class="content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="page-header text-center">
                                <h3>{{ __('sitelabel.EditCashCreditSaleOrder') }} </h3>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-1">
                            <div class="page-header">
                                <div class="page-title">
                                    <strong>{{ __('sitelabel.OrderNo') }}</strong>
                                    <br>
                                    {{ $saleOrder->BillNo }} <!-- Use $saleOrder to get the BillNo -->
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <div class="page-header">
                                <div class="page-title">
                                    <strong>{{ __('sitelabel.TransactionId') }}</strong>
                                    <br>
                                    #{{ $saleOrder->Id }} <!-- Use $saleOrder to get the TransactionId -->
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <div class="page-header">
                                <div class="page-title">
                                    <label>
                                        <strong>{{ __('sitelabel.Cash') }}</strong>
                                    </label>
                                    <input type="radio" name="rdoCashCredit" value="1"
                                           {{ $saleOrderType == 1 ? 'checked' : '' }}>
                                    <br>
                                    <label>
                                        <strong>{{ __('sitelabel.Credit') }}</strong>
                                    </label>
                                    <input type="radio" name="rdoCashCredit" value="2"
                                           {{ $saleOrderType == 2 ? 'checked' : '' }}>
                                </div>                                
                            </div>                            
                        </div>                        
                        
                        <div class="col-lg-1">
                            <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-2">
                            <div class="select-split">
                                <div class="select-group w-100">
                                    <select class="form-select" name="cmbCustomer" id="cmbCustomer">
                                        <option value="-1">{{ __('sitelabel.SeleactMainCreditCustomer') }}</option>
                                        @foreach ($customers as $customer) <!-- Updated variable from $customer to $customers -->
                                            <option value="{{ $customer->Id }}"
                                                {{ $customer->Id == $saleOrder->CustomerId ? 'selected' : '' }}>
                                                {{ $customer->CustomerCode }}-{{ $customer->CustomerName }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>                            
                        </div>
                        <div class="col-lg-2">
                            <div class="select-split">
                                <div class="select-group w-100">
                                    <select class="form-select" id="cmbEmployee" name="cmbEmployee">
                                        <option value="-1">{{ __('sitelabel.SeleactSalesman') }}</option>
                                        @foreach ($employees as $employee)
                                            <option value="{{ $employee->Id }}"
                                                {{ $employee->Id == $saleOrder->EmployeeId ? 'selected' : '' }}>
                                                {{ $employee->ControlNumber }}-{{ $employee->FullName }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="select-split">
                                <div class="select-group w-100">
                                    <input class="form-control" type="date" name="txtOrderDate" id="txtOrderDate"
                                        value="{{ $saleOrder->OrderDate }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-7 col-sm-12 ">
                            <div class="card card-order">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-2">
                                            <label><strong>{{ __('sitelabel.Product') }}</strong></label>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="select-split">
                                                <div class="select-group w-100">
                                                    <select class="select w-100" id="cmbProduct" name="cmbProduct">
                                                        <option value="-1">{{ __('sitelabel.Product') }}</option>
                                                        @foreach ($products as $product)
                                                            <option value="{{ $product->Id }}"
                                                                {{ in_array($product->Id, $saleOrderDetails->pluck('ProductId')->toArray()) ? 'selected' : '' }}>
                                                                {{ $product->SKU }}-{{ $product->Name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <label><strong>{{ __('sitelabel.SalePrice') }}</strong></label>
                                        </div>
                                        <div class="col-lg-2">
                                            <input type="hidden" class="form-control" name="hdProductId" id="hdProductId"
                                                value="{{ old('hdProductId', $saleOrderDetails->first()->ProductId ?? '') }}">
                                            <input type="number" class="form-control" name="txtSalePrice" id="txtSalePrice"
                                                value="{{ old('txtSalePrice', $saleOrderDetails->first()->SalePrice ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdName" id="hdName"
                                                value="{{ old('hdName', $saleOrderDetails->first()->ProductName ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdProductCode"
                                                id="hdProductCode"
                                                value="{{ old('hdProductCode', $saleOrderDetails->first()->ProductCode ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdPurchasePrice"
                                                id="hdPurchasePrice"
                                                value="{{ old('hdPurchasePrice', $saleOrderDetails->first()->PurchasePrice ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdWholeSalePrice"
                                                id="hdWholeSalePrice"
                                                value="{{ old('hdWholeSalePrice', $saleOrderDetails->first()->WholeSalePrice ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdTaxRate" id="hdTaxRate"
                                                value="{{ old('hdTaxRate', $saleOrderDetails->first()->TaxRate ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdTaxValue" id="hdTaxValue"
                                                value="{{ old('hdTaxValue', $saleOrderDetails->first()->TaxValue ?? '') }}">
                                            <input type="hidden" class="form-control" name="hdPicturePath"
                                                id="hdPicturePath"
                                                value="{{ old('hdPicturePath', $saleOrderDetails->first()->PicturePath ?? '') }}">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-2">
                                            <label><strong>{{ __('sitelabel.Quantity') }}</strong></label>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="select-split">
                                                <div class="select-group w-100">
                                                    <input type="number" class="form-control" id="txtQty"
                                                        name="txtQty"
                                                        value="{{ old('txtQty', $saleOrderDetails->first()->Quantity ?? 1) }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="select-split">
                                                <div class="select-group w-100">
                                                    <select class="form-select" id="cmbPerFlat" name="cmbPerFlat">
                                                        <option value="-1">{{ __('sitelabel.Discount') }}</option>
                                                        <option value="Per"
                                                            {{ old('cmbPerFlat', $saleOrderDetails->first()->DiscountType ?? '') == 'Per' ? 'selected' : '' }}>
                                                            Percentage</option>
                                                        <option value="Flat"
                                                            {{ old('cmbPerFlat', $saleOrderDetails->first()->DiscountType ?? '') == 'Flat' ? 'selected' : '' }}>
                                                            Flat</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="select-split">
                                                <div class="select-group w-100">
                                                    <input type="number" id="txtDiscountValue" name="txtDiscountValue"
                                                        class="form-control" placeholder="Discount Value"
                                                        value="{{ old('txtDiscountValue', $saleOrderDetails->first()->DiscountAmount ?? '') }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="text-left bold">
                                                <label
                                                    class="form-label"><strong>{{ __('sitelabel.AvailableQty') }}</strong></label>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <input type="text" readonly class="form-control"
                                                value="{{ old('txtAvailableQty', $saleOrderDetails->first()->AvailableQty ?? 0) }}"
                                                id="txtAvailableQty" name="txtAvailableQty">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-4">
                                            <input type="text" name="txtBarCode" id="txtBarCode" class="form-control"
                                                placeholder="Enter Bar Code">
                                        </div>
                                        <div class="col-3">
                                            <div>
                                                <a class="btn btn-scanner-set" style="margin-left: 0px;"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/scanner1.svg"
                                                        alt="img">Scan bardcode</a>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <label> <strong>{{ __('sitelabel.Bundle') }}</strong></label>
                                        </div>
                                        <div class="col-2">
                                            <input type="number" name="txtBundle" id="txtBundle" class="form-control">
                                        </div>
                                        <div class="col-1">
                                            <a class="btn btn-submit" id="btnAdd"
                                                name="btnAdd">{{ __('sitelabel.Add') }}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="split-card">
                                </div>

                                <div class="card-body pt-0">
                                    <div class="totalitem">
                                        <h4>{{ __('sitelabel.TotalItems') }} : {{ count($saleOrderDetails) }}</h4>
                                        <a href="javascript:void(0);"
                                            id="clearAllItems">{{ __('sitelabel.ClearAll') }}</a>
                                    </div>
                                    <div class="product-table">
                                        <table class="table table-responsive">
                                            <thead>
                                                <th>{{ __('sitelabel.SerialNumber') }}</th>
                                                <th>{{ __('sitelabel.Product') }}</th>
                                                <th>{{ __('sitelabel.Bundle') }}</th>
                                                <th>{{ __('sitelabel.Qty') }}</th>
                                                <th>S{{ __('sitelabel.SalePrice') }}</th>
                                                <th>{{ __('sitelabel.SubTotal') }}</th>
                                                <th>{{ __('sitelabel.Disc') }}</th>
                                                <th>{{ __('sitelabel.STax') }}</th>
                                                <th>{{ __('sitelabel.NetAmt') }}</th>
                                                <th></th>
                                            </thead>
                                            <tbody id="tdOrderDetailBody">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="split-card">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5 col-sm-5">
                            <div class="card card-order">
                                <div class="card-body pt-0 pb-2">
                                    <div class="setvalue">
                                        <ul>
                                            <li>
                                                <h5>{{ __('sitelabel.SubTotal') }} </h5>
                                                <h6><span
                                                        id="spSubTotal">{{ number_format($saleOrder->OrderTotal, 2) }}</span>
                                                </h6>
                                                <input type="hidden" id="hdMainSubTotal" name="hdMainSubTotal"
                                                    value="{{ $saleOrder->OrderTotal }}">
                                            </li>
                                            <li>
                                                <h5>{{ __('sitelabel.Discount') }} </h5>
                                                <h6><span
                                                        id="spDiscount">{{ number_format($saleOrder->DiscountTotal, 2) }}</span>
                                                </h6>
                                                <input type="hidden" id="hdMainDiscount" name="hdMainDiscount"
                                                    value="{{ $saleOrder->DiscountTotal }}">
                                            </li>
                                            <li>
                                                <h5>{{ __('sitelabel.Tax') }} </h5>
                                                <h6><span
                                                        id="spTax">{{ number_format($saleOrder->SaleTax, 2) }}</span>
                                                </h6>
                                                <input type="hidden" id="hdMainSaleTax" name="hdMainSaleTax"
                                                    value="{{ $saleOrder->SaleTax }}">
                                            </li>
                                            <li class="total-value">
                                                <h5>{{ __('sitelabel.Total') }} </h5>
                                                <h6><span
                                                        id="spTotal">{{ number_format($saleOrder->NetAmount, 2) }}</span>
                                                </h6>
                                                <input type="hidden" id="hdMainNetTotal" name="hdMainNetTotal"
                                                    value="{{ $saleOrder->NetAmount }}">
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="setvaluecash">
                                        <ul>
                                            <li>
                                                <a href="javascript:void(0);" class="paymentmethod"
                                                   onclick="SetPaymentType(1)"
                                                   @if ($saleOrder->PaymentTypeId == 1) class="active" @endif>
                                                    <img src="{{ url('/') }}/admin/assets/img/icons/cash.svg" alt="img" class="me-2">
                                                    {{ __('sitelabel.Cash') }}
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);" class="paymentmethod"
                                                   onclick="SetPaymentType(2)"
                                                   @if ($saleOrder->PaymentTypeId == 2) class="active" @endif>
                                                    <img src="{{ url('/') }}/admin/assets/img/icons/debitcard.svg" alt="img" class="me-2">
                                                    {{ __('sitelabel.Debit') }}
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);" class="paymentmethod"
                                                   onclick="SetPaymentType(3)"
                                                   @if ($saleOrder->PaymentTypeId == 3) class="active" @endif>
                                                    <img src="{{ url('/') }}/admin/assets/img/icons/scan.svg" alt="img" class="me-2">
                                                    {{ __('sitelabel.Scan') }}
                                                    <input type="hidden" id="hdPaymentTypeId" name="hdPaymentTypeId"
                                                           value="{{ $saleOrder->PaymentTypeId }}">
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);" class="paymentmethod"
                                                   onclick="SetPaymentType(4)"
                                                   @if ($saleOrder->PaymentTypeId == 4) class="active" @endif>
                                                    <img src="{{ url('/') }}/admin/assets/img/icons/debitcard.svg" alt="img" class="me-2">
                                                    {{ __('sitelabel.CreditCustomer') }}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    

                                    <div class="btn-totallabel">
                                        <h5></h5>
                                    </div>

                                    <div class="btn-pos">
                                        <ul>
                                            <li>
                                                <a class="btn"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/pause1.svg"
                                                        alt="img" class="me-1">{{ __('sitelabel.Hold') }}</a>
                                            </li>
                                            <li>
                                                <a class="btn"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/trash12.svg"
                                                        alt="img" class="me-1">Void</a>
                                            </li>
                                            <li>
                                                <a class="btn" id="payment"><img
                                                        src="{{ url('/') }}/admin/assets/img/icons/wallet1.svg"
                                                        alt="img" class="me-1">Payment</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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">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">
                                            4500.00
                                    </h4>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        Payment Mode:
                                    </h4>
                                </td>
                                <td>
                                    <h4>
                                        <span id="spPaymentMode">Cash</span>
                                    </h4>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        Received Amount
                                    </h4>
                                </td>
                                <td>

                                    <input type="number" class="form-control" id="txtReceivedAmount"
                                        name="txtReceivedAmount">
                                </td>
                            </tr>
                            <tr>
                                <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 class="btn btn-block btn-outline-primary active btn-lg">Save & Print</button>
                            <button class="btn btn-primary btn-lg">Save</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>
    <!-- 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-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>
@endsection
@section('script')
    <script>
        var RowId = 1;
        var gSubTotal = 0;
        var gDiscount = 0;
        var gTax = 0;
        var gNetAmount = 0;

        function formatNumber(number) {
            number = number.toFixed(2) + '';
            x = number.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }
            return x1 + x2;
        }

        function SetPaymentType(paytypeid) {

            $("#hdPaymentTypeId").val(paytypeid);
        }

        document.getElementById('clearAllItems').addEventListener('click', function() {
            // Reset quantity, discount, or other fields associated with the order items
            document.getElementById('frmSaleOrder').reset();
            // Optionally, update the total items count dynamically if needed
            document.querySelector('.totalitem h4').innerText = '{{ __('sitelabel.TotalItems') }} : 0';
        });

        $(document).ready(function() {
            $("#hdPaymentTypeId").val(1);
            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);
            $("#cmbProduct").change(function() {
                var ProductId = $("#cmbProduct").val();
                $.ajax({
                    type: "GET",
                    url: "{{ url('/') }}/api/GetProductById/" + ProductId,
                    contentType: "application/json;charset=utf-8",
                    success: function(data) {

                        // jQuery.each(response, function (key, item) {
                        $.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");
            });
            $("#payment").click(function() {

                if ($("#hdPaymentTypeId").val() == "4" && $("#cmbCustomer").val() == "-1") {
                    $("#posmsg").modal('show');
                } else {

                    if ($("#hdPaymentTypeId").val() == "1") {
                        $("#spPaymentMode").html("Cash");
                    } else if ($("#hdPaymentTypeId").val() == "2") {
                        $("#spPaymentMode").html("Debit");
                    } else if ($("#hdPaymentTypeId").val() == "3") {
                        $("#spPaymentMode").html("Scan");
                    } else if ($("#hdPaymentTypeId").val() == "4") {
                        $("#spPaymentMode").html("Credit Customer");
                    } else {
                        $("#spPaymentMode").html("Cash");
                    }
                    $("#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) {
                //alert($("#txtReceivedAmount").val());
                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('');
                            //$("#printbill").modal('show');

                            $("#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);
                        },
                    });
                }
            });

        });

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

        function DeleteProduct(RemoveRowId) {
            //console.log($(RemoveRowId).val());
            $("#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 sNetTotal = $("#") 
            /*var sQuantity = "#txtOrderQty" + RemoveRowId;
            
            var sSalesTax = "#txtTaxValue" + RemoveRowId;
            var sDiscount = "#txtOrderDiscountValue" + RemoveRowId;
            var dSubTotalValue = parseFloat(jQuery(sSubTotal).val());
            var iQty = parseFloat(jQuery(sQuantity).val());
            var dSaleTax = parseFloat(jQuery(sSalesTax).val());
            var dDiscount = parseFloat(jQuery(sDiscount).val());*/
            var sRowId = "#tr" + RemoveRowId;
            $(sRowId).remove();
            /* intTotalQty = intTotalQty - iQty;
             MainSubToal = MainSubToal - dSubTotalValue;
             dSalesTaxTotal = dSalesTaxTotal - dSaleTax;
             GrandTotal = MainSubToal + dSalesTaxTotal;
             dTotalDiscount = dTotalDiscount - dDiscount;
             jQuery("#sptxtQuantity").html(intTotalQty);
             jQuery("#sptxtSubTotal").html(MainSubToal);
             jQuery("#txtSubTotal").val(MainSubToal);
             jQuery("#sptxtGST").html(dSalesTaxTotal);
             jQuery("#sptxtGrandTotal").html(GrandTotal);
             jQuery("#sptxtDiscount").html(dTotalDiscount);
             var dNewNetAmount = GrandTotal - dTotalDiscount;
             jQuery("#sptxtNetAmount").html(dNewNetAmount);
             jQuery("#txtNetAmount").val(dNewNetAmount);
             jQuery("#hdHiddenNetAmount").val(dNewNetAmount);

             jQuery("#spTotalAmountToPay").html(dNewNetAmount);*/

        }
    </script>
@endsection