@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;
}
</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 Quotation</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:#fff9f9">
            
            <form class="" method="POST" action="{{route('quotation.store')}}" id="invoice_form">
                @csrf
                <!-- ******************************** 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 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 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" onchange="changeSalesman(this.value)" name="salesman_id">
                                                @foreach($salesman_list as $salesman)
                                                <option value="{{ $salesman->AcSalesmanID}}" 
                                                selected                                                 >{{ $salesman->AcSalesmanName}}</option>
                                                @endforeach
                                            </select>
                                            @else
                                            <input type="text" class="form-control bg-light" value="{{ $salesman_id }} - {{ $salesman_name }}" id="textshowsalesman" placeholder="Salesman ID" readonly />
                                            <input type="hidden" class="form-control bg-light" value="{{ $salesman_id }}" id="selectSalesmanID" name="salesman_id" placeholder="Salesman ID" readonly />
                                            @endif
                                            
                                            <div class="invalid-feedback">
                                                Salesman ID
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="registrationNumber" maxlength="12" placeholder="Registration No"  />
                                        <div class="invalid-feedback">
                                            Please enter a registration no
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input 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="reference_document_number" name="reference_document_number" maxlength="16" placeholder="Purchase Order No"  />
                                        <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" placeholder="Select Date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" data-date-format="Y-m-d" readOnly>
                                <!-- 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="2" selected>Sales Order</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="account_job_id">Document Type</label>
                               
                               <select class="form-select bg-light " aria-label="select example" id="account_job_id" name="account_job_id">
                                    @foreach($accountJobs as $account_job)
                                    
                                    <option value="{{$account_job->AcAccountJobID}}" >{{$account_job->AcAccountJobDesc}}</option>
                                    
                                    @endforeach
                               </select>
                           </div>
                        </div>
                    </div>
                    <div class="row g-3" style="margin-top: 2px" hidden>
                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="account_job_id">Region</label>
                               
                               <select class="form-select bg-light " aria-label="select example" id="order_region_id" name="order_region_id">
                                    <option value="">Select Region</option>
                                    @foreach($regions as $key=>$value) 
                                    <option value="{{$value['RegionID']}}" {{ $loop->first ? 'selected' : '' }}>{{$value['RegionName']}}</option> 
                                    @endforeach
                               </select>
                           </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                            <div>
                                <label for="date-field-delivery">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>
                </div>
                <!-- ******************************** END :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->

                <!-- ******************************** START :: Billing & Shipping Address ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" >
                    <div class="row">
                        <!-- Start :: Billing Address -->
                        <div class="col-lg-4 col-sm-6" hidden>
                            <div>
                                <label for="shippingName">Shipping Contact</label>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingName" name="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>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno2" name="shippingPhoneno2" placeholder="(123)456-7890" />
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                        <!-- Start :: Shipping Address -->
                        <div class="col-sm-4 ms-auto" hidden>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div>
                                        <label for="address1">Shipping Address</label>
                                        <button type="button" class="btn btn-sm btn-primary" style="float:right; margin-top: -5px" data-bs-toggle="modal" id="btnAddShippingAddress" data-bs-target="#addShippingAddress"><i class="ri-map-pin-add-line"></i></button>
                                    </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>
                                    
                                </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">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="ship_from_location">Ship 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">
                                    <!-- <option value="">Select Ship From</option> -->
                                    @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 class="col-sm-4 ms-auto">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div>
                                        <label for="document_remark">Document Remark</label>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light" id="document_remark" name="document_remark" />
                                    </div>
                                </div>
                            </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" hidden>
                        <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" selected>No Payment</option>
                                   <option value="2">Collect Partial Deposit</option>
                                   <option value="1">Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>
          
                    <div class="row" style="padding-left:10px" hidden>
                            <div class="col-lg-3 col-sm-6" data-aos="flip-left" style="margin:10px 0">
                                <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>
                            </div>
                    </div>
                    <table class="table align-middle" id="tablePaymentList" hidden>
                                <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>
                                        <!-- <th></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>
                                        <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">
                        <button type="submit" class="btn btn-info" id="btnSubmitOrder">Save Quotation</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>

<!-- 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">
                                    <option value="">Select Payment Method </option>
                                    
                                </select>
                            </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">
                        <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 STOCK MODAL -->
<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>
            <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">
                        <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 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 -->

<!-- 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 -->

<!-- END :: SHOW ADDRESS LIST -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addShippingAddress" 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">Select Shipping Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Select the available address of your choice.</small>
            <div class="modal-body">
                <form class="needs-validation" novalidate id="add_stock_form">
                    <div class="mb-2">
                        <select class="form-control bg-light" id="select-address" name="select-address">
                        </select>
                    </div>
                    <div class="text-center">
                        <a href="javascript:void(0);" onclick="selectShippingAddress();" class="btn btn-primary rounded-pill" data-bs-dismiss="modal" aria-label="Close">Select</a>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>

<!-- 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="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>
            <div class="modal-footer" style="">
                <button type="button" class="btn btn-info" id="btnClearDiscount" onclick="clearDiscount();">
                    <!-- <i class="ri-send-plane-line align-bottom me-1"></i> -->
                    Clear
                </button>
                <button type="button" class="btn btn-info" id="btnSubmitDiscount" onclick="addDiscount();">
                    <!-- <i class="ri-send-plane-line align-bottom me-1"></i> -->
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>
<!--end  add discount modal -->

@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>
    var selectBox = document.getElementsByName('choices-customer')[0];
    var customers = null;
    var addedStocks = [];
    var stocks = null;
    var shipping_address_list = [];
    var rowsPerPage = 9;
    var currentPage = 0;
    var countStock = 0;
    var max_discount = ;
    var paidAmount = 0;


    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;
                //         }

                //     }
                // }

                selectShippingAddress(true);

                // 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;

                console.log(addedStocks);
                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();
                    }
                }

                
                
            } else {
                console.log('No input with class "product-quantity" found');
            }
        }
        
        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;
            }else{

                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, please wait...');
                        saveform.action = "{{route('orders.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;
            }else{

                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 order, please wait...');
                        saveform.action = "{{route('orders.save_order_request_price')}}";
                        saveform.submit();
                    }
                });
                
            }
        
        }

    });

    function new_link1(stock_id,stock_desc) {
        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 = stocks.find(function(stock) {
            let remove_symbol1 = stock_desc.replace(/[^a-zA-Z0-9]/g, '');
            let remove_symbol2 = stock.StockDescription1.replace(/[^a-zA-Z0-9]/g, '');

            return stock.AcStockID === stock_id && remove_symbol1 == remove_symbol2;
        });

        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 + ' ' +stock.StockDescription1.replace(/[^\w\s]/gi, '')+ '" readonly>' +
            // '<input class="form-control bg-light " type="text" id="productName-' + count + '" placeholder="Product Name">' +
            '</div>' +
            '<textarea class="form-control bg-light " id="stock-remark-' + count + '" name="stock-remark-' + count + '" rows="2" placeholder="Product Remark"></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(stock.AcStockUOMID != 'PACK'){
                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('+"'"+stock.AcStockID+"'"+')"><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.StockPrice1+','+stock.PriceSellAlertLevelMinValue+','+ count +');">' +
            "</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="' + stock.AcStockID + '">' +
            '<button type="button" class="minus" id="stock-qty-minus-' + count + '">–</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.StockPrice2+'"/>'+
            '<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 + '" value="0.00" 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('btnCloseSelectStockModal').click();
        document.getElementById(triggeraddquantitybutton).click();
    }
    </script>
    <script>

    function checkSelectedStock(stock_selected,stock_uom,stock_desc,clickedbutton){
        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;

                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: stock_selected,
                                balance: data.balance
                            };

                            addedStocks.push(stock);

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

                            addedStocks.push(stock);

                        new_link1(stock_selected,stock_desc);
                    }
                }
                
            })
            .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;
                    console.log(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) {
     
                    
                    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="+encodeURIComponent(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) {
                
                    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>`);
                    console.log(data.customers);
                    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="+encodeURIComponent(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;
                    // 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 salesman_discount = ori_price * max_discount / 100;

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

        // 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 = 0;
        }else{
            productDiscount.value = ((ori_price - productPrice)*-1*productquantity).toFixed(2);
        }
        
        producttotalprice.value = (productPrice*productquantity).toFixed(2);


    }

    function selectCustomer(id){
        // console.log(customers);
        document.getElementById('btnCloseSelectCustomerModal').click();

        // console.log(customers);

        if (typeof customers === 'object' && !Array.isArray(customers)) {
            selectedCustomer = Object.values(customers).find(function(customer) {
                return customer.AcCustomerID === id;  
            });
        } else {
            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');

        if(selectedCustomer.AcCustomerID != null && selectedCustomer.AcCustomerID != ""){
            document.getElementById('choices-customer').value = selectedCustomer.AcCustomerID;

            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);  

        }
        
    }

    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);
                    if(data.count >= 5){
                        document.getElementById('shippingName').readOnly = true;
                        document.getElementById('address1').readOnly = true;
                        document.getElementById('address2').readOnly = true;
                        document.getElementById('address3').readOnly = true;
                        document.getElementById('address4').readOnly = true;
                        document.getElementById('shippingPhoneno1').readOnly = true;
                        document.getElementById('shippingPhoneno2').readOnly = true;

                    }else{
                        document.getElementById('shippingName').readOnly = false;
                        document.getElementById('address1').readOnly = false;
                        document.getElementById('address2').readOnly = false;
                        document.getElementById('address3').readOnly = false;
                        document.getElementById('address4').readOnly = false;
                        document.getElementById('shippingPhoneno1').readOnly = false;
                        document.getElementById('shippingPhoneno2').readOnly = false;
                    }
                    
                    
                    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;
                
                    

                    shipping_address_list = data.address_list;
                    var selectAddress = document.getElementById('select-address');
                    selectAddress.innerHTML = ''; // Clear existing options

                    shipping_address_list.forEach(function(address) {
                        var option = document.createElement('option');
                        option.value = address.AcCusShipToAddressID;
                        option.text = `${address.Address1}${address.Address2 ? ', ' + address.Address2 : ''}${address.Address3 ? ', ' + address.Address3 : ''}${address.Address4 ? ', ' + address.Address4 : ''}`;
                        selectAddress.appendChild(option);
                    });
                    
                }

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

    function selectShippingAddress(selectAddress = null){

        if(selectAddress == null){
            var selectedAddress = document.getElementById('select-address').value;

            var selectedShippingAddress = shipping_address_list.find(function(address) {
                return address.AcCusShipToAddressID === selectedAddress;
            });
        }else{
            var selectedShippingAddress = shipping_address_list[0];
        }


        if (selectedShippingAddress) {
            document.getElementById('shippingName').value = selectedShippingAddress.Attention;
            document.getElementById('address1').value = selectedShippingAddress.Address1;
            document.getElementById('address2').value = selectedShippingAddress.Address2;
            let address3 = '';
            if (selectedShippingAddress.City) {
                address3 += selectedShippingAddress.City + ', ';
            }
            if (selectedShippingAddress.PostCode) {
                address3 += selectedShippingAddress.PostCode + ', ';
            }
            document.getElementById('address3').value = address3;

            let address4 = '';
            if (selectedShippingAddress.State) {
                address4 += selectedShippingAddress.State;
            }
            if (selectedShippingAddress.Country) {
                address4 += ', ' + selectedShippingAddress.Country;
            }
            document.getElementById('address4').value = address4;
            
            document.getElementById('shippingName').value = selectedShippingAddress.Attention;
            document.getElementById('shippingPhoneno1').value = selectedShippingAddress.Tel1;
            document.getElementById('shippingPhoneno2').value = selectedShippingAddress.Tel2;
        }

    }

    // 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);
        let check_cart_total = parseFloat(document.getElementById('cart-total').value);
        // 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: 'By switching the location, all stocks in cart will be removed. Are you sure 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('orders.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);
        let check_cart_total = parseFloat(document.getElementById('cart-total').value);

        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';
        }else{
            document.getElementById('labelBalanceAmount').style.color = 'green';
        }
    }

    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();
    }

    // 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);
        });
    }
    // document.getElementById("prevPage").addEventListener("click", function(event) {
    //     event.preventDefault();
    //     if (currentPage > 1) {
    //         loadPage(currentPage - 1);
    //     }
    // });

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

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

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

</script>

<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') }}";
                }
            });
    }

    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;
        }, 5000);
    }
    
</script>


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

        let check_cart_total = parseFloat(document.getElementById('cart-total').value);

        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);

        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; 
        }

        let order_region_id =document.getElementById('order_region_id').value;
        let selectSalesmanID = document.getElementById('selectSalesmanID').value;

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

        }

        if(selectSalesmanID == null || selectSalesmanID == ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please select salesman!',
                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
                callLoaddingScreen('Creating Sales Order, Please wait...');
                this.submit();
            }
        });
    });
</script>
<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);
        
    //     }
    // });
</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;

        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)+parseFloat(paidAmount)) > check_cart_total){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Payment amount cannot more than total amount!',
                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;
        }


        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);
        document.getElementById('labelBalance').innerHTML = (check_cart_total-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);
        document.getElementById('labelBalance').innerHTML = (check_cart_total-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>
    function changeSalesman(changed_salesman_id){
        let salesman_list_js =null;
        let selectedSalesman = salesman_list_js.find(salesman => salesman.AcSalesmanID === changed_salesman_id);
  
        if (selectedSalesman) {
            if(selectedSalesman.MaxDiscountPercentage == null || selectedSalesman.MaxDiscountPercentage == ""){
                max_discount = 0;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
            }else{
                max_discount = parseFloat(selectedSalesman.MaxDiscountPercentage);
            }

        }

    }
</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>
<script>
    changePaymentType("1");

</script>


@endsection