@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 Sales Order</h4>
        </div>
    </div>
</div>

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


<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#fff9f9">
            
            <form class="" method="POST" action="{{route('orders.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 />
                                <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">Company</label>
                                    </div>
                                    <div class="mb-1">
                                        <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  />
                                        <div class="invalid-feedback">
                                            Salesman ID
                                        </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="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 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>
                <!-- ******************************** 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">
                            <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">
                            <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>

                        <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">
                                        <textarea rows="5" class="form-control bg-light" id="document_remark" name="document_remark"></textarea>
                                    </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>
                </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>
                                    <!-- <a href="javascript:void(0)" onclick="new_link1()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                        <!-- <a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                    </td>
                                </tr>
                                <tr class="border-top border-top-dashed mt-2">
                                    <td colspan="3"></td>
                                    <td colspan="2" class="p-0">
                                        <table class="table table-borderless table-sm table-nowrap align-middle mb-0 mt-2">
                                            <tbody>
                                                <tr>
                                                    <th scope="row">Sub Total</th>
                                                    <td style="width:150px;">
                                                        <input type="text" class="form-control bg-light " id="cart-subtotal" name="cart-subtotal" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Estimated Tax (12.5%)</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-tax" name="cart-tax" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Discount <small class="text-muted"></small></th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-discount" name="cart-discount" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Shipping Charge</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-shipping" name="cart-shipping" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr class="border-top border-top-dashed">
                                                    <th scope="row">Total Amount</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-total" name="cart-total" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->
                    <!-- ****** START :: Payment Details ****** -->
                    <div class="row mt-3 border-top border-top-dashed">
                        <div class="col-lg-4 col-sm-6">
                           <div class="mt-3">
                               <label for="choices-payment-status">Payment Mode</label>
                               <select class="form-select bg-light " aria-label="select example" id="choices-payment-status" onchange="changePaymentType(this.value)" name="payment_status">
                                   <option value="3">No Payment</option>
                                   <option value="2">Collect Partial Deposit</option>
                                   <option value="1" selected>Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>
          
                    <div class="row" style="padding-left:10px">
                            <div class="col-lg-3 col-sm-6" data-aos="flip-left" >
                                <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" 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">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Ref No</th>
                                        <th>Status</th>
                                        <th class="text-end" width="150px">Paid Amount (RM)</th>
                                    </tr>
                                </thead>
                                <tbody>
      
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td>
                                           
                                        </td>
                                        <td class="text-end"></td>
                                    </tr>
             

                                    <tr id="trSubTotal">
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Sub total</td>
                                        <td style="font-weight: 500" class="text-end" id="textPaymentSubTotal"></td>
                                    </tr>
                                    <tr>
                                        <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"></td>
                                    </tr>
                                </tbody>
                        </table>
                    

                    <!-- ****** END :: Payment Details ****** -->
                    <!-- ****** START :: NOTE ****** -->
                    <!-- <div class="mt-4">
                        <label for="exampleFormControlTextarea1" class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
                        <textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2" required>All accounts are to be paid by cheque or credit card or cash or direct payment online. If account is not paid items will not be released.</textarea>
                    </div> -->
                    <!-- ****** END :: NOTE ****** -->
                    <!-- ****** START :: BUTTONS ****** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4" id="divSaveButton" hidden>
                        <button type="submit" class="btn btn-info">Save Order</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>

<!-- 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>
                                    @foreach($payment_method['PaymentMethods'] as $key=>$value)    
                                    <option value="{{$value['AcPaymentCode']}}">{{$value['AcPaymentDesc']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="mb-2">
                            <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 (optional)" 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="text" 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" 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="padding-right: 0">
                <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>
            </div>
        </div>
    </div>
</div>
<!--end modal -->

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

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addStockModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Stock</h5>
                <br>
                <button type="button" id="btnCloseSelectStockModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
            <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 :: 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>

@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/libs/prismjs/prism.js') }}"></script> --}}
<script src="{{ URL::asset('build/js/app.js') }}"></script>
{{-- <script src="{{ URL::asset('build/libs/dropzone/dropzone-min.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 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;
                        }

                    }
                }

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

    
    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(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{
                callLoaddingScreen('Creating Order draft, please wait...');
                saveform.action = "{{route('orders.save_order')}}";
                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+ '" 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>';
            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.StockPrice1+'" 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">–</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" value="'+stock.StockPrice1+'"/>'+
            '<input type="hidden" class="form-control bg-light product-min-price" value="'+stock.PriceSellAlertLevelMinValue+'"/>'+
            '<input type="text" class="form-control bg-light product-line-price" id="productPrice-' + count + '" placeholder="0.00" readonly/>' +
            '<input type="hidden" class="form-control bg-light product-discount" name="stock-discount-' + count + '" id="stock-discount-' + count + '" placeholder="0.00" readonly/>' +
            "</div>" +
            "</td>" +
            '<td class="product-removal" style="text-align:center">' +
            '<a class=""><i class="text-danger ri-close-circle-line" style="font-size:30px"></i></a>' +
            "</td>" +
            "</tr>";

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

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

        isData();
        remove();
        amountKeyup();
        resetRow();
        
        // document.getElementById('select-stock').value = "";
        document.getElementById('btnCloseSelectStockModal').click();
        document.getElementById(triggeraddquantitybutton).click();
    }

    function checkSelectedStock(stock_selected,stock_uom,stock_desc){
        var stock_selected_location = '{{ $location_id }}';
        // var stock_selected = document.getElementById('select-stock').value;
        fetch('/stocks/getStockBalanceAjax?stock_id='+stock_selected+'&stock_uom='+stock_uom+'&location_id='+stock_selected_location)
            .then(response => response.json()) // Parse the JSON response
            .then(data => {
                
                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 >= 3||counttxtSearchCustName >= 3||counttxtSearchCustContact >= 3){
            $.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('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 spinner = document.createElement('div');
        spinner.className = 'spinner';
        document.getElementById('btnAddStockModal').click();
        $.ajax({
                  type:'get',
                  url: "/stocks/stocksSearchWarranty?stock_id="+stock_id,
                  beforeSend: function(xhr) {
                    stockPagination.innerHTML = '';
                    tableStockSearch.innerHTML = '';
                    btnSearchStock.innerHTML = '';
                    btnSearchStock.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);
                    
                    tableStockSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    stocks = data.stocks;
                    // if(data.status == "1000"){
                        
                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                        
                    // }
                    stockPagination.innerHTML = data.pagination;
                    btnSearchStock.innerHTML = 'Search'; 
                },
                error: function (data) {
                    btnSearchStock.innerHTML = 'Search'; 
                    alert('Invalid Member Search');
                }
        });

    }

    function searchStock(){

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

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

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

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

        if(counttxtSearchStockId >= 3||counttxtSearchStockName >= 3 || txtSearchStockType == "SERVICE" || txtSearchStockType == "NON-STOCK"){
            $.ajax({
                type:'get',
                url: "/stocks/stocksSearch?stock_id="+txtSearchStockId+"&stock_name="+txtSearchStockName+"&stock_type="+txtSearchStockType+"&location_id="+location_id,
                beforeSend: function(xhr) {
                    stockPagination.innerHTML = '';
                    tableStockSearch.innerHTML = '';
                    btnSearchStock.innerHTML = '';
                    btnSearchStock.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);
                    
                    tableStockSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    stocks = data.stocks;
                    // if(data.status == "1000"){
                        
                    //     // tableStockBalance.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                        
                    // }
                    stockPagination.innerHTML = data.pagination;
                    btnSearchStock.innerHTML = 'Search'; 
                },
                error: function (data) {
                    btnSearchStock.innerHTML = 'Search'; 
                    alert('Invalid Member Search');
                }
            });
        }

    }

    function loadCustomerSearchPage(page){
        var tableCustomerSearch = document.getElementById('tableCustomerSearch');
        var btnSearchCustomer = document.getElementById('btnSearchCustomer');
        
        var choices_customer = document.getElementById('choices-customer');
        var txtSearchCustId = document.getElementById('txtSearchCustId').value;
        var txtSearchCustName = document.getElementById('txtSearchCustName').value;
        var txtSearchCustContact = document.getElementById('txtSearchCustContact').value;

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

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

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

                    customers = data.customers;
                    // console.log(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 >= 3||counttxtSearchStockName >= 3 || txtSearchStockType == "SERVICE" || txtSearchStockType == "NON-STOCK"){
            $.ajax({
                type:'get',
                url: "/stocks/stocksSearch?stock_id="+txtSearchStockId+"&stock_name="+txtSearchStockName+"&stock_type="+txtSearchStockType+"&location_id="+location_id+"&currentPage="+page,
                beforeSend: function(xhr) {
                    stockPagination.innerHTML = '';
                    tableStockSearch.innerHTML = '';
                    btnSearchStock.innerHTML = '';
                    btnSearchStock.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);
                    
                    tableStockSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    stocks = data.stocks;
                    // 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="+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);

        if(productPrice < minprice){
            alert('Warning! Price entered is lower than minimum.. ');
            txtproductprice.value = minprice;
            productPrice = minprice;
        }

        if(txtproductprice == ori_price){
            productDiscount.value = null;
        }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);
        
        var selectedCustomer = customers.find(function(customer) {
            return customer.AcCustomerID === id;  
        });
        // console.log(selectedCustomer.AcCustomerID);

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

            }
        }

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

        if(selectedCustomer.AcCustomerID != null && selectedCustomer.AcCustomerID != ""){
            document.getElementById('choices-customer').value = selectedCustomer.AcCustomerID;
            // 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; 
            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(){

        var selectedAddress = document.getElementById('select-address').value;

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

        if (selectedShippingAddress) {
            document.getElementById('shippingName').value = selectedShippingAddress.Attention;
            document.getElementById('address1').value = selectedShippingAddress.Address1;
            document.getElementById('address2').value = selectedShippingAddress.Address2;
            document.getElementById('address3').value = selectedShippingAddress.Address3;
            document.getElementById('address4').value = selectedShippingAddress.Address4;
            document.getElementById('shippingPhoneno1').value = selectedShippingAddress.Phone1;
            document.getElementById('shippingPhoneno2').value = selectedShippingAddress.Phone2;
        }

    }

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


        var element_string ='<tr>'+ 
                            '<input type="hidden" class="payment-number" value="'+(paymentCount+1)+'">'+
                            '<input type="hidden" value="'+choices_payment_type+'" id="choices-payment-type'+( paymentCount+1) +'" placeholder="Enter Name (optional)" name="cardholderName'+( 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 (optional)" 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>'+ (paymentCount+1) +'</td>'+
                            '<td>'+ choices_payment_type_name +'</td>';
                            if(approvalCode !== ''){
                                
                                element_string += '<td>'+ approvalCode +'</td>';  
                            }else{
                                element_string += '<td>'+ '---' +'</td>';
                            }   
                            
        element_string +=   '<td>'+ parseFloat(amountTotalPay).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +'</td>'+
                    '</tr>';


        newRow.innerHTML = element_string;
        tablePaymentList.insertBefore(newRow, trSubTotal);
        // var newRow = tablePaymentList.insertRow();
        // newRow.innerHTML = element_string;
        paidAmount = paidAmount+ parseFloat(amountTotalPay);
        document.getElementById('textPaidAmount').innerHTML = paidAmount.toFixed(2);
        document.getElementById('btnCloseModalMakePayment').click();
    }

    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('amountTotalPay').value = check_cart_total.toFixed(2);
            document.getElementById('labelBalanceAmount').innerHTML = "0.00";
            // divPaymentDetails.removeAttribute('hidden');
        }else if(value === "2"){
            document.getElementById('amountTotalPay').value = "0.00";
            document.getElementById('labelBalanceAmount').innerHTML = check_cart_total.toFixed(2);
            // divPaymentDetails.removeAttribute('hidden');
        }else if(value === "3"){
            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);

        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 - (payment_amount_1);
        document.getElementById('labelBalanceAmount').innerHTML = balance_amount.toFixed(2);

        if(balance_amount<0){
            document.getElementById('labelBalanceAmount').style.color = 'red';
        }else{
            document.getElementById('labelBalanceAmount').style.color = 'green';
        }
    }

    // Pagination controls
    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>
@if($salesman_id == null)
<script>
    function openSelsmanModal() {

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

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

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

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

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

    openSelsmanModal();

</script>
@endif
<script>
    document.getElementById('invoice_form').addEventListener('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);

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

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

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

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

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

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

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

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

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

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

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

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

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

            }
            
        }

        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>


@endsection