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

textarea:read-only {
    background-color: #ebebeb !important;
}
/* .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;
    left: 90%; 
    transform: translateX(-50%); 
    z-index: 1000;
    width: 300px;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

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

/* .modal-header {
    padding: var(--vz-modal-header-padding) !important;
    background: #f6f6f6 !important
} */
#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">
            <h4 class="mb-sm-0">Manage Cash Order</h4>
        </div>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success alert-solid" role="alert" id="success-alert">
        <strong>{{ session('success') }} </strong>
    </div>
@endif

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


<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#9da0ff12">
            
            <form method="POST" action="{{route('cashsales.update_draft_order',['orderId'=>$order->id])}}" 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">
                                        <!-- card-logo card-logo-dark user-profile-image img-fluid -->
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- ***** END :: LEFT HEADER ***** -->

                    <!-- ***** START :: RIGHT HEADER ***** -->
                    <div class="row">
                        <!--  START :: Customer  -->
                        <div class="col-lg-4 col-sm-6">
                            <!-- <div class="mb-1">
                                <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" data-bs-target="#selectCustomerModal">
                                    <i class="ri-user-add-fill label-icon align-middle rounded-pill fs-16 me-2"></i> Select Customer
                                </button>
                            </div> -->
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="choices-customer" name="choices-customer" placeholder="Customer ID" readOnly />
                                <input type="hidden" id="customer_name" name="customer_name" value="" />
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="choices-customer-name" placeholder="Contact No" readOnly/>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="compnayContactno" placeholder="Contact No" readOnly />
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " id="companyEmail" placeholder="Email" readOnly/>
                            </div>
                        </div>
                        <!-- End :: Customer  -->
                        <!--  START :: Company  -->
                        <div class="col-sm-6 ms-auto">
                            <div class="row">
                                <div class="col-lg-8">
                                    {{-- <div>
                                        <label for="choices-customer"></label>
                                    </div> --}}
                                    <div class="selectSalesman">
                                        <span> Salesman </span>
                                        <div class="mb-1">
                                            <input type="text" class="form-control bg-light " id="textshowsalesman" value="{{ $salesman_id }} - {{ $salesman_name }}" placeholder="Salesman ID" readonly  />
                                            <input type="hidden" class="form-control bg-light " id="selectSalesmanID" value="{{ $salesman_id }}" name="salesman_id" placeholder="Salesman ID" readonly  />
                                            <div class="invalid-feedback">
                                                Salesman ID
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="registrationNumber" maxlength="12" placeholder="Registration No"  readOnly />
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="GSTRegisterNumber" maxlength="12" placeholder="GST No" readOnly />
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="poNumber" maxlength="16" placeholder="Purchase Order No" readOnly />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End :: Company  -->
                    </div>
                    <!-- ***** END :: RIGHT HEADER ***** -->
                </div>
                <!-- ******************************** END :: BHB COMPANY HEADER ******************************** -->
               
                <!-- ******************************** START :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row g-3">
                        <div class="col-lg-3 col-sm-6">
                            <label for="invoicenoInput">Order No</label>
                            <input type="text" class="form-control bg-light " id="invoicenoInput" name="invoice_no" maxlength="12" placeholder="Order No" value="{{ $invoice_no }}" readOnly />
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div>
                                <label for="date-field">Document Date</label>
                                <input type="text" class="form-control bg-light " id="date-field" name="document_date" placeholder="Select Date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" data-date-format="Y-m-d" data-provider="flatpickr" />
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                            <label>Sales Type</label>
                            <div class="input-light">
                                <select class="form-select bg-light " readOnly onchange="changeSalesType(this.value);" aria-label="select example" id="" name="sales_type">
                                    <option value="1" selected>Cash Only</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                            <div>
                                <label for="date-field">Delivery Date</label>
                                <input type="text" class="form-control bg-light " id="date-field-delivery" name="delivery_date" placeholder="Select Date"  value="{{\Carbon\Carbon::parse($order->delivery_date)->format('Y-m-d') }}" data-date-format="Y-m-d" readOnly>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                           <div>
                               <label for="totalamountInput">Document Type</label>
                               
                               <select class="form-select bg-light " aria-label="select example" id="account_job_id" name="account_job_id">

                                    @foreach($accountJobs as $account_job)
                                    
                                    <option value="{{$account_job->AcAccountJobID}}" selected>{{$account_job->AcAccountJobDesc}}</option>

                                    @endforeach
                                   <option value="2">Collect Multiple Payment</option>
                                   <option value="1">Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->

                <!-- ******************************** START :: Billing & Shipping Address ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" hidden>
                    <div class="row">
                        <!-- Start :: Billing Address -->
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="companyAddress">Shipping Contact</label>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingName" name="shippingName" placeholder="Shipping Attention Name" readOnly />
                            </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"  readOnly />  
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno2" placeholder="(123)456-7890"  readOnly />
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                        <!-- Start :: Shipping Address -->
                        <div class="col-sm-6 ms-auto">
                            <div class="row">
                                <div class="col-lg-8">
                                    <div>
                                        <label for="companyAddress">Shipping Address</label>
                                    </div>
                                    
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address1" name="address1" placeholder="Address 1"  readOnly></input>
    
                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address2" name="address2" placeholder="Address 2"  readOnly></input>

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

                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address4" name="address4" placeholder="Address 4"  readOnly></input>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                    </div>
                </div>
                <!-- ******************************** END :: Billing & Shipping Address ******************************** -->

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

                        
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->

                <div class="card-body p-4 border-top border-top-dashed" >
                    <div class="row">
                        <div class="col-lg-6 col-sm-12">
                            <div>
                                <label for="companyAddress">Document Remark</label>
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " id="document_remark" name="document_remark" value="{{ $order->document_remark}}" />
                            </div>
                        </div>
                    </div>
                </div>
               
                <!-- ******************************** 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">
                            </tbody>
                            <tbody>
                                <tr id="newForm" style="display: none;">
                                    <td class="d-none" colspan="5">
                                        <p>Add New Form</p>
                                    </td>
                                    
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddStockModal" data-bs-target="#addStockModal">
                                            <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i> Add Stock
                                        </button>
                                        <button type="button" hidden class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddWarrantyModal" data-bs-target="#addWarrantyModal">
                                        <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i>Add Warranty
                                        </button>
                                    <!-- <a href="javascript:void(0)" onclick="new_link1()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                        <!-- <a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                    </td>
                                </tr>
                                <tr class="border-top border-top-dashed mt-2">
                                    <td colspan="3"></td>
                                    <td colspan="2" class="p-0">
                                        <table class="table table-borderless table-sm table-nowrap align-middle mb-0 mt-2">
                                            <tbody>
                                            <tr>
                                                    <th scope="row">Sub Total</th>
                                                    <td style="width:150px;">
                                                        <input type="text" class="form-control bg-light " id="cart-subtotal" name="cart-subtotal" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Estimated Tax (12.5%)</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-tax" name="cart-tax" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Discount <small class="text-muted"></small></th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-discount" name="cart-discount" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Shipping Charge</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-shipping" name="cart-shipping" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr class="border-top border-top-dashed">
                                                    <th scope="row">Total Amount</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-total" name="cart-total" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->
                    <!-- ****** START :: Payment Details ****** -->
                    <div class="row mt-3 border-top border-top-dashed">
                        <div class="col-lg-4 col-sm-6">
                           <div class="mt-3">
                               <label for="choices-payment-status">Payment Mode</label>
                               <select class="form-select bg-light " aria-label="select example" id="choices-payment-status" onchange="changePaymentType(this.value)" name="payment_status">
                                   <!-- <option value="3">No Payment</option> -->
                                   <option value="2">Collect Multiple Payment</option>
                                   <option value="1" selected>Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>
          
                    <div class="row" style="padding-left:10px">
                            <div class="col-lg-3 col-sm-6" data-aos="flip-left" style="margin:10px 0">
                                <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnModalmakePayment" data-bs-target="#modalmakePayment">
                                    <i  class="ri-money-dollar-circle-line label-icon align-middle rounded-pill fs-16 me-2"></i> 
                                    Add Payment
                                </button>
                            </div>
                    </div>
                    <table class="table align-middle" id="tablePaymentList">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Method</th>
                                        <th>Approval Code</th>
                                        <th class="text-end" width="150px">Paid Amount (RM)</th>
                                    </tr>
                                </thead>
                                <tbody>
      
                                    <!-- <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-end"></td>
                                    </tr> -->
             

                                    <tr id="trSubTotal">
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Sub total</td>
                                        <td style="font-weight: 500" class="text-end" id="textPaymentSubTotal"></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Paid</td>
                                        <td style="font-weight: 500" class="text-end" id="textPaidAmount"></td>
                                    </tr>

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

                    <!-- ****** END :: Payment Details ****** -->

                    {{-- Modal QR --}}
                        <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalQR" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">EInvoice QR</h5>
                                        <button type="button" 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" style="margin: 0 auto">
                                        <h5 class="mb-3">
                                            Scan the QR for EInvoice request
                                        </h5>
                                        <div style="text-align:center" class="mb-5">
                                            {!! $qrcode !!}
                                        </div>
                                        <div class="modal-footer" style="padding-right: 0">
                                            
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        {{-- End Modal QR --}}
                    <!-- ****** START :: BUTTONS ****** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                        <!-- <button type="submit" class="btn btn-info btn-sm"><i class="ri-printer-line align-bottom me-1"></i> Save</button> -->
                        
                        @if($order->status == 4)
                        <button type="submit" class="btn btn-info btn-sm"><i class="ri-printer-line align-bottom me-1"></i> Save</button>
                        @else
                        <a href="javascript:void(0);" id="btnPrintLink" class="btn btn-dark btn-sm">Print</a>
                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalEmail">
                            Send Email
                        </button>
                        @if (!empty($qrcode))
                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalQR">EInvoice QR</button>
                        @endif
                        @endif
                        <!-- <a href="javascript:void(0);" class="btn btn-light btn-sm"> -->
                            <!-- <i class="ri-send-plane-fill align-bottom me-1"></i> -->
                            <!-- Send -->
                        <!-- </a> -->
                    </div>
                    <!-- ****** END :: BUTTONS ****** -->
                </div>
                <!-- ******************************** END :: STOCK CREATE ******************************** -->
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="modalEmail" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               
                <h5 class="modal-title" id="exampleModalLabel">Send Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                    <div>
                        <label for="customer-name" class="col-form-label">Email Address:</label>
                        <input type="text" class="form-control" name="docEmail" id="docEmail" placeholder="Enter Email Address">
                    </div>
            </div>

            <div class="modal-footer">
                <a href="javascript:void(0);" id="btnEmailDoc" name="btnEmailDoc" class="btn btn-primary btn-sm">Send Email</a>
            </div>
        </div>
    </div>
</div>

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

                    <div>
                    <table class="table table-striped table-nowrap mb-0 mt-2" id="tableStockSearch">
                        
                    </table>
                        <div class="pagination" id="stockPagination">
                            
                        </div>
                    </div>
 
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<!-- END :: ADD STOCK MODAL -->

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

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

                    <div>
                    <table class="table table-striped table-nowrap mb-0 mt-2" id="tableStockSearch">
                        
                    </table>
                        <div class="pagination" id="stockPagination">
                            
                        </div>
                    </div>
 
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div> -->
<!-- END :: ADD STOCK MODAL -->

<!-- START :: SEARCH CUSTOMER MODAL -->
<!-- <div class="modal fade" 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">
            </table>

            <div class="pagination" id="pagination">
            </div>
        </div>      
    </div>
    <div class="modal-footer">
                
    </div>
</div>
    </div>
</div> -->
<!-- END :: SEARCH CUSTOMER MODAL -->


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


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

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

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

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

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

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


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

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

@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/invoicecreate.init.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.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 = @json($customers);
    var addedStocks = [];
    var stocks = @json($stocks);
    var rowsPerPage = 9;
    var currentPage = 0;
    var countStock = 0;
    var paidAmount = 0;
    var max_discount = ;
    var payment_method = null;

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

        if (selectBox) {

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

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

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

                        }
                    }

                    // document.getElementById('billingName').value = selectedCustomer.AcCustomerName;
                    // document.getElementById('billingAddress').value = address;
                    // document.getElementById('billingPhoneno').value = selectedCustomer.BillingTel1;
                    document.getElementById('compnayContactno').value = selectedCustomer.BillingTel1;
                    document.getElementById('companyEmail').value = selectedCustomer.BillingEmail;
                    document.getElementById('GSTRegisterNumber').value = selectedCustomer.GSTRegisterNumber;
                    document.getElementById('registrationNumber').value = selectedCustomer.BusinessRegisterNumber;
                    // document.getElementById('companyWebsite').value = selectedCustomer.BillingEmail;

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

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

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

            });
        }

        var count = 0;