@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);
    }
} */
#salesmanid-error{
    font-size: 0.775em;
    text-align: left;
    color: red;
}
/* .modal-header {
    padding: var(--vz-modal-header-padding) !important;
    background: #f6f6f6 !important
} */
</style>


<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Manage Sales Order</h4>
        </div>
    </div>
</div>
@if (session('success'))
    <div class="alert alert-success alert-solid" role="alert" id="success-alert">
        <strong>{{ session('success') }} </strong>
    </div>
@endif

@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="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('quotation.update_quotation',['orderId'=>$order->id])}}" id="invoice_form">
                @csrf
                <!-- ******************************** START :: BHB COMPANY HEADER ******************************** -->
                <div class="card-body p-4">
                    <!-- ***** START :: LEFT HEADER ***** -->
                    <!-- <div class="row" style="
                            background: #FFF;
                            border-radius: 20px;
                            margin-bottom: 10px;
                            text-align: center;
                            padding: 3px 0
                        ">
                        <div class="col-lg-12">
                            <span class="text-muted">you're currently logon as </span><code>{{ auth()->user()->name }}</code><span>, from</span> <code>{{ session('loc') }}</code>.
                        </div>
                    </div> -->
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="profile-user mx-auto mb-3">
                                <label for="profile-img-file-input" class="d-block" tabindex="0">
                                    <span class="overflow-hidden border border-dashed align-items-center justify-content-center rounded" style="height: 60px; width: 156px;">
                                        <img src="{{ URL::asset('build/images/bhblogo.png') }}" class="" style="width: 120px">
                                        <!-- card-logo card-logo-dark user-profile-image img-fluid -->
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- ***** END :: LEFT HEADER ***** -->

                    <!-- ***** START :: RIGHT HEADER ***** -->
                    <div class="row">
                        <!--  START :: Customer  -->
                        <div class="col-lg-4 col-sm-6">
                            <!-- <div class="mb-1">
                                <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" data-bs-target="#selectCustomerModal">
                                    <i class="ri-user-add-fill label-icon align-middle rounded-pill fs-16 me-2"></i> Select Customer
                                </button>
                            </div> -->
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="choices-customer" name="choices-customer" placeholder="Customer ID" readOnly />
                                <input type="hidden" id="customer_name" name="customer_name" value="" />
                            </div>
                            <div class="mb-1">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="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 type="text" class="form-control bg-light " id="registrationNumber" maxlength="12" placeholder="Company Registration No"  readOnly />
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="GSTRegisterNumber" maxlength="12" placeholder="Company GST No"  readOnly />
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="reference_document_number" value="{{ $order->reference_document_number}}" name="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" placeholder="Select Date" value="{{\Carbon\Carbon::parse($order->created_at)->format('Y-m-d') }}" readOnly>
                            </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>
                               
                               <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 Partial Deposit</option>
                                   <option value="1">Full Amount</option>
                               </select>
                           </div>
                        </div>
                    </div>

                    <div class="row g-3" style="margin-top: 2px" hidden>
                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="account_job_id">Region</label>
                               
                               <select class="form-select bg-light " aria-label="select example" id="order_region_id" name="order_region_id">
                                    <option value="">Select Region</option>
                                    @foreach($regions as $key=>$value) 
                                    <option value="{{$value['RegionID']}}" selected>{{$value['RegionName']}}</option> 
                                    @endforeach
                               </select>
                           </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                            <div>
                                <label for="date-field-delivery">Delivery Date</label>
                                <input type="text" class="form-control bg-light " id="date-field-delivery" name="delivery_date" placeholder="Select Date" data-provider="flatpickr" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" style="background:#FFF !important" data-date-format="Y-m-d">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->

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

                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address3" name="address3" placeholder="Address 3" value="{{$order->shipping_address3}}"></input>

                                    </div>
                                    <div class="mb-1">
                                        <input class="form-control bg-light " rows="3" id="address4" name="address4" placeholder="Address 4" value="{{$order->shipping_address4}}"></input>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->

                        


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

                
                <!-- ******************************** START :: Ship Via ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label>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">
                                    @foreach($locations as $location)
                                    <option value="{{ $location->AcLocationID }}" selected>{{ $location->AcLocationID }} - {{ $location->AcLocationDesc }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <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">
                                        <textarea rows="5" class="form-control bg-light " id="document_remark" name="document_remark">{{ $order->document_remark}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->
               
                <!-- ******************************** START :: STOCK CREATE ******************************** -->
                <div class="card-body border-top border-top-dashed p-4">
                    <!-- ****** START :: STOCK + CALCULATION ****** -->
                    <div class="table-responsive">
                        <table class="invoice-table table table-borderless table-nowrap mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 50px;">#</th>
                                    <th scope="col">
                                        Product Details
                                    </th>
                                    <th scope="col" style="width: 120px;">
                                        <div class="d-flex currency-select input-light align-items-center">
                                        Price
                                        </div>
                                    </th>
                                    <th scope="col" style="width: 120px;">QTY</th>
                                    <th scope="col" style="width: 150px;">Amount (RM)</th>
                                    <th scope="col" style="width: 55px;"></th>
                                </tr>
                            </thead>
                            <tbody id="newlink">
                            </tbody>
                            <tbody>
                                <tr id="newForm" style="display: none;">
                                    <td class="d-none" colspan="5">
                                        <p>Add New Form</p>
                                    </td>
                                    
                                </tr>
                                <tr>
                                    <td colspan="5">
                                    <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddStockModal" data-bs-target="#addStockModal">
                                        <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i>Add Stock
                                    </button>
                                    <button type="button" hidden class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddWarrantyModal" data-bs-target="#addWarrantyModal">
                                        <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i>Add Warranty
                                    </button>
                                    <!-- <a href="javascript:void(0)" onclick="new_link1()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                        <!-- <a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                    </td>
                                </tr>
                                <tr class="border-top border-top-dashed mt-2">
                                    <td colspan="3"></td>
                                    <td colspan="2" class="p-0">
                                        <table class="table table-borderless table-sm table-nowrap align-middle mb-0 mt-2">
                                            <tbody>
                                                <tr 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>
                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->
                    <!-- ****** START :: Payment Details ****** -->
                    @if($order->sales_type != 4 && $order->sales_type != 7)
                    <div class="border border-dashed mt-5" style="background:#d4e9ff55" hidden>
                        <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">FULLY PAID</span>
                            @elseif($order->payment_status == 2)
                            <span class="badge bg-danger-subtle text-danger text-uppercase">PARTIALLY</span>
                            @else
                            <span class="badge bg-danger-subtle text-danger text-uppercase">UNPAID</span>
                        @endif
                        </label>
                        @if($order->payment_status != 1)
                        <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" 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>{{ $payment->receipt_number }}</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">Paid</td>
                                        <td style="font-weight: 500" class="text-end">{{ $sum_payment }}</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">{{ $balance_payment }}</td>
                                    </tr>
                                </tbody>
                        </table>
                    </div>
                    @endif
                    <!-- ****** END :: Payment Details ****** -->
                    <!-- ****** START :: BUTTONS ****** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">

                        <button type="submit" class="btn btn-info btn-sm" id="btnSubmitOrder"><i class="ri-printer-line align-bottom me-1"></i> Save</button>
                        <button type="button" class="btn btn-info" id="btnQuoToSo">Convert to SO</button>
        
                      

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

<!-- START :: ADD STOCK MODAL -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="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 -->

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


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

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

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


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

                                </select>
                            </div>
                        </div>
                        <div class="mb-2" style="display:none">
                            <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" style="display:none">
                            <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>
                            <input class="form-control  bg-light " type="number" id="amountTotalPay1" name="amountTotalPay1" onchange="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">
                                <label for="companyAddress" class="badge bg-info-subtle text-dark text-uppercase" style="font-size: 1rem !important">Current Balance : RM {{ $balance_payment}}</label>
                            </h5>
                            <h5 class="fs-14 mb-0 ml-3" style="font-size: 1.2rem !important">
                                <label class="badge bg-danger-subtle text-dark text-uppercase"  id="labelBalanceAmount" style="margin-left:0px;font-size: 1.2rem !important"></label>
                            </h5>
                        </div>
                    </div>

                </div>

            </div>
            <div class="modal-footer" style="padding-right: 0">
                <button type="button" class="btn btn-info" id="btnSubmitPayment">
                    <!-- <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 = [];
    var stocks = @json($stocks);
    var rowsPerPage = 9;
    var currentPage = 0;
    var countStock = 0;
    var max_discount = ;
    var paidAmount = 0;

        if (selectBox) {

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

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

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

                    //     }
                    // }

                    selectShippingAddress(true);

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

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

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

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

            });
        }

        var count = 0;