@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;
}
/* .pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

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

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

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

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

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
} */
/* .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

@if($order->status == 4)
    <div class="alert alert-danger alert-solid" role="alert" id="error-alert">
        <strong>Invalid Order! Please check with admin.</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 Sales Order</h4>
        </div>
    </div>
</div>

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


<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#fff9f9">
            
            <form method="POST" action="{{route('orders.update',['order'=>$order->id])}}" id="invoice_form">
                @csrf
                @method('PUT')
                <!-- ******************************** 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="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" value="{{ $salesman->AcSalesmanID }} - {{ $salesman->AcSalesmanName }}" id="textshowsalesman" placeholder="Salesman ID" readonly  />
                                            <input type="hidden" class="form-control bg-light" value="{{ $salesman->AcSalesmanID }}" id="selectSalesmanID" name="salesman_id" placeholder="Salesman ID" readonly  />
                                            <div class="invalid-feedback">
                                                Salesman ID
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input  style="text-transform: uppercase" type="text" class="form-control bg-light " id="registrationNumber" maxlength="12" placeholder="Company Registration No"  readOnly />
                                    </div>
                                    <div class="mb-1">
                                        <input style="text-transform: uppercase" type="text" class="form-control bg-light " id="GSTRegisterNumber" maxlength="12" placeholder="Company GST No"  readOnly />
                                    </div>
                                    <div class="mb-1">
                                        <input style="text-transform: uppercase"  type="text" class="form-control bg-light " id="reference_document_number" name="reference_document_number" value="{{ $order->reference_document_number}}" 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="{{ $order->document_date ?? $order->created_at}}" 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="2" selected>Sales Order</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="totalamountInput">Document Type</label>
                               
                               @if($order->sales_type == 6 || $order->sales_type == 9)
                                @foreach($accountJobs as $account_job)
                                    @if($order->account_job_id == $account_job->AcAccountJobID)
                                    <input type="text" class="form-control bg-light " id="account_job_id" name="account_job_id" value="{{$account_job->AcAccountJobDesc}}" readOnly>
                                    @endif
                                @endforeach
                                @else
                                <select class="form-select bg-light " aria-label="select example" id="account_job_id" name="account_job_id" @if($order->status == 3) disabled @endif>
                                    @foreach($accountJobs as $account_job)
                                        <option value="{{$account_job->AcAccountJobID}}" selected>{{$account_job->AcAccountJobDesc}}</option>
                                    @endforeach
                                </select>
                                @endif
                           </div>
                        </div>
                    </div>
                    <div class="row g-3" style="margin-top: 2px">
                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="account_job_id">Region</label>
                               @if($order->sales_type == 6 || $order->sales_type == 9 || $order->status == 3)
                                @foreach($regions as $key=>$value) 
                                    @if($order->order_region_id == $value['RegionID'])
                                    <input type="hidden" class="form-control bg-light " id="order_region_id" name="order_region_id" value="{{$value['RegionID']}}">
                                    <input type="text" class="form-control bg-light " value="{{$value['RegionName']}}" readOnly>
                                    @endif
                                @endforeach
                                @else
                                <select class="form-select bg-light " aria-label="select example" id="order_region_id" name="order_region_id">
                                        <option value="">Select Region</option>
                                        @foreach($regions as $key=>$value) 
                                        <option value="{{$value['RegionID']}}" selected>{{$value['RegionName']}}</option> 
                                        @endforeach
                                </select>
                                @endif
                           </div>
                        </div>

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

                <!-- ******************************** START :: Billing & Shipping Address ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row">
                        <!-- Start :: Billing Address -->
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="companyAddress">Shipping Contact</label>
                            </div>
                            <div class="mb-1">
                                <input type="text" style="text-transform: uppercase" class="form-control bg-light " data-plugin="cleave-phone" id="shippingName" name="shippingName" value="{{$order->contact1}}" placeholder="Shipping Attention Name" @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif />
                            </div>
                            <div class="mb-1">
                                <input type="text" style="text-transform: uppercase" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno1" value="{{$order->phone1}}" name="shippingPhoneno1" placeholder="(123)456-7890"  @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif/>
                                
                            </div>
                            <div class="mb-1">
                                <input type="text" style="text-transform: uppercase" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno2" value="{{$order->phone2}}" name="shippingPhoneno2" placeholder="(123)456-7890" @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif/>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                        <!-- Start :: Shipping Address -->
                        <div class="col-sm-4 ms-auto">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div>
                                        <label>Shipping Address</label>
                                        @if($order->status != 3 && $order->sales_type != 6 && $order->sales_type != 9) 
                                        <button type="button"class="btn btn-sm btn-primary" style="float:right; margin-top: -5px" data-bs-toggle="modal" id="btnAddShippingAddress" data-bs-target="#addShippingAddress"><i class="ri-map-pin-add-line"></i></button>
                                        @endif
                                    </div>
                                    
                                    <div class="mb-1">
                                        <input  style="text-transform: uppercase" class="form-control bg-light " rows="3" id="address1" name="address1" placeholder="Address 1" value="{{$order->shipping_address1}}" @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif></input>
    
                                    </div>
                                    <div class="mb-1">
                                        <input  style="text-transform: uppercase" class="form-control bg-light " rows="3" id="address2" name="address2" placeholder="Address 2" value="{{$order->shipping_address2}}" @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif></input>

                                    </div>
                                    <div class="mb-1">
                                        <input style="text-transform: uppercase"  class="form-control bg-light " rows="3" id="address3" name="address3" placeholder="Address 3" value="{{$order->shipping_address3}}" @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif></input>

                                    </div>
                                    <div class="mb-1">
                                        <input style="text-transform: uppercase" class="form-control bg-light " rows="3" id="address4" name="address4" placeholder="Address 4" value="{{$order->shipping_address4}}" @if($order->status == 3) disabled @endif @if($order->sales_type == 6) readonly @endif @if($order->sales_type == 9) readonly @endif></input>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->

                        <div class="col-sm-4 ms-auto">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div>
                                        <label>Document Remark</label>
                                    </div>
                                    
                                    <div class="mb-1">
                                        <input style="text-transform: uppercase" type="text" class="form-control bg-light " id="document_remark" name="document_remark" value="{{ $order->document_remark}}" />
                                    </div>
                                </div>
                            </div>
                        </div>


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

                
                <!-- ******************************** START :: Ship Via ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label>Ship From</label>
                            </div>
                            <div class="mb-1">
                                <select class="form-select bg-light " required aria-label="select example" onchange="changeOrderLocation(this.value);" id="ship_from_location" name="ship_from_location" disabled>
                                    @foreach($locations as $location)
                                    <option value="{{ $location->AcLocationID }}" selected>{{ $location->AcLocationID }} - {{ $location->AcLocationDesc }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->
               
                <!-- ******************************** START :: STOCK CREATE ******************************** -->
                <div class="card-body border-top border-top-dashed p-4">
                    <!-- ****** START :: STOCK + CALCULATION ****** -->
                    <div class="table-responsive">
                        <table class="invoice-table table table-borderless table-nowrap mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 50px;">#</th>
                                    <th scope="col">
                                        Product Details
                                    </th>
                                    <th scope="col" style="width: 120px;">
                                        <div class="d-flex currency-select input-light align-items-center">
                                        Price
                                        </div>
                                    </th>
                                    <th scope="col" style="width: 120px;">QTY</th>
                                    <th scope="col" style="width: 150px;">Amount (RM)</th>
                                </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" @if($order->sales_type == 4 || $order->sales_type == 5 || $order->sales_type == 6 || $order->sales_type == 9 || $order->status == 3 ) hidden @endif 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>
                                    <button type="button" hidden class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnShowCancelStockModal" data-bs-target="#modalCancelStocks">
                                        <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 hidden>
                                                    <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>
                                                    <th scope="row">Sub Total</th>
                                                    <td style="width:150px;">
                                                        <input type="text" class="form-control bg-light " id="actual-subtotal" name="actual-subtotal" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr class="border-top border-top-dashed" hidden>
                                                    <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>
                                                <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>
                                            </tbody>
                                        </table>

                                    </td>
                                </tr>
                            </tbody>
                        </table>

                                    
                        @if($order->sales_type == 6)
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-danger">
                                Price Request Rejected
                            </div>
                        </div>
                        @endif
                        @if($order->sales_type == 9)
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-danger">
                                Expired
                            </div>
                        </div>
                        @endif
                        @if($order->status == 3)
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-danger">
                                Order Cancelled
                            </div>
                        </div>
                        @endif 
                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->
                    <!-- ****** START :: Payment Details ****** -->
                     @if($order->sales_type != 4 &&  $order->sales_type != 6 && $order->sales_type != 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->payment_status == 1)
                            <span class="badge bg-success-subtle text-success text-uppercase" id="labelPaymentStatus">FULLY PAID</span>
                            @elseif($order->payment_status == 2)
                            <span class="badge bg-danger-subtle text-danger text-uppercase" id="labelPaymentStatus">PARTIALLY</span>
                            @else
                            <span class="badge bg-danger-subtle text-danger text-uppercase" id="labelPaymentStatus">UNPAID</span>
                        @endif
                        </label>
                        @if($order->status != 3)
                        <button type="button" class="btn btn-light btn-sm" id="refreshButton" onclick="getLatestOrderPaymentStatus('{{ $order->invoice_no }}');">
                            <i class="ri-refresh-line"></i> Refresh payment status
                        </button>
                        @endif
                        @if($order->payment_status != 1 && $order->sales_type != 9 && $order->status != 3 && $order->sales_type != 6)
                        <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" onclick="autofillinTotal('{{$balance_payment}}');" 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>
                        @else
                        <div class="row" style="padding-left:10px" hidden> 
                            <div class="col-lg-3 col-sm-6" data-aos="flip-left" style="margin:10px 0">
                                <button type="button" class="btn btn-primary btn-label rounded-pill" onclick="autofillinTotal('{{$balance_payment}}');" 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
                        <table class="table align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Ref No</th>
                                        <th>Status</th>
                                        <th class="text-end" width="150px">Paid Amount (RM)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($payments as $payment)
                                    <tr>
                                        <td>{{ $payment->document_date }}</td>
                                        <td><a href="javascript:void(0);" onclick="showPaymentDetail('{{ $payment->payment_details }}');">{{ $payment->receipt_number }}</a></td>
                                        <td>
                                            <span class='badge bg-danger-subtle text-danger text-uppercase'>PENDING</span>                                        </td>
                                        <td class="text-end">{{ number_format($payment->total_amount, 2) }}</td>
                                    </tr>
                                    @endforeach

                                    <tr>
                                        <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">0</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">{{ $sum_payment }}</td>
                                    </tr>

                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: 500" class="text-end">Balance</td>
                                        @if($balance_payment >= 0)
                                        <td style="font-weight: 500" class="text-end" id="labelBalance">{{ $balance_payment }}</td>
                                        @else
                                        <td style="font-weight: 500; color: red;" class="text-end" id="labelBalance">{{ $balance_payment }}</td>
                                        @endif
                                    </tr>
                                </tbody>
                        </table>
                    </div>
                    @endif
                    <!-- ****** END :: Payment Details ****** -->
                    <!-- ****** START :: BUTTONS ****** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                        @if($order->sales_type != 6 && $order->sales_type != 9)
                        @if($order->status != 3)
                        <button type="submit" class="btn btn-info btn-sm"><i class="ri-printer-line align-bottom me-1"></i> Update</button>
                        <a href="javascript:void(0);" id="btnCancelStocks" class="btn btn-danger btn-sm" hidden>Cancel Stocks</a>
                        <a href="javascript:void(0);" id="btnCancelOrder" class="btn btn-danger btn-sm">Cancel Order</a>
                        @if($order->sales_type != 4 && $order->sales_type != 9)
                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalEmail">
                            Send Email
                        </button>
                        <a href="javascript:void(0);" id="btnPrintLink" class="btn btn-dark btn-sm">Print</a>
                        @endif
                        @endif
                        @endif
                      

                        <!-- <a href="javascript:void(0);" class="btn btn-light btn-sm">
                            Send
                        </a> -->
                    </div>
                    <!-- ****** END :: BUTTONS ****** -->
                </div>
                <!-- ******************************** END :: STOCK CREATE ******************************** -->
            </form>
        </div>
    </div>
</div>

<!-- Modal Cancel Stocks-->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalCancelStocks" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select Stock to Cancel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Provide the stock details below.</small>
            <div class="modal-body">
                <div class="form-check">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">#</th>
                                <th scope="col">Stock ID</th>
                                <th scope="col">Description</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Price</th>
                                <th scope="col">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orderDetails as $index => $orderDetail)
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="{{ $orderDetail->stock_id }}" id="cancel-orderItem-{{ $orderDetail->item_no }}" style="accent-color: red; background-color: red !important;">
                                            <input type="hidden" name="cancel-orderItem-id-{{ $orderDetail->item_no }}" id="cancel-orderItem-id-{{ $orderDetail->item_no }}"value="{{ $orderDetail->stock_id }}">
                                            <input type="hidden" name="cancel-orderItem-price-{{ $orderDetail->item_no }}" id="cancel-orderItem-price-{{ $orderDetail->item_no }}"value="{{ $orderDetail->price }}">
                                            <label class="form-check-label" for="orderItem-{{ $orderDetail->stock_id }}"></label>

                                        </div>
                                    </td>
                                    <th scope="row">{{ $index + 1 }}</th>
                                    <td>{{ $orderDetail->stock_id }}</td>
                                    <td>{{ $orderDetail->stock_desc }}</td>
                                    <td>
                                        <select name="cancel_order_qty_{{ $orderDetail->item_no }}" class="form-select" onchange="calculateTotalOfCancelledStock('{{ $orderDetail->item_no }}')">
                                            @for ($i = 1; $i <= $orderDetail->qty; $i++)
                                                <option value="{{ $i }}" @if($i == $orderDetail->qty) selected @endif>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </td>
                                    <td>{{ $orderDetail->price }}</td>
                                    <td id="cancel-orderItem-total-{{ $orderDetail->item_no }}">{{ number_format($orderDetail->price * $orderDetail->qty, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <button type="button" class="btn btn-danger" id="btnConfirmCancelStocks" onclick="showCancelStockOption();">Confirm</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="btnCloseCancelStocks" hidden>Close</button>
                </div>
            </div> 
        </div>
    </div>
</div>

<!-- Modal Cancel Stocks Option-->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalCancelStockOption" 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">Cancel Stock Option</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btnCloseCancelStockOption"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Select one of the option to cancel </small>
            <div class="modal-body">
                <div id="showCancelledStockDetails"></div>

                <div class="row mt-6">
                            <div class="col-xl-4 col-lg-4">
                                <div class="card ribbon-box right overflow-hidden">
                                    <div class="card-body text-center" onclick="callRefundHQ();" style="cursor: pointer">
                                        <h5 class="mb-1 mt-2">HQ Refund</h5>
                                    </div>
                                </div>
                            </div>
                        <div class="col-xl-4 col-lg-4">
                            <div class="card ribbon-box right overflow-hidden">
                                <div class="card-body text-center" onclick="submitRefundCounter();" style="cursor: pointer">

                                    <h5 class="mb-1 mt-2">
                                        Counter Refund
                                    </h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4">
                            <div class="card ribbon-box right overflow-hidden">
                                <div class="card-body text-center" onclick="submitNoRefund();" style="cursor: pointer">

                                    <h5 class="mb-1 mt-2">
                                       No Refund
                                    </h5>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                
                </div> 
            </div> 
        </div>
    </div>
</div>

<!-- Modal Submit Refund Loader-->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalSubmitRefundLoader" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            
            
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btnCloseSubmitRefundLoader" hidden></button>
            </div>
            <div class="modal-body"> 
                <p id="lbLoaderTitle">Please wait while we process your refund request.</p>
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal HQ Refund Form-->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalRefundHQ" 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">HQ Refund Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem"></small>
            <div class="modal-body">
                
                <form id="hq_refund_form">
                    <div class="mb-2">
                        <label for="refundHQReason" class="form-label">Reason for Refund</label>
                        <input type="text" id="refundHQReason" class="form-control" placeholder="Enter reason">
                    </div>
                    <div class="mb-2">
                        <label for="refundHQAmount" class="form-label">Refund Amount</label>
                        <input type="number" id="refundHQAmount" class="form-control" placeholder="Enter amount">
                    </div>
                    <div class="mb-2">
                        <label for="refundHQCustomerName" class="form-label">Customer Name</label>
                        <input type="text" id="refundHQCustomerName" class="form-control" placeholder="Enter customer name">
                    </div>
                    <div class="mb-2">
                        <label for="refundHQBankName" class="form-label">Bank:</label>
                        <input type="text" id="refundHQBankName" class="form-control" placeholder="Enter bank name">
                    </div>
                    <div class="mb-2">
                        <label for="refundHQAccountNumber" class="form-label">Account Number:</label>
                        <input type="text" id="refundHQAccountNumber" class="form-control" placeholder="Enter account number">
                    </div>

                    <div class="text-center">
                        <button type="button" class="btn btn-primary" id="btnSubmitRefundHQ" onclick="submitRefundHQ();">Submit Refund</button>
                        <button type="button" class="btn btn-danger" id="btnBackRefundHQ" onclick="refundBackAction('btnCloseRefundHQ');" >Back</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="btnCloseRefundHQ" hidden>Close</button>
                    </div>
                </form>
            </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>
            <small style="padding: 0rem 1.25rem" class="">click <code>stock balance </code>to get latest balance.</small>
            <div class="modal-body pb-0">
                <form id="add_stock_form">
                    <div class="mb-2">
                        <input type="text" id="txtSearchStockId" placeholder="By ID" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchStockName" placeholder="By Description " class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <select type="text" id="txtSearchStockType" class="form-control bg-light ">
                            <option value="ALL">ALL</option>
                            <option value="STOCK">STOCK</option>
                            <option value="SERVICE">SERVICE</option>
                            <option value="NON-STOCK">NON-STOCK</option>
                        </select>
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-primary rounded-pill" id="btnSearchStock" onclick="searchStock();"> 
                            Search
                        </button>
                    </div>
                </form>
                    

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

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

                    <div>
                        <table class="table table-striped mb-0 mt-2" id="tableWarrantySearch">
                        </table>
                        <div class="pagination" id="WarrantyPagination">
                            
                        </div>
                    </div>
 
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<!-- END :: ADD WARRANTY MODAL -->

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

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

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


<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">Make Payment</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">

                <div class="row mt-3 border-top border-top-dashed" hidden>
                    <div class="col-lg-4 col-sm-6">
                       <div class="mt-3">
                           <label for="choices-payment-status">Payment Mode</label>
                           <select class="form-select bg-light " aria-label="select example" id="choices-payment-status" name="payment_status" readOnly>
                               <option value="3" >No Payment</option>
                               <option value="2" >Collect Partial Deposit</option>
                               <option value="1" >Full Amount</option>
                            </select>
                        </div>
                    </div>
                </div>


                <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-type1" name="choices-payment-type1" onchange="changePaymentMethod(this.value)">
                                    <option value="">Select Payment Method 1</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" name="order_invoice_no" value="{{ $order->invoice_no }}">
                            <input class="form-control bg-light " type="text" id="cardholderName1" placeholder="Enter Name (optional)" name="cardholderName1">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="number" id="cardNumber1" placeholder="Last 4 Digits Card Number" name="cardNumber1">
                        </div>
                        <div class="mb-2" style="display:none">
                            <input class="form-control bg-light " type="text" id="paymentremark1" placeholder="Remark (optional)" name="paymentremark1">
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light " type="text" id="approvalCode1" placeholder="Approval Code" name="approvalCode1">
                        </div>
                        <div>
                            <input class="form-control bg-light " type="number" id="amountTotalPay1" name="amountTotalPay1" oninput="calculateBalanceAmount()" placeholder="$0.00" style="font-size: 1.2rem !important" />
                            <input class="form-control bg-light " type="hidden" id="amountTotalPay2" name="amountTotalPay2" onchange="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">
                                @if($balance_payment > 0)
                                <label for="companyAddress" class="badge bg-info-subtle text-dark text-uppercase" id="labelCurrentBalance style="font-size: 1rem !important">Current Balance : RM {{ $balance_payment}}</label>
                                @else
                                <label for="companyAddress" class="badge bg-info-subtle text-dark text-uppercase" id="labelCurrentBalance style="font-size: 1rem !important; color: red;">Current Balance : RM {{ $balance_payment}}</label>
                                @endif
                            </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 class="col-lg-4">
                                <div class="mb-2">
                                    <div class="input-light">
                                        <select class="form-control bg-light " id="choices-payment-type2" name="choices-payment-type2">
                                            <option value="">Select Payment Method 2</option>
                                            @foreach($payment_method['PaymentMethods'] as $key=>$value)    
                                            <option value="{{$value['AcPaymentCode']}}">{{$value['AcPaymentDesc']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <input class="form-control bg-light " type="text" id="cardholderName2" placeholder="Enter Name (optional)" name="cardholderName2">
                                </div>
                                <div class="mb-2">
                                    <input class="form-control bg-light " type="text" id="cardNumber2" placeholder="Last 4 Digits Card Number (optional)" name="cardNumber2">
                                </div>
                                <div class="mb-2">
                                    <input class="form-control bg-light " type="text" id="paymentremark1" placeholder="Remark (optional)" name="paymentremark1">
                                </div>
                                <div>
                                    <input class="form-control  bg-light " type="text" id="amountTotalPay2" name="amountTotalPay2" onchange="calculateBalanceAmount()" placeholder="$0.00" style="font-size: 1.2rem !important" />
                                </div>
                            </div>
                </div>

                <div class="mt-3">
                            <h5 class="fs-14 mb-0" style="font-size: 1.2rem !important">
                                <label for="companyAddress" style="font-size: 1rem !important">Balance : </label><br>
                                <label id="labelBalanceAmount" style="margin-left:0px;font-size: 1.2rem !important"> 0</label>
                            </h5>
                </div> -->

            </div>
            <div class="modal-footer" style="padding-right: 0">
                <button type="button" class="btn btn-info" id="btnSubmitPayment">
                    <!-- <i class="ri-send-plane-line align-bottom me-1"></i> -->
                    Make Payment
                </button>
            </div>
        </div>
    </div>
</div>
<!--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/libs/prismjs/prism.js') }}"></script> --}}
<script src="{{ URL::asset('build/js/app.js') }}"></script>
{{-- <script src="{{ URL::asset('build/libs/dropzone/dropzone-min.js') }}"></script> --}}
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/invoicecreate.init.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>
<script 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 = @json($addedstock);
    var stocks = null;
    var orderedStock = null;
    var payment_method = null;
    var rowsPerPage = 9;
    var currentPage = 0;
    var countStock = 0;
    var changeitemcount = 0;
    var paidAmount = 0;

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

                    //     }
                    // }

                    selectShippingAddress(true);

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

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

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

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

            });
        }

        var count = 0;