@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;
}
.custom-badge {
    position: absolute;
    top: 0; /* Adjust this value to position the badge correctly */
    right: -10px; /* Adjust this value to position the badge correctly */
    font-size: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background-color: red;
    z-index: 10; /* Ensure it appears above other elements */
}
/* .modal-header {
    padding: var(--vz-modal-header-padding) !important;
    background: #f6f6f6 !important
} */
</style>
@if (session('success'))
    <div class="alert alert-success alert-solid" role="alert" id="success-alert">
        <strong>{{ session('success') }} </strong>
    </div>
@endif
<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>

<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.store_order_request_price')}}" 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 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" readonly name="document_date" placeholder="Select Date" value="{{ $order->document_time }}" data-date-format="Y-m-d" data-provider="flatpickr" />
                            </div>
                        </div>
                        @if($order->refund_receipt)
                        <div class="col-lg-3 col-sm-6">
                            <div>
                                <label for="date-field">Refund Receipt</label>
                                <input type="text" class="form-control bg-light " id="refund_receipt" name="refund_receipt" maxlength="12" placeholder="Order No" value="{{ $order->refund_receipt }}" readOnly />
                            </div>
                        </div>
                        @endif
                        <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" readonly class="form-control bg-light text-uppercase" 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" hidden 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>
                                    </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 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>
                                                    <th scope="row">Sub Total</th>
                                                    <td style="width:150px;">
                                                        <input type="text" class="form-control bg-light " id="cart-subtotal" name="cart-subtotal" value="{{ $order->totalAmount}}" 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" value="{{ $order->totalAmount}}" readonly />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->
                    @if($order->status == 3 && $order->sales_type != 9)
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-danger">
                                Order Cancelled
                            </div>
                        </div>
                        @endif
                        @if($order->status == 6)
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-danger">
                                Price Request Rejected
                            </div>
                        </div>
                        @endif
                        @if($order->status == 9)
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-danger">
                                Expired
                            </div>
                        </div>
                        @endif
                    <!-- ****** START :: Voucher Details ****** -->
                    @if($voucherInfo)
                    <div class="border border-dashed mt-5" style="background:#e8f5e8;">
                        <div class="row" style="padding: 15px;">
                            <div class="col-12">
                                <h6 class="mb-3">
                                    Applied Voucher Details
                                </h6>
                                <div class="voucher-card">
                                    <div class="voucher-content d-flex justify-content-between align-items-center flex-wrap">
                                      
                                      <!-- Left: Voucher Code -->
                                      <div class="d-flex align-items-center mb-2 mb-md-0">
                                        <i class="bi bi-ticket-perforated text-primary fs-4 me-2"></i>
                                        <div>
                                          <div class="text-uppercase small text-muted fw-semibold">Voucher Code</div>
                                          <div class="fw-bold text-dark badge bg-primary-subtle text-primary fs-6">{{ $voucherInfo['code'] }}</div>
                                        </div>
                                      </div>
                                  
                                      <!-- Right: Discount + Date -->
                                      <div class="text-end">
                                        <div class="fw-bold text-success fs-5">-RM {{ number_format($voucherInfo['discount_amount'], 2) }}</div>
                                        <div class="text-muted small">Applied on {{ \Carbon\Carbon::parse($voucherInfo['payment_date'])->format('d M Y, h:i A') }}</div>
                                      </div>
                                  
                                    </div>
                                  </div>
                                  
                                  <style>
                                  .voucher-card {
                                    position: relative;
                                    background: #fff;
                                    border: 2px dashed #dee2e6;
                                    border-radius: 12px;
                                    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                                    width: 100%;
                                  }
                                  
                                  .voucher-card::before,
                                  .voucher-card::after {
                                    content: "";
                                    position: absolute;
                                    top: 50%;
                                    width: 24px;
                                    height: 24px;
                                    background: #f8f9fa; /* match page background */
                                    border-radius: 50%;
                                    transform: translateY(-50%);
                                    z-index: 1;
                                  }
                                  
                                  .voucher-card::before {
                                    left: -12px;
                                  }
                                  
                                  .voucher-card::after {
                                    right: -12px;
                                  }
                                  
                                  .voucher-content {
                                    padding: 1rem 1.25rem;
                                  }
                                  </style>
                                  
                            </div>
                        </div>
                    </div>
                    @endif
                    <!-- ****** END :: Voucher Details ****** -->

                    <!-- ****** START :: Payment Details ****** -->
                    @if($order->status != 6 && $order->status != 9)
                    <div class="border border-dashed mt-5" style="background:#d4e9ff55">
                        <label for="choices-payment-status" style="margin-top:10px; padding-left:10px">
                        Payment History

                        @if($order->status == 1)
                            <span class="badge bg-success-subtle text-success text-uppercase" id="labelPaymentStatus" >FULLY PAID</span>
                            @elseif($order->status == 2)
                            <span class="badge bg-danger-subtle text-danger text-uppercase" id="labelPaymentStatus" >UNPAID</span>
                            @else
                            <span class="badge bg-danger-subtle text-danger text-uppercase" id="labelPaymentStatus" ></span>
                        @endif
                        </label>

                        @if($order->status == 2)
                        <div class="row" style="padding-left:10px">
                            <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>
                        @endif

                        @if($order->status != 1 && $order->status != 9)
                        <!-- <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> -->
                        @endif

                        @if($order->status == 2)
                        <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>
                                        <!-- <th></th> -->
                                    </tr>
                                </thead>
                                <tbody>

                                    <!-- <tr>
                                        <td></td>
                                        <td></td>
                                        <td>

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


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

                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Balance</td>
                                        <td style="font-weight: 500" class="text-end" id="labelBalance"></td>
                                    </tr>
                                </tbody>
                        </table>
                        @else
                        <table class="table align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Ref No</th>
                                        <th>Status</th>
                                        <th>Payment Code</th>
                                        <th class="text-end" width="150px">Paid Amount (RM)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                    @foreach($payments as $payment)
                                        @php
                                            $paymentDetails = json_decode($payment->payment_details, true) ?? [];
                                            $paymentStatus = '';
                                            if($payment->status == 1){
                                                $paymentStatus = "<span class='badge bg-success-subtle text-success text-uppercase'>SUCCESS</span>";
                                            }elseif($payment->status == 2){
                                                $paymentStatus = "<span class='badge bg-danger-subtle text-danger text-uppercase'>FAILED</span>";
                                            }else{
                                                $paymentStatus = "<span class='badge bg-danger-subtle text-danger text-uppercase'>PENDING</span>";
                                            }
                                        @endphp

                                        @if(count($paymentDetails) > 0)
                                            @foreach($paymentDetails as $index => $detail)
                                            <tr>
                                                <td>{{ $payment->document_date }}</td>
                                                <td>
                                                    @if($detail['payment_code'] == 'MEMBER VC')
                                                        {{ $detail['approval_code'] ?? 'N/A' }}
                                                    @else
                                                        {{ $payment->receipt_number }}
                                                    @endif
                                                </td>
                                                <td>{!! $paymentStatus !!}</td>
                                                <td>
                                                    @if($detail['payment_code'] == 'MEMBER VC')
                                                        <span class="badge bg-primary-subtle text-primary">
                                                            {{ $detail['payment_code'] }}
                                                        </span>
                                                    @else
                                                        <span class="badge bg-primary-subtle text-primary">{{ $detail['payment_code'] }}</span>
                                                    @endif
                                                </td>
                                                <td class="text-end">
                                                    @if($detail['payment_code'] == 'MEMBER VC')
                                                        <span class="text-success">{{ number_format($detail['payment_amount'], 2) }}</span>
                                                    @else
                                                        {{ number_format($detail['payment_amount'], 2) }}
                                                    @endif
                                                </td>
                                            </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td>{{ $payment->document_date }}</td>
                                                <td>{{ $payment->receipt_number }}</td>
                                                <td>{!! $paymentStatus !!}</td>
                                                <td><span class="badge bg-secondary-subtle text-secondary">N/A</span></td>
                                                <td class="text-end">{{ number_format($payment->total_amount, 2) }}</td>
                                            </tr>
                                        @endif

                                        @if($payment->voucher_amount)
                                                                                <tr>
                                                <td>{{ $payment->document_date }}</td>
                                                <td>{{ $payment->receipt_number }}</td>
                                                <td>{!! $paymentStatus !!}</td>
                                                <td><span class="badge bg-secondary-subtle text-secondary">MEMBER VC</span></td>
                                                <td class="text-end">{{ number_format($payment->voucher_amount, 2) }}</td>
                                        </tr>
                                        @endif
                                    @endforeach

                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Paid</td>
                                        <td style="font-weight: 500" class="text-end">{{ $sum_payment }}</td>
                                    </tr>

                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Balance</td>
                                        @if($voucher_amount)
                                        <td style="font-weight: 500" class="text-end">{{ number_format($balance_payment-$voucher_amount,2) }}</td>
                                        @else
                                        <td style="font-weight: 500" class="text-end">{{ $balance_payment }}</td>
                                        @endif
                                        
                                    </tr>

                                    @if($order->totalAmount < 0)
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500; color: red;" class="text-end"><strong>Refund</strong></td>
                                        <td style="font-weight: 500; color: red;" class="text-end"><strong>{{ $order->totalAmount }}</strong></td>
                                    </tr>
                                    @endif
                                </tbody>
                        </table>
                        @endif
                    </div>
                    @endif
                    <!-- ****** 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" 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" 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 != 6 && $order->status != 9)
                            @if($order->status == 1)
                            <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>
                            @elseif($order->status == 2)
                            <button type="submit" class="btn btn-info" id="btnSubmitOrder"><i class="ri-printer-line align-bottom me-1"></i> Save Order</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>
                            @endif
                            @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> -->

                        <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#refundOrderItemsModal">
                            Request Return & Refund
                        </button>
                    </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>

<!-- Refund Order Items Modal -->
<div class="modal fade" id="refundOrderItemsModal" tabindex="-1" aria-labelledby="refundOrderItemsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="refundOrderItemsModalLabel">Request Return & Refund</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="refundOrderForm">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Product Details</th>
                                    <th>Price (RM)</th>
                                    <th>QTY</th>
                                    <th>Refund QTY</th>
                                    <th>Refunded Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <input type="hidden" id="orderId" name="orderId" value="{{ $order->id }}">
                                <!-- Example row, dynamically generate rows using server-side data -->
                                @foreach($orderDetails as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $item->stock_desc }}</td>
                                    <td id="labelRefundItemUnitPrice_{{$index}}">{{ number_format($item->unit_price, 2) }}</td>
                                    <td>{{ $item->quantity }}</td>
                                                                        @if($refund_quantity > 0)
                                        @if(count($refund_serial_no) > 0)
                                        <td>
                                            <input type="number" class="form-control refund-quantity" id="refund_item_quantity_{{$index}}" name="refund_quantity[{{ $item->id }}]" value="0" min="0" max="{{ $refund_quantity }}" step="1" style="margin-bottom: 10px;" readonly>
                                            <ul style="list-style-type: none; padding-left: 0; margin: 0;">
                                                @foreach($refund_serial_no as $serial)
                                                    <li style="display: flex; align-items: center; margin-bottom: 5px;">
                                                        <input type="checkbox" name="refund_serial_no[{{ $item->id }}][]" value="{{ $serial }}" id="serial_{{ $serial }}" style="margin-right: 10px;" onchange="updateRefundQuantity({{$index}}, {{ $item->id }})">
                                                        <label for="serial_{{ $serial }}" style="margin: 0;">{{ $serial }}</label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </td>
                                        @else
                                        <td>
                                            <input type="number" class="form-control refund-quantity" id="refund_item_quantity_{{$index}}" name="refund_quantity[{{ $item->id }}]" value="0" min="0" max="{{ $refund_quantity }}" step="1" onchange="if(this.value > {{ $refund_quantity }}) this.value = {{ $refund_quantity }}; addRefundItemQuantity('{{$index}}')">
                                            <span class="badge bg-danger-subtle text-danger">Maximum {{$refund_quantity}} QTY for refund</small>
                                        </td>
                                        @endif

                                    
                                    @else
                                    <td>
                                        <input type="number" class="form-control refund-quantity" id="refund_item_quantity_{{$index}}" name="refund_quantity[{{ $item->id }}]" max="{{ $item->quantity }}" min="0" value="0" oninput="addRefundItemQuantity('{{$index}}')" readonly>
                                        <span class="badge bg-danger-subtle text-danger">No quantity available for return</span>
                                    @endif
                                    <td id="labelRefundItemTotal_{{$index}}">0.00</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submitRefundRequest" disabled>Submit Refund Request</button>
            </div>
        </div>
    </div>
</div>

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

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

<!-- Modal Payment Detail-->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalPaymentDetail" 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">Payment Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Provide the payment details below.</small>
            <div class="modal-body">
                <div id="paymentDetailContent">
                </div>
            </div> 
        </div>
    </div>
</div>

<!-- 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">
                                    <option value="">Select Payment Method </option>
                                    @foreach($payment_method['PaymentMethods'] as $key=>$value)
                                    @if($value['IsActive'] == 'Y' && $value['IsVisible'] == 'Y')
                                    <option value="{{$value['AcPaymentCode']}}">{{$value['AcPaymentDesc']}}</option>
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="hidden" value="" id="paymentRowNumber">
                            <input class="form-control bg-light " type="text" id="cardholderName" placeholder="Enter Name (optional)" name="cardholderName">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="number" id="cardNumber" placeholder="Last 4 Digits Card Number" name="cardNumber">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="text" id="approvalCode" placeholder="Approval Code" name="approvalCode">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="number" id="amountTotalPay" name="amountTotalPay" oninput="calculateBalanceAmount()" placeholder="$0.00" style="font-size: 1.2rem !important" />

                        </div>
                    </div>

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

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

                <button type="button" class="btn btn-info" id="btnUpdateUpdatePayment" onclick="updatePayment();" hidden>
                    <!-- <i class="ri-send-plane-line align-bottom me-1"></i> -->
                    Update Payment
                </button>
            </div>
        </div>
    </div>
</div>
<!--end add payment modal -->
<!--end 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>
    // Run your custom JavaScript code after all the scripts are loaded
    $(document).ready(function() {
        // Your custom JavaScript code here
        console.log("All scripts loaded and ready!");
    });
</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;

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

        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;

                    document.getElementById('customer_name').value = selectedCustomer.AcCustomerName;

                }



            });
        }

        var count = 0;