@extends('layouts.master')
@section('title')
Create Order
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet">
<!-- Sweet Alert css-->
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
@endsection
@section('content')
<style>


.choices__inner {
    --vz-bg-opacity: 1;
    background-color: #FFF !important;
    border: var(--vz-border-width) solid var(--vz-input-border-custom) !important;
    border-radius: var(--vz-border-radius) !important;
}
.dateNow{
    --vz-bg-opacity: 1;
    background-color: rgba(var(--vz-light-rgb), var(--vz-bg-opacity)) !important;
    padding: 8px;
    display: flex
}
.floating-alert {
    position: fixed;
    bottom: 20px; /* Position it 20px from the bottom */
    left: 90%; /* Position it in the center horizontally */
    transform: translateX(-50%); /* Center it horizontally */
    z-index: 1000;
    width: 300px;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    text-align: center; /* Center text within the <strong> tag */
}

.floating-alert.hide {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

#error-alert.show {
    display: block !important;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#error-alert.hide {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.choices {
    margin-bottom: 0 !important;
}
/* Pagination style */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    color: black;
    float: left;
    padding: 4px 12px;
    text-decoration: none;
    border: 1px solid #e2e2e2;
    margin: 0 4px;
    border-radius: 500px;
}

.pagination a.active {
    background-color: #e2e2e2;
    color: #000;
}

.pagination a:hover {
    background-color: #e2e2e2;
}

.spinner {
    border-top-color: rgba(255, 255, 255, 0.5) !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}
#salesmanid-error{
    font-size: 0.775em;
    text-align: left;
    color: red;
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    border: 0;
    color: white;
}
.custom-badge {
    position: absolute;
    top: 0; /* Adjust this value to position the badge correctly */
    right: -10px; /* Adjust this value to position the badge correctly */
    font-size: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background-color: red;
    z-index: 10; /* Ensure it appears above other elements */
}
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">Create New Cash Order</h4>
        </div>
    </div>
</div>

<div class="alert alert-danger alert-solid floating-alert hide" role="alert" id="error-alert">
    <strong> Customer cannot be Empty</strong>
</div>


<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#9da0ff12">

            <form class="" method="POST" action="{{route('cashsales.store')}}" id="invoice_form">
                @csrf

                <!-- Hidden fields for voucher information -->
                <input type="hidden" id="applied_voucher_code" name="applied_voucher_code" value="">
                <input type="hidden" id="applied_voucher_type" name="applied_voucher_type" value="">
                <input type="hidden" id="applied_voucher_value" name="applied_voucher_value" value="">
                <input type="hidden" id="applied_voucher_discount" name="applied_voucher_discount" value="0">
                <!-- ******************************** START :: BHB COMPANY HEADER ******************************** -->
                <div class="card-body p-4">
                    <!-- ***** START :: LEFT HEADER ***** -->
                    <div class="row" style="
                            background: #FFF;
                            border-radius: 20px;
                            margin-bottom: 10px;
                            text-align: center;
                            padding: 3px 0
                        ">
                        <div class="col-lg-12">
                            <span class="text-muted">you're currently logon as </span><code>{{ auth()->user()->name }}</code><span>, from</span> <code>{{ session('loc') }}</code>.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="profile-user mx-auto mb-3">
                                <label for="profile-img-file-input" class="d-block" tabindex="0">
                                    <span class="overflow-hidden border border-dashed align-items-center justify-content-center rounded" style="height: 60px; width: 156px;">
                                        <img src="{{ URL::asset('build/images/bhblogo.png') }}" class="" style="width: 120px">
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- ***** END :: LEFT HEADER ***** -->

                    <!-- ***** START :: RIGHT HEADER ***** -->
                    <div class="row">
                        <!--  START :: Customer  -->
                        <div class="col-lg-4 col-sm-6">
                            <div class="mb-1">
                                <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" data-bs-target="#selectCustomerModal">
                                    <i class="ri-user-add-fill label-icon align-middle rounded-pill fs-16 me-2"></i> Select Customer
                                </button>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="choices-customer" name="choices-customer" placeholder="Customer ID" readOnly />
                                <input type="hidden" id="customer_name" name="customer_name" value="" />
                                <div class="invalid-feedback">
                                    Customer ID
                                </div>
                            </div>
                            <div class="mb-1">
                                <input readOnly type="text" class="form-control bg-light " data-plugin="cleave-phone" id="choices-customer-name" placeholder="Customer Name"  />
                                <div class="invalid-feedback">
                                    Please enter a contact number
                                </div>
                            </div>
                            <div class="mb-1">
                                <input readOnly type="text" class="form-control bg-light " data-plugin="cleave-phone" id="compnayContactno" placeholder="Contact No"  />
                                <div class="invalid-feedback">
                                    Please enter a contact number
                                </div>
                            </div>
                            <div class="mb-1">
                                <input readOnly type="text" class="form-control bg-light " id="companyEmail" placeholder="Email"/>
                                <div class="invalid-feedback">
                                    Please enter a valid email, Ex., example@gamil.com
                                </div>
                            </div>

                        </div>
                        <!-- End :: Customer  -->
                        <!--  START :: Company  -->
                        <div class="col-sm-6 ms-auto">
                            <div class="row">
                                <div class="col-lg-8">
                                    <div>
                                        <label for="choices-customer"></label>
                                    </div>
                                    <div class="selectSalesman">
                                        <span> Salesman </span>
                                        <div class="mb-1">
                                            @if($salesman_id == null || auth()->user()->can('order-reselect-salesman') == '1')
                                            <select class="form-select bg-light " aria-label="select example" id="selectSalesmanID" name="salesman_id">
                                                @foreach($salesman_list as $salesman)
                                                <option value="{{ $salesman->AcSalesmanID}}"
                                                selected                                                 >{{ $salesman->AcSalesmanID}} - {{ $salesman->AcSalesmanName}}</option>
                                                @endforeach
                                            </select>
                                            @else
                                            <input type="text" class="form-control bg-light" value="{{ $salesman_id }} - {{ $salesman_name }}" id="textshowsalesman" placeholder="Salesman ID"   />
                                            <input type="hidden" class="form-control bg-light" value="{{ $salesman_id }}" id="selectSalesmanID" name="salesman_id" placeholder="Salesman ID"   />
                                            @endif
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input readOnly type="text" class="form-control bg-light " id="registrationNumber" maxlength="12" placeholder="Registration No" style="text-transform: uppercase;" />
                                        <div class="invalid-feedback">
                                            Please enter a registration no
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input readOnly type="text" class="form-control bg-light " id="GSTRegisterNumber" maxlength="12" placeholder="GST No"  />
                                        <div class="invalid-feedback">
                                            Please enter a GST no
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="poNumber" maxlength="16" placeholder="Purchase Order No" style="text-transform: uppercase;" />
                                        <div class="invalid-feedback">
                                        Please enter P.O. Number
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End :: Company  -->
                    </div>
                    <!-- ***** END :: RIGHT HEADER ***** -->
                </div>
                <!-- ******************************** END :: BHB COMPANY HEADER ******************************** -->

                <!-- ******************************** START :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row g-3">
                        <div class="col-lg-3 col-sm-6">
                            <label for="invoicenoInput">Order No</label>
                            <input type="text" class="form-control bg-light " id="invoicenoInput" name="invoice_no" maxlength="12" placeholder="Order No" value="{{ $invoice_no }}" readOnly />
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div>
                                <label for="date-field">Document Date</label>
                                <input type="text" class="form-control bg-light " id="date-field" name="document_date" placeholder="Select Date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" data-date-format="Y-m-d" data-provider="flatpickr" />
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                            <label>Sales Type</label>
                            <div class="input-light">
                                <select class="form-select bg-light " readOnly onchange="changeSalesType(this.value);" aria-label="select example" id="" name="sales_type">
                                    <option value="1" selected>Cash Only</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                            <div>
                                <label for="date-field">Delivery Date</label>
                                <input type="text" class="form-control bg-light " id="date-field-delivery" name="delivery_date" placeholder="Select Date" data-provider="flatpickr" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" style="background:#FFF !important" data-date-format="Y-m-d">
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                           <div>
                               <label for="totalamountInput">Document Type</label>

                               <select class="form-select bg-light " aria-label="select example" id="account_job_id" name="account_job_id">
                                    @php($countAccountJob = 0)
                                    @foreach($accountJobs as $account_job)

                                    <option value="{{$account_job->AcAccountJobID}}" selected>{{$account_job->AcAccountJobDesc}}</option>
                                    @php($countAccountJob++)
                                    @endforeach
                                   <option value="2">Collect Partial Deposit</option>
                                   <option value="1">Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->

                <!-- ******************************** START :: Billing & Shipping Address ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" hidden>
                    <div class="row">
                        <!-- Start :: Billing Address -->
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="companyAddress">Shipping Contact</label>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingName" placeholder="Shipping Attention Name" />
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno1" name="shippingPhoneno1" placeholder="(123)456-7890" />
                                <div class="invalid-feedback">Please enter a phone number (1)
                                </div>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno2" placeholder="(123)456-7890" />
                                <div class="invalid-feedback">
                                    Please enter a phone number (2)
                                </div>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                        <!-- Start :: Shipping Address -->
                        <div class="col-sm-6 ms-auto" hidden>
                            <div class="row">
                                <div class="col-lg-8">
                                    <div>
                                        <label for="companyAddress">Shipping Address</label>
                                    </div>

                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address1" name="address1" placeholder="Address 1"></input>

                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address2" name="address2" placeholder="Address 2"></input>

                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address3" name="address3" placeholder="Address 3"></input>

                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address4" name="address4" placeholder="Address 4"></input>
                                        <div class="invalid-feedback">
                                            Please enter a address
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                    </div>
                </div>
                <!-- ******************************** END :: Billing & Shipping Address ******************************** -->

                <!-- ******************************** START :: Ship Via ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" hidden>
                    <div class="row">
                        <div class="col-lg-4 col-sm-6" hidden>
                            <div>
                                <label for="companyAddress">Pickup From</label>
                            </div>
                            <div class="mb-1">
                                <select class="form-select bg-light " required aria-label="select example" onchange="changeOrderLocation(this.value);" id="ship_from_location" name="ship_from_location">
                                    @foreach($locations as $location)
                                    <option value="{{ $location->AcLocationID }}" selected>{{ $location->AcLocationID }} - {{ $location->AcLocationDesc }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Example invalid select feedback</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4 border-top border-top-dashed" >
                    <div class="row">

                        <div class="col-lg-6 col-sm-12">
                            <div>
                                <label for="document_remark">Document Remark</label>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light text-uppercase" maxlength="100" id="document_remark" name="document_remark" oninput="if(this.value.length > 100) this.value = this.value.slice(0, 100);"/>
                                <small class="text-muted">Maximum 100 characters.</small>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->

                <!-- ******************************** START :: STOCK CREATE ******************************** -->
                <div class="card-body border-top border-top-dashed p-4">
                    <!-- ****** START :: STOCK + CALCULATION ****** -->
                    <div class="table-responsive">
                        <table class="invoice-table table table-borderless table-nowrap mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 50px;">#</th>
                                    <th scope="col">
                                        Product Details
                                    </th>
                                    <th scope="col" style="width: 120px;">
                                        <div class="d-flex currency-select input-light align-items-center">
                                        Price
                                        </div>
                                    </th>
                                    <th scope="col" style="width: 120px;">QTY</th>
                                    <th scope="col" style="width: 150px;">Amount (RM)</th>
                                    <th scope="col" style="width: 55px;"></th>
                                </tr>
                            </thead>
                            <tbody id="newlink">
                                <!-- <tr class="product">
                                </tr>  -->
                                <!-- <tr id="1" class="product">
                                    <th scope="row" class="product-id">1</th>
                                    <td class="text-start">
                                        <div class="mb-1">
                                            <select class="form-control bg-light " data-choices id="productName-1" name="productName-1" onchange="selectStockItem(this)">
                                                <option value="">Select Stock</option>
                                                @foreach($stocks as $stock)
                                                <option value="{{ $stock->AcStockID }},{{ $stock->StockPrice1 }}">{{ $stock->AcStockID }}-{{ $stock->StockDescription1 }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <textarea class="form-control bg-light " id="productDetails-1" rows="2" placeholder="Stock Remark"></textarea>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control product-price bg-light " id="productRate-1" step="0.01" placeholder="0.00" required />
                                        <div class="invalid-feedback">
                                            Please enter a rate
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-step">
                                            <button type="button" class='minus'>–</button>
                                            <input type="number" class="product-quantity" id="product-qty-1" value="0" readonly>
                                            <button type="button" class='plus'>+</button>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <div>
                                            <input type="text" class="form-control bg-light  product-line-price" id="productPrice-1" placeholder="$0.00" readonly />
                                        </div>
                                    </td>
                                    <td class="product-removal">
                                        <a href="javascript:void(0)" class="btn btn-success">Delete</a>
                                    </td>
                                </tr> -->

                            </tbody>
                            <tbody>
                                <tr id="newForm" style="display: none;">
                                    <td class="d-none" colspan="5">
                                        <p>Add New Form</p>
                                    </td>

                                </tr>
                                <tr>
                                    <td colspan="5">
                                    <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddStockModal" data-bs-target="#addStockModal">
                                        <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i> Add Stock
                                    </button>
                                    <button type="button" hidden class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddWarrantyModal" data-bs-target="#addWarrantyModal">
                                        <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i>Add Warranty
                                    </button>
                                    <!-- <a href="javascript:void(0)" onclick="new_link1()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                        <!-- <a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                    </td>
                                </tr>
                                <tr class="border-top border-top-dashed mt-2">
                                    <td colspan="3"></td>
                                    <td colspan="2" class="p-0">
                                        <table class="table table-borderless table-sm table-nowrap align-middle mb-0 mt-2">
                                            <tbody>
                                                <tr>
                                                    <th scope="row">Sub Total</th>
                                                    <td style="width:150px;">
                                                        <input type="text" class="form-control bg-light " id="cart-subtotal" name="cart-subtotal" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Estimated Tax (12.5%)</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-tax" name="cart-tax" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Discount <small class="text-muted"></small></th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-discount" name="cart-discount" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Shipping Charge</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-shipping" name="cart-shipping" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr class="border-top border-top-dashed">
                                                    <th scope="row">Total Amount</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-total" name="cart-total" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->
                    <!-- ****** START :: Payment Details ****** -->
                    <div class="row mt-3 border-top border-top-dashed">
                        <div class="col-lg-4 col-sm-6">
                           <div class="mt-3">
                               <label for="choices-payment-status">Payment Mode</label>
                               <select class="form-select bg-light " aria-label="select example" id="choices-payment-status" onchange="changePaymentType(this.value)" name="payment_status">
                                   <!-- <option value="3">No Payment</option> -->
                                   <option value="2">Collect Multiple Payment</option>
                                   <option value="1" selected>Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>

                    <div class="d-flex gap-3 px-2 py-3">
                        <button type="button" class="btn btn-primary btn-label rounded-pill" 
                                data-bs-toggle="modal" id="btnModalmakePayment" data-bs-target="#modalmakePayment">
                            <i class="ri-money-dollar-circle-line label-icon align-middle rounded-pill fs-16 me-2"></i>
                            Add Payment
                        </button>
                      
                        @if($incard->voucher == 1)
                        <button type="button" class="btn btn-success btn-label rounded-pill position-relative"
                                data-bs-toggle="modal" id="btnModalIncard" data-bs-target="#modalIncard">
                            <i class="ri-coupon-line label-icon align-middle rounded-pill fs-16 me-2"></i>
                            Apply Voucher
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                                  id="voucherCountBadge" style="display:none;">
                                0
                            </span>
                        </button>
                        @endif
                      
                        <button type="button" class="btn btn-outline-danger btn-label rounded-pill" 
                                id="btnRemoveVoucher" onclick="removeVoucher()" style="display:none;">
                            <i class="ri-close-line label-icon align-middle rounded-pill fs-16 me-2"></i>
                            Remove Voucher
                        </button>
                      </div>
                      
                    <table class="table align-middle" id="tablePaymentList">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Method</th>
                                        <th>Approval Code</th>
                                        <th class="text-end" width="150px">Paid Amount (RM)</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    <!-- <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-end"></td>
                                    </tr> -->


                                    <tr id="trSubTotal">
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Sub total</td>
                                        <td style="font-weight: 500" class="text-end" id="textPaymentSubTotal"></td>
                                    </tr>
                                    <tr id="trDiscount" style="display: none;">
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500; color: #28a745;" class="text-end">Discount</td>
                                        <td style="font-weight: 500; color: #28a745;" class="text-end" id="textDiscountAmount">-0.00</td>
                                    </tr>
                                    <tr id="trTotal" style="display: none; border-top: 2px solid #dee2e6;">
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 600; font-size: 1.1em;" class="text-end">Total</td>
                                        <td style="font-weight: 600; font-size: 1.1em;" class="text-end" id="textFinalTotal"></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Paid</td>
                                        <td style="font-weight: 500" class="text-end" id="textPaidAmount"></td>
                                    </tr>

                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Balance</td>
                                        <td style="font-weight: 500" class="text-end" id="labelBalance"></td>
                                    </tr>
                                </tbody>
                        </table>


                    <!-- ****** END :: Payment Details ****** -->
                    <!-- ****** START :: NOTE ****** -->
                    <!-- <div class="mt-4">
                        <label for="exampleFormControlTextarea1" class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
                        <textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2" required>All accounts are to be paid by cheque or credit card or cash or direct payment online. If account is not paid items will not be released.</textarea>
                    </div> -->
                    <!-- ****** END :: NOTE ****** -->
                    <!-- ****** START :: BUTTONS ****** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4" id="divSaveButton" hidden>
                        <button type="submit" class="btn btn-info" id="btnSubmitOrder">Confirm Order</button>
                        <button type="button" class="btn btn-info" id="btnOrderPriceRequest" hidden>Get Price Approval</button>
                        <!-- <span style="margin: 0 10px">or</span> -->
                        <a id="btnSaveAsDraft" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1)); color: rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1));    cursor: pointer;">Save As Draft</a>
                    </div>
                    <!-- ****** END :: BUTTONS ****** -->
                </div>
                <!-- ******************************** END :: STOCK CREATE ******************************** -->
            </form>
        </div>
    </div>
</div>

<!-- START :: ADD STOCK MODAL -->
<!-- <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addStockModal1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="needs-validation" novalidate id="add_stock_form">
                    <div class="mb-2">
                        <select class="form-control bg-light " data-choices id="select-stock" name="select-stock" required>
                            <option value="">Select Stock</option>
                            @foreach($stocks as $stock)
                            <option value="{{ $stock->AcStockID }}">{{ $stock->AcStockID }}-{{ $stock->StockDescription1 }} (Stocks : {{ $stock_location[ $stock->AcStockID ]}})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mx-auto">
                        <a href="javascript:void(0);" onclick="checkSelectedStock();" class="btn btn-link fw-medium" data-bs-dismiss="modal" aria-label="Close">Add to order list<i class="ri-arrow-right-line ms-1 align-middle"></i></a>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div> -->

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addStockModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Stock</h5>
                <br>
                <button type="button" id="btnCloseSelectStockModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
            <div class="modal-body pb-0">
                <form id="add_stock_form">
                    <div class="mb-2">
                        <input type="text" id="txtSearchStockId" placeholder="By ID" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchStockName" placeholder="By Description " class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <select type="text" id="txtSearchStockType" class="form-control bg-light ">
                            <option value="ALL">ALL</option>
                            <option value="STOCK">STOCK</option>
                            <option value="SERVICE">SERVICE</option>
                            <option value="NON-STOCK">NON-STOCK</option>
                        </select>
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-primary rounded-pill" id="btnSearchStock" onclick="searchStock();">
                            Search
                        </button>
                    </div>
                </form>


                    <div>
                    <table class="table table-striped table-nowrap mb-0 mt-2" id="tableStockSearch">

                    </table>
                        <div class="pagination" id="stockPagination">

                        </div>
                    </div>

            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
<!-- END :: ADD STOCK MODAL -->

<!-- START :: ADD WARRANTY MODAL -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addWarrantyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Warranty</h5>
                <br>
                <button type="button" id="btnCloseSelectWarrantyModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
            <small style="padding: 0rem 1.25rem" class="">click <code>stock balance </code>to get latest balance.</small>
            <div class="modal-body pb-0">
                <form id="add_stock_form">
                    <div class="mb-2" hidden>
                        <input type="text" id="txtSearchWarrantyId" placeholder="By ID" class="form-control bg-light ">
                    </div>
                    <div class="mb-2" hidden>
                        <input type="text" id="txtSearchWarrantyName" placeholder="By Description " class="form-control bg-light ">
                    </div>
                    <div class="mb-2" hidden>
                        <select type="text" id="txtSearchWarrantyType" class="form-control bg-light ">
                            <option value="ALL">ALL</option>
                            <option value="STOCK">STOCK</option>
                            <option value="SERVICE">SERVICE</option>
                            <option value="NON-STOCK">NON-STOCK</option>
                        </select>
                    </div>
                    <div class="text-center" hidden>
                        <button type="button" class="btn btn-primary rounded-pill" id="btnSearchWarranty" onclick="searchStock();">
                            Search
                        </button>
                    </div>
                </form>


                    <div>
                        <table class="table table-striped mb-0 mt-2" id="tableWarrantySearch">
                        </table>
                        <div class="pagination" id="WarrantyPagination">

                        </div>
                    </div>

            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
<!-- END :: ADD WARRANTY MODAL -->

<!-- add discount modal -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalmakeDiscount" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Stock Discount</h5>
                <button type="button" id="btnCloseModalmakeDiscount" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small> -->
            <div class="modal-body pb-0">

                    <div class="row">
                        <div class="mb-2">
                            Name :<input type="text" id="txtstockname" class="form-control bg-light" readonly/>
                            Price : <input type="text" id="txtdiscountPrice" class="form-control bg-light" oninput="calculateDiscountFromPrice()" />
                            <div class="mb-2">
                                <span class="text-muted" style="font-size: 0.875rem;">Original Price :</span>
                                <span class="text-muted" style="font-size: 0.875rem;" id="spanOriginalPrice"></span>
                            </div>
                            Discount (%) :<input type="text" id="txtdiscountpercentage" class="form-control bg-light" oninput="calculateDiscountFromPrecentage()"/>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(10)">10%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(15)">15%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(20)">20%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(25)">25%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(30)">30%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(50)">50%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(70)">70%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(90)">90%</button>
                                <button type="button" class="btn btn-outline-primary" onclick="applyDiscount(100)">100%</button>
                            </div>
                        </div>
                        <input type="hidden" id="txtDiscountMinPrice" name="txtDiscountMinPrice" value="">
                        <input type="hidden" id="txtDiscountItemNo" name="txtDiscountItemNo" value="">
                        <input type="hidden" id="txtDiscountItemName" name="txtDiscountItemName" value="">
                        <input type="hidden" id="txtDiscountItemPrice" name="txtDiscountItemPrice" value="">
                    </div>
                </div>
                <div class="modal-footer" style="">
                    <button type="button" class="btn btn-info" id="btnClearDiscount" onclick="clearDiscount();">
                        Clear
                    </button>
                    <button type="button" class="btn btn-info" id="btnSubmitDiscount" onclick="addDiscount();">
                        Confirm
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
<!--end  add discount modal -->

<!-- START :: SEARCH CUSTOMER MODAL -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="selectCustomerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Customer</h5>
                <br>
                <button type="button" id="btnCloseSelectCustomerModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
            <div class="modal-body pb-0">
                <form id="add_stock_form">
                    <div class="mb-2">
                        <input type="text" id="txtSearchCustId" placeholder="By ID" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchCustName" placeholder="By Name" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchCustContact" placeholder="By Contact Number" class="form-control bg-light ">
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-primary rounded-pill" id="btnSearchCustomer" onclick="searchCustomer();">
                            Search
                        </button>
                    </div>
                </form>


                    <div>
                    <table class="table table-striped table-nowrap mb-0 mt-2" id="tableCustomerSearch">
                            <!-- <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col">
                                        Customer
                                    </th>
                                    <th scope="col" style="width: 120px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody> -->
                    </table>

                        <div class="pagination" id="customerPagination">

                        </div>
                    </div>
                    <!-- <div class="mx-auto">
                        <a href="javascript:void(0);" onclick="checkSelectedStock();" class="btn btn-link fw-medium" data-bs-dismiss="modal" aria-label="Close">Add to order list<i class="ri-arrow-right-line ms-1 align-middle"></i></a>
                    </div> -->

            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
<!-- END :: SEARCH CUSTOMER MODAL -->

<!-- add payment Modal -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalmakePayment" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Payment</h5>
                <button type="button" id="btnCloseModalMakePayment" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small> -->
            <div class="modal-body pb-0">


                <div class="row">
                    <div>
                        <label for="companyAddress">Payment Method</label>
                    </div>
                    <div class="col-lg-12">
                        <div class="mb-2">
                            <div class="input-light">
                                <select class="form-control bg-light " id="choices-payment-type" name="choices-payment-type" onchange="changePaymentMethod(this.value)">
                                    <option value="">Select Payment Method </option>
                                    @foreach($payment_method['PaymentMethods'] as $key=>$value)
                                    <option value="{{$value['AcPaymentCode']}}">{{$value['AcPaymentDesc']}}</option>
                                    @endforeach
                                </select>

                                <input type="hidden" id="IsForceBankName" name="IsForceBankName" value="">
                                <input type="hidden" id="IsForceCardNo" name="IsForceCardNo" value="">
                                <input type="hidden" id="IsForceApprovalCode" name="IsForceApprovalCode" value="">
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="hidden" value="" id="paymentRowNumber">
                            <input class="form-control bg-light " type="text" id="cardholderName" placeholder="Enter Name (optional)" name="cardholderName">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="number" id="cardNumber" placeholder="Last 4 Digits Card Number" name="cardNumber">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="text" id="approvalCode" placeholder="Approval Code" name="approvalCode">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="number" id="amountTotalPay" name="amountTotalPay" oninput="calculateBalanceAmount()" placeholder="$0.00" style="font-size: 1.2rem !important" />

                        </div>
                    </div>
                    <div class="mt-3" hidden>
                        <div class="row">
                            <div class="col-6"></div>
                            <div class="col-6 text-end">
                                <div>
                                    <label class="fw-bold">Actual Amount: RM</label>
                                    <span id="modalActualAmount" class="ms-2">{{ number_format($paidAmount ?? 0, 2) }}</span>
                                </div>
                                <div>
                                    <label class="fw-bold">Change Amount: RM</label>
                                    <span id="modalChangeAmount" class="ms-2">{{ number_format($chargeAmount ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <div>
                            <h5 class="fs-14 mb-0" style="font-size: 1.2rem !important">
                                <label for="companyAddress" class="badge bg-info-subtle text-dark text-uppercase" id="labelCurrentBalance" style="font-size: 1rem !important; color: red;">Current Balance : RM </label>
                            </h5>
                            <h5 class="fs-14 mb-0 ml-3" style="font-size: 1.2rem !important">
                                <label class="badge bg-danger-subtle text-dark text-uppercase"  id="labelBalanceAmount" style="margin-left:0px;font-size: 1.2rem !important"></label>
                            </h5>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer" style="">
                <button type="button" class="btn btn-info" id="btnSubmitPayment" onclick="addPayment();">
                    <!-- <i class="ri-send-plane-line align-bottom me-1"></i> -->
                    Make Payment
                </button>

                <button type="button" class="btn btn-info" id="btnUpdateUpdatePayment" onclick="updatePayment();" hidden>
                    <!-- <i class="ri-send-plane-line align-bottom me-1"></i> -->
                    Update Payment
                </button>
            </div>
        </div>
    </div>
</div>
<!--end add payment modal -->

<!-- START :: ADD SERIAL NUMBER MODAL -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addSerialNumberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Serial Numbers</h5>
                <button type="button" id="btnCloseSerialNumberModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pb-0">
                <form id="serial_number_form">
                    <div class="table-responsive">
                        <input type="hidden" id="hiddenItemRowId" value="">
                        <table class="table table-striped table-nowrap mb-0" id="serialNumberTable">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Serial Number</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Rows will be dynamically added here -->
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-primary rounded-pill" id="btnAddSerialRow">
                            Add Row
                        </button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="btnConfirmSerialNumbers" onclick="confirmSerialNo()">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>
<!-- END :: ADD SERIAL NUMBER MODAL -->

@if($incard->voucher == 1)
<!-- Incard Voucher Modal -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalIncard" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Available Vouchers</h5>
                <button type="button" id="btnCloseModalIncard" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Voucher Code Input -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="pointBalance" class="form-label">Point Balance</label>
                        <input type="text" class="form-control bg-light " id="incard_point" readonly/>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="voucherCode" class="form-label">Voucher Code</label>
                        <input type="text" class="form-control" id="voucherCode" placeholder="Enter voucher code" onchange="searchVoucherByCode(this.value)">
                    </div>
                    <div class="col-md-3">
                        <label for="pinCode" class="form-label">6 Digit Pins</label>
                        <input type="password" class="form-control" id="pinCode" name="pinCode" placeholder="Enter Pins" maxlength="6">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">&nbsp;</label>
                        <button type="button" class="btn btn-primary w-100" id="btnVerifyVoucher" onclick="verifyVoucherCode()">
                            Verify Voucher
                        </button>
                    </div>
                </div>

                <!-- Available Vouchers Table -->
                <div class="mb-3">
                    <h6>Vouchers</h6>
                    <div id="voucherTableBody" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">

                    </div>
                    {{-- <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Code</th>
                                    <th>Description</th>
                                    <th>Type</th>
                                    <th>Value</th>
                                    <th>Min Amount</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="voucherTableBody">
                            </tbody>
                        </table>
                    </div> --}}
                </div>

                <!-- Selected Voucher Info -->
                <div id="selectedVoucherInfo" class="alert alert-info" style="display: none;">
                    <h6>Selected Voucher:</h6>
                    <div id="selectedVoucherDetails"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="btnApplyVoucher" onclick="applyVoucher()" disabled>Apply Voucher</button>
            </div>
        </div>
    </div>
</div>
<!--end Incard voucher modal -->
@endif

@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/invoicecreate.init.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>
<!-- <script>
    document.getElementById('invoice_form').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();  // Prevent form submission
    }
});
</script> -->
<script>
    // Incard settings from backend
    const incardSettings = {
        voucher: {{ $incard->voucher }},
        details: {{ $incard->details }}
    };

    var selectBox = document.getElementsByName('choices-customer')[0];
    var customers = @json($customers);
    var addedStocks = [];
    var stocks = @json($stocks);
    var rowsPerPage = 9;
    var currentPage = 0;
    var countStock = 0;
    var max_discount = ;
    var paidAmount = 0;
    var payment_method = null;

    // Incard Voucher Variables
    var appliedVoucher = null;
    var voucherDiscount = 0;
    var validPin = "123456"; // Hardcoded PIN for demo

    // Available vouchers from API (will be populated when customer is selected)
    var availableVouchers = [];

    document.getElementById('date-field').readOnly = false;

        if (selectBox) {

            selectBox.addEventListener('change', function(event) {


                var customerID = event.target.value;

                var selectedCustomer = customers.find(function(customer) {
                    return customer.AcCustomerID === customerID;
                });

                if(selectedCustomer!=null){
                    var address = selectedCustomer.BillingAddress1;
                    if(selectedCustomer.BillingAddress2 != null){
                        address = address +"\n"+selectedCustomer.BillingAddress2;
                        if(selectedCustomer.BillingAddress3 != null){
                            address = address +"\n"+selectedCustomer.BillingAddress3;
                            if(selectedCustomer.BillingAddress4 != null){
                                address = address +"\n"+selectedCustomer.BillingAddress4;
                            }

                        }
                    }

                    // document.getElementById('billingName').value = selectedCustomer.AcCustomerName;
                    // document.getElementById('billingAddress').value = address;
                    // document.getElementById('billingPhoneno').value = selectedCustomer.BillingTel1;

                    // document.getElementById('compnayContactno').value = selectedCustomer.BillingTel1;
                    document.getElementById('companyEmail').value = selectedCustomer.BillingEmail;
                    document.getElementById('GSTRegisterNumber').value = selectedCustomer.GSTRegisterNumber;
                    document.getElementById('registrationNumber').value = selectedCustomer.BusinessRegisterNumber;
                    // document.getElementById('companyWebsite').value = selectedCustomer.BillingEmail;

                    // document.getElementById('billingName').readOnly = true;
                    // document.getElementById('billingAddress').readOnly = true;
                    // document.getElementById('billingPhoneno').readOnly = true;
                    document.getElementById('compnayContactno').readOnly = true;
                    document.getElementById('companyEmail').readOnly = true;
                    document.getElementById('GSTRegisterNumber').readOnly = true;
                    document.getElementById('registrationNumber').readOnly = true;
                    // document.getElementById('companyWebsite').readOnly = true;

                // }else{
                //     document.getElementById('billingName').value = "";
                //     document.getElementById('billingAddress').value = "";
                //     document.getElementById('billingPhoneno').value = "";
                    document.getElementById('compnayContactno').value = "";
                    document.getElementById('companyEmail').value = "";
                    document.getElementById('GSTRegisterNumber').value = "";
                    document.getElementById('registrationNumber').value = "";
                    // document.getElementById('companyWebsite').value = "";

                    // document.getElementById('billingName').readOnly = false;
                    // document.getElementById('billingAddress').readOnly = false;
                    // document.getElementById('billingPhoneno').readOnly = false;
                    document.getElementById('compnayContactno').readOnly = false;
                    document.getElementById('companyEmail').readOnly = false;
                    document.getElementById('GSTRegisterNumber').readOnly = false;
                    document.getElementById('registrationNumber').readOnly = false;
                    // document.getElementById('companyWebsite').readOnly = false;

                }



            });
        }

        var count = 0;

        
    document.addEventListener('click', function(event) {
        if (event.target.classList.contains('plus')) {
            var container = event.target.closest('.input-step');
            var nearestInputbalance = container.querySelector('input.product-quantity');
            var nearestInputstockid = container.querySelector('input.form-control.bg-light.hidden-stock-id');
            var nearestInputbalance = container.querySelector('input.product-quantity');
            var nearestMinusButton = container.querySelector('button.minus');

            if (nearestInputbalance) {
                var quantityValue = nearestInputbalance.value;
                var nearestInputstockidvalue = nearestInputstockid.value;

                var find_check_added_stock = addedStocks.find(function(stock) {
                    return stock.stock_id === nearestInputstockidvalue;
                });

                // if("{{auth()->user()->can('nolimit-order')}}" != "1"){
                //     if(quantityValue > find_check_added_stock.balance){
                //         alert("Reached maximum stock quantity.");
                //         nearestMinusButton.click();
                //     }
                // }

                // Add a small delay to ensure quantity is updated before recalculating voucher
                setTimeout(function() {
                    // Recalculate voucher discount when quantity changes
                    if (appliedVoucher) {
                        calculateVoucherDiscount();
                        updatePaymentCalculation();

                        // Check if subtotal still meets minimum requirement
                        if (voucherDiscount > 0) {
                            validateVoucherMinimumAmount();
                        }
                    }

                    // Always ensure cart-total shows original subtotal (without discount)
                    const subtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
                    updateCartTotalDisplay(subtotal);

                    // Update voucher eligibility
                    checkVoucherEligibilityOnCartChange();
                }, 100);

            } else {
                console.log('No input with class "product-quantity" found');
            }
        }

        // Handle minus button clicks for voucher recalculation
        if (event.target.classList.contains('minus')) {
            // Add a small delay to ensure quantity is updated before recalculating voucher
            setTimeout(function() {
                // Recalculate voucher discount when quantity changes
                if (appliedVoucher) {
                    calculateVoucherDiscount();
                    updatePaymentCalculation();

                    // Check if subtotal still meets minimum requirement
                    if (voucherDiscount > 0) {
                        validateVoucherMinimumAmount();
                    }
                }

                // Always ensure cart-total shows original subtotal (without discount)
                const subtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
                updateCartTotalDisplay(subtotal);

                // Update voucher eligibility
                checkVoucherEligibilityOnCartChange();
            }, 100);

            var check_elementId = event.target.id;
            var check_numberAfterDash = check_elementId.split('-').pop();
            removeSerialRowByQuantity(check_numberAfterDash);
        }

        // Handle product deletion
        if (event.target.classList.contains('ri-close-circle-line') && event.target.closest('.product-removal')) {
            var productRow = event.target.closest('tr');
            if (productRow) {
                // Remove the product row
                productRow.remove();

                // Recalculate totals
                isData();

                // Validate voucher after product deletion - use longer timeout to ensure isData() completes
                setTimeout(function() {
                    // Always recalculate if voucher is applied
                    if (appliedVoucher) {
                        calculateVoucherDiscount();
                        updatePaymentCalculation();

                        // Validate minimum amount if discount is still applied
                        if (voucherDiscount > 0) {
                            // Only show dialog if minimum amount is actually not met
                            const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
                            const minAmount = appliedVoucher.minAmount || 0;

                            if (currentSubtotal < minAmount) {
                                validateVoucherMinimumAmount(true);
                            }
                        }
                    }

                    // Always ensure cart-total shows original subtotal (without discount)
                    const subtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
                    updateCartTotalDisplay(subtotal);

                    // Update voucher eligibility
                    checkVoucherEligibilityOnCartChange();
                }, 250);
            }
        }

        if (event.target.id === 'btnSaveAsDraft') {
            var saveform = document.getElementById('invoice_form');
            var choices_customer_selected = document.getElementById('choices-customer').value;

            if(choices_customer_selected == null || choices_customer_selected == ""){
                alert("Please select customer.");
                return;
            }

            // Validate voucher minimum amount before saving draft
            if (!validateVoucherMinimumAmount()) {
                return; // Stop submission if voucher validation fails
            }

            {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Saving as draft will exclude the payment information. Do you want to proceed?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, submit it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // If confirmed, submit the form
                        callLoaddingScreen('Creating Sales Order Draft <br> Please do not refresh or close this page.');
                        saveform.action = "{{route('cashsales.save_order')}}";
                        saveform.submit();
                    }
                });

            }

        }

        if (event.target.id === 'btnOrderPriceRequest') {
            var saveform = document.getElementById('invoice_form');
            var choices_customer_selected = document.getElementById('choices-customer').value;
            if(choices_customer_selected == null || choices_customer_selected == ""){
                alert("Please select customer.");
                return;
            }

            // Validate voucher minimum amount before request price
            if (!validateVoucherMinimumAmount()) {
                return; // Stop submission if voucher validation fails
            }

            {

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Saving as request lower price order will exclude the payment information. Do you want to proceed?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, submit it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // If confirmed, submit the form
                        callLoaddingScreen('Creating Sales Order Draft <br> Please do not refresh or close this page..');
                        saveform.action = "{{route('cashsales.save_order_request_price')}}";
                        saveform.submit();
                    }
                });

            }

        }
    });

    

    // Add a new row to the serial number table
    let serialNumberCount = 0; // Initialize serialNumberCount outside the event listener

    document.getElementById('btnAddSerialRow').addEventListener('click', function () {
        const itemRowId = document.getElementById('hiddenItemRowId').value; // Get the item row ID
        const itemQuantity = parseInt(document.getElementById(`stock-qty-${itemRowId}`).value); // Get the quantity of the item

        console.log('quantity:', itemQuantity);
        console.log('Current Serial Number Count:', itemRowId);
        const tableBody = document.querySelector('#serialNumberTable tbody');
        const currentRowCount = tableBody.querySelectorAll('tr').length; // Count the current rows in the table

        if (currentRowCount >= itemQuantity) {
            alert('Cannot add more rows than the item quantity.');
            return;
        }

        serialNumberCount = currentRowCount + 1; // Update serialNumberCount based on current rows
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>${serialNumberCount}</td>
            <td>
                <input type="text" class="form-control bg-light" name="serialNumber[]" placeholder="Enter Serial Number" required>
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeSerialRow(this)">Delete</button>
            </td>
        `;
        tableBody.appendChild(newRow);
    });

    // Remove a row from the serial number table
    function removeSerialRow(button) {
        const row = button.closest('tr');
        row.remove();
        updateSerialRowNumbers();
    }

    function removeSerialRowByQuantity(buttonNo) {
        const itemRowId = buttonNo; // Use the buttonNo as the item row ID
        const itemQuantity = parseInt(document.getElementById(`stock-qty-${itemRowId}`).value); // Get the updated quantity of the item

        setItemRowId(buttonNo);
        // Remove rows exceeding the updated quantity
        let tableBody = document.querySelector('#serialNumberTable tbody');
        let rows = Array.from(tableBody.querySelectorAll('tr'));

        if (rows.length > itemQuantity) {
            const rowToRemove = rows[rows.length - 1];
            rowToRemove.parentNode.removeChild(rowToRemove);

            // Update the rows array after removing the row
            rows = Array.from(tableBody.querySelectorAll('tr'));
            console.log(rows);
            confirmSerialNo();
            updateSerialRowNumbers();
        }

        
    }

    function setItemRowId(count) {
        const hiddenItemRowId = document.getElementById('hiddenItemRowId');
        const serialNumberTableBody = document.querySelector('#serialNumberTable tbody');

        // Clear all rows in the serial number table
        serialNumberTableBody.innerHTML = '';

        // Update the hiddenItemRowId value
        hiddenItemRowId.value = count;

        // Get the existing serial numbers for the selected item
        const hiddenInput = document.getElementById(`stock-serial-no-${count}`);
        if (hiddenInput && hiddenInput.value) {
            const serialNumbers = hiddenInput.value.split(',');
            serialNumbers.forEach((serial, index) => {
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td>${index + 1}</td>
                    <td>
                        <input type="text" class="form-control bg-light" name="serialNumber[]" value="${serial}" placeholder="Enter Serial Number" required>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeSerialRow(this)">Delete</button>
                    </td>
                `;
                serialNumberTableBody.appendChild(newRow);
            });
        }
    }

    // Update row numbers after deletion
    function updateSerialRowNumbers() {
        const rows = document.querySelectorAll('#serialNumberTable tbody tr');
        serialNumberCount = 0;
        rows.forEach((row) => {
            serialNumberCount++;
            row.querySelector('td:first-child').textContent = serialNumberCount;
        });
    }

    function updateSerialCountBadge(count) {
        const hiddenInput = document.getElementById(`stock-serial-no-${count}`);
        const badge = document.getElementById(`serial-count-badge-${count}`);

        if (hiddenInput && hiddenInput.value) {
            const serialNumbers = hiddenInput.value.split(',');
            const serialCount = serialNumbers.length;

            if (serialCount > 0) {
                badge.textContent = serialCount;
                badge.style.display = 'inline-block'; // Show the badge
            } else {
                badge.style.display = 'none'; // Hide the badge if no serial numbers
            }
        } else {
            badge.style.display = 'none'; // Hide the badge if no serial numbers
        }
    }

    // Confirm and process serial numbers
    function confirmSerialNo(){
        const serialNumbers = Array.from(document.querySelectorAll('input[name="serialNumber[]"]'))
            .map(input => input.value.trim())
            .filter(value => value !== '');

        const itemRowId = document.getElementById('hiddenItemRowId').value; // Get the item row ID
        const badge = document.getElementById(`serial-count-badge-${itemRowId}`);
        const hiddenInput = document.getElementById(`stock-serial-no-${itemRowId}`);

        // If no rows are added, do nothing
        if (serialNumbers.length === 0) {
            if (document.querySelectorAll('#serialNumberTable tbody tr').length > 0) {
                alert('Please enter serial numbers for all rows.');
            } else {
                console.log('No rows added, doing nothing.');
            }

            // Clear the badge
            if (badge) {
                badge.style.display = 'none';
                badge.textContent = '';
            }

            hiddenInput.value = null;
            document.getElementById('btnCloseSerialNumberModal').click();

            return;
        }

        // Convert serial numbers to a comma-separated string
        const serialNumberString = serialNumbers.join(',');

        // Update the hidden input field for the selected item
        if (hiddenInput) {
            hiddenInput.value = serialNumberString;
        }

        // Update the badge
        if (badge) {
            badge.textContent = serialNumbers.length;
            badge.style.display = 'inline-block'; // Show the badge
        }

        console.log(`Serial Numbers for Item ${itemRowId}:`, serialNumberString);

        // Close the modal
        document.getElementById('btnCloseSerialNumberModal').click();
    }
    // document.getElementById('btnConfirmSerialNumbers').addEventListener('click', function () {
        
    // });

    function escapeHtmlText(text) {
        return text
            .replace(/&/g, "&amp;")
            .replace(/"/g, "&quot;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    }

    function new_link1(ori_stock_id,stock_desc,isWarranty,expired_date_required) {
        count++;
        var tr1 = document.createElement("tr");
        tr1.id = count;
        tr1.className = "product";

        // var stock_id = document.getElementById('select-stock').value;
        // alert(stock_id);
        var stock_id = decodeURIComponent(ori_stock_id.replace(/\+/g, ' '));

        var stock = stocks.find(function(stock) {
            let tem_stock_id =  stock.AcStockID;
            let remove_symbol1 = stock_desc.replace(/[^a-zA-Z0-9]/g, '');
            let remove_symbol2 = stock.StockDescription1.replace(/[^a-zA-Z0-9]/g, '');
            return tem_stock_id === stock_id && remove_symbol1 == remove_symbol2;
        });

        let stock_desc_mix = escapeHtmlText(stock.StockDescription1);

        var triggeraddquantitybutton = "stock-qty-plus-" + count ;
        var delLink =
            "<tr>" +
            '<th scope="row" class="product-id">' +
            count +
            "</th>" +
            '<td class="text-start">' +
            '<div class="mb-2">' +
            '<input class="form-control bg-light " type="text" id="productName-' + count + '" value="' + stock.AcStockID.replace(/"/g, '&quot;') + ' ' +stock_desc_mix+ '" readonly>' +
            // '<input class="form-control bg-light " type="text" id="productName-' + count + '" placeholder="Product Name">' +
            '</div>' ;
            delLink += '<input type="hidden" id="hidden-stock-desc-' + count + '" name="hidden-stock-desc-' + count + '" value="'+stock.StockDescription1.replace(/"/g, '&quot;')+'"/>';
            if(isWarranty != null && isWarranty != ''){
                delLink += '<input type="hidden" id="hidden-stock-desc-' + count + '" name="hidden-stock-desc-' + count + '" value="'+stock.StockDescription1.replace(/"/g, '&quot;')+'"/>';
                delLink += '<input type="hidden" id="hidden-stock-warranty-id-' + count + '" name="hidden-stock-warranty-id-' + count + '" value="'+isWarranty+'"/>';
            }
            delLink +='<textarea class="form-control bg-light " id="stock-remark-' + count + '" name="stock-remark-' + count + '" rows="2"';
            if(isWarranty != null && isWarranty != ''){
                delLink += 'placeholder="Customer IC Number" required';
            }else if(expired_date_required == 'YES'){
                delLink += 'placeholder="Expiry Date (DD/MM/YYYY) & Product Remark" required'; 
            }else{
                delLink += 'placeholder="Product Remark"';
            }
            delLink +='></textarea>'+
            '<button class="form-control bg-light" type="button" onclick="precalculateDiscount('+count+",'"+stock.StockDescription1.replace(/[^\w\s]/gi, '')+"',"+stock.StockPrice2+","+stock.PriceSellAlertLevelMinValue+');" data-bs-toggle="modal" data-bs-target="#modalmakeDiscount">Discount %</button>';
            if(isWarranty == null){
                delLink +='<div style="text-align:right"><button type="button" id="stock-warranty-' + count + '" name="stock-remark-' + count + '" class="btn btn-sm btn-secondary btn-label waves-effect waves-light mt-2" onclick="addwarranty('+"'"+ori_stock_id+"'"+')"><i class="ri-shield-cross-line label-icon align-middle fs-16 me-2"></i> Add Extended Warranty</button></div>';
            }

            delLink +="</div>" +
            "</td>" +
            "<td>" +
            '<input class="form-control bg-light  product-price" type="number" name="stock-rate-' + count + '" id="stock-rate-' + count + '" step="0.01" value="'+stock.StockPrice2+'" placeholder="$0.00" onchange="checkProductMinPrice(this,'+stock.StockPrice2+','+stock.PriceSellAlertLevelMinValue+','+ count +');">' +
            '<br><button class="form-control bg-light" type="button" style="position: relative;top: -10px;" data-bs-toggle="modal" data-bs-target="#addSerialNumberModal" onclick="setItemRowId('+count+')">Add S/N <span class="custom-badge" id="serial-count-badge-'+count+'" style="display: none;">0</span></button>'+
            ''+
            '<input type="hidden" name="stock-serial-no-' + count + '" id="stock-serial-no-' + count + '"/>';
            
            delLink += "</td>" +
            "<td>" +
            '<div class="input-step">' +
            '<input class="form-control bg-light hidden-stock-id" type="hidden" name="stock-id-' + count + '" id="stock-id-' + count + '" value="' + ori_stock_id + '">' +
            '<button type="button" id="stock-qty-minus-' + count + '" class="minus">–</button>' +
            '<input type="number" class="product-quantity" id="stock-qty-' + count + '" name="stock-qty-' + count + '" value="0" readonly>' +
            '<button type="button" id="stock-qty-plus-' + count + '" class="plus">+</button>' +
            "</div>" +
            "</td>" +
            '<td class="text-end">' +
            '<div class="mb-2">' +
            '<input type="hidden" class="form-control bg-light product-ori-price" id="stock-request-' + count + '" name="stock-request-' + count + '" value="'+stock.StockPrice2+'"/>'+
            '<input type="hidden" class="form-control bg-light product-ori-price" value="'+stock.StockPrice1+'"/>'+
            '<input type="hidden" class="form-control bg-light product-min-price" value="'+stock.PriceSellAlertLevelMinValue+'"/>'+
            '<input type="text" class="form-control bg-light product-line-price" id="productPrice-' + count + '" placeholder="0.00" readonly/>' +
            '<input type="hidden" class="form-control bg-light product-discount" name="stock-discount-' + count + '" id="stock-discount-' + count + '" placeholder="0.00" readonly/>' +
            "</div>" +
            "</td>" +
            '<td class="product-removal" style="text-align:center">' +
            '<a class=""><i class="text-danger ri-close-circle-line" style="font-size:30px"></i></a>' +
            "</td>" +
            "</tr>";

        tr1.innerHTML = document.getElementById("newForm").innerHTML + delLink;

        document.getElementById("newlink").appendChild(tr1);
        var genericExamples = document.querySelectorAll("[data-trigger]");
        Array.from(genericExamples).forEach(function (genericExamp) {
            var element = genericExamp;
            new Choices(element, {
                placeholderValue: "This is a placeholder set in the config",
                searchPlaceholderValue: "This is a search placeholder",
            });
        });

        isData();
        remove();
        amountKeyup();
        resetRow();

        // document.getElementById('select-stock').value = "";
        document.getElementById('btnCloseSelectWarrantyModal').click();
        document.getElementById('btnCloseSelectStockModal').click();
        document.getElementById(triggeraddquantitybutton).click();
    }

    function checkSelectedStock(stock_selected,stock_uom,stock_desc,clickedbutton,isWarranty=null){

        var stock_selected_location = '{{ $location_id }}';
        disableButton(clickedbutton);
        fetch('/stocks/getStockBalanceAjax?stock_id='+encodeURIComponent(stock_selected)+'&stock_uom='+stock_uom+'&location_id='+stock_selected_location)
            .then(response => response.json()) // Parse the JSON response
            .then(data => {

                let get_salesman_id = document.getElementById('selectSalesmanID').value;
                let expired_date_required = data.AcStockExtraGroup01ID;

                if(get_salesman_id == null || get_salesman_id == ""){
                    alert("Please select salesman.");
                    enableButton(clickedbutton);
                    return;
                }

                if("{{auth()->user()->can('nolimit-order')}}" == "1"){
                    var stock = {
                            stock_id: decodeURIComponent(stock_selected),
                            balance: data.balance
                        };

                        addedStocks.push(stock);

                    new_link1(stock_selected,stock_desc,isWarranty,expired_date_required);
                }else{
                    // if(data.balance <= 0){
                    //     alert('Out of Stock');
                    // }else{
                        var stock = {
                                stock_id: decodeURIComponent(stock_selected),
                                balance: data.balance
                            };

                            addedStocks.push(stock);

                        new_link1(stock_selected,stock_desc,isWarranty,expired_date_required);
                    // }
                }

            })
            .catch(error => {
                console.error('Error:', error);
            });



    }

    function searchCustomer(){

        var tableCustomerSearch = document.getElementById('tableCustomerSearch');
        var btnSearchCustomer = document.getElementById('btnSearchCustomer');

        var choices_customer = document.getElementById('choices-customer');
        var txtSearchCustId = document.getElementById('txtSearchCustId').value;
        var txtSearchCustName = document.getElementById('txtSearchCustName').value;
        var txtSearchCustContact = document.getElementById('txtSearchCustContact').value;

        var counttxtSearchCustId = txtSearchCustId.length;
        var counttxtSearchCustName = txtSearchCustName.length;
        var counttxtSearchCustContact = txtSearchCustContact.length;

        var spinner = document.createElement('div');
        spinner.className = 'spinner';
        // alert(counttxtSearchCustContact);
        if(counttxtSearchCustId >= 1||counttxtSearchCustName >= 1||counttxtSearchCustContact >= 1){
            $.ajax({
                  type:'get',
                  url: "/customers/customerSearch?customer_id="+txtSearchCustId+"&customer_name="+txtSearchCustName+"&customer_contact="+txtSearchCustContact,
                  beforeSend: function(xhr) {
                    tableCustomerSearch.innerHTML = '';
                    btnSearchCustomer.innerHTML = '';
                    customerPagination.innerHTML = '';
                    btnSearchCustomer.appendChild(spinner);
                    },
                  success: function (data) {
                    // console.log(data);

                    tableCustomerSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    customers = data.customers;
                    // if(data.status == "1000"){

                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);

                    // }
                    btnSearchCustomer.innerHTML = 'Search';
                    customerPagination.innerHTML = data.pagination;
                  },
                  error: function (data) {
                    btnSearchCustomer.innerHTML = 'Search';
                    alert('Invalid Member Search');
                  }
          });
        }

    }

    function addwarranty(stock_id){
        // alert(stock_id);
        var tableStockSearch = document.getElementById('tableWarrantySearch');
        var btnSearchStock = document.getElementById('btnSearchStock');

        var choices_stock = document.getElementById('choices-stock');
        var txtSearchStockId = document.getElementById('txtSearchStockId').value;
        var txtSearchStockName = document.getElementById('txtSearchStockName').value;
        var txtSearchStockType = document.getElementById('txtSearchStockType').value;

        var spinner = document.createElement('div');
        spinner.className = 'spinner';
        document.getElementById('btnAddWarrantyModal').click();
        $.ajax({
                  type:'get',
                  url: "/stocks/stocksSearchWarranty?stock_id="+encodeURIComponent(stock_id),
                  beforeSend: function(xhr) {
                    stockPagination.innerHTML = '';
                    tableStockSearch.innerHTML = '';
                    btnSearchStock.innerHTML = '';
                    btnSearchStock.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);

                    tableStockSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    stocks = data.stocks;
                    // if(data.status == "1000"){

                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);

                    // }
                    stockPagination.innerHTML = data.pagination;
                    btnSearchStock.innerHTML = 'Search';
                },
                error: function (data) {
                    btnSearchStock.innerHTML = 'Search';
                    alert('Invalid Member Search');
                }
        });

    }

    function searchStock(){

        var tableStockSearch = document.getElementById('tableStockSearch');
        var btnSearchStock = document.getElementById('btnSearchStock');

        var choices_stock = document.getElementById('choices-stock');
        var txtSearchStockId = document.getElementById('txtSearchStockId').value;
        var txtSearchStockName = document.getElementById('txtSearchStockName').value;
        var txtSearchStockType = document.getElementById('txtSearchStockType').value;

        var counttxtSearchStockId = txtSearchStockId.length;
        var counttxtSearchStockName = txtSearchStockName.length;
        var counttxtSearchStockType = txtSearchStockType.length;
        var location_id = '{{ $location_id }}';

        var spinner = document.createElement('div');
        spinner.className = 'spinner';

        if(counttxtSearchStockId >= 1||counttxtSearchStockName >= 1 || txtSearchStockType == "SERVICE" || txtSearchStockType == "NON-STOCK"){
            $.ajax({
                type:'get',
                url: "/stocks/stocksSearch?stock_id="+txtSearchStockId+"&stock_name="+txtSearchStockName+"&stock_type="+txtSearchStockType+"&location_id="+location_id,
                beforeSend: function(xhr) {
                    stockPagination.innerHTML = '';
                    tableStockSearch.innerHTML = '';
                    btnSearchStock.innerHTML = '';
                    btnSearchStock.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);

                    tableStockSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    stocks = data.stocks;
                    // if(data.status == "1000"){

                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);

                    // }
                    stockPagination.innerHTML = data.pagination;
                    btnSearchStock.innerHTML = 'Search';
                },
                error: function (data) {
                    btnSearchStock.innerHTML = 'Search';
                    alert('Invalid Member Search');
                }
            });
        }

    }

    function loadCustomerSearchPage(page){
        var tableCustomerSearch = document.getElementById('tableCustomerSearch');
        var btnSearchCustomer = document.getElementById('btnSearchCustomer');

        var choices_customer = document.getElementById('choices-customer');
        var txtSearchCustId = document.getElementById('txtSearchCustId').value;
        var txtSearchCustName = document.getElementById('txtSearchCustName').value;
        var txtSearchCustContact = document.getElementById('txtSearchCustContact').value;

        var counttxtSearchCustId = txtSearchCustId.length;
        var counttxtSearchCustName = txtSearchCustName.length;
        var counttxtSearchCustContact = txtSearchCustContact.length;
        var location_id = '{{ $location_id }}';

        var spinner = document.createElement('div');
        spinner.className = 'spinner';

        if(counttxtSearchCustId >= 1||counttxtSearchCustName >= 1||counttxtSearchCustContact >= 1){
            $.ajax({
                type:'get',
                url: "/customers/customerSearch?customer_id="+txtSearchCustId+"&customer_name="+txtSearchCustName+"&customer_contact="+txtSearchCustContact+"&currentPage="+page,
                beforeSend: function(xhr) {
                    tableCustomerSearch.innerHTML = '';
                    btnSearchCustomer.innerHTML = '';
                    customerPagination.innerHTML = '';
                    btnSearchCustomer.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);

                    tableCustomerSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    customers = data.customers;
                    // if(data.status == "1000"){

                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);

                    // }
                    customerPagination.innerHTML = data.pagination;
                    btnSearchCustomer.innerHTML = 'Search';
                },
                error: function (data) {
                    btnSearchCustomer.innerHTML = 'Search';
                    alert('Invalid Member Search');
                }
            });
        }
    }

    function loadStockSearchPage(page){
        var tableStockSearch = document.getElementById('tableStockSearch');
        var btnSearchStock = document.getElementById('btnSearchStock');

        var choices_stock = document.getElementById('choices-stock');
        var txtSearchStockId = document.getElementById('txtSearchStockId').value;
        var txtSearchStockName = document.getElementById('txtSearchStockName').value;
        var txtSearchStockType = document.getElementById('txtSearchStockType').value;

        var counttxtSearchStockId = txtSearchStockId.length;
        var counttxtSearchStockName = txtSearchStockName.length;
        var counttxtSearchStockType = txtSearchStockType.length;
        var location_id = '{{ $location_id }}';

        var spinner = document.createElement('div');
        spinner.className = 'spinner';

        if(counttxtSearchStockId >= 1||counttxtSearchStockName >= 1 || txtSearchStockType == "SERVICE" || txtSearchStockType == "NON-STOCK"){
            $.ajax({
                type:'get',
                url: "/stocks/stocksSearch?stock_id="+txtSearchStockId+"&stock_name="+txtSearchStockName+"&stock_type="+txtSearchStockType+"&location_id="+location_id+"&currentPage="+page,
                beforeSend: function(xhr) {
                    stockPagination.innerHTML = '';
                    tableStockSearch.innerHTML = '';
                    btnSearchStock.innerHTML = '';
                    btnSearchStock.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);

                    tableStockSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    stocks = data.stocks;
                    console.log(stocks);
                    // if(data.status == "1000"){

                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);

                    // }
                    stockPagination.innerHTML = data.pagination;
                    btnSearchStock.innerHTML = 'Search';
                },
                error: function (data) {
                    btnSearchStock.innerHTML = 'Search';
                    alert('Invalid Member Search');
                }
            });
        }
    }

    function refreshLocationStock(AcStockID,AcStockUOMID,selectedelement){

        $.ajax({
                type:'get',
                url: "/stocks/check-Stock-Refresh-Ajax?stock_id="+encodeURIComponent(AcStockID)+"&location_id="+"{{ $location_id}}",
                beforeSend: function(xhr) {
                    selectedelement.disabled = true;
                    selectedelement.innerHTML = 'Refreshing...';
                    },
                success: function (data) {
                    setTimeout(function() {
                        selectedelement.innerHTML = data.balance_text;  // Assuming `data` contains the new text
                        selectedelement.disabled = false;  // Re-enable the element after 3 seconds

                        document.getElementById('stock_refresh_'+AcStockID+'_OnHandQty').value = data.OnHandQty;
                        document.getElementById('stock_refresh_'+AcStockID+'_ReservedQty').value = data.ReservedQty;
                        document.getElementById('stock_refresh_'+AcStockID+'_AvailableQty').value = data.AvailableQty;

                    }, 1000);
                },
                error: function (data) {
                    console.log(data);
                    alert('Stock Refresh Error');
                    selectedelement.disabled = false;
                    selectedelement.innerHTML = 'Error';
                }
            });

    }

    function checkProductMinPrice(txtproductprice,ori_price,minprice,count_row){

        let productPrice = txtproductprice.value;
        let productquantity = document.getElementById('stock-qty-'+count_row).value;
        let producttotalprice = document.getElementById('productPrice-'+count_row);
        let productDiscount = document.getElementById('stock-discount-'+count_row);
        let productPriceRate = document.getElementById('stock-rate-'+count_row);

        if(productPrice == null || productPrice == ""){
            productPrice = "0.00";
            productPriceRate.value = "0.00";

        }
        // let salesman_discount = ori_price * max_discount / 100;

        if(max_discount > 0){
            minprice = minprice * (100-max_discount) / 100;
        }

        // issue 12/7/2025
        // if(productPrice < minprice){
        //     alert('Warning! Price entered is lower than minimum.. Please request to approve.');
        //     document.getElementById('stock-request-'+count_row).value = "Y";
        //     document.getElementById(count_row.toString()).style.backgroundColor = "#fddae2";
        //     document.getElementById('btnSubmitOrder').setAttribute('hidden', 'hidden');
        //     document.getElementById('btnOrderPriceRequest').removeAttribute('hidden');
        //     document.getElementById('btnSaveAsDraft').setAttribute('hidden', 'hidden');
        //     // txtproductprice.value = minprice;
        //     // productPrice = minprice;
        //     // document.getElementById('stock-qty-plus-'+count_row).click();
        //     // document.getElementById('stock-qty-minus-'+count_row).click();

        // }else{

            // document.getElementById('stock-request-'+count_row).value = "N";
            // if (document.getElementById(count_row.toString()).style.backgroundColor === "rgb(253, 218, 226)") {
            //     document.getElementById(count_row.toString()).style.backgroundColor = "";
            // }

            // var x = 1;
            // var allValid = true;
            // do {
            //     var element = document.getElementById('stock-request-' + x);
            //     if (element) {
            //         if (element.value === 'Y') {
            //             allValid = false;
            //             break;
            //         }
            //     } else {
            //         break;
            //     }
            //     x++;
            // } while (element);

            // if (allValid) {
            //     document.getElementById('btnSubmitOrder').removeAttribute('hidden');
            //     document.getElementById('btnOrderPriceRequest').setAttribute('hidden', 'hidden');
            //     document.getElementById('btnSaveAsDraft').removeAttribute('hidden');
            // }
        // }

        if(txtproductprice == ori_price){
            productDiscount.value = null;
        }else{
            productDiscount.value = ((ori_price - productPrice)*-1*productquantity).toFixed(2);
        }

        producttotalprice.value = (productPrice*productquantity).toFixed(2);

        // Recalculate voucher discount when cart changes
        setTimeout(function() {
            checkVoucherEligibilityOnCartChange();

            // Always recalculate if voucher is applied
            if (appliedVoucher) {
                calculateVoucherDiscount();
                updatePaymentCalculation();

                // Check if subtotal still meets minimum requirement
                if (voucherDiscount > 0) {
                    // Only show dialog if minimum amount is actually not met
                    const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
                    const minAmount = appliedVoucher.minAmount || 0;

                    if (currentSubtotal < minAmount) {
                        validateVoucherMinimumAmount(true);
                    }
                }
            }

            // Always ensure cart-total shows original subtotal (without discount)
            const subtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
            updateCartTotalDisplay(subtotal);
        }, 150);

    }

    function selectCustomer(id){
        // console.log(customers);
        document.getElementById('btnCloseSelectCustomerModal').click();
        var selectedCustomer = customers.find(function(customer) {
            return customer.AcCustomerID === id;
        });
        // console.log(selectedCustomer.AcCustomerID);

        var address = selectedCustomer.BillingAddress1;
        if(selectedCustomer.BillingAddress2 != null){
            address = address +"\n"+selectedCustomer.BillingAddress2;
            if(selectedCustomer.BillingAddress3 != null){
                address = address +"\n"+selectedCustomer.BillingAddress3;
                if(selectedCustomer.BillingAddress4 != null){
                    address = address +"\n"+selectedCustomer.BillingAddress4;
                }

            }
        }

        var divSaveButton = document.getElementById('divSaveButton');


        document.getElementById('choices-customer').value = selectedCustomer.AcCustomerID;
        document.getElementById('choices-customer-name').value = selectedCustomer.AcCustomerName;
        // document.getElementById('billingAddress').value = address;
        // document.getElementById('billingPhoneno').value = selectedCustomer.BillingTel1;

        if(selectedCustomer.BillingTel1 == "0"){
            document.getElementById('compnayContactno').value = selectedCustomer.MobileNo;
        }else{
            document.getElementById('compnayContactno').value = selectedCustomer.BillingTel1;
        }

        document.getElementById('companyEmail').value = selectedCustomer.BillingEmail;
        document.getElementById('GSTRegisterNumber').value = selectedCustomer.GSTRegisterNumber;
        document.getElementById('registrationNumber').value = selectedCustomer.BusinessRegisterNumber;
        document.getElementById('customer_name').value = selectedCustomer.AcCustomerName;
        divSaveButton.removeAttribute('hidden');
        getCustomerShippingAddress(id);

        getIncardDetails(selectedCustomer.AcCustomerID);


    }

    function getIncardDetails(AcCustomerID){
        // Check if card details functionality is enabled
        // if (incardSettings.details === 0) {
        //     console.log('Incard details functionality is disabled');
        //     return;
        // }

        var formData = {
            cardNo: AcCustomerID,
            _token: "{{ csrf_token() }}"
        };

        $.ajax({
                type:'post',
                url: "{{ route('services.incard.card-details') }}",
                data: formData,
                success: function (data) {
                    console.log('Incard Details:', JSON.stringify(data));



                    // Process voucher data if available
                    if (data) {
                        document.getElementById('incard_point').value = data.Balance ?? '-';
                        // Only process vouchers if voucher functionality is enabled
                        if (incardSettings.voucher === 1 && data.Voucher.count > 0){
                            processIncardVouchers(data.Voucher.voucher);
                        }

                    } else {
                        // Clear vouchers if no data
                        availableVouchers = [];
                        console.log('No voucher data available for this customer');
                    }
                },
                error: function (data) {
                    console.log('Error fetching Incard details:', data);
                    // Clear vouchers on error
                    availableVouchers = [];
                }
        });

    }

    function processIncardVouchers(voucherData) {
        // Clear existing vouchers
        availableVouchers = [];

        // Process each voucher from the API response
        voucherData.forEach(function(voucher) {
            // Only process AWARDED vouchers that are redeemable at this outlet
            if (voucher.Status === 'AWARDED' && voucher.ThisOutletRedeemable === 1) {

                // Determine voucher type based on Unit
                var voucherType = voucher.Unit === 'RM' ? 'fixed' : 'percentage';
                var voucherValue = parseFloat(voucher.Value) || 0;
                var minAmount = parseFloat(voucher.MinSpdAmt) || 0;
                var maxDiscount = parseFloat(voucher.MaxDisAmt) || 0;

                // Create voucher object in our format
                var processedVoucher = {
                    code: voucher.VoucherNo,
                    description: voucher.RewardTitle || 'Incard Voucher',
                    type: voucherType,
                    value: voucherValue,
                    minAmount: minAmount,
                    maxDiscount: maxDiscount,
                    isActive: true,
                    expiryDate: voucher.ExpiryDate,
                    originalData: voucher // Keep original data for reference
                };

                availableVouchers.push(processedVoucher);
            }
        });

        console.log('Processed vouchers:', availableVouchers);

        // Update voucher count badge
        updateVoucherBadge();

        // Show notification if vouchers are available
        if (availableVouchers.length > 0) {
            Swal.fire({
                icon: 'info',
                title: 'Vouchers Available!',
                text: `${availableVouchers.length} voucher(s) found for this customer`,
                timer: 3000,
                showConfirmButton: false
            });
        }
    }

    function updateVoucherBadge() {
        const badge = document.getElementById('voucherCountBadge');
        const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;

        // Count eligible vouchers
        const eligibleVouchers = availableVouchers.filter(voucher => {
            const isEligible = currentSubtotal >= voucher.minAmount;
            const isNotExpired = !voucher.expiryDate || new Date(voucher.expiryDate) >= new Date();
            return voucher.isActive && isEligible && isNotExpired;
        });

        if (eligibleVouchers.length > 0) {
            badge.textContent = eligibleVouchers.length;
            badge.style.display = 'block';
        } else {
            badge.style.display = 'none';
        }
    }

    function getCustomerShippingAddress(id){

        $.ajax({
                type:'get',
                url: "/customers/customerSearchShippingAddress?customer_id="+id,
                beforeSend: function(xhr) {
                },
                success: function (data) {

                if(data.status == "100"){
                    console.log(data);
                    document.getElementById('shippingName').value = data.attention;
                    document.getElementById('address1').value = data.address1;
                    document.getElementById('address2').value = data.address2;
                    document.getElementById('address3').value = data.address3;
                    document.getElementById('address4').value = data.address4;
                    document.getElementById('shippingPhoneno1').value = data.contact1;
                    document.getElementById('shippingPhoneno2').value = data.contact2;
                }

                },
                error: function (data) {
                }
        });

    }

    // function displayTable(data, page) {
    //     const startIndex = (page - 1) * rowsPerPage;
    //     const endIndex = page * rowsPerPage;
    //     const paginatedData = data.slice(startIndex, endIndex);

    //     const tbody = document.querySelector("#tableStockSearch tbody");
    //     tbody.innerHTML = "";

    //     paginatedData.forEach(row => {
    //         const tr = document.createElement("tr");
    //         tr.innerHTML = `
    //             <td>${row.AcStockID}</td>
    //             <td>${row.AcStockID}</td>
    //             <td>${row.AcStockID}</td>
    //         `;
    //         tbody.appendChild(tr);
    //     });

    //     displayPagination(data.length);
    // }

    // function displayPagination(totalRows) {
    //     const totalPages = Math.ceil(totalRows / rowsPerPage);
    //     const paginationDiv = document.getElementById("pagination");
    //     paginationDiv.innerHTML = "";

    //     for (let i = 1; i <= totalPages; i++) {
    //         const button = document.createElement("button");
    //         button.textContent = i;
    //         button.classList.toggle("disabled", i === currentPage);
    //         button.addEventListener("click", () => {
    //             currentPage = i;
    //             displayTable(stocks, currentPage);
    //         });
    //         paginationDiv.appendChild(button);
    //     }
    // }

    function changeSalesType(value){
        let selCashBill = document.getElementById('selCashBill');
        let selSaleOrder = document.getElementById('choices-payment-status');

        if(value === "1"){
            selSaleOrder.removeAttribute('required');
            selCashBill.removeAttribute('hidden');
            selCashBill.setAttribute('required', 'required');
            selSaleOrder.setAttribute('hidden', 'hidden');
        }else if(value === "2"){
            selCashBill.removeAttribute('required');
            selSaleOrder.removeAttribute('hidden');
            selCashBill.setAttribute('hidden', 'hidden');
            selSaleOrder.setAttribute('required', 'required');
        }

    }

    function changePaymentType(value){
        let payment_method_1 = document.getElementById('choices-payment-type').value;
        let payment_amount_1 = parseFloat(document.getElementById('amountTotalPay').value);

        // Use the payment amount (after voucher discount if applied)
        let check_cart_total = getPaymentAmount();
        // let divPaymentDetails = document.getElementById('divPaymentDetails');

        if (isNaN(payment_amount_1)) {
            payment_amount_1 = 0;
        }

        if(isNaN(check_cart_total)){
            check_cart_total = 0;
        }

        // document.getElementById('choices-payment-type').value = "";

        if(value === "1"){
            document.getElementById('btnModalmakePayment').removeAttribute('hidden');
            // document.getElementById('amountTotalPay').readOnly = true;
            document.getElementById('amountTotalPay').value = check_cart_total.toFixed(2);
            document.getElementById('labelBalanceAmount').innerHTML = "0.00";
            // divPaymentDetails.removeAttribute('hidden');
        }else if(value === "2"){
            document.getElementById('btnModalmakePayment').removeAttribute('hidden');
            // document.getElementById('amountTotalPay').readOnly = false;
            document.getElementById('amountTotalPay').value = "0.00";
            document.getElementById('labelBalanceAmount').innerHTML = check_cart_total.toFixed(2);
            // divPaymentDetails.removeAttribute('hidden');
        }else if(value === "3"){
            document.getElementById('btnModalmakePayment').setAttribute('hidden', 'hidden');
            document.getElementById('amountTotalPay').value = "0.00";
            document.getElementById('labelBalanceAmount').innerHTML = check_cart_total.toFixed(2);
            // divPaymentDetails.setAttribute('hidden', 'hidden');
        }

    }

    function changeOrderLocation(value){
        // var userConfirmed = confirm("Action will wipe all the current information. Do you want to be continue? ");
        Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Changing the location will remove all items from your cart. Do you want to continue?',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    let customer_id = document.getElementById('choices-customer').value;
                    window.location.href = "{{ route('cashsales.create') }}?shipfrom="+value+"&customer_id="+customer_id;
                } else {
                    Swal.fire({
                        icon: 'warning',
                        text: 'Stay on current page?',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK',
                    });
                }
            });
    }

    function loadPage(page) {
        var start = (page - 1) * 10;
        var end = start + 10;
        // var paginatedItems = items.slice(start, end);

        // var itemList = document.getElementById("itemList");
        // itemList.innerHTML = "";

        // paginatedItems.forEach(function(item) {
        //     var li = document.createElement("li");
        //     li.textContent = item;
        //     itemList.appendChild(li);
        // });

        currentPage = page;
        updatePagination();
    }

    function updatePagination() {
        // Remove 'active' class from all pages
        document.querySelectorAll(".pagination a").forEach(function(page) {
            page.classList.remove("active");
        });

        // Add 'active' class to current page
        document.getElementById("page" + currentPage).classList.add("active");
    }

    function calculateBalanceAmount(){
        let payment_amount_1 = parseFloat(document.getElementById('amountTotalPay').value);
        // let payment_amount_2 = parseFloat(document.getElementById('amountTotalPay2').value);

        // Use the payment amount (after voucher discount if applied)
        let check_cart_total = getPaymentAmount();

        document.getElementById('labelBalanceAmount').innerHTML = 'Current Balance : RM' + (check_cart_total-paidAmount).toFixed(2).toString()

        if (isNaN(payment_amount_1)) {
            payment_amount_1 = 0;
        }

        // if(isNaN(payment_amount_2)){
        //     payment_amount_2 = 0;
        // }

        if(isNaN(check_cart_total)){
            check_cart_total = 0;
        }

        let balance_amount = check_cart_total - paidAmount - (payment_amount_1);

        document.getElementById('labelCurrentBalance').innerHTML = 'Amount Balance : RM' + check_cart_total.toFixed(2).toString();
        document.getElementById('labelBalanceAmount').innerHTML = 'Current Balance : RM' + balance_amount.toFixed(2).toString();

        if(balance_amount<=0){
            document.getElementById('labelBalanceAmount').style.color = 'red';
            document.getElementById('modalChangeAmount').innerHTML = (balance_amount * -1).toFixed(2).toString();
            document.getElementById('modalChangeAmount').style.color = 'red';
        }else{
            document.getElementById('labelBalanceAmount').style.color = 'green';
            document.getElementById('modalChangeAmount').innerHTML = "0.00";
            document.getElementById('modalChangeAmount').style.color = 'black';
        }
    }

    function disableButton(clickedbutton){
        clickedbutton.disabled = true;
        clickedbutton.innerHTML = 'Processing...';

        setTimeout(function() {
            clickedbutton.innerHTML = 'Add to list<i class="ri-arrow-right-line ms-1 align-middle"></i>';
            clickedbutton.disabled = false;
        }, 3000);
    }

    function precalculateDiscount(itemNo,itemName,itemPrice,itemMin){

        var getCurrentItemPrice = document.getElementById('stock-rate-'+itemNo).value;
        var getCurrentPercentqage = (100-(getCurrentItemPrice / itemPrice * 100)).toFixed(2);

        // console.log(itemPrice);
        // console.log(getCurrentItemPrice);
        // console.log(getCurrentPercentqage);

        document.getElementById('txtdiscountPrice').value = getCurrentItemPrice;
        document.getElementById('txtdiscountpercentage').value = getCurrentPercentqage.toString();
        document.getElementById('txtDiscountMinPrice').value = itemMin;
        document.getElementById('txtDiscountItemNo').value = itemNo;
        document.getElementById('txtstockname').value = itemName;
        document.getElementById('txtDiscountItemPrice').value = itemPrice;
        document.getElementById('spanOriginalPrice').innerHTML = itemPrice;
        }

        function applyDiscount(applypercentage){

        var default_item_price = document.getElementById('txtDiscountItemPrice').value;
        var cal_value = (default_item_price * (100-applypercentage) / 100).toFixed(2);

        document.getElementById('txtdiscountPrice').value = cal_value;
        document.getElementById('txtdiscountpercentage').value = applypercentage.toString();

        }

        function calculateDiscountFromPrice(){

        var default_item_price = document.getElementById('txtDiscountItemPrice').value;
        var apply_price = document.getElementById('txtdiscountPrice').value;
        var cal_value = (100-(apply_price / default_item_price * 100)).toFixed(2);

        document.getElementById('txtdiscountpercentage').value = cal_value.toString();
        }

        function calculateDiscountFromPrecentage(){

        var default_item_price = document.getElementById('txtDiscountItemPrice').value;
        var apply_percentage = document.getElementById('txtdiscountpercentage').value;
        var cal_value = (default_item_price * (100-apply_percentage) / 100).toFixed(2);

        document.getElementById('txtdiscountPrice').value = cal_value;
        }

        function addDiscount(){
        var item_row_todiscount = document.getElementById('txtDiscountItemNo').value;

        document.getElementById('stock-rate-'+item_row_todiscount).value = document.getElementById('txtdiscountPrice').value;
        document.getElementById('stock-rate-'+item_row_todiscount).dispatchEvent(new Event('change'));
        document.getElementById('stock-qty-plus-'+item_row_todiscount).click();
        document.getElementById('stock-qty-minus-'+item_row_todiscount).click();
        document.getElementById('btnCloseModalmakeDiscount').click();
        }

        function clearDiscount(){
        var item_row_todiscount = document.getElementById('txtDiscountItemNo').value;
        var item_row_ori = document.getElementById('txtDiscountItemPrice').value;

        document.getElementById('stock-rate-'+item_row_todiscount).value =item_row_ori;
        document.getElementById('stock-rate-'+item_row_todiscount).dispatchEvent(new Event('change'));
        document.getElementById('stock-qty-plus-'+item_row_todiscount).click();
        document.getElementById('stock-qty-minus-'+item_row_todiscount).click();
        document.getElementById('btnCloseModalmakeDiscount').click();
        }

    function changePaymentMethod(paymentMethod_id){
        // Find the payment method object by AcPaymentCode
        var pmethod = payment_method.PaymentMethods.find(function(item) {
            return item.AcPaymentCode === paymentMethod_id;
        });

        // If found, set the force fields, otherwise clear them
        if (pmethod) {
            document.getElementById('IsForceBankName').value = pmethod.IsForceBankName;
            document.getElementById('IsForceCardNo').value = pmethod.IsForceCardNo;
            document.getElementById('IsForceApprovalCode').value = pmethod.IsForceApprovalCode;
        } else {
            document.getElementById('IsForceBankName').value = '';
            document.getElementById('IsForceCardNo').value = '';
            document.getElementById('IsForceApprovalCode').value = '';
        }
    }

    // Pagination controls
    if (document.getElementById("prevPage")) {
        document.getElementById("prevPage").addEventListener("click", function(event) {
            event.preventDefault();
            if (currentPage > 1) {
                loadPage(currentPage - 1);
            }
        });
    }
    if (document.getElementById("nextPage")) {
        document.getElementById("nextPage").addEventListener("click", function(event) {
            event.preventDefault();
            if (currentPage < Math.ceil(countStock / 10)) {
                loadPage(currentPage + 1);
            }
        });
    }

    if (document.getElementById("page1")) {
        document.getElementById("page1").addEventListener("click", function(event) {
            event.preventDefault();
            loadPage(1);
        });
    }
    if (document.getElementById("page2")) {
        document.getElementById("page2").addEventListener("click", function(event) {
            event.preventDefault();
            loadPage(2);
        });
    }

</script>
<script>
    function addPayment(){

        var tablePaymentList = document.getElementById('tablePaymentList').getElementsByTagName('tbody')[0];
        var trSubTotal = document.getElementById('trSubTotal');
        var newRow = document.createElement('tr');
        var paymentElements = document.getElementsByClassName('payment-number');
        var paymentCount = paymentElements.length;

        let choices_payment_type =document.getElementById('choices-payment-type').value;
        let choices_payment_type_name = document.getElementById('choices-payment-type').options[document.getElementById('choices-payment-type').selectedIndex].text;
        let cardholderName = document.getElementById('cardholderName').value;
        let cardNumber = document.getElementById('cardNumber').value;
        // let paymentremark = document.getElementById('paymentremark').value;
        let approvalCode = document.getElementById('approvalCode').value;
        let amountTotalPay = document.getElementById('amountTotalPay').value;
        let check_cart_total = parseFloat(document.getElementById('cart-total').value);
        let payment_method = document.getElementById('choices-payment-status').value;

        let check_IsForceBankName = document.getElementById('IsForceBankName').value;
        let check_IsForceCardNo = document.getElementById('IsForceCardNo').value;
        let check_IsForceApprovalCode = document.getElementById('IsForceApprovalCode').value;

        if(check_IsForceBankName == 'Y'){

            if(cardholderName === null || cardholderName === ""){
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Please enter cardholder name!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                });
                return;  // Stop submission if the check fails

            }
        }

        if(check_IsForceCardNo == 'Y'){

            if(cardNumber === null || cardNumber === ""){
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Please enter card number!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                });
                return;  // Stop submission if the check fails

            }else if(cardNumber.length < 4){
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Invalid card number!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                });
                return;  // Stop submission if the check fails

            }

        }

        if(check_IsForceApprovalCode == 'Y'){

            if(approvalCode === null || approvalCode === ""){
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Please enter approval code!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                });
                return;  // Stop submission if the check fails

            }
        }

        if((parseFloat(amountTotalPay)+parseFloat(paidAmount)) > check_cart_total){
            if(parseFloat(paidAmount)>=check_cart_total){
                    Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Payment amount cannot more than total amount!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                });
                return ;
            }

            Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Payment amount cannot more than total amount!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
            });
            return ;

            // Swal.fire({
            //     icon: 'warning',
            //     title: 'Payment Change',
            //     text: (parseFloat(amountTotalPay)+parseFloat(paidAmount)-check_cart_total).toFixed(2),
            //     confirmButtonColor: '#3085d6',
            //     confirmButtonText: 'OK',
            // });
              // Stop submission if the check fails

        }

        if(choices_payment_type === null || choices_payment_type === ""){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please select payment type!',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK',
            });
            return;  // Stop submission if the check fails

        }

        if(parseFloat(amountTotalPay) > 0 && payment_method == '2'){
            // document.getElementById('choices-payment-status').readOnly = true;
            document.getElementById('choices-payment-status').disabled = true;
        }

        let modalChangeAmount = parseFloat(document.getElementById('modalChangeAmount').innerHTML);

        if(modalChangeAmount > 0){
            amountTotalPay = (parseFloat(amountTotalPay) - Math.abs(modalChangeAmount)).toFixed(2);
        }


        var element_string ='<tr id="payment_row_'+(paymentCount+1)+'">'+
                            '<input type="hidden" id="payment_status_'+(paymentCount+1)+'" name="payment_status_'+(paymentCount+1)+'" value="1"/>'+
                            '<input type="hidden" id="payment-number_'+(paymentCount+1)+'" class="payment-number" value="'+(paymentCount+1)+'">'+
                            '<input type="hidden" value="'+choices_payment_type+'" id="choices-payment-type_'+( paymentCount+1) +'" placeholder="Enter Name (optional)" name="choices-payment-type_'+( paymentCount+1) +'">'+
                            '<input type="hidden" value="'+cardholderName+'" id="cardholderName_'+( paymentCount+1) +'" placeholder="Enter Name (optional)" name="cardholderName_'+( paymentCount+1) +'">'+
                            '<input type="hidden" value="'+cardNumber+'" id="cardNumber_'+( paymentCount+1) +'" placeholder="Last 4 Digits Card Number" name="cardNumber_'+( paymentCount+1) +'">'+
                            // '<input type="hidden" id="paymentremark'+( paymentCount+1) +'" placeholder="Remark (optional)" name="paymentremark'+( paymentCount+1) +'">'+
                            '<input type="hidden" value="'+approvalCode+'" id="approvalCode_'+( paymentCount+1) +'" placeholder="Approval Code" name="approvalCode_'+( paymentCount+1) +'">'+
                            '<input type="hidden" value="'+amountTotalPay+'" id="amountTotalPay_'+( paymentCount+1) +'" placeholder="Approval Code" name="amountTotalPay_'+( paymentCount+1) +'">'+
                            '<td>'+ (new Date()).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true }).replace(',', '') +'</td>'+
                            '<td>'+ choices_payment_type_name +'</td>';
                            if(approvalCode !== ''){

                                element_string += '<td>'+ approvalCode +'</td>';
                            }else{
                                element_string += '<td>'+ '---' +'</td>';
                            }

        element_string +=   '<td style="text-align:right">'+ parseFloat(amountTotalPay).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +'</td>';
        element_string +=   '<td class="product-removal" style="text-align:center"><a hidden onclick="editpayment('+"'"+(paymentCount+1)+"'"+');"><i class="text-danger ri-edit-box-line" style="font-size:30px"></i></a>'
        +'<a><i class="text-danger ri-close-circle-line" onclick="deletePayment('+"'"+(paymentCount+1)+"'"+');" style="font-size:30px"></i></a><td>';
        element_string +=    '</tr>';


        newRow.innerHTML = element_string;
        tablePaymentList.insertBefore(newRow, trSubTotal);
        // var newRow = tablePaymentList.insertRow();
        // newRow.innerHTML = element_string;
        paidAmount = paidAmount+ parseFloat(amountTotalPay);

        // Use the payment amount (after voucher discount if applied) for balance calculation
        const finalAmountForBalance = getPaymentAmount();
        document.getElementById('labelBalance').innerHTML = (finalAmountForBalance-paidAmount).toFixed(2);
        document.getElementById('textPaidAmount').innerHTML = paidAmount.toFixed(2);
        document.getElementById('btnCloseModalMakePayment').click();
    }

    function deletePayment(row){
        let check_cart_total = parseFloat(document.getElementById('cart-total').value);

        document.getElementById('payment_status_'+row).value = 2;
        document.getElementById('payment_status_'+row).closest('tr').setAttribute('hidden', 'hidden');

        paidAmount = paidAmount - parseFloat(document.getElementById('amountTotalPay_'+row).value);

        // Use the payment amount (after voucher discount if applied) for balance calculation
        const finalAmountForBalance = getPaymentAmount();
        document.getElementById('labelBalance').innerHTML = (finalAmountForBalance-paidAmount).toFixed(2);
        document.getElementById('textPaidAmount').innerHTML = paidAmount.toFixed(2);

        if(paidAmount == 0){
            document.getElementById('choices-payment-status').disabled = false;
        }

        calculateBalanceAmount();
    }

    function editpayment(row){
        let payment_row = document.getElementById('payment_row_'+row);
        let payment_status = document.getElementById('payment_status_'+row);
        let payment_number = document.getElementById('payment-number_'+row);
        let choices_payment_type = document.getElementById('choices-payment-type_'+row);
        let cardholderName = document.getElementById('cardholderName_'+row);
        let cardNumber = document.getElementById('cardNumber_'+row);
        // let paymentremark = document.getElementById('paymentremark'+row);
        let approvalCode = document.getElementById('approvalCode_'+row);
        let amountTotalPay = document.getElementById('amountTotalPay_'+row);

        document.getElementById('choices-payment-type').value = choices_payment_type.value;
        document.getElementById('cardholderName').value = cardholderName.value;
        document.getElementById('cardNumber').value = cardNumber.value;
        // document.getElementById('paymentremark').value = paymentremark.value;
        document.getElementById('approvalCode').value = approvalCode.value;
        document.getElementById('amountTotalPay').value = amountTotalPay.value;
        document.getElementById('paymentRowNumber').value = row;

        document.getElementById('btnModalmakePayment').click();

        document.getElementById('btnSubmitPayment').setAttribute('hidden', 'hidden');
        document.getElementById('btnUpdateUpdatePayment').removeAttribute('hidden');


    }

</script>
<script>
    document.getElementById('btnModalmakePayment').addEventListener('click', function(event) {

        // Use the payment amount (after voucher discount if applied)
        let check_cart_total = getPaymentAmount();

        if(check_cart_total == null || check_cart_total == '' || isNaN(check_cart_total)){
            check_cart_total = 0;

        }else{
            check_cart_total = parseFloat(check_cart_total);
        }

        document.getElementById('choices-payment-type').value = "";
        document.getElementById('cardholderName').value = "";
        document.getElementById('cardNumber').value = "";
        document.getElementById('approvalCode').value = "";
        document.getElementById('amountTotalPay').value = (check_cart_total - paidAmount).toFixed(2);

        document.getElementById('modalActualAmount').innerHTML = (check_cart_total - paidAmount).toFixed(2);

        calculateBalanceAmount();
    });
</script>
<script>
    document.getElementById('invoice_form').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
            event.preventDefault();
            return false;
        }
    });
    document.getElementById('invoice_form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

        var payment_status_check = document.getElementById('choices-payment-status').value;
        var customer_check = document.getElementById('choices-customer');
        var seletecd_stock_check = document.querySelectorAll('[id^="productName"]');

        console.log('cust -' + customer_check.value);

        if(customer_check.value === null || customer_check.value === ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please select customer for this order!',
            });
            return;  // Stop submission if the check fails
        }

        if (seletecd_stock_check.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please add at least one item to cart!',
            });
            return;
        }

        // if (payment_status_check === '1') {
        //     let payment_method_1 =document.getElementById('choices-payment-type1').value;
        //     let payment_method_2 = document.getElementById('choices-payment-type2').value;
        //     let payment_amount_1 = parseFloat(document.getElementById('amountTotalPay1').value);
        //     let payment_amount_2 = parseFloat(document.getElementById('amountTotalPay2').value);
        //     let check_cart_total = parseFloat(document.getElementById('cart-total').value);
        //     let approval_code_1 = document.getElementById('approvalCode1').value;
        //     let approval_code_2 = document.getElementById('approvalCode2').value;

        //     if (isNaN(payment_amount_1)) {
        //         payment_amount_1 = 0;
        //     }

        //     if(isNaN(payment_amount_2)){
        //         payment_amount_2 = 0;
        //     }

        //     if(isNaN(check_cart_total)){
        //         check_cart_total = 0;
        //     }

        //     if(payment_method_1 === "" && payment_method_2 === ""){
        //         Swal.fire({
        //             icon: 'warning',
        //             title: 'Oops...',
        //             text: 'Please select payment method!',
        //             confirmButtonColor: '#3085d6',
        //             confirmButtonText: 'OK',
        //         });
        //         return;  // Stop submission if the check fails
        //     }else if(payment_method_1 === "" && payment_amount_1 !== 0){
        //         Swal.fire({
        //             icon: 'warning',
        //             title: 'Oops...',
        //             text: 'Please select payment method 1!',
        //             confirmButtonColor: '#3085d6',
        //             confirmButtonText: 'OK',
        //         });
        //         return;  // Stop submission if the check fails

        //     }else if(payment_method_2 === "" && payment_amount_2 !== 0){
        //         Swal.fire({
        //             icon: 'warning',
        //             title: 'Oops...',
        //             text: 'Please select payment method 2!',
        //             confirmButtonColor: '#3085d6',
        //             confirmButtonText: 'OK',
        //         });
        //         return;  // Stop submission if the check fails
        //     }

        //     // if(approval_code_1 === "" && payment_amount_1 !== 0){

        //     //     Swal.fire({
        //     //         icon: 'warning',
        //     //         title: 'Oops...',
        //     //         text: 'Must enter approval code!',
        //     //         confirmButtonColor: '#3085d6',
        //     //         confirmButtonText: 'OK',
        //     //     });
        //     //     return;  // Stop submission if the check fails

        //     // }

        //     if((payment_amount_1+payment_amount_2) != check_cart_total){
        //         // console.log((payment_amount_1+payment_amount_2) +' < '+ check_cart_total);
        //         Swal.fire({
        //             icon: 'warning',
        //             title: 'Oops...',
        //             text: 'Payment amount must be full amount!',
        //             confirmButtonColor: '#3085d6',
        //             confirmButtonText: 'OK',
        //         });
        //         return;  // Stop submission if the check fails

        //     }
        // }else if(payment_status_check === '2'){
        //     let payment_method_1 = document.getElementById('choices-payment-type1').value;
        //     let payment_method_2 = document.getElementById('choices-payment-type2').value;
        //     let payment_amount_1 = parseFloat(document.getElementById('amountTotalPay1').value);
        //     let payment_amount_2 = parseFloat(document.getElementById('amountTotalPay2').value);

        //     if(payment_method_1 === '' && payment_method_2 === ''){
        //         Swal.fire({
        //             icon: 'warning',
        //             title: 'Oops...',
        //             text: 'Please select payment method!',
        //             confirmButtonColor: '#3085d6',
        //             confirmButtonText: 'OK',
        //         });
        //         return;  // Stop submission if the check fails

        //     }else{
        //         if(payment_method_1 !== ''){
        //             if(payment_amount_1 === '' || payment_amount_1 === 0){
        //                 Swal.fire({
        //                     icon: 'warning',
        //                     title: 'Oops...',
        //                     text: 'Please enter payment amount 1!',
        //                     confirmButtonColor: '#3085d6',
        //                     confirmButtonText: 'OK',
        //                 });
        //                 return;  // Stop submission if the check fails
        //             }
        //         }

        //         if(payment_method_2 !== ''){
        //             console.log(payment_method_2);
        //             if(payment_amount_2 === '' || payment_amount_2 === 0){
        //                 console.log(payment_amount_2);
        //                 Swal.fire({
        //                     icon: 'warning',
        //                     title: 'Oops...',
        //                     text: 'Please enter payment amount 2!',
        //                     confirmButtonColor: '#3085d6',
        //                     confirmButtonText: 'OK',
        //                 });
        //                 return;  // Stop submission if the check fails
        //             }
        //         }

        //     }

        // }

        // Validate voucher minimum amount before submission
        if (!validateVoucherMinimumAmount()) {
            return; // Stop submission if voucher validation fails
        }

        // Use the payment amount (after voucher discount if applied) for validation
        let check_cart_total = getPaymentAmount();

        if(check_cart_total !== paidAmount){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Payment amount must be full amount!',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK',
            });
            return;  // Stop submission if the check fails
        }

        Swal.fire({
            title: 'Are you sure?',
            text: "Do you want to proceed with the submission?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, submit it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, submit the form
                Swal.getConfirmButton().disabled = true;
                Swal.getCancelButton().disabled = true;

                callLoaddingScreen('Creating Cash Order <br> Please do not refresh or close this page.',true);
                this.submit();
            }
        });
    });
</script>

<script>
    $(document).on('keydown', function(event) {
    if (event.key === 'Enter') {
      // Check if the modal is open
      if ($('#selectCustomerModal').hasClass('show')) {
        event.preventDefault(); // Prevent the default action (form submission, etc.)
        $('#btnSearchCustomer').click(); // Trigger the desired action (e.g., submit button click)
      }

      if ($('#addStockModal').hasClass('show')) {
        event.preventDefault(); // Prevent the default action (form submission, etc.)
        $('#btnSearchStock').click(); // Trigger the desired action (e.g., submit button click)
      }
    }
    });
</script>

@if($salesman_id == null)
<!-- <script>
    function openSelsmanModal() {

    Swal.fire({
                title: 'Hi, '+'{{ auth()->user()->name }}',
                html: `
                <div style="text-align:left">
                    <label style="font-size: .875rem">You must select one of salesman to proceed this order.</label>
                    <input id="textSalesmanId" type="text" class="form-control bg-light" placeholder="Enter Salesman ID" autofocus>
                </div>
                <span class="errormsgchangepwd" id="salesmanid-error" style="display:none;">error</span>
                `,
                confirmButtonText: 'Confirm',
                showCancelButton: true,
                cancelButtonText: 'Cancel',
                allowOutsideClick: false,
                // allowEscapeKey: false,
                showCloseButton: false,
                preConfirm: () => {
                    const textSalesmanId = Swal.getPopup().querySelector('#textSalesmanId').value;
                    const salesmanid_error = document.getElementById('salesmanid-error');

                    if (!textSalesmanId) {
                        document.getElementById('salesmanid-error').innerHTML = '*Salesman ID cannot be empty';
                        document.getElementById('salesmanid-error').style.display = 'block';
                        // Swal.showValidationMessage('Both fields are required');
                        return false; // Returning false prevents the modal from closing
                    }

                    // If passwords match, return the new password
                    return textSalesmanId;
                },
            }).then((result) => {
                if (result.isConfirmed) {
                    const textSalesmanId = result.value.toUpperCase();
                    var formData = {
                        salesman_id: textSalesmanId,
                        _token: "{{ csrf_token() }}" // Add CSRF token for security
                    };

                    $.ajax({
                        url: "{{ route('salesman.verifySalesmanId')}}",
                        type: 'POST',
                        data: formData,
                        success: function(response) {
                            console.log(response);
                            if(response.status == 'error') {
                                Swal.fire('Error', response.message, 'error');
                                setTimeout(openSelsmanModal, 2000);
                                // return;
                            }else if(response.status == 'success') {
                                document.getElementById('textshowsalesman').value = response.data;
                                document.getElementById('selectSalesmanID').value = textSalesmanId;
                                Swal.fire('', response.message, 'success');
                            }

                        },
                        error: function(xhr) {
                            Swal.fire('Error', 'There was an error submitting the data.', 'error');
                        }
                    });

                    // Swal.fire('Success', 'Password changed successfully!', 'success');
                }else{
                    window.location.href = "{{ route('orders.index') }}";
                }
            });
    }

    openSelsmanModal();

</script> -->
@endif
<script>
    // document.getElementById('invoice_form').addEventListener('submit', function(event) {
    //     var select = document.getElementById('choices-customer');
    //     var compnayContactno = document.getElementById('compnayContactno');
    //     var alert = document.getElementById('error-alert');
    //     var isValid = true;

    //     // Check if the select element has a value
    //     if (!select.value) {
    //         isValid = false;
    //         select.classList.add('is-invalid');
    //     } else {
    //         select.classList.remove('is-invalid');
    //     }

    //     // If the form is invalid, prevent submission
    //     if (!isValid) {
    //         event.preventDefault();
    //         compnayContactno.scrollIntoView({ behavior: 'smooth', block: 'center' });
    //         alert.classList.remove('hide');
    //         setTimeout(function() {
    //                 alert.classList.remove('show');
    //                 alert.classList.add('hide');
    //             }, 3000);

    //     }
    // });

    // ============ INCARD VOUCHER FUNCTIONS ============

    // Clear any stuck modal backdrops on page load
    $(document).ready(function() {
        // Remove any stuck modal backdrops
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open');
        $('body').css('padding-right', '');
        $('body').css('overflow', '');

        // Ensure all modals are properly closed
        $('.modal').removeClass('show');
        $('.modal').attr('aria-hidden', 'true');
        $('.modal').css('display', 'none');

        // Add error handling for JavaScript errors
        window.addEventListener('error', function(e) {
            console.error('JavaScript Error:', e.error);
        });

        console.log('Page loaded and modal cleanup completed');
    });

    @if($incard->voucher == 1)
    // Initialize voucher table when modal opens
    document.getElementById('btnModalIncard').addEventListener('click', function() {
        // Check if customer is selected
        const customerId = document.getElementById('choices-customer').value;
        if (!customerId) {
            Swal.fire('Warning', 'Please select a customer first', 'warning');
            return;
        }

        loadVoucherTable();
        resetVoucherModal();
    });
    @endif

    // Refresh voucher table when cart total changes (for eligibility updates)
    function refreshVoucherEligibility() {
        const modal = document.getElementById('modalIncard');
        if (modal && modal.classList.contains('show')) {
            loadVoucherTable();
        }
    }

    // Check if any vouchers become eligible/ineligible when cart changes
    function checkVoucherEligibilityOnCartChange() {
        if (availableVouchers.length === 0) return;

        const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
        let newlyEligible = [];
        let newlyIneligible = [];

        availableVouchers.forEach(voucher => {
            const wasEligible = voucher.wasEligible || false;
            const isEligible = currentSubtotal >= voucher.minAmount &&
                              (!voucher.expiryDate || new Date(voucher.expiryDate) >= new Date());

            if (!wasEligible && isEligible) {
                newlyEligible.push(voucher);
            } else if (wasEligible && !isEligible) {
                newlyIneligible.push(voucher);
            }

            voucher.wasEligible = isEligible;
        });

        // Show notification for newly eligible vouchers
        if (newlyEligible.length > 0) {
            Swal.fire({
                icon: 'success',
                title: 'Vouchers Now Available!',
                text: `${newlyEligible.length} voucher(s) are now eligible for use`,
                timer: 3000,
                showConfirmButton: false
            });
        }

        // Update voucher badge
        updateVoucherBadge();

        // Refresh voucher table if modal is open
        refreshVoucherEligibility();
    }

    function loadVoucherTable() {
    const tableBody = document.getElementById('voucherTableBody');
    const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;

    tableBody.innerHTML = '';

    if (availableVouchers.length === 0) {
        tableBody.innerHTML = `
            <div class=text-center text-muted p-3">
                <i class="ri-coupon-line fs-24 mb-2"></i><br>
                No vouchers available for this customer.<br>
                <small>Please select a customer with available vouchers or enter a voucher code to verify.</small>
            </div>
        `;
        return;
    }

    availableVouchers.forEach(voucher => {
        if (voucher.isActive) {
            const isEligible = currentSubtotal >= voucher.minAmount;
            const isExpired = voucher.expiryDate && new Date(voucher.expiryDate) < new Date();
            const canUse = isEligible && !isExpired;

            let valueDisplay = '';
            if (voucher.type === 'fixed') {
                valueDisplay = `RM ${voucher.value.toFixed(2)}`;
                if (voucher.maxDiscount && voucher.maxDiscount < voucher.value) {
                    valueDisplay += ` (Max: RM ${voucher.maxDiscount.toFixed(2)})`;
                }
            } else {
                valueDisplay = `${voucher.value}%`;
                if (voucher.maxDiscount) {
                    valueDisplay += ` (Max: RM ${voucher.maxDiscount.toFixed(2)})`;
                }
            }

            const statusText = isExpired
                ? 'Expired'
                : (!isEligible ? `Min RM${voucher.minAmount.toFixed(2)} required` : 'Available');

            // Each voucher = one grid item
            const card = `
            <div style="
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 10px;
                background: #fff2ce;
                border-radius: 12px;
                border: 1px solid #f0d98c;
                min-height: 200px;
                font-size: 13px
            ">
                <!-- Top: Description & Code -->
                <div>
                    <div class="fw-semibold">${voucher.description}</div>
                    <small class="text-muted">${voucher.code}</small>

                    <!-- Badges -->
                    <small>
                        ${isExpired ? '<span class="badge bg-danger-subtle text-danger me-1">Expired</span>' : ''}
                        ${voucher.isVerified ? '<span class="badge bg-success-subtle text-success">Verified</span>' : ''}
                    </small>
                </div>

                <!-- Middle: Voucher Details (Value, Min Spend, Expiry) -->
                <small class="p-2 rounded" style="background:#fff9e6; border:1px dashed #e0c45c;">
                    <div><strong>Value:</strong> ${valueDisplay}</div>
                    <div><strong>Min Spend:</strong> RM ${voucher.minAmount.toFixed(2)}</div>
                    ${voucher.expiryDate ? `<div><strong>Expiry:</strong> ${voucher.expiryDate}</div>` : ''}
                </small>

                <!-- Bottom: Button -->
                <small>
                    <button type="button" style="color: white"
                        class="btn w-100 btn-sm ${canUse ? 'bg-primary' : 'bg-primary'}"
                        onclick="selectVoucher('${voucher.code}')"
                        ${!canUse ? `disabled title="${statusText}"` : ''}>
                        ${canUse ? 'Select' : (isExpired ? 'Expired' : `Need RM${(voucher.minAmount - currentSubtotal).toFixed(2)} more`)}
                    </button>
                </small>
            </div>

            `;

            tableBody.innerHTML += card;
        }
    });
}


    function searchVoucherByCode(code) {
        if (!code) return;

        const voucher = availableVouchers.find(v => v.code.toLowerCase() === code.toLowerCase());
        if (voucher) {
            selectVoucher(voucher.code);
        } else {
            // Don't show error here, let user use verify button for external vouchers
            console.log('Voucher code not found in available vouchers list');
        }
    }

    function verifyVoucherCode() {
        const voucherCode = document.getElementById('voucherCode').value.trim();
        const pinCode = document.getElementById('pinCode').value.trim();

        if (!voucherCode) {
            Swal.fire('Warning', 'Please enter a voucher code', 'warning');
            return;
        }

        if (!pinCode) {
            Swal.fire('Warning', 'Please enter PIN code', 'warning');
            return;
        }

        // Check if customer is selected
        const customerId = document.getElementById('choices-customer').value;
        if (!customerId) {
            Swal.fire('Warning', 'Please select a customer first', 'warning');
            return;
        }

        // Get current total amount
        const totalAmount = parseFloat(document.getElementById('cart-subtotal').value) || 0;

        // Show loading state
        const verifyBtn = document.getElementById('btnVerifyVoucher');
        const originalText = verifyBtn.innerHTML;
        verifyBtn.innerHTML = '<i class="ri-loader-4-line me-1 spinner-border spinner-border-sm"></i>Verifying...';
        verifyBtn.disabled = true;

        // Prepare form data
        const formData = {
            voucherNo: voucherCode,
            cardNo: customerId,
            cardPin: pinCode,
            totalAmount: totalAmount.toFixed(2),
            _token: "{{ csrf_token() }}"
        };

        // Call the redeemVerify API
        $.ajax({
            type: 'POST',
            url: "{{ route('services.incard.redeem-verify') }}",
            data: formData,
            success: function(response) {
                console.log('Voucher verification response:', response);

                // Reset button state
                verifyBtn.innerHTML = originalText;
                verifyBtn.disabled = false;

                if (response && response.Status === 'COMPLETE') {
                    // Process the verified voucher
                    processVerifiedVoucher(response, voucherCode);
                } else if (response && response.Status === 'FAIL') {
                    // Show the statusMsg from the API response
                    Swal.fire('Error', response.statusMsg || 'Voucher verification failed', 'error');
                } else {
                    Swal.fire('Error', response.message || 'Voucher verification failed', 'error');
                }
            },
            error: function(xhr, status, error) {
                console.error('Voucher verification error:', error);

                // Reset button state
                verifyBtn.innerHTML = originalText;
                verifyBtn.disabled = false;

                let errorMessage = 'Failed to verify voucher';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }

                Swal.fire('Error', errorMessage, 'error');
            }
        });
    }

    function processVerifiedVoucher(response, voucherCode) {
        // Extract voucher data from the API response
        const voucherData = response.VoucherInfo || response;

        // Create a voucher object from the verified data
        const verifiedVoucher = {
            code: voucherCode,
            description: voucherData.RewardTitle || voucherData.description || 'Verified Voucher',
            type: voucherData.Unit === 'RM' ? 'fixed' : 'percentage',
            value: parseFloat(voucherData.Value || voucherData.value) || 0,
            minAmount: parseFloat(voucherData.minSpendAmount || voucherData.MinSpdAmt || voucherData.minAmount) || 0,
            maxDiscount: parseFloat(voucherData.MaxDisAmt || voucherData.maxDiscount) || 0,
            isActive: true,
            expiryDate: voucherData.ExpiryDate || voucherData.expiryDate || null,
            isVerified: true,
            originalData: response
        };

        // Don't add to available vouchers table - directly apply the verified voucher
        // Apply the voucher immediately using the API response discount value
        appliedVoucher = verifiedVoucher;

        // Use the voucherValue from the API response as the actual discount
        const apiVoucherValue = parseFloat(response.voucherValue) || 0;
        if (apiVoucherValue > 0) {
            voucherDiscount = apiVoucherValue;
        } else {
            // Fallback to calculated discount if API doesn't provide voucherValue
            calculateVoucherDiscount();
        }

        updatePaymentCalculation();

        // Update hidden form fields for submission
        document.getElementById('applied_voucher_code').value = verifiedVoucher.code;
        document.getElementById('applied_voucher_type').value = verifiedVoucher.type;
        document.getElementById('applied_voucher_value').value = verifiedVoucher.value;
        document.getElementById('applied_voucher_discount').value = voucherDiscount.toFixed(2);

        // Show remove voucher button
        document.getElementById('btnRemoveVoucher').style.display = 'block';

        console.log('Voucher auto-applied:', {
            code: verifiedVoucher.code,
            apiVoucherValue: apiVoucherValue,
            finalDiscount: voucherDiscount,
            subtotal: parseFloat(document.getElementById('cart-subtotal').value) || 0
        });

        // Close the modal with a small delay to ensure payment calculation completes
        setTimeout(function() {
            document.getElementById('btnCloseModalIncard').click();
            Swal.fire('Success', 'Voucher verified and applied successfully!', 'success');
        }, 100);
    }



    function selectVoucher(voucherCode) {
        console.log('selectVoucher called:', {
            voucherCode: voucherCode,
            availableVouchersCount: availableVouchers.length,
            currentAppliedVoucher: appliedVoucher ? appliedVoucher.code : 'none'
        });

        const voucher = availableVouchers.find(v => v.code === voucherCode);
        const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;

        if (!voucher) {
            console.log('Voucher not found in availableVouchers:', availableVouchers.map(v => v.code));
            Swal.fire('Error', 'Voucher not found', 'error');
            return;
        }

        // Check if voucher is expired
        if (voucher.expiryDate && new Date(voucher.expiryDate) < new Date()) {
            Swal.fire('Error', 'This voucher has expired', 'error');
            return;
        }

        if (currentSubtotal < voucher.minAmount) {
            const shortfall = voucher.minAmount - currentSubtotal;
            Swal.fire({
                icon: 'warning',
                title: 'Minimum Amount Not Met',
                html: `
                    <p>This voucher requires a minimum purchase of <strong>RM ${voucher.minAmount.toFixed(2)}</strong></p>
                    <p>Current total: <strong>RM ${currentSubtotal.toFixed(2)}</strong></p>
                    <p>You need <strong>RM ${shortfall.toFixed(2)}</strong> more to use this voucher</p>
                `,
                confirmButtonText: 'OK'
            });
            return;
        }

        // Calculate potential discount for display
        let potentialDiscount = 0;
        if (voucher.type === 'fixed') {
            potentialDiscount = Math.min(voucher.value, currentSubtotal);
        } else {
            potentialDiscount = (currentSubtotal * voucher.value) / 100;
        }

        // Apply max discount limit
        if (voucher.maxDiscount && voucher.maxDiscount > 0) {
            potentialDiscount = Math.min(potentialDiscount, voucher.maxDiscount);
        }

        // Show selected voucher info
        const selectedInfo = document.getElementById('selectedVoucherInfo');
        const selectedDetails = document.getElementById('selectedVoucherDetails');

        let discountText = '';
        if (voucher.type === 'fixed') {
            discountText = `RM ${voucher.value.toFixed(2)}`;
            if (voucher.maxDiscount && voucher.maxDiscount < voucher.value) {
                discountText += ` (Max: RM ${voucher.maxDiscount.toFixed(2)})`;
            }
        } else {
            discountText = `${voucher.value}%`;
            if (voucher.maxDiscount) {
                discountText += ` (Max: RM ${voucher.maxDiscount.toFixed(2)})`;
            }
        }

        selectedDetails.innerHTML = `
            <strong>Code:</strong> ${voucher.code}<br>
            <strong>Description:</strong> ${voucher.description}<br>
            <strong>Discount:</strong> ${discountText}<br>
            <strong>You will save:</strong> RM ${potentialDiscount.toFixed(2)}
            ${voucher.expiryDate ? `<br><strong>Expires:</strong> ${voucher.expiryDate}` : ''}
            ${voucher.isVerified ? '<br><span class="badge bg-success-subtle text-success">✓ Verified - PIN not required</span>' : ''}
        `;

        selectedInfo.style.display = 'block';
        document.getElementById('voucherCode').value = voucher.code;
        document.getElementById('btnApplyVoucher').disabled = false;

        // Store selected voucher temporarily
        window.selectedVoucher = voucher;
    }

    function applyVoucher() {
        console.log('applyVoucher called:', {
            selectedVoucher: window.selectedVoucher ? window.selectedVoucher.code : 'none',
            currentAppliedVoucher: appliedVoucher ? appliedVoucher.code : 'none'
        });

        if (!window.selectedVoucher) {
            Swal.fire('Error', 'Please select a voucher', 'error');
            return;
        }

        // Skip PIN validation if voucher was already verified
        if (!window.selectedVoucher.isVerified) {
            const pinCode = document.getElementById('pinCode').value;

            if (!pinCode) {
                Swal.fire('Error', 'Please enter PIN code', 'error');
                return;
            }

            if (pinCode !== validPin) {
                Swal.fire('Error', 'Invalid PIN code', 'error');
                return;
            }
        }

        // Apply the voucher
        appliedVoucher = window.selectedVoucher;
        calculateVoucherDiscount();
        updatePaymentCalculation();

        // Update hidden form fields
        document.getElementById('applied_voucher_code').value = appliedVoucher.code;
        document.getElementById('applied_voucher_type').value = appliedVoucher.type;
        document.getElementById('applied_voucher_value').value = appliedVoucher.value;
        document.getElementById('applied_voucher_discount').value = voucherDiscount.toFixed(2);

        // Show remove voucher button
        document.getElementById('btnRemoveVoucher').style.display = 'block';

        // Close modal
        document.getElementById('btnCloseModalIncard').click();

        Swal.fire('Success', `Voucher ${appliedVoucher.code} applied successfully!`, 'success');
    }

    function calculateVoucherDiscount() {
        if (!appliedVoucher) {
            voucherDiscount = 0;
            // Ensure button is hidden when no voucher
            document.getElementById('btnRemoveVoucher').style.display = 'none';
            return;
        }

        const subtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
        const oldDiscount = voucherDiscount;

        console.log('calculateVoucherDiscount called:', {
            subtotal: subtotal,
            voucherType: appliedVoucher.type,
            voucherValue: appliedVoucher.value,
            oldDiscount: oldDiscount
        });

        if (appliedVoucher.type === 'fixed') {
            // For fixed amount, use the voucher value but don't exceed subtotal
            voucherDiscount = Math.min(appliedVoucher.value, subtotal);
        } else if (appliedVoucher.type === 'percentage') {
            // For percentage, calculate percentage of subtotal
            voucherDiscount = (subtotal * appliedVoucher.value) / 100;
        }

        // Apply maximum discount limit if specified
        if (appliedVoucher.maxDiscount && appliedVoucher.maxDiscount > 0) {
            voucherDiscount = Math.min(voucherDiscount, appliedVoucher.maxDiscount);
        }

        // Ensure discount doesn't exceed subtotal
        voucherDiscount = Math.min(voucherDiscount, subtotal);

        // Hide remove button if discount is 0 or invalid
        if (voucherDiscount <= 0) {
            document.getElementById('btnRemoveVoucher').style.display = 'none';
        } else {
            document.getElementById('btnRemoveVoucher').style.display = 'block';
        }

        console.log('calculateVoucherDiscount result:', {
            finalDiscount: voucherDiscount,
            finalTotal: subtotal - voucherDiscount,
            buttonVisible: voucherDiscount > 0
        });
    }

    // Helper function to get the correct amount for payment (after voucher discount)
    function getPaymentAmount() {
        const originalSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
        if (voucherDiscount > 0) {
            return originalSubtotal - voucherDiscount;
        }
        return originalSubtotal;
    }

    function updatePaymentCalculation() {
        const originalSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
        const discountRow = document.getElementById('trDiscount');
        const totalRow = document.getElementById('trTotal');
        const discountAmount = document.getElementById('textDiscountAmount');
        const finalTotalElement = document.getElementById('textFinalTotal');

        console.log('updatePaymentCalculation called:', {
            originalSubtotal: originalSubtotal,
            voucherDiscount: voucherDiscount,
            appliedVoucher: appliedVoucher ? appliedVoucher.code : 'none'
        });

        // Always show original subtotal (before discount)
        document.getElementById('textPaymentSubTotal').textContent = originalSubtotal.toFixed(2);

        // Always keep cart-total as original subtotal (without discount)
        updateCartTotalDisplay(originalSubtotal);

        if (voucherDiscount > 0) {
            // Show discount and total rows
            discountRow.style.display = 'table-row';
            totalRow.style.display = 'table-row';

            // Update discount amount
            discountAmount.textContent = '-' + voucherDiscount.toFixed(2);

            // Calculate and show final total after discount
            const finalTotal = originalSubtotal - voucherDiscount;
            finalTotalElement.textContent = finalTotal.toFixed(2);

            // Update balance calculation with final total (after discount)
            const currentPaid = parseFloat(document.getElementById('textPaidAmount').textContent) || 0;
            if (currentPaid > 0) {
                document.getElementById('labelBalance').textContent = (finalTotal - currentPaid).toFixed(2);
            } else {
                document.getElementById('labelBalance').textContent = '';
            }

            console.log('Payment calculation updated with discount:', {
                originalSubtotal: originalSubtotal,
                voucherDiscount: voucherDiscount,
                finalTotal: finalTotal,
                cartTotalKeptAs: originalSubtotal,
                discountRowVisible: discountRow.style.display,
                totalRowVisible: totalRow.style.display
            });
        } else {
            // Hide discount and total rows when no voucher applied
            discountRow.style.display = 'none';
            totalRow.style.display = 'none';

            // Update balance calculation with original subtotal
            const currentPaid = parseFloat(document.getElementById('textPaidAmount').textContent) || 0;
            if (currentPaid > 0) {
                document.getElementById('labelBalance').textContent = (originalSubtotal - currentPaid).toFixed(2);
            } else {
                document.getElementById('labelBalance').textContent = '';
            }
        }
    }

    function updateCartTotalDisplay(amount) {
        const cartTotalField = document.getElementById('cart-total');
        cartTotalField.value = amount.toFixed(2);

        // Force a visual update by triggering events
        cartTotalField.dispatchEvent(new Event('input', { bubbles: true }));
        cartTotalField.dispatchEvent(new Event('change', { bubbles: true }));

        console.log('Cart total updated to:', amount.toFixed(2));
    }

    function resetVoucherModal() {
        document.getElementById('voucherCode').value = '';

        // Reset PIN field
        const pinField = document.getElementById('pinCode');
        pinField.value = '';
        pinField.placeholder = 'Enter PIN';
        pinField.disabled = false;
        pinField.classList.remove('bg-light');

        document.getElementById('selectedVoucherInfo').style.display = 'none';
        document.getElementById('btnApplyVoucher').disabled = true;
        window.selectedVoucher = null;
    }

    function removeVoucher() {
        clearVoucherState();

        // Reset modal state to ensure clean state for next selection
        resetVoucherModal();

        // Refresh voucher table to ensure proper state
        loadVoucherTable();

        Swal.fire('Success', 'Voucher removed successfully!', 'success');
    }

    function clearVoucherState() {
        appliedVoucher = null;
        voucherDiscount = 0;
        updatePaymentCalculation();

        // Clear hidden form fields
        document.getElementById('applied_voucher_code').value = '';
        document.getElementById('applied_voucher_type').value = '';
        document.getElementById('applied_voucher_value').value = '';
        document.getElementById('applied_voucher_discount').value = '0';

        // Hide remove voucher button
        document.getElementById('btnRemoveVoucher').style.display = 'none';

        // Clear balance if no payments exist
        const currentPaid = parseFloat(document.getElementById('textPaidAmount').textContent) || 0;
        if (currentPaid === 0) {
            document.getElementById('labelBalance').textContent = '';
        }

        console.log('Voucher state cleared');
    }

    function validateVoucherMinimumAmount(showDialog = true) {
        if (!appliedVoucher || voucherDiscount <= 0) {
            return true; // No voucher applied, validation passes
        }

        const currentSubtotal = parseFloat(document.getElementById('cart-subtotal').value) || 0;
        const minAmount = appliedVoucher.minAmount || 0;

        console.log('Validating voucher minimum:', {
            currentSubtotal: currentSubtotal,
            minAmount: minAmount,
            meetsRequirement: currentSubtotal >= minAmount
        });

        if (currentSubtotal < minAmount) {
            if (showDialog) {
                const shortfall = minAmount - currentSubtotal;

                Swal.fire({
                    icon: 'warning',
                    title: 'Voucher Minimum Amount Not Met',
                    html: `
                        <p>The applied voucher <strong>${appliedVoucher.code}</strong> requires a minimum purchase of <strong>RM ${minAmount.toFixed(2)}</strong></p>
                        <p>Current subtotal: <strong>RM ${currentSubtotal.toFixed(2)}</strong></p>
                        <p>You need <strong>RM ${shortfall.toFixed(2)}</strong> more to keep this voucher.</p>
                        <p>Would you like to remove the voucher to continue?</p>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'Remove Voucher',
                    cancelButtonText: 'Keep Voucher',
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6'
                }).then((result) => {
                    if (result.isConfirmed) {
                        removeVoucher();
                    } else {
                        // User wants to keep voucher, they need to add more items
                        Swal.fire({
                            icon: 'info',
                            title: 'Add More Items',
                            text: `Please add RM ${shortfall.toFixed(2)} more to your cart to meet the voucher requirement.`,
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            return false; // Validation failed
        }

        return true; // Validation passed
    }

    // Emergency function to clear modal issues (can be called from console)
    window.clearModalIssues = function() {
        // Close all modals
        $('.modal').modal('hide');

        // Remove all modal backdrops
        $('.modal-backdrop').remove();

        // Reset body classes and styles
        $('body').removeClass('modal-open');
        $('body').css('padding-right', '');
        $('body').css('overflow', '');

        // Re-enable all buttons
        $('button').prop('disabled', false);

        console.log('Modal issues cleared. Page should be functional now.');
    };

</script>


@endsection