@extends('layouts.main')
@section('title', $data['title'])
@section('content')


    <style>
        /* .modal-body .input-group-text {
                                                                                                padding: 0;
                                                                                                outline: 0;
                                                                                                width: 60px;
                                                                                            } */

        select#form-control {
            height: 34px;
        }

        select#form-control {
            height: 34px;
            outline: 0;
            border: none;
        }

        .input-group-text .select2-container--default .select2-selection--single .select2-selection__arrow b {
            left: 75%;
        }

        .input-group-text .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
        }

        input {
            width: 250px;
            padding: 10px;
            border-radius: 2px;
            border: 1px solid #ccc;
        }

        input::placeholder {
            color: #BBB;
        }

        .card-body {
            padding: 2rem 2rem;
        }

        h3.mt-1.fw-bold {
            font-size: 1.5rem;
            font-weight: 700 !important;
            line-height: 1;
            margin-top: 5px !important;
        }

        .form-label.bill-label {
            position: unset;
        }

        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 60px calc(24px / 2)
        }

        #addClientModalLabel,
        #discountModalLabel {
            color: #3751A1;
            font-weight: bold;
            padding: 10px;
        }

        /* Modal Styles */
        .modal-header {
            /* background-color: #f8f9fa; */
            /* border-bottom: 2px solid #dee2e6; */
            padding: 0px 7px;
        }

        .form-label {
            position: static;
            /* font-size: initial; */
            font-size: 14px;
            left: initial;
            top: initial;
            transform: none;
            background-color: transparent;
            color: initial;
            padding: initial;
            margin: initial;
            transform-origin: initial;
            pointer-events: initial;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .form-control {
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 0.5rem;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .form-control {
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 0.5rem;
        }

        ::-webkit-scrollbar {
            width: 16px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #3751A1;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #3751A1;
            border-radius: 20px;
            border: 6px solid transparent;
            background-clip: content-box;
        }

        #Customerdetail,
        #Branchdetail {
            width: 100%;
            border-collapse: separate;
            border: 1px solid #e1e1e1;
            padding: 10px;
            border-radius: 12px;
        }

        /* #Customerdetail td,
                                                                                    #Branchdetail td {
                                                                                        border: 1px solid #ddd;
                                                                                        padding: 10px;
                                                                                        color: #000;
                                                                                    } */

        #Customerdetail .label-column,
        #Branchdetail .label-column {
            /* width: 200px; */
            font-weight: bold;
            /* background-color: #F5F6FA; */
            white-space: nowrap;
            color: #000;
        }

        #Customerdetail .address-column,
        #Branchdetail .address-column {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 400px;
            display: block;
        }

        .datepicker table tr td span {
            display: block;
            width: 23%;
            height: 54px;
            /* line-height: 54px; */
            float: left;
            /* margin: 1%; */
            cursor: pointer;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            align-content: center;
        }

        .datepicker .datepicker-switch {
            width: 145px;
        }

        .datepicker td,
        .datepicker th {
            text-align: center;
            width: 20px;
            height: 20px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: none;
        }

        .text-danger {
            font-size: 100%;

        }

        #additem thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #additem thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        .table-bordered {
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
        }

        .table-bordered th,
        .table-bordered td {
            border: none;
        }

        .Branchdetail,
        .client_detail {
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #ddd;
            background: #fff;
        }

        .modal-title {
            font-weight: bold;
            font-size: 1.25rem;
        }
    </style>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="{{ asset('assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">



    <div class="page-content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form id="formOrder" method="POST" action="" class="needs-validation" novalidate>
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label class="form-label bill-label">Bill From</label>
                                            <select class="form-select" id="company_bill" name="company_bill"></select>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-6 col-sm-12">
                                        <div class="mb-3 ajax-select mt-3 mt-lg-0">
                                            <label class="form-label bill-label">Bill to</label>
                                            <div class="button">
                                                <button type="button" class="btn btn-primary" id="" data-bs-toggle="modal"
                                                    data-bs-target="#addClientModal">
                                                    <i class="mdi mdi-plus me-1"></i> Add Customer
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Branch Address Section -->
                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                        <div class="d-none mb-2" id="branch_address_show">
                                            <div class="popovercontainer address-group ember-view">
                                                <div class="ember-view">
                                                    <div class="address-list">
                                                        <span
                                                            class="text-muted text-uppercase font-small d-inline-block mb-2">
                                                            <b>Branch Address</b>
                                                        </span>
                                                    </div>
                                                    <div class="Branchdetail">
                                                        <table class="table table-bordered">
                                                            <tr>
                                                                <td class="label-column"><strong>Branch Name:</strong></td>
                                                                <td style="color:#000;"><span id="branch_name_text"></span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="label-column"><strong>Address:</strong></td>
                                                                <td class="address-column" style="color:#000;">
                                                                    <span id="branch_address_line1_text"></span>,
                                                                    <span id="branch_address_line2_text"></span>,
                                                                    <span id="branch_city_id_text"></span>,
                                                                    <span id="branch_state_id_text"></span>,
                                                                    <span id="branch_country_id_text"></span> -
                                                                    <span id="branch_pincode_text"></span>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <input type="hidden" name="branch_id" id="branch_id">
                                                        <input type="hidden" name="branch_address_line1"
                                                            id="branch_address_line1">
                                                        <input type="hidden" name="branch_address_line2"
                                                            id="branch_address_line2">
                                                        <input type="hidden" name="branch_pincode" id="branch_pincode">
                                                        <input type="hidden" name="branch_country_id"
                                                            id="branch_country_id">
                                                        <input type="hidden" name="branch_state_id" id="branch_state_id">
                                                        <input type="hidden" name="branch_city_id" id="branch_city_id">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Client Details Section -->
                                    <div class="col-lg-8 col-md-6 col-sm-12">
                                        <div class="d-none mb-2" id="client_detail_address_show">
                                            <div class="popovercontainer address-group ember-view">
                                                <div class="ember-view">
                                                    <div class="address-list">
                                                        <span
                                                            class="text-muted text-uppercase font-small d-inline-block mb-2">
                                                            <b>Client Details</b>
                                                            <a class="d-none" data-bs-toggle="modal" id="clientEditeButton"
                                                                data-bs-target="#addClientModal">
                                                                &nbsp;&nbsp;<i class="bi bi-pencil-square w-50"></i>
                                                            </a>
                                                        </span>
                                                    </div>
                                                    <div class="client_detail">
                                                        <table class="table table-bordered">
                                                            <tr>
                                                                <td class="label-column"><strong>Customer Name:</strong>
                                                                </td>
                                                                <td style="color:#000;"><span
                                                                        id="client_detail_name_text"></span></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="label-column"><strong>Phone Number:</strong></td>
                                                                <td style="color:#000;"><span
                                                                        id="client_detail_number_text"></span></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="label-column"><strong>Email:</strong></td>
                                                                <td style="color:#000;"><span
                                                                        id="client_detail_email_text"></span></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="label-column"><strong>Address:</strong></td>
                                                                <td style="color:#000;">
                                                                    <span id="client_detail_address_line1_text"></span>,
                                                                    <span id="client_detail_pincode_text"></span>
                                                                    <span id="client_detail_country_state_city_text"></span>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <input type="hidden" name="client_detail_name"
                                                            id="client_detail_name">
                                                        <input type="hidden" name="client_detail_number"
                                                            id="client_detail_number">
                                                        <input type="hidden" name="client_detail_countrycode"
                                                            id="client_detail_countrycode">
                                                        <input type="hidden" name="client_detail_email"
                                                            id="client_detail_email">
                                                        <input type="hidden" name="client_detail_address_line1"
                                                            id="client_detail_address_line1">
                                                        <input type="hidden" name="client_detail_pincode"
                                                            id="client_detail_pincode">
                                                        <input type="hidden" name="client_detail_country_id"
                                                            id="client_detail_country_id">
                                                        <input type="hidden" name="client_detail_state_id"
                                                            id="client_detail_state_id">
                                                        <input type="hidden" name="client_detail_city_id"
                                                            id="client_detail_city_id">
                                                        <input type="hidden" name="client_detail_countrycode_text"
                                                            id="client_detail_countrycode_text">
                                                        <input type="hidden" name="client_detail_countrycode_id"
                                                            id="client_detail_countrycode_id">
                                                        <input type="hidden" name="client_detail_country_text"
                                                            id="client_detail_country_text">
                                                        <input type="hidden" name="client_detail_state_text"
                                                            id="client_detail_state_text">
                                                        <input type="hidden" name="client_detail_city_text"
                                                            id="client_detail_city_text">
                                                        <input type="hidden" name="client_birthday_date"
                                                            id="client_detail_birthday_date">
                                                        <input type="hidden" name="client_detail_anniversary_date"
                                                            id="client_detail_anniversary_date">
                                                        <input type="hidden" name="discounttype" id="discounttype">
                                                        <input type="hidden" name="discountvalues" id="discountvalues">
                                                        <input type="hidden" name="discountPer" id="discountPer">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" id="seaction_order_items">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="mb-3">
                                                    <input type="hidden" class="form-control product-qty-cls"
                                                        id="product_qty" name="product_qty" placeholder="QTY" value="0">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-responsive w-100">
                                            <table class="table align-middle mb-0 table-nowrap" id="additem">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Item Design No</th>
                                                        <th>Item Name</th>
                                                        <th>Gold KT</th>
                                                        <th>Diamond CT</th>
                                                        <th>Gram</th>
                                                        <th>Quantity</th>
                                                        <th>Price</th>
                                                        @if (in_array(Auth::user()->company_id, [2, 3]))
                                                            <th>GST 3%</th>
                                                        @else
                                                            <th>GST 18%</th>
                                                        @endif
                                                        <th>Payable Amt</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="cartTbody"></tbody>
                                            </table>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="col-sm-12 text-end">
                                                <button type="button" class="btn btn-primary" onclick="openAddItemModal()"
                                                    style="width: 127px;">
                                                    <i class="mdi mdi-plus me-1"></i> Add Items
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-8"></div>
                                    <div class="col-xl-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="card-title mb-3">Order Summary</h4>
                                                <div class="table-responsive">
                                                    <table class="table mb-0">
                                                        <tbody>
                                                            <tr>
                                                                <td>Total MRP:</td>
                                                                <td><span id="order_summary_order_total_mrp"></span></td>
                                                            </tr>
                                                            <tr>
                                                                <td>Estimated Tax (GST) <span
                                                                        id="order_summary_order_gst_percentage"></span>%:
                                                                </td>
                                                                <td><span id="order_summary_order_gst_value"></span></td>
                                                            </tr>
                                                            <tr>
                                                                <td>Total Discount:
                                                                    <i id="discount-icon" class="fas fa-edit text-primary"
                                                                        style="cursor: pointer;"></i>
                                                                </td>
                                                                <td class="text-danger"><span
                                                                        id="order_summary_order_total_discount"></span></td>
                                                            </tr>
                                                            <tr>
                                                                <th>Total:</th>
                                                                <th><span id="order_summary_order_payable_total"></span>
                                                                </th>
                                                                <input type="hidden" id="verify_payable_total"
                                                                    name="verify_payable_total" accept="">
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 mb-4 text-end">
                                                <button type="button" disabled id="btnCheckOut" class="btn btn-success">
                                                    <i class="mdi mdi-cart-arrow-right me-1"></i> Checkout
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalOrderPreviw" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="modalOrderLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <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"></button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button id="btnPlaceOrderCancel" data-bs-dismiss="modal" aria-label="Close" type="button"
                        class="btn btn-danger waves-effect waves-light">Cancel</button>
                    <button id="btnPlaceOrder" type="button" class="btn btn-success waves-effect waves-light">
                        <span id="btnPlaceOrderText">Place Order</span>
                        <div id="btnPlaceOrderLoader" class="spinner-border spinner-border-sm d-none" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Items Modal -->
    <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addClientModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addClientModalLabel">Add Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="" id="itemForm" method="post">
                        <input type="hidden" id="item_id" name="item_id" value="">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="item_design_no" class="form-label">Design No <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="text" class="form-control" id="item_design_no" name="item_design_no"
                                        placeholder=" Design No" value="" required>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="item_name" class="form-label">Name <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="text" class="form-control" id="item_name" name="item_name"
                                        placeholder=" Name" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="item_gold_ct" class="form-label">Gold KT <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="number" class="form-control" id="item_gold_ct" name="item_gold_ct"
                                        placeholder=" Gold CT" value="" required>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="item_diamond_ct" class="form-label">Diamond CT <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="number" class="form-control" id="item_diamond_ct" name="item_diamond_ct"
                                        placeholder=" Diamond CT" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="item_gram" class="form-label">Gram <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="number" class="form-control" id="item_gram" name="item_gram"
                                        placeholder=" Gram" value="" required>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="item_quantity" class="form-label">Quantity <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="number" class="form-control" id="item_quantity" name="item_quantity"
                                        placeholder=" Quantity" value="" required step="1">
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="item_price" class="form-label">Price <code
                                        class="highlighter-rouge">*</code></label>
                                <input type="number" class="form-control" id="item_price" name="item_price"
                                    placeholder=" Price" value="" required>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="itemSave">Save</button>
                    <button type="button" class="btn btn-primary" id="addNewItem">Add Item</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Discount Modal -->
    <div id="discountModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="discountModalLabel"
        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="discountModalLabel">Apply Discount</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="discountForm">
                        <div class="mb-3">
                            <label for="discount_type">Discount Type</label>
                            <select class="form-select" id="discount_type" name="discount_type">
                                <option value="0">Percentage (%)</option>
                                <option value="1">Fixed Amount</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="discountAmount">Discount Value</label>
                            <input type="number" id="discountAmount" class="form-control" placeholder=" discount value">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="applyDiscountBtn" class="btn btn-primary">Apply Discount</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Client Modal -->
    <div class="modal fade" id="addClientModal" tabindex="-1" aria-labelledby="addClientModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addClientModalLabel">Add Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="" id="clicntForm" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <div class="row">

                                        <label for="phone_number" class="form-label" style="margin-left: 12px;">Phone
                                            Number
                                            <code class="highlighter-rouge">*</code></label>

                                        <div class="col-md-3 ">

                                            <select name="country_code" class="form-control" id="country_code">
                                            </select>

                                        </div>
                                        <div class="col-md-9 " style="padding-left: 0 !important;">
                                            <input type="number" class="form-control" id="phone_number" name="phone_number"
                                                autocomplete="off" placeholder=" Phone Number" value="" required
                                                pattern="\d{10}" title="Please enter a valid 10-digit phone number."
                                                oninput="limitInputLength(this)">


                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <input type="hidden" name="client_id" id="client_id">
                                    <label for="client_name" class="form-label">Customer Name <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="text" class="form-control" id="client_name" name="client_name"
                                        autocomplete="off" placeholder=" Client Name" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="email_address" class="form-label">Email Address <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="email" class="form-control" id="email_address" name="email_address"
                                        autocomplete="off" placeholder=" Email Address" value="" required>
                                    <div class="invalid-feedback">
                                        Please enter a valid email address.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="client_address" class="form-label">Address <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="text" class="form-control" id="client_address" name="client_address"
                                        autocomplete="off" placeholder=" Address" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="client_country_id" class="form-label">Country <code
                                            class="highlighter-rouge">*</code></label>
                                    <select class="form-select" id="client_country_id" name="client_country_id"
                                        required></select>
                                    <div class="invalid-feedback">
                                        Please select country.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="client_state_id" class="form-label">State <code
                                            class="highlighter-rouge">*</code></label>
                                    <select class="form-select" id="client_state_id" name="client_state_id"
                                        required></select>
                                    <div class="invalid-feedback">
                                        Please select state.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="client_city_id" class="form-label">City <code
                                            class="highlighter-rouge">*</code></label>
                                    <select class="form-select" id="client_city_id" name="client_city_id" required></select>
                                    <div class="invalid-feedback">
                                        Please select city.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <label for="pincode" class="form-label">Pincode <code
                                            class="highlighter-rouge">*</code></label>
                                    <input type="number" class="form-control" id="pincode" name="pincode"
                                        placeholder=" Pincode" value="" required pattern="\d{6}"
                                        title="Please enter a valid 6-digit pincode."
                                        oninput="limitPincodeInputLength(this)">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="mb-3">
                                    <div id="div_birthday_date">
                                        <label for="birthday_date" class="form-label">Birthday Date</label>
                                        <input type="text" class="form-control" placeholder="dd-mm-yyyy"
                                            data-date-format="dd-mm-yyyy" data-date-container='#div_birthday_date'
                                            data-provide="datepicker" data-date-autoclose="true" name="birthday_date"
                                            id="birthday_date" autocomplete="off">
                                        <small class="text-danger date-error"></small> <!-- Error message container -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div id="div_anniversary_date">
                                        <label for="anniversary_date" class="form-label">Anniversary Date</label>
                                        <input type="text" class="form-control" placeholder="dd-mm-yyyy"
                                            data-date-format="dd-mm-yyyy" data-date-container='#div_anniversary_date'
                                            data-provide="datepicker" data-date-autoclose="true" name="anniversary_date"
                                            id="anniversary_date" autocomplete="off">
                                        <small class="text-danger date-error"></small> <!-- Error message container -->
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-primary" id="clientreset" onclick="ResetClient();">Reset</button>
                    <button type="button" class="btn btn-primary" onclick="saveClient()" id="clientData">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection('content')
@section('custom-scripts')
    <script src="{{ asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    {{--
    <script src="{{ asset('assets/js/pages/phone-countrycode.js') }}"></script>
    <script src="{{ asset('assets/js/pages/phone_tel.js') }}"></script> --}}
    {{--
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@16.0.3/build/js/intlTelInput.js"></script> --}}
    {{--
    <script class="iti-load-utils" async="" src="https://cdn.jsdelivr.net/npm/intl-tel-input@16.0.3/build/js/utils.js">
    </script> --}}

    <script type="text/javascript">
        var csrfToken = $("[name=_token").val();
        var ajaxURLCompanyDetail = '{{ route('order.company.detail') }}'
        var ajaxURLBranchDetail = '{{ route('order.branch.detail') }}'
        var ajaxURLSerachCountry = '{{ route('order.select.country') }}'
        var ajaxURLSerachCountrycode = '{{ route('order.select.country.code') }}'
        var ajaxURLSerachState = '{{ route('order.select.state') }}'
        var ajaxURLSerachCity = '{{ route('order.select.city') }}'
        var ajaxURLOrderCalculation = '{{ route('order.calculation') }}'
        var ajaxURLOrderSave = '{{ route('order.save') }}'
        var reditectURL = '{{ route('users.order.index') }}';
        var checkphoneNO = '{{ route('check.phone.number') }}';

        var Is_Modal = {{ $data['is_modal'] == 1 ? 1 : 0 }};

        $(document).ready(function () {
            if (Is_Modal == 1) {
                $("#addClientModal").modal("show");
                $("#addClientModal").on("shown.bs.modal", function () {
                    $("#phone_number").focus();
                });
            }
            var today = new Date();
            today.setDate(today.getDate() - 1);

            $('#discount-icon').on('click', function () {
                $('#discountModal').modal('show');

                $('#discounttype').val('0');
                $('#discountvalues').val('0');

                $('#order_summary_order_total_discount').val('0');
            });

            $('#applyDiscountBtn').on('click', function () {
                console.log($('#discount_type').val());

                var discountType = $('#discount_type').val();
                var discountValue = $('#discountAmount').val();
                var clientName = $('#client_detail_name_text').html();
                var emailAddress = $('#client_detail_email_text').html();
                var phoneNumber = $('#client_detail_number_text').html();
                var clientAddress = $('#client_detail_address_line1_text').html();
                var pincode = $('#client_detail_pincode_text').html();
                var countryCode = $('#client_detail_countrycode_text').val();
                var countryCodeId = $('#client_detail_countrycode_id').val();
                var d_country = $('#client_detail_country_id').val();
                var d_state = $('#client_detail_state_id').val();
                var d_city = $('#client_detail_city_id').val();

                if (!discountValue || discountValue <= 0) {
                    toastr["error"]('Please enter a valid discount amount.');
                    return;
                }


                discountValue = parseFloat(discountValue);

                if (discountType === "0" && discountValue > 100) {
                    toastr["error"]('Percentage discount cannot exceed 100%.');
                    return;
                }

                var discountAmount = discountValue;
                var discountPercentage = 0;


                var orderItemsWithDiscount = orderItems.map(function (item) {
                    item.discount_type = $('#discount_type').val();
                    item.discount_value = 0;
                    item.discount_amount = 0;

                    return item;
                });

                var orderData = {
                    order_items: orderItemsWithDiscount,
                    discount_amount: discountAmount,
                    discount_type: discountType,
                    client_name: clientName,
                    email_address: emailAddress,
                    phone_number: phoneNumber,
                    client_address: clientAddress,
                    pincode: pincode,
                    country_code: countryCode,
                    country_code_id: countryCodeId,
                    d_country: d_country,
                    d_state: d_state,
                    d_city: d_city,
                };

                orderCalculationProcess();
            });

            $(document).ready(function () {
                var today = new Date();
                today.setHours(0, 0, 0, 0);

                $('#birthday_date, #anniversary_date').datepicker({
                    format: 'dd-mm-yyyy',
                    autoclose: true
                }).on('changeDate', function (e) {
                    validateDate($(this), e.date);
                });

                $('#birthday_date, #anniversary_date').on('change', function () {
                    var inputDate = $(this).val();
                    if (inputDate) {
                        var parts = inputDate.split('-');
                        var enteredDate = new Date(parts[2], parts[1] - 1, parts[0]);
                        validateDate($(this), enteredDate);
                    }
                });

                function validateDate(inputField, selectedDate) {
                    var errorElement = inputField.closest('.mb-3').find('.date-error');
                    selectedDate.setHours(0, 0, 0, 0);
                    if (selectedDate >= today) {
                        errorElement.text('Please select a past date.').show();
                        inputField.val('');
                    } else {
                        errorElement.hide();
                    }
                }

                $('.date-error').hide();
            });
        });

        $("#seaction_credit").hide();
        $("#seaction_order_items").hide();
        $("#product_qty").val(1);
        var channelPartnerObject = {};

        var currentProduct = {};
        var orderItems = [];
        var productIds = [];
        var shippingCost = 0;
        var itemIdCounter = 1;
        var itemArray = [];
        // var OrderArry = [];

        $('#clientData').on('click', function () {
            $('#clicntForm').addClass('was-validated');
        });

        $(document).ready(function () {
            var options = {
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
            };


            $('#formOrder').ajaxForm(options);
            setDefaultValue();
        });

        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);
            $("#clientData").html("Saving...");
            $("#clientData").prop("disabled", true);
            $("#clientreset").prop("disabled", true);

            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            $("#clientData").html("Save");
            $("#clientData").prop("disabled", false);
            $("#clientreset").prop("disabled", false);

            if (responseText['status'] == 1) {
                toastr["success"](responseText['msg']);
                orderItems = [];
                productIds = [];
                // orderCalculationProcess();
            } else if (responseText['status'] == 0) {
                toastr["error"](responseText['msg']);
            }
        }

        $("#btnCheckOut").click(function () {
            orderCalculationProcess();
            $("#modalOrderPreviw").modal('show');

        });

        $('#phone_number').on('keyup', function (e) {
            let phoneNumber = $(this).val();
            if (phoneNumber.length === 10) {
                let nextInput = $(this).closest('form')
                    .find(':input:visible:enabled')
                    .eq($(this).closest('form').find(':input:visible:enabled').index(this) + 1);

                if (nextInput.length) {
                    nextInput.focus();
                }

            }
            $.ajax({
                url: checkphoneNO,
                method: 'POST',
                data: {
                    "phone_number": $('#phone_number').val(),
                    _token: csrfToken
                },
                success: function (response) {
                    if (response.exists) {
                        $('#client_name').val(response['data']['customer']['customer_name']);
                        $('#email_address').val(response['data']['customer']['customer_email']);
                        $('#client_address').val(response['data']['customer'][
                            'shipping_address_line_1'
                        ]);
                        $('#pincode').val(response['data']['customer']['shipping_pincode']);
                        $('#div_anniversary_date').val(response['data']['customer'][
                            'anniversary_date'
                        ]);
                        $('#div_birthday_date').val(response['data']['customer']['birthday_date']);
                        $('#country_code').val(response['data']['customer']['phonecode']);

                        if (response['data']['customer']['phonecode']) {
                            var newOption = new Option(response['data']['customer']['phonecode'],
                                response['data']['customer']['phonecode'], false, false);
                            $('#country_code').append(newOption).trigger('change');
                            $("#country_code").val("" + response['data']['customer']['phonecode'] + "");
                            $('#country_code').trigger('change');
                        } else {
                            $('#country_code').val(null).trigger('change');
                        }

                        if (response['data']['country']) {
                            var newOption = new Option(response['data']['country']['name'], response[
                                'data']
                            ['customer']['shipping_country_id'], false, false);
                            $('#client_country_id').append(newOption).trigger('change');
                            $("#client_country_id").val("" + response['data']['customer'][
                                'shipping_country_id'
                            ] + "");
                            $('#client_country_id').trigger('change');
                        } else {
                            $('#client_country_id').val(null).trigger('change');
                        }

                        if (response['data']['state']) {
                            var newStateOption = new Option(response['data']['state']['name'], response[
                                'data']['customer']['shipping_state_id'], false, false);
                            $('#client_state_id').append(newStateOption).trigger('change');
                            $("#client_state_id").val("" + response['data']['customer'][
                                'shipping_state_id'
                            ] + "").trigger('change');
                        } else {
                            $('#client_state_id').val(null).trigger('change');
                        }
                        if (response['data']['city']) {
                            var newOption = new Option(response['data']['city']['name'], response[
                                'data'][
                                'customer'
                            ]['shipping_city_id'], false, false);
                            $('#client_city_id').append(newOption).trigger('change');
                            $("#client_city_id").val("" + response['data']['customer'][
                                'shipping_city_id'
                            ] +
                                "");
                            $('#client_city_id').trigger('change');
                        } else {
                            $('#client_city_id').val(null).trigger('change');
                        }
                    } else {
                        $('#client_name').val('');
                        $('#email_address').val('');
                        $('#client_address').val('');
                        $('#pincode').val('');
                        $('#div_anniversary_date').val('');
                        $('#div_birthday_date').val('');
                        // $('#country_code').val('');
                        $('#client_country_id').val(null).trigger('change');
                        $('#client_state_id').val(null).trigger('change');
                        $('#client_city_id').val(null).trigger('change');
                    }
                }
            });
            // }
        });

        // });

        function orderCalculationProcess() {

            itemArray = [];
            // OrderArry = [];
            if (orderItems.length > 0) {
                $("#btnCheckOut").prop('disabled', false);
            } else {
                $("#btnCheckOut").prop('disabled', true);
            }

            // console.log(orderItems);

            var discount_type = $('#discount_type').val();
            var discount_amount = $('#discountAmount').val();

            $('#discountModal').modal('hide');

            var requestData = {
                'shipping_cost': shippingCost,
                'order_items': orderItems,
                'item_id': itemIdCounter,
                'discount_type': discount_type,
                'discount_amount': discount_amount,
                'company_bill': $("#company_bill").val(),
                'client_name': $("#client_detail_name").val(),
                'email_address': $("#client_detail_email").val(),
                'phone_number': $('#client_detail_number').val(),
                'country_code': $('#client_detail_countrycode').val(),
                'client_address': $('#client_detail_address_line1').val(),
                'pincode': $('#client_detail_pincode').val(),
                'd_country': $('#client_detail_country_id').val(),
                'd_state': $('#client_detail_state_id').val(),
                'd_city': $('#client_detail_city_id').val(),
                'birthday_date': $("#client_detail_birthday_date").val(),
                'anniversary_date': $("#client_detail_anniversary_date").val(),

            }
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    "content-type": "application/json"
                },
                type: 'POST',
                url: ajaxURLOrderCalculation,
                data: JSON.stringify(requestData),
                success: function (resultData) {
                    // console.log('data' + resultData.order.discount_amount + 'aaa' + resultData.order.discount_percentage);

                    if (resultData?.order?.items) {
                        itemArray.push(resultData.order.items);
                    }
                    // OrderArry.push(resultData['order']);
                    // console.log(resultData.order.items);



                    $("#cartTbody").html('');

                    if (resultData['status'] == 1) {

                        // Handle the case when there are no items
                        if (resultData?.order?.items && resultData['order']['items'].length > 0) {

                            $("#modalOrderPreviw .modal-body").html(resultData['preview']);

                            for (var i = 0; i < resultData['order']['items'].length; i++) {
                                var htmlTR = '<tr>';
                                // htmlTR += '<td>';
                                // htmlTR += '<h5 class="font-size-14 text-truncate"></h5>';
                                // htmlTR += '<p class="mb-0" ><span class="fw-medium">' + (resultData['order'][
                                //     'items'
                                // ][i]['item_design_no'] || '') + '</span></p>';
                                // htmlTR += '</td>';
                                htmlTR += '<td>';
                                htmlTR += '<h5 class="font-size-14 text-truncate"></h5>';
                                htmlTR += '<p class="mb-0">';
                                htmlTR +=
                                    '<span class="fw-medium" style="display: inline-block; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;" title="' +
                                    (resultData['order']['items'][i]['item_design_no'] || '') + '">';
                                htmlTR += (resultData['order']['items'][i]['item_design_no'] || '').substring(0,
                                    10);
                                htmlTR += (resultData['order']['items'][i]['item_design_no']?.length > 10 ?
                                    '...' : '');
                                htmlTR += '</span>';
                                htmlTR += '</p>';
                                htmlTR += '</td>';
                                // htmlTR += '<td>';
                                // htmlTR += '<h5 class="font-size-14 text-truncate"></h5>';
                                // htmlTR += '<p class="mb-0" ><span class="fw-medium">' + (resultData['order'][
                                //     'items'
                                // ][i]['item_name'] || '') + '</span></p>';
                                // htmlTR += '</td>';
                                htmlTR += '<td>';
                                htmlTR += '<h5 class="font-size-14 text-truncate"></h5>';
                                htmlTR +=
                                    '<p class="mb-0" style="max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' +
                                    (resultData['order']['items'][i]['item_name'] || '') + '">';
                                // htmlTR += '<span class="fw-medium">' + (resultData['order']['items'][i]['item_name'] || '').substring(0, 10) + '</span>';
                                htmlTR += '<span class="fw-medium">' + (resultData['order']['items'][i][
                                    'item_name'
                                ] && resultData['order']['items'][i]['item_name'].length > 10 ?
                                    resultData['order']['items'][i]['item_name'].substring(0, 10) + '...' :
                                    resultData['order']['items'][i]['item_name']) + '</span>';

                                htmlTR += '</p>';
                                htmlTR += '</td>';

                                htmlTR += '<td>';
                                htmlTR += '' + numberWithCommas(resultData['order']['items'][i][
                                    'item_gold_ct'
                                ] || 0);
                                htmlTR += '</td>';
                                htmlTR += '<td>';
                                htmlTR += '' + numberWithCommas(resultData['order']['items'][i][
                                    'item_diamond_ct'
                                ] || 0);
                                htmlTR += '</td>';
                                htmlTR += '<td>';
                                htmlTR += '' + numberWithCommas(resultData['order']['items'][i]['grm'] || 0);
                                htmlTR += '</td>';
                                htmlTR += '<td>';
                                htmlTR += '<div class="me-3" style="width: 120px">';
                                htmlTR += '<input type="hidden" value="' + resultData['order']['items'][i][
                                    'item_id'
                                ] +
                                    '" name="input_product_id[]"><input type="text" class="input_product_id" style="padding:0px 0px !important;justify-items: center;" value="' +
                                    resultData['order']['items'][i]['qty'] + '" id="input_product_id_' +
                                    resultData['order']['items'][i]['item_id'] + '" name="input_qty[]">';
                                htmlTR += '</div>';
                                htmlTR += '</td>';
                                htmlTR += '<td>';
                                htmlTR += '' + numberWithCommas(resultData['order']['items'][i]['mrp'] || 0);
                                htmlTR += '</td>';

                                htmlTR += '<td>';
                                // htmlTR += '' + numberWithCommas(resultData['order']['items'][i]['item_vat'] || 0);
                                htmlTR += '' + numberWithCommas(resultData['order']['items'][i][
                                    'igst_amount'
                                ] || 0);
                                htmlTR += '</td>';

                                htmlTR += '<td>';
                                // htmlTR += '' + numberWithCommas(resultData['order']['items'][i]['item_vat_gross_amt'] || 0);
                                htmlTR += '' + numberWithCommas(resultData['order']['items'][i][
                                    'item_subtotal'
                                ] || 0);
                                htmlTR += '</td>';

                                htmlTR += '<td>';
                                htmlTR += '<a href="javascript:void(0);" onclick="editProduct(' + (resultData[
                                    'order']['items'][i]['item_id'] || '') +
                                    ')" class="action-icon text-danger" style="margin-right: 10px;"><i class="fas fa-edit font-size-18"></i></a>';

                                htmlTR += '<a href="javascript:void(0);" onclick="removeProduct(' + (resultData[
                                    'order']['items'][i]['item_id'] || '') +
                                    ')" class="action-icon text-danger"><i class="fas fa-trash-alt font-size-18"></i></a>';
                                htmlTR += '</td>';
                                htmlTR += '</tr>';
                                $("#cartTbody").append(htmlTR);
                            }

                            $(".input_product_id").TouchSpin({
                                min: 1,
                                max: 1000,
                            }).on('change', function () {
                                // console.log($(this).val());
                                var newQty = $(this).val();
                                var selectedProductId = $(this).attr("id");
                                updateCartQty(newQty, selectedProductId);
                            });

                        } else {
                            // $("#cartTbody").html(
                            //     '<tr><td colspan="9" class="text-center">No items found in the order.</td></tr>'
                            //     );
                        }

                        const order = resultData?.order;
                        // Update the summary values
                        if (order) {
                            // $("#order_summary_order_total_mrp").html(numberWithCommas(resultData['order'][
                            //     'total_item_vat_gross_amt'
                            // ] || 0));
                            $("#order_summary_order_total_mrp").html(numberWithCommas(resultData['order'][
                                'total_amount'
                            ] || 0));
                            // Update the discount percentage in the order summary
                            // $("#order_summary_order_total_discount").html(numberWithCommas(resultData['order']['discount_percentage'] || 0));

                            $("#order_summary_order_total_discount").html(
                                parseFloat(resultData['order']['discount_percentage']).toFixed(2) +
                                " % <br>" + numberWithCommas(resultData['order']['discount_amount']) + " ₹"
                            );

                            $('#discountvalues').val(resultData['order']['discount_amount'])
                            $('#discountPer').val(parseFloat(resultData['order']['discount_percentage'])
                                .toFixed(2))

                            // $("#order_summary_order_vat_value").html(numberWithCommas(resultData['order'][
                            //     'total_item_vat'
                            // ] || 0));
                            $("#order_summary_order_gst_value").html(numberWithCommas(resultData['order'][
                                'GSTAmount'
                            ] || 0));
                            $("#order_summary_order_gst_percentage").html(numberWithCommas(resultData['order'][
                                'gst_percentage'
                            ] || 0));
                            // $("#order_summary_order_gst_value").html(numberWithCommas(resultData['order'][
                            //     'gst_tax'
                            // ] || 0));
                            // var totalItemBillAmount = resultData['order']['total_item_bill_amt'] || 0;
                            // var discountAmount = parseFloat($("#order_summary_order_total_discount").text()) || 0;
                            // var payableTotal = totalItemBillAmount - discountAmount;

                            $("#order_summary_order_payable_total").html(numberWithCommas(resultData['order'][
                                'total_item_bill_amt'
                            ] || 0));
                            // $("#order_summary_order_payable_total").html(numberWithCommas(payableTotal));
                            $("#verify_payable_total").val(resultData['order']['Net_Amount'] || '');
                        }

                    } else {
                        toastr["error"](resultData['msg']);
                    }

                }
            });
        }


        // $(document).delegate('.input_product_id', 'change', function () {


        //     var newQty = $(this).val();
        //     var selectedProductId = $(this).attr("id");
        //     updateCartQty(newQty, selectedProductId)



        // });

        // $(document).delegate('.input_product_id', 'keyup', function () {


        //     var newQty = $(this).val();
        //     var selectedProductId = $(this).attr("id");
        //     updateCartQty(newQty, selectedProductId)



        // });

        $(document).on('change', '.input_product_id', function () {
            var newQty = $(this).val();
            var selectedProductId = $(this).attr("id");

            var inputElement = $(this);

            if (isNaN(newQty) || newQty <= 0) {
                toastr["error"]("Invalid quantity. Please enter a valid number.");
                return;
            }

            setTimeout(function () {
                updateCartQty(newQty, selectedProductId);

                inputElement.focus();
            }, 250);
        });

        $(document).on('keyup', '.input_product_id', function () {
            var newQty = $(this).val();
            var selectedProductId = $(this).attr("id");

            var inputElement = $(this);

            if (isNaN(newQty) || newQty <= 0) {
                toastr["error"]("Invalid quantity. Please enter a valid number.");
                return;
            }

            setTimeout(function () {
                updateCartQty(newQty, selectedProductId);
                inputElement.focus();
            }, 250);
        });

        function updateCartQty(newQty, selectedProductId) {
            var selectedProductIdPieces = selectedProductId.split("_");
            var changeProductId = selectedProductIdPieces[selectedProductIdPieces.length - 1];

            var inputElement = $("#" + selectedProductId);
            var currentValue = inputElement.val();

            for (var i = 0; i < orderItems.length; i++) {
                if (orderItems[i]['item_id'] == changeProductId) {
                    orderItems[i]['qty'] = parseFloat(newQty);
                    break;
                }
            }

            orderCalculationProcess();

            inputElement.focus();

            if (newQty !== currentValue) {
                inputElement.val(newQty);
            }
        }



        // function updateCartQty(newQty, selectedProductId) {

        //     var selectedProductIdPieces = selectedProductId.split("_");
        //     var changeProductId = selectedProductIdPieces[selectedProductIdPieces.length - 1];

        //     var inputElement = $("#" + selectedProductId);
        //     var currentValue = inputElement.val();

        //     for (var i = 0; i < orderItems.length; i++) {
        //         if (orderItems[i]['item_id'] == changeProductId) {
        //             orderItems[i]['qty'] = parseFloat(newQty);
        //             break;
        //             // console.log(newQty);
        //         }

        //     }
        //     orderCalculationProcess();

        //     inputElement.focus();

        // if (newQty !== currentValue) {
        //     inputElement.val(newQty);
        // }

        // }


        let editingItemId = null;

        function editProduct(itemId) {
            const item = orderItems.find(i => i.item_id == itemId);
            if (item) {
                editingItemId = itemId;
                $("#item_design_no").val(item.item_design_no || "");
                $("#item_name").val(item.item_name || "");
                $("#item_gold_ct").val(parseFloat(item.item_gold_ct) || 0);

                // const goldValue = String(item.item_gold_ct) || "";
                // $("#item_gold_ct").val(goldValue);
                // if ($('#item_gold_ct').hasClass('select2-hidden-accessible')) {
                //     $('#item_gold_ct').trigger('change');
                // }



                $("#item_diamond_ct").val(parseFloat(item.item_diamond_ct) || 0);
                $("#item_gram").val(parseFloat(item.item_gram) || 0);
                $("#item_quantity").val(parseInt(item.qty) || 1);
                $("#item_price").val(parseFloat(item.item_price) || 0);
                $('#item_id').val(item.item_id || 0);

                $("#addItemModal").modal('show');
            } else {
                toastr["error"]("Item data not found for editing.");
            }
        }


        function removeProduct(productId) {
            Swal.fire({
                title: "Are you sure?",
                text: "Do you really want to delete this Item?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    for (var i = 0; i < orderItems.length; i++) {
                        if (orderItems[i]['item_id'] == productId) {
                            orderItems.splice(i, 1);
                            break;
                        }
                    }
                    $('#input_product_id_' + productId).closest('tr').remove();
                    orderCalculationProcess();
                }
            });
        }


        $(document).delegate('#btnPlaceOrder', 'click', function () {



            $("#remark").val($("#previewRemark").val());

            $("#btnPlaceOrder").prop('disabled', true);
            $("#btnPlaceOrderText").text("Placing Order...");
            $("#btnPlaceOrderCancel").prop('disabled', true);
            $("#btnPlaceOrderLoader").show();



            // $("#formOrder").submit();

        });

        $(document).ready(function () {
            $("#company_bill").select2({
                allowClear: true, ajax: {
                    url: ajaxURLCompanyDetail,
                    dataType: 'json',
                    delay: 0,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;


                        var results = data.results.map(function (company) {
                            return {
                                id: company.id,
                                text: company.text
                            };
                        });

                        if (results.length > 0) {
                            var firstCompany = results[0];
                            $("#company_bill").append(new Option(firstCompany.text, firstCompany.id,
                                true, true)).trigger('change');
                        }

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                placeholder: 'Seen Company Details',
            }).on('change', function (e) {
                $('#clicntForm').trigger("reset");
                $('#branch_address_show').removeClass('d-none');
                var id = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: ajaxURLBranchDetail + "?id=" + id,
                    success: function (resultData) {
                        // console.log(resultData);
                        if (resultData['status'] == 1 && resultData['data'] && resultData[
                            'data'].length >
                            0) {

                            $('#branch_name_text').text(resultData['data'][0]['name']);

                            $('#branch_address_line1_text').text(resultData['data'][0][
                                'address_line_1'
                            ]);
                            $('#branch_address_line1_text').val(resultData['data'][0][
                                'address_line_1'
                            ]);
                            $('#branch_id').val(resultData['data'][0]['id']);

                            $('#branch_address_line2_text').text(resultData['data'][0][
                                'address_line_2'
                            ] +
                                ",  " +
                                resultData['data'][0]['area']);
                            $('#branch_pincode_text').text(resultData['data'][0]['pincode']);
                            $('#branch_country_id_text').text(resultData['data'][0][
                                'country_name'
                            ]);
                            $('#branch_state_id_text').text(resultData['data'][0][
                                'state_name'
                            ]);

                            $('#branch_city_id').text(resultData['data'][0]['city_name']);

                            var orderItems = [];
                            var productIds = [];
                        } else {
                            $('#branch_address_line1_text').text(
                                'No branch details found for the selected company.');
                            $('#branch_id').val('');
                        }
                    }
                })
            });

            $.ajax({
                url: ajaxURLCompanyDetail,
                dataType: 'json',
                success: function (response) {
                    if (response.results.length > 0) {
                        var firstCompany = response.results[0];
                        $("#company_bill").append(new Option(firstCompany.text, firstCompany.id, true,
                            true)).trigger('change');
                    }
                }
            });
        });

        $('#country_code').select2({
            allowClear: true, allowClear: true,
            ajax: {
                url: ajaxURLSerachCountrycode,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    // Modify the data.results array to display phonecode
                    var results = data.results.map(function (country_code) {
                        return {
                            id: country_code.id,
                            text: '+' + country_code.phonecode
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false,

            },
            placeholder: 'please select',
            dropdownParent: $("#addClientModal")
        })

        function setDefaultValue() {
            $.ajax({
                url: ajaxURLSerachCountrycode,
                dataType: 'json',
                success: function (data) {
                    if (data.results.length > 0) {
                        $('#country_code').append(new Option('+91', '99', true, true)).trigger('change');
                        // console.log($('#country_code').text());

                    }
                }
            });
        }


        $('#client_country_id').select2({
            allowClear: true, allowClear: true,
            ajax: {
                url: ajaxURLSerachCountry,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    // Modify the data.results array to display both name and translate_name
                    var results = data.results.map(function (country) {
                        return {
                            id: country.id,
                            text: country.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'please select',
            dropdownParent: $("#addClientModal")
        });

        $('#client_country_id').on('change', function () {
            $('#client_state_id').val(null).trigger('change');
            $('#client_city_id').val(null).trigger('change');
        });

        $('#client_state_id').select2({
            allowClear: true, allowClear: true,
            ajax: {
                url: ajaxURLSerachState,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function () {
                            return $('#client_country_id').val();
                        }
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    // Modify the data.results array to display both name and translate_name
                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'please select',
            dropdownParent: $("#addClientModal")
        });

        $('#client_state_id').on('change', function () {
            $('#client_city_id').val(null).trigger('change');
        });

        $('#client_city_id').select2({
            allowClear: true, allowClear: true,
            ajax: {
                url: ajaxURLSerachCity,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function () {
                            return $('#client_country_id').val();
                        },
                        "state_id": function () {
                            return $('#client_state_id').val();
                        }
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    // Modify the data.results array to display both name and translate_name
                    var results = data.results.map(function (city) {
                        return {
                            id: city.id,
                            text: city.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'please select',
            dropdownParent: $("#addClientModal")
        });

        function ItemReset() {
            $('#itemForm').trigger('reset');
        }

        function ResetClient() {
            $('#clicntForm').trigger("reset");
            $("#client_country_id").empty().trigger('change');
            $("#client_state_id").empty().trigger('change');
            $("#client_city_id").empty().trigger('change');
            $("#clicntForm").removeClass('was-validated');
            $("#clientData").html("Save");
            $("#clientData").prop("disabled", false);
            $("#clientreset").prop("disabled", false);

        }

        function saveClient() {

            var requiredFields = [
                "client_name", "email_address", "phone_number", "country_code", "pincode", "client_city_id",
                "client_state_id", "client_country_id", "client_address",
            ];

            var isAnyEmpty = false;

            requiredFields.forEach(function (field) {
                if ($("#" + field).val() === "") {
                    isAnyEmpty = true;
                    $("#" + field).addClass("is-invalid");
                } else {
                    $("#" + field).removeClass("is-invalid");
                }
            });

            if (isAnyEmpty) {
                toastr.error("Please fill in all required fields.");
            } else {

                var emailAddress = $('#email_address').val();
                var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                var phoneNumber = $('#phone_number').val();

                if (!emailPattern.test(emailAddress)) {
                    $('#email_address').addClass("is-invalid"); // Add the invalid class to show error
                    return;
                } else {
                    $('#email_address').removeClass("is-invalid"); // Remove the invalid class if valid
                }

                var phonePattern = /^\d{10}$/;
                if (!phonePattern.test(phoneNumber)) {
                    $('#phone_number').addClass("is-invalid");
                    toastr.error("Please enter a valid 10-digit phone number.");
                    return;
                } else {
                    $('#phone_number').removeClass("is-invalid");
                }

                var pincode = $('#pincode').val();
                var pincodePattern = /^\d{6}$/;

                if (!pincodePattern.test(pincode)) {
                    $('#pincode').addClass("is-invalid");
                    toastr.error("Please enter a valid 6-digit pincode.");
                    return;
                } else {
                    $('#pincode').removeClass("is-invalid");
                }
                var clientName = $('#client_name').val();
                var emailAddress = $('#email_address').val();
                var phoneNumber = $('#phone_number').val();
                var countryCode = $('#country_code').text();
                var countryCode_id = $('#country_code').val();
                var clientAddress = $('#client_address').val();
                var pincode = $('#pincode').val();
                var client_city_id = $('#client_city_id').val();
                var client_state_id = $('#client_state_id').val();
                var client_country_id = $('#client_country_id').val();
                var selectedValue = $("#company_bill").val();
                var birthdayDate = $('#birthday_date').val();
                var anniversaryDate = $("#anniversary_date").val();

                if (selectedValue === "") {
                    toastr.error("select your company");
                }
                if (clientName === "" || emailAddress === "" || phoneNumber === "" || client_country_id === "") {
                    toastr.error("Please fill in all required fields.");
                    return; // Exit the function if validation fails
                }
                // If all fields are filled, proceed with saving the client data
                $('#client_detail_name').val(clientName);
                $('#client_detail_email').val(emailAddress);
                $('#client_detail_number').val(phoneNumber);
                $('#client_detail_address_line1').val(clientAddress);
                $('#client_detail_pincode').val(pincode);
                $('#client_detail_countrycode').val($('#country_code').val());
                $('#client_detail_country_id').val($('#client_country_id').val());
                $('#client_detail_state_id').val($('#client_state_id').val());
                $('#client_detail_city_id').val($('#client_city_id').val());
                $('#client_detail_countrycode_text').val($("#country_code option:selected").text());
                $('#client_detail_countrycode_id').val($("#country_code option:selected").val());
                $('#client_detail_city_text').val($("#client_city_id option:selected").text());
                $('#client_detail_state_text').val($("#client_state_id option:selected").text());
                $('#client_detail_country_text').val($("#client_country_id option:selected").text());
                $('#client_detail_birthday_date').val(birthdayDate);
                $('#client_detail_anniversary_date').val(anniversaryDate);

                $('#client_detail_name_text').html(clientName);
                $('#client_detail_email_text').html(emailAddress);
                $('#client_detail_number_text').html(phoneNumber);
                $('#client_detail_address_line1_text').html(clientAddress);
                $('#client_detail_pincode_text').html(pincode);
                $('#client_detail_countrycode_text').html($('#client_detail_countrycode_text').val())
                $('#client_detail_countrycode_id').html($('#client_detail_countrycode_id').val())

                // $('#client_detail_country_text_').html($('#client_detail_country_text').val())
                // $('#client_detail_state_text_').html($('#client_detail_state_text').val())
                // $('#client_detail_city_text_').html($('#client_detail_city_text').val())


                var countryStateCity = [$('#client_detail_country_text').val(), $('#client_detail_state_text').val(), $(
                    '#client_detail_city_text').val()].filter(Boolean).join(', ');

                $('#client_detail_country_state_city_text').text(countryStateCity);
                $('#client_detail_birthday_date_text').html(birthdayDate);
                $('#client_detail_anniversary_date_text').html(anniversaryDate);

                $("#client_detail_address_show").removeClass("d-none");
                $("#clientEditeButton").removeClass("d-none");
                resetClinetInput();

                $("#addClientModal").modal("hide");
                $("#addItemModal").modal("show");
                $("#addItemModal").on("shown.bs.modal", function () {
                    $("#item_design_no").focus();
                });

                orderItems = [];
                productIds = [];
                $('#seaction_order_items').show();
            }

        }
        // $('#addItemModal').on('show.bs.modal', function (e) {
        function openAddItemModal() {

            $('#itemForm').trigger('reset');
            $('#item_gold_ct').val('');
            $('#item_quantity').val('');
            $('#item_gram').val('');
            $('#item_diamond_ct').val('');
            $('#item_name').val('');
            $('#item_design_no').val('');
            $("#item_price").val('');
            $('#item_gold_ct').removeClass('is-invalid');

            // Show the modal again after reset
            $("#addItemModal").modal('show');

        }


        // $("#itemSave").click(function () {

        //     var itemDesignNo = $("#item_design_no").val();
        //     var itemName = $("#item_name").val();
        //     var itemQuantity = $("#item_quantity").val();
        //     var itemGram = $("#item_gram").val();
        //     var itemPrice = $("#item_price").val();
        //     var itemDiamondCt = $("#item_diamond_ct").val();

        //     if (itemDesignNo.length > 20) {
        //         toastr.error("Design Number cannot exceed 20 digits.");
        //         $("#item_design_no").addClass("is-invalid");
        //         return;
        //     } else {
        //         $("#item_design_no").removeClass("is-invalid");
        //     }

        //     if (itemName.length > 200) {
        //         toastr.error("Item Name cannot exceed 200 characters.");
        //         $("#item_name").addClass("is-invalid");
        //         return;
        //     } else {
        //         $("#item_name").removeClass("is-invalid");
        //     }

        //     if (!/^\d+$/.test(itemQuantity)) {
        //         toastr.error("Quantity must be a whole number (no decimals).");
        //         $("#item_quantity").addClass("is-invalid");
        //         return;
        //     } else {
        //         $("#item_quantity").removeClass("is-invalid");
        //     }

        //     if (!/^\d+(\.\d{1,2})?$/.test(itemGram)) {
        //         toastr.error("Gram must be a number with up to 2 decimal places.");
        //         $("#item_gram").addClass("is-invalid");
        //         return;
        //     } else {
        //         $("#item_gram").removeClass("is-invalid");
        //     }

        //     if (!/^\d+(\.\d{1,2})?$/.test(itemDiamondCt)) {
        //         toastr.error("Diamond CT must be a number with up to 2 decimal places.");
        //         $("#item_diamond_ct").addClass("is-invalid");
        //         return;
        //     } else {
        //         $("#item_diamond_ct").removeClass("is-invalid");
        //     }

        //     if (!/^\d+(\.\d{1,3})?$/.test(itemPrice)) {
        //         toastr.error("Price must be a number with up to 3 decimal places.");
        //         $("#item_price").addClass("is-invalid");
        //         return;
        //     } else {
        //         $("#item_price").removeClass("is-invalid");
        //     }

        //     var requiredFields = [
        //         "item_design_no",
        //         "item_name",
        //         "item_gold_ct",
        //         "item_diamond_ct",
        //         "item_gram",
        //         "item_quantity",
        //         "item_price"
        //     ];

        //     var isAnyEmpty = false;
        //     requiredFields.forEach(function (field) {
        //         if ($("#" + field).val() === "") {
        //             isAnyEmpty = true;
        //             $("#" + field).addClass("is-invalid");
        //         } else {
        //             $("#" + field).removeClass("is-invalid");
        //         }
        //     });

        //     if (isAnyEmpty) {
        //         toastr.error("Please fill in all required fields.");
        //     } else {
        //         processItemSave();

        //         $('#itemForm').trigger('reset');
        //         $('#item_quantity').empty().val('');
        //         $('#item_gram').empty().val('');
        //         $('#item_diamond_ct').empty().val('');
        //         // $('#item_gold_ct').empty().val('');
        //         $('#item_gold_ct').val('');
        //         $('#item_name').empty().val('');
        //         $('#item_design_no').empty().val('');
        //         $("#item_price").empty().val('');
        //     }
        // });

        var is_add_new_items = 0;

        function validateItemForm() {
            var validationError = false;
            var isAnyEmpty = false;

            var requiredFields = [
                "item_design_no", "item_name", "item_gold_ct", "item_diamond_ct", "item_gram", "item_quantity",
                "item_price"
            ];

            requiredFields.forEach(function (field) {
                if ($("#" + field).val().trim() === "") {
                    isAnyEmpty = true;
                    $("#" + field).addClass("is-invalid");
                } else {
                    $("#" + field).removeClass("is-invalid");
                }
            });

            if (isAnyEmpty) {
                toastr.error("Please fill in all required fields.");
                return false;
            }

            var itemDesignNo = $("#item_design_no").val();
            var itemName = $("#item_name").val();
            var itemQuantity = $("#item_quantity").val();
            var itemGram = $("#item_gram").val();
            var itemPrice = $("#item_price").val();
            var itemDiamondCt = $("#item_diamond_ct").val();

            if (itemDiamondCt === "0" || itemQuantity === "0" || itemPrice === "0" || itemGram === "0") {
                toastr.error("Diamond CT, Quantity, Gram and Price cannot be 0.");
                if (itemDiamondCt === "0") $("#item_diamond_ct").addClass("is-invalid");
                if (itemQuantity === "0") $("#item_quantity").addClass("is-invalid");
                if (itemPrice === "0") $("#item_price").addClass("is-invalid");
                if (itemGram === "0") $("#item_gram").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_diamond_ct, #item_quantity, #item_price, #item_gram").removeClass("is-invalid");
            }

            if (itemDesignNo.length > 20) {
                toastr.error("Design Number cannot exceed 20 digits.");
                $("#item_design_no").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_design_no").removeClass("is-invalid");
            }

            if (itemName.length > 200) {
                toastr.error("Item Name cannot exceed 200 characters.");
                $("#item_name").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_name").removeClass("is-invalid");
            }

            if (!/^\d+$/.test(itemQuantity)) {
                toastr.error("Quantity must be a whole number (no decimals).");
                $("#item_quantity").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_quantity").removeClass("is-invalid");
            }

            if (!/^\d+(\.\d{1,2})?$/.test(itemGram)) {
                toastr.error("Gram must be a number with up to 2 decimal places.");
                $("#item_gram").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_gram").removeClass("is-invalid");
            }

            if (!/^\d+(\.\d{1,2})?$/.test(itemDiamondCt)) {
                toastr.error("Diamond CT must be a number with up to 2 decimal places.");
                $("#item_diamond_ct").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_diamond_ct").removeClass("is-invalid");
            }

            if (!/^\d+(\.\d{1,3})?$/.test(itemPrice)) {
                toastr.error("Price must be a number with up to 3 decimal places.");
                $("#item_price").addClass("is-invalid");
                validationError = true;
            } else {
                $("#item_price").removeClass("is-invalid");
            }

            return !validationError;
        }

        function resetItemForm() {
            $('#itemForm').trigger('reset');
            $('#item_quantity, #item_gram, #item_diamond_ct, #item_gold_ct, #item_name, #item_design_no, #item_price').val(
                '').removeClass("is-invalid");
        }

        $("#itemSave, #addNewItem").click(function () {
            is_add_new_items = $(this).attr('id') === "addNewItem" ? 1 : 0;

            if (!validateItemForm()) {
                return;
            }

            if (is_add_new_items === 0) {
                processItemSave();
            } else {
                $("#addItemModal").modal('hide');

                var currentProduct = {
                    item_id: editingItemId || itemIdCounter,
                    item_name: $("#item_name").val(),
                    item_design_no: $("#item_design_no").val(),
                    item_gold_ct: $("#item_gold_ct").val(),
                    item_diamond_ct: $("#item_diamond_ct").val(),
                    qty: $("#item_quantity").val(),
                    item_gram: $("#item_gram").val(),
                    item_price: $("#item_price").val(),
                };

                if (currentProduct['qty'] !== "" && !isNaN(currentProduct['qty']) && parseFloat(currentProduct[
                    'qty']) > 0) {
                    if (editingItemId) {
                        const index = orderItems.findIndex(i => i.item_id === editingItemId);
                        if (index !== -1) {
                            orderItems[index] = currentProduct;
                        }
                        editingItemId = null;
                    } else {
                        orderItems.push(currentProduct);
                        itemIdCounter++;
                    }
                    orderCalculationProcess();
                } else {
                    toastr.error("Invalid Product Quantity");
                    return;
                }
            }

            resetItemForm();

            if (is_add_new_items === 1) {
                setTimeout(function () {
                    $("#addItemModal").modal('show');
                }, 500);
            }
        });




        // $('#addItemModal').on('shown.bs.modal', function(e) {
        //     $("#itemForm").focus();
        //     $('#itemForm').trigger('reset');
        // })
        function processItemSave() {
            $("#addItemModal").modal('hide');

            var currentProduct = {
                item_id: editingItemId || itemIdCounter,
                item_name: $("#item_name").val(),
                item_design_no: $("#item_design_no").val(),
                item_gold_ct: $("#item_gold_ct").val(),
                item_diamond_ct: $("#item_diamond_ct").val(),
                qty: $("#item_quantity").val(),
                item_gram: $("#item_gram").val(),
                item_price: $("#item_price").val(),




            };

            if (currentProduct['qty'] !== "") {
                if (!isNaN(currentProduct['qty']) && parseFloat(currentProduct['qty']) > 0) {
                    if (editingItemId) {

                        const index = orderItems.findIndex(i => i.item_id === editingItemId);
                        if (index !== -1) {
                            orderItems[index] = currentProduct;
                        }
                        editingItemId = null;
                    } else {
                        orderItems.push(currentProduct);
                        itemIdCounter++; // Increment the counter to ensure unique item IDs
                    }
                    orderCalculationProcess();

                } else {
                    toastr["error"]("Invalid Product Quantity");
                }
            } else {
                toastr["error"]("Invalid Quantity");
            }
        }

        $('#btnPlaceOrder').click(function () {

            var clientName = $('#client_detail_name').val();
            var emailAddress = $('#client_detail_email').val();
            var phoneNumber = $('#client_detail_number').val();
            var countryCode = $('#client_detail_countrycode_text').val();
            var countryCode_id = $('#client_detail_countrycode_id').val();
            var clientAddress = $('#client_detail_address_line1').val();
            var clientCountryId = $('#client_detail_country_id').val();
            var clientStateId = $('#client_detail_state_id').val();
            var clientCityId = $('#client_detail_city_id').val();
            var pincode = $('#client_detail_pincode').val();
            var brancID = $('#branch_id').val();
            var companyID = $('#company_bill').val();
            var birthdayDate = $('#client_detail_birthday_date').val();
            var anniversaryDate = $('#client_detail_anniversary_date').val();
            var discount_amount = $('#discountvalues').val();
            var discount_per = $('#discountPer').val();

            var requestData = {
                "_token": csrfToken,
                "data": {
                    "client_name": clientName,
                    "client_email_address": emailAddress,
                    "client_phone_number": phoneNumber,
                    "client_phone_countrycode": countryCode,
                    "client_detail_countrycode_id": countryCode_id,
                    "client_address": clientAddress,
                    "client_country": clientCountryId,
                    "client_state": clientStateId,
                    "client_city": clientCityId,
                    "client_pincode": pincode,
                    "client_birthday_date": birthdayDate,
                    "client_anniversary_date": anniversaryDate,
                    "discount_amount": discount_amount,
                    "discount_per": discount_per,
                    "company": {
                        "id": companyID
                    },
                    "branch": [{
                        "id": brancID
                    }],
                    "items": itemArray,
                    // "order": OrderArry,
                }
            };
            $.ajax({
                type: 'post',
                url: ajaxURLOrderSave,
                data: requestData,
                success: function (resultData) {
                    if (resultData['status'] == 1) {
                        toastr['success'](resultData['msg']);
                        $("#modalOrderPreviw").modal('hide');
                        window.location = reditectURL

                    } else if (resultData['status'] == 0) {
                        toastr['error'](resultData['msg']);
                        $("#btnPlaceOrder").prop('disabled', false);
                        $("#btnPlaceOrder").html("Place Order...");
                        $("#btnPlaceOrderCancel").prop('disabled', false);
                        $("#btnPlaceOrderLoader").hide();

                        // window.location = reditectURL
                    }
                }
            });
        });


        $("#clientEditeButton").click(function () {
            resetClinetInput()
            $("#addClientModal").modal("show");
            var clientName = $("#client_detail_name_text").text();
            var email = $("#client_detail_email_text").text();
            var phoneNumber = $("#client_detail_number_text").text();
            var address = $("#client_detail_address_line1_text").text();
            var pincode = $("#client_detail_pincode_text").text();
            // var birthday_date = $("#client_detail_birthday_date_text").text();
            // var anniversary_date = $("#client_detail_anniversary_date_text").text();
            var birthday_date = $("#client_detail_birthday_date").val();
            var anniversary_date = $("#client_detail_anniversary_date").val();


            $("#client_name").val(clientName);
            $("#email_address").val(email);
            $("#phone_number").val(phoneNumber);
            $("#client_address").val(address);
            $("#pincode").val(pincode);
            // $("#birthday_date").val(birthday_date);
            // $("#anniversary_date").val(anniversary_date);
            $("#birthday_date").val(birthday_date).datepicker("update");
            $("#anniversary_date").val(anniversary_date).datepicker("update");

            var defaultCountryValue = $('#client_detail_country_id')
                .val();
            var defaultCountryText = $('#client_detail_country_text')
                .val();

            var defaultStateValue = $('#client_detail_state_id')
                .val();
            var defaultStateText = $('#client_detail_state_text')
                .val();

            var defaultCityValue = $('#client_detail_city_id').val();
            var defaultCityText = $('#client_detail_city_text').val();


            if (defaultCountryValue != null) {
                var newOption = new Option(defaultCountryText, defaultCountryValue, false, false);
                $('#client_country_id').append(newOption).trigger('change');
                $("#client_country_id").val("" + defaultCountryValue + "");
                $('#client_country_id').trigger('change');
            }

            if (defaultStateValue != null) {
                var newOption = new Option(defaultStateText, defaultStateValue, false, false);
                $('#client_state_id').append(newOption).trigger('change');
                $("#client_state_id").val("" + defaultStateValue + "");
                $('#client_state_id').trigger('change');
            }

            if (defaultCityValue != null) {
                var newOption = new Option(defaultCityText, defaultCityValue, false, false);
                $('#client_city_id').append(newOption).trigger('change');
                $("#client_city_id").val("" + defaultCityValue + "");
                $('#client_city_id').trigger('change');
            }


        });

        function resetClinetInput() {
            $('#clicntForm').trigger("reset");
            $('#client_name').val('');
            $('#email_address').val('');
            $('#phone').val('');
            $('#client_address').val('');
            $('#pincode').val('');
            $('#client_city_id').empty().trigger('change');
            $('#client_state_id').empty().trigger('change');
            $('#client_country_id').empty().trigger('change');
            $('#birthday_date').empty().trigger('change');
            $('#anniversary_date').empty().trigger('change');

        }

        $('#addClientModal').on('hidden.bs.modal', function () {
            $('#clicntForm')[0].reset();
            $('#client_country_id').val('');
            $('#client_state_id').val('');
            $('#client_city_id').val('');
            $('.is-invalid').removeClass('is-invalid');
            resetClinetInput()
        });

        $(function () {
            $(".product-qty-cls").change(function () {

                if ($(this).val() > 1000) {
                    $(this).val(1000);
                } else if ($(this).val() < 1) {
                    $(this).val(1);
                }
            });
        });



        document.addEventListener("keydown", function (event) {
            if (event.ctrlKey && event.key.toLowerCase() === "s") {
                event.preventDefault();
                if (document.getElementById("modalOrderPreviw").classList.contains("show")) {
                    document.getElementById("btnPlaceOrder").click();
                    clientSaved = true;
                } else {
                    document.getElementById("btnCheckOut").click();
                }
            }


        });

        $(document).ready(function () {
            // Move focus from country to state dropdown
            $('#client_country_id').on('change', function () {
                let countryId = $(this).val();
                if (countryId) {
                    $('#client_state_id').focus();
                    setTimeout(() => {
                        $('#client_state_id').select2('open'); // Ensure dropdown opens
                    }, 100);
                }
            });

            // Move focus from state to city dropdown
            $('#client_state_id').on('select2:select', function () {
                $('#client_city_id').focus();
                setTimeout(() => {
                    $('#client_city_id').select2('open');
                }, 100);
            });

            // Handle Enter and Alt + Enter key navigation
            $(document).on('keydown', '#clicntForm input, #clicntForm select, #itemForm input, #itemForm select',
                function (e) {
                    if (e.key === "Enter") {
                        e.preventDefault(); // Prevent form submission

                        let currentId = $(this).attr('id');

                        if (currentId === "item_price") {
                            if (e.altKey) { // If Alt + Enter is pressed
                                is_add_new_items = 1;
                                console.log(12374);
                                $('#addNewItem').trigger('click');
                            } else { // Normal Enter press
                                is_add_new_items = 0;
                                console.log(984564);
                                $('#itemSave').trigger('click');
                            }
                        } else if (currentId === "anniversary_date") {
                            $('#clientData').trigger('click'); // Submit Client Form
                        } else {
                            // Move to the next field
                            let inputs = $(
                                '#itemForm input, #itemForm select, #clicntForm input, #clicntForm select')
                                .not(':hidden, :disabled');
                            let index = inputs.index(this);
                            if (index < inputs.length - 1) {
                                let nextElement = inputs.eq(index + 1);
                                nextElement.focus();

                                // Open Select2 if applicable
                                if (nextElement.is('select')) {
                                    setTimeout(() => {
                                        nextElement.select2('open');
                                    }, 100);
                                }
                            }
                        }
                    }
                });

            // Move to next input after Select2 selection
            $(document).on('select2:select', '#clicntForm select', function () {
                let inputs = $('#clicntForm input, #clicntForm select').not(':hidden, :disabled');
                let index = inputs.index(this);
                if (index < inputs.length - 1) {
                    let nextElement = inputs.eq(index + 1);
                    nextElement.focus();
                }
            });

        });
    </script>
@endsection