diff --git a/app/Controllers/ApiIntegration.php b/app/Controllers/ApiIntegration.php
index c2faab9f..5c018757 100644
--- a/app/Controllers/ApiIntegration.php
+++ b/app/Controllers/ApiIntegration.php
@@ -571,14 +571,14 @@ class ApiIntegration extends ResourceController
                         $B = $filteringRequestedBillingAddress;
                         $missingBillingValues = array_diff($A, $B); //Find difference element in Existing Images only
                         $commonBillingElements = array_intersect($A, $B);
-                        if (!empty($missingBillingValues)) {
-                            $this->logger->info("Api SaveCustomerDetails : Missing billing " .implode(",",$missingBillingValues)." Are inactived");
-                            $inactive_where = ['isactive' => 1, 'customer_id' => (int)$last_insert_customer_id,'address_type'=>1];
-                            $inactive_whereIn[0] = 'address_1';
-                            $inactive_whereIn[1] = $missingBillingValues;
-                            $data_to_batch_update = ['isactive' => 0,'updated_by'=>$this->global_variable_user_id];
-                            $api_model->inactiveMissingDetails('customer_addresses',$data_to_batch_update, $inactive_where, $inactive_whereIn);
-                        }
+                        // if (!empty($missingBillingValues)) {
+                        //     $this->logger->info("Api SaveCustomerDetails : Missing billing " .implode(",",$missingBillingValues)." Are inactived");
+                        //     $inactive_where = ['isactive' => 1, 'customer_id' => (int)$last_insert_customer_id,'address_type'=>1];
+                        //     $inactive_whereIn[0] = 'address_1';
+                        //     $inactive_whereIn[1] = $missingBillingValues;
+                        //     $data_to_batch_update = ['isactive' => 0,'updated_by'=>$this->global_variable_user_id];
+                        //     $api_model->inactiveMissingDetails('customer_addresses',$data_to_batch_update, $inactive_where, $inactive_whereIn);
+                        // }
                     }
                 }
 
@@ -654,14 +654,14 @@ class ApiIntegration extends ResourceController
                         $B = $filteringRequestedShippingAddress;
                         $missingShippingValues = array_diff($A, $B); //Find difference element in Existing Images only
                         $commonShippingElements = array_intersect($A, $B);
-                        if (!empty($missingShippingValues)) {
-                            $inactive_where = ['isactive' => 1, 'customer_id' => (int)$last_insert_customer_id, 'address_type'=>2];
-                            $inactive_whereIn[0] = 'address_1';
-                            $inactive_whereIn[1] = $missingShippingValues;
-                            $data_to_batch_update = ['isactive' => 0,'updated_by'=>$this->global_variable_user_id];
-                            $api_model->inactiveMissingDetails('customer_addresses',$data_to_batch_update, $inactive_where, $inactive_whereIn);
-                            $this->logger->info("Api SaveCustomerDetails : Missing Shipping " .implode(",",$missingShippingValues)." Are inactived");
-                        }
+                        // if (!empty($missingShippingValues)) {
+                        //     $inactive_where = ['isactive' => 1, 'customer_id' => (int)$last_insert_customer_id, 'address_type'=>2];
+                        //     $inactive_whereIn[0] = 'address_1';
+                        //     $inactive_whereIn[1] = $missingShippingValues;
+                        //     $data_to_batch_update = ['isactive' => 1,'updated_by'=>$this->global_variable_user_id];
+                        //     $api_model->inactiveMissingDetails('customer_addresses',$data_to_batch_update, $inactive_where, $inactive_whereIn);
+                        //     $this->logger->info("Api SaveCustomerDetails : Missing Shipping " .implode(",",$missingShippingValues)." Are inactived");
+                        // }
                     }
                 }
 
diff --git a/app/Models/InvoiceModel.php b/app/Models/InvoiceModel.php
index d717537f..a2a8ea3a 100644
--- a/app/Models/InvoiceModel.php
+++ b/app/Models/InvoiceModel.php
@@ -99,6 +99,7 @@ public function existsSubscriptionDetails($where){
 public function getSubscriptionInvoiceDetail($where)
 {
     $result = $this->getJoinedData($where);
+    // print_r($result);die;
     if (!empty($result)) {
         foreach ($result as $i => $item) {
             $invoiceId = $item['invoice_id'];
@@ -244,8 +245,8 @@ public function getJoinedData($where, $orderby = [])
         ->select('B.title as company_name,B.business_logo,B.terms as company_terms,B.address as company_address,B.city as company_city,B.state as company_state,B.postal_code as company_postal_code,B.email as company_email,B.mobile_no as company_mobile_no')
         ->select('COALESCE(NULLIF(states.state_name, ""), A.state) AS customer_bill_state')
         ->select('COALESCE(NULLIF(states.state_name, ""), S.state) AS customer_ship_state')
-        ->select('concat(A.address_1," ", A.address_2) as customer_bill_address,A.postal_code as customer_bill_postal_code ,A.city as customer_bill_city, countries.country_name as customer_bill_country,A.country as bcountry,A.state as bstate,A.customer_address_id as baddr_id,A.email as bemail')
-        ->select('concat(S.address_1," ", S.address_2) as customer_ship_address,S.postal_code as customer_ship_postal_code ,S.city as customer_ship_city, countries.country_name as customer_ship_country,S.country as scountry,S.state as sstate,S.customer_address_id as saddr_id,S.email as semail')
+        ->select('CONCAT_WS(" ", A.first_name, A.last_name) as customer_biller_name,concat(A.address_1," ", A.address_2) as customer_bill_address,A.postal_code as customer_bill_postal_code ,A.city as customer_bill_city, countries.country_name as customer_bill_country,A.country as bcountry,A.state as bstate,A.customer_address_id as baddr_id,A.email as bemail,A.mobile_no as bmobile')
+        ->select('CONCAT_WS(" ", S.first_name, S.last_name) as customer_shipper_name,concat(S.address_1," ", S.address_2) as customer_ship_address,S.postal_code as customer_ship_postal_code ,S.city as customer_ship_city, countries.country_name as customer_ship_country,S.country as scountry,S.state as sstate,S.customer_address_id as saddr_id,S.email as semail,S.mobile_no as smobile')
         ->get()
         ->getResult();
          
diff --git a/app/Views/auth_login.php b/app/Views/auth_login.php
index 173470f8..bedd2c44 100755
--- a/app/Views/auth_login.php
+++ b/app/Views/auth_login.php
@@ -21,17 +21,23 @@
     <link href="<?= base_url() . "public/assets/css/icons.min.css" ?>" rel="stylesheet" type="text/css" />
 
 </head>
-
+<style>
+.bgm {
+    min-height: 100vh;
+    background:  url("public/uploads/loginbgm2.jpeg") center;
+}
+</style>
 <body class="loading">
 
     <div class="account-pages mt-5 mb-5">
         <div class="container">
             <div class="row justify-content-center">
                 <div class="col-md-8 col-lg-6 col-xl-5">
+                
                     <div class="card">
 
                         <div class="card-body p-4">
-
+                          <!-- <div class="bgm"></div> -->
                             <div class="text-center w-75 m-auto">
                                 <div class="auth-logo">
                                     <a href="javascript: void(0);" class="logo logo-dark text-center">
@@ -89,6 +95,7 @@
 
 
                             </form>
+                          </div>
                         </div> <!-- end card-body -->
                     </div>
                     <!-- end card -->
diff --git a/app/Views/invoice_form.php b/app/Views/invoice_form.php
index 5505f52d..577ab4d8 100644
--- a/app/Views/invoice_form.php
+++ b/app/Views/invoice_form.php
@@ -640,14 +640,13 @@ if (isset($invoice_item_details[0]['to_subscription']) && !empty($invoice_item_d
                     </div>
                     <input type="hidden" id="status" name="status" value="<?= isset($invoice_details['status']) ? $invoice_details['status'] : 'Draft' ?>">
                     <input type="hidden" id="hiddenInvoiceId" name="invoice_id" placeholder="hidden for invoice id" value="<?= isset($invoice_details['invoice_id']) ? $invoice_details['invoice_id'] : '' ?>" />
+                    <input type="hidden" name="invoice_type" value="<?php echo ($page_name === 'Add Subscription Invoice Details' || $page_name === 'Edit Subscription Invoice Details') ? '2' : '1'; ?>">
+
                     <div class="form-group m-b-0">
-                        <?php if (isset($invoice_details['status'])) : ?>
                                 <button type="submit" class="btn btn-white waves-effect waves-light" name="saveas" value="Draft" id="saveDraftButton">Save as Draft</button>
                                 <button type="button" class="btn btn-primary waves-effect" name="saveas" value="Approved" id="saveApprovedButton">Save as Approved</button>  
                                 <button type="button" class="btn btn-white waves-effect waves-light" name="void" value="Void" id="voidButton">Void</button>
                                 <button type="button" class="btn btn-white waves-effect" name="cancel" value="Cancel" id="cancelButton">Cancel</button>
-                        <?php endif; ?>                 
-                        <input type="hidden" name="invoice_type" value="<?php echo ($page_name === 'Add Subscription Invoice Details' || $page_name === 'Edit Subscription Invoice Details') ? '2' : '1'; ?>">
                     </div>
                 </form>
             </div>
@@ -855,6 +854,58 @@ if (isset($invoice_item_details[0]['to_subscription']) && !empty($invoice_item_d
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+    $(document).ready(function() {
+        var status = "<?php echo isset($invoice_details['status']) ? $invoice_details['status'] : ''; ?>";
+        var invoice_type = "<?php echo isset($invoice_type) ? $invoice_type : ''; ?>";        
+        console.log('Invoice Type:', invoice_type);
+        console.log('Status:', status);
+        
+        // Call the function to show buttons based on initial status
+        showButtonsBasedOnStatus(status, invoice_type);
+        
+        // Handling button clicks
+        $('#cancelButton').click(function() {
+            console.log('Cancel button clicked');
+        });
+
+        $('#saveDraftButton').click(function() {
+            console.log('Save as Draft button clicked');
+        });
+
+        $('#voidButton').click(function() {
+            console.log('Void button clicked');
+        });
+
+        $('#saveApprovedButton').click(function() {
+            console.log('Save as Approved button clicked');
+        });
+    });
+
+    function hideAllButtons() {
+        $('#cancelButton, #saveDraftButton, #voidButton, #saveApprovedButton').hide();
+    }
+
+    // Function to show buttons based on status and invoice_type
+    function showButtonsBasedOnStatus(status, invoice_type) {
+        hideAllButtons();
+        if (invoice_type == '1' || invoice_type =='2') {
+            if (status == '') {
+                $('#saveDraftButton, #saveApprovedButton').show();
+            } else if (status === 'Draft') {
+                $('#voidButton, #saveDraftButton, #saveApprovedButton').show();
+            } else if (status === 'Approved') {
+                $('#cancelButton').show();
+                if (invoice_type === '2') {
+                    $('#saveApprovedButton').show();
+                }
+            } else if (status === 'Cancelled' || status === 'Void') {
+                hideAllButtons();
+            }
+        }
+    }
+</script>
 
 
 <script>
@@ -1982,59 +2033,8 @@ function saveInvoiceCustomer() {
         });
     });
 </script>
-<script>
-        $(document).ready(function() {
-            var status = "<?php echo isset($invoice_details['status']) ? $invoice_details['status'] : ''; ?>";
-            var invoice_type = "<?php echo isset($invoice_details['invoice_type']) ? $invoice_details['invoice_type'] : ''; ?>";
 
-            console.log("Status: " + status);
-            console.log("Invoice Type: " + invoice_type);
-
-            // Function to hide all buttons
-            function hideAllButtons() {
-                $('#cancelButton, #saveDraftButton, #voidButton, #saveApprovedButton').hide();
-            }
-
-            // Function to show buttons based on status
-            function showButtonsBasedOnStatus(status) {
-                hideAllButtons();
-                if (invoice_type === '1' || invoice_type === '2') {
-                    if (status === '') {
-                        $('#saveDraftButton, #saveApprovedButton').show();
-                    } else if (status === 'Draft') {
-                        $('#voidButton, #saveDraftButton, #saveApprovedButton').show();
-                    } else if (status === 'Approved') {
-                        $('#cancelButton').show();
-                        if (invoice_type === '2') {
-                            $('#saveApprovedButton').show();
-                        }
-                    } else if (status === 'Cancelled' || status === 'Void') {
-                        hideAllButtons();
-                    }
-                }
-            }
-
-            // Initial call to show buttons based on the initial status
-            showButtonsBasedOnStatus(status);
-
-            // Handling button clicks
-            $('#cancelButton').click(function() {
-                console.log('Cancel button clicked');
-            });
-
-            $('#saveDraftButton').click(function() {
-                console.log('Save as Draft button clicked');
-            });
-
-            $('#voidButton').click(function() {
-                console.log('Void button clicked');
-            });
-
-            $('#saveApprovedButton').click(function() {
-                console.log('Save as Approved button clicked');
-            });
-        });
-    </script>
+         
 
 <script>
     $("#addressCopiedAsShipping").on("change", function() {
diff --git a/app/Views/invoice_form_copy_new.php b/app/Views/invoice_form_copy_new.php
new file mode 100644
index 00000000..5c4121a8
--- /dev/null
+++ b/app/Views/invoice_form_copy_new.php
@@ -0,0 +1,2301 @@
+<style>
+    .selection .select2-selection__arrow{
+        background-color: #37cde6 !important; 
+        height: 36px !important; 
+        border-radius: 2px !important; 
+    }
+    .select2-container .select2-selection--single .select2-selection__arrow b{
+        border-color: white transparent transparent transparent !important;
+    } 
+    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b 
+    {
+        border-color: transparent transparent white transparent !important;
+    }
+    tbody td.last-column { border: none !important; }
+    .table thead th.last-column, .table tbody td.last-column {
+        border: none !important; 
+        background-color: #fff !important; 
+    }
+    .select2-selection.select2-selection--single{
+        margin-right: 2px;
+    }
+    .fixed-width-select {
+        width: 100px; /* Adjust width as needed */
+    }
+    table .select2-container {
+        width: 400px !important;
+    }
+    .custom-icon {
+                                        background-color: #37cde6;
+                                        color: white;
+                                        border-radius: 50%;
+                                        padding: 10px;
+                                        display: inline-block;
+                                        text-align: center;
+                                    }
+                                    .table thead th.last-column, .table tbody td.last-column {
+  border-right: none;
+}
+    .last-column {
+        border: none;
+        position: relative;
+    }
+
+    .last-column .icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        justify-content: center;
+  align-items: center;
+  color: red; /* Change to the desired color */
+}
+.btn-white {
+    border-color: #37cde6;
+}
+.item-discount-type{
+    background-color: #FAFAFA;
+}
+
+.form-control[readonly] {
+    background-color: white;
+}
+/* .select2-container--default .select2-selection--single .select2-selection__arrow b 
+{ border-style: none; } */
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* For Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+
+/* Hide the calendar icon in Chrome, Safari, and Edge */
+/* input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
+} */
+
+/* Hide the calendar icon in Firefox */
+/* input[type="date"] {
+    -moz-appearance: textfield;
+} */
+    </style>
+<?php $flag_name = $invoice_type === '1' ? " Books" : " Scheme"; ?>
+<div class="row">
+    <div class="col-lg-12">
+        <h4 class="header-title"><center><?= $page_name; ?></center></h4>
+
+        <div class="card">
+            <div class="card-body">
+                <br>
+                <form method="POST" enctype="multipart/form-data" action="<?= base_url() . "save_invoice"; ?>" id="myForm">
+                    
+
+                    <div class="form-group">
+                        <div class="form-row">
+                            <div class="form-group col-md-5">
+                                <?php 
+                                    $first_name ="";
+                                    $last_name ="";
+                                    if (isset($invoice_details['customer_id']) && $invoice_details['customer_id'] != "") {
+                                    $displayvalue = "";  
+                                    foreach ($customers as $customer) {
+                                        if ($customer->customer_id === $invoice_details['customer_id']) {
+                                            $displayvalue = $customer->first_name . ' ' . $customer->last_name;
+                                            $last_name = $customer->last_name;
+                                            $first_name = $customer->first_name;
+                                        }
+                                    } ?>
+                                    <label for="customerName">Customer Name</label>
+                                    <input type="hidden" name="customer_name" id="customer_name" value="<?= $invoice_details['customer_id']; ?>" />
+                                    <input type="text" class="form-control" value="<?= $displayvalue ?>" readonly />
+                                    
+                                <?php } else { ?>
+                                    <label for="customerName">Customer Name<span class="text-danger"> *</span></label>
+                                    <select class="form-control" id="customerName" name="customer_name" required data-toggle="select2" onchange="get_customer_billing_details(this.value); get_customer_membership_details(this.value)">
+                                        <option value="">Select a customer</option>
+                                        <?php if ($invoice_type === '1') { // invoice means Add new costomers; 
+                                        ?>
+                                            <option class="blueText" value="0"> + Add a customer</option>
+                                        <?php } ?>
+                                        <?php foreach ($customers as $customer) :
+                                            if ((int)$customer->isactive == 1) { ?>
+                                                <option value="<?= $customer->customer_id ?>"> <?= $customer->first_name . ' ' . $customer->last_name; ?>
+                                                </option>
+                                        <?php }
+                                        endforeach; ?>
+                                    </select>
+                                <?php } ?>
+                                <input type="hidden" class="form-control" id="hidden_last_name" value="<?= $last_name ?>" readonly />
+                                <input type="hidden" class="form-control" id="hidden_first_name" value="<?= $first_name ?>" readonly />
+
+                                <div class="invalid-feedback"> Please select customer. </div>
+                                <div class="subscribedetails" style="display: none">
+                                    <div id="schemeName"></div>
+                                </div>
+                            </div>
+
+                            <div class="form-group col-md-5">
+                                <label for="loadShippingDropdown">Shipping Address</label>
+                                <select class="form-control" id="loadShippingDropdown" name="shipping_address_id" data-toggle="select2" onchange="get_customer_shipping_details(this.value)">
+                                    <option value="">Select an address</option>
+                                </select>
+                            </div>
+
+                        </div>
+
+                        <div class="form-row">
+                            <div class="form-group col-md-5">
+                                <label for="storeBillingAddress"> Billing Address &ensp;( <input type="checkbox" id="editAddressesCheckbox" /> Do you want to change addresses?)</label>
+                                <input type="hidden" id="hiddenBillingAddressId" name="billing_address_id" placeholder="hidden for billing address id" value="<?= isset($invoice_details['billing_address_id']) ? $invoice_details['billing_address_id'] : '' ?>" />
+                                <textarea class="form-control" id="storeBillingAddress" name="billing_address" rows="2" readonly><?= isset($invoice_details['billing_address']) ? $invoice_details['billing_address'] : '' ?></textarea>
+                            </div>
+                            <div class="form-group col-md-5">
+                                <label for="storeShippingAddress">Shipping Address</label>
+                                <textarea class="form-control" id="storeShippingAddress" name="shipping_address" rows="2" readonly><?= isset($invoice_details['shipping_address']) ? $invoice_details['shipping_address'] : '' ?></textarea>
+                            </div>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group col-md-5">
+                                <label for="event" class="col-form-label">Events</label>
+                                <select class="form-control" id="event" name="event_id" data-toggle="select2">
+                                    <option value="">Select an Events</option>
+                                    <?php foreach ($events as  $event) : ?>
+                                        <!-- <option value="<?= $event->event_id ?>"><?= $event->event_name ?></option> -->
+                                        <option value="<?= $event->event_id ?>" <?php if ((int)$event->is_the_default === 1 || isset($invoice_details['event_id']) && (($invoice_details['event_id'] === $event->event_id))) echo "selected"; ?>>
+                                            <?= $event->event_name ?></option>
+                                    <?php endforeach; ?>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group col-md-6">
+                                <label for="invoiceNumber">Invoice Number</label>
+                                <input type="text" class="form-control" id="invoiceNumber" name="invoice_number" value="<?= isset($invoice_details['invoice_number']) ? $invoice_details['invoice_number'] : '' ?>">
+                                <input type="hidden" id="hiddenNextId" name="next_id" placeholder="hidden for next id" />
+                            </div>
+
+                            <div class="form-group col-md-4">
+                                <label for="invoiceDate">Invoice Date<span class="text-danger"> *</span></label>
+                                <div class="input-group">
+                                                                    <input type="text" class="form-control" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true" id="invoiceDate" name="invoice_date" value="<?= isset($invoice_details['invoice_date']) ? $invoice_details['invoice_date'] : date('d/m/Y') ?>" max="<?= date('d/m/Y'); ?>" required>
+                                                                    <div class="input-group-append" style="margin-left: -11px;">
+                                                                        <span class="input-group-text" style="
+    background-color: #37cde6;color:#fff;
+"><i class="ri-calendar-event-fill" style="
+    position: relative;
+    left: 4px;
+"></i></span>
+                                                                    </div>
+                                                                </div><!-- input-group -->
+                               
+                                <!-- <input type="date" class="form-control" id="invoiceDate" name="invoice_date" value="<?= isset($invoice_details['invoice_date']) ? $invoice_details['invoice_date'] : '' ?>"  max="<?= date('d/m/Y'); ?>" required> -->
+                            </div>
+
+                            <!-- <div class="form-group col-md-4">
+                                <label for="invoiceDate">Invoice Date<span class="text-danger"> *</span></label>
+                                <input type="date" class="form-control" id="invoiceDate" name="invoice_date" value="<?= isset($invoice_details['invoice_date']) ? $invoice_details['invoice_date'] : '' ?>"  max="<?= date('Y-m-d'); ?>" required>
+                            </div> -->
+                            <?php if ($invoice_type === '2') : ?>
+                                <div class="form-group col-md-4">
+                                    <label for="fromsubcription">From Subscription<span class="text-danger"> *</span></label>
+                                    <input type="date" class="form-control" id="fromsubcription" name="from_subscription" value="<?= isset($invoice_item_details[0]['from_subscription']) ? $invoice_item_details[0]['from_subscription'] : '' ?>" required onchange="updateToDateMinDate(this.value)">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label for="tosubcription">To Subscription<span class="text-danger"> *</span></label>
+                                    <input type="date" class="form-control" id="tosubcription" name="to_subscription" value="<?= isset($invoice_item_details[0]['to_subscription']) ? $invoice_item_details[0]['to_subscription'] : '' ?>" required>
+                                </div>
+                            <?php endif; ?>
+                        </div>
+                            <div class="col-md-12 mt-1" style="overflow: auto;">
+                                <h4>Item Details</h4>
+                                <br />
+
+                                <table class="table table-bordered" id="itemTable" style="border: white!important;">
+                                    <thead class="thead-light">
+                                        <tr>
+                                            <th>Item Details</th>
+                                            <th class="text-right">QUANTITY</th>
+                                            <th class="text-right">RATE</th>
+                                            <th style="display:none;">TAX</th>
+                                            <th class="text-right">DISCOUNT</th>
+                                            <th class="text-right">AMOUNT</th>
+                                            <?php if ($invoice_type === '1') : ?>       <th class="last-column"></th><?php endif; ?>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <!-- Dynamically add rows for item details -->
+                                        <?php if (!empty($invoice_item_details)) {
+                                            foreach ($invoice_item_details as $inx => $ii_details) :  ?>
+                                                <tr>
+                                                    <td style="width:17% !important;">
+                                                        <select class="form-control book-select fixed-width-select" id="<?= "book" . $inx; ?>bookSelect" name="item_details[]" onchange="displayBookTag(this,<?= $inx; ?>)" required data-toggle="select2" style="width: 249px !important;">
+                                                            <option value="">Select a <?= $flag_name; ?></option>
+                                                            <?php if ($invoice_type === '1') { ?>
+
+                                                                <option value="add_new_book">+ Add New Book</option>
+
+                                                            <?php }
+                                                            foreach ($books as  $book) :   ?>
+                                                                <?php $disabled = ((int)$book->isactive == 0) ? 'disabled' : ''; ?>
+                                                                <option value="<?= $book->book_id ?>" <?php if (isset($ii_details['product']) && ($ii_details['product'] === $book->book_id)) echo "selected"; ?> <?= $disabled; ?>>
+                                                                    <?php if ((int)$book->isactive == 0) {
+                                                                        echo $book->title . " (Disabled) ";
+                                                                    } else {
+                                                                        echo $book->title;
+                                                                    } ?></option>
+                                                            <?php endforeach; ?>
+                                                        </select>
+                                                        <!-- <textarea name="description[]" class="form-control" placeholder="Enter Description" id="<?= "description" . $inx; ?>" cols="26" rows="2" style="margin-top: 16px;border-color: lightgray;width:247px;"><?= isset($ii_details['description']) ? $ii_details['description'] : '' ?></textarea> -->
+                                                        <span>&ensp;</span>
+                                                        <textarea name="description[]" class="form-control" placeholder="Enter Description" id="<?= "description" . $inx; ?>" rows="2" style="border: 1px dashed #ddd"><?= isset($ii_details['description']) ? $ii_details['description'] : '' ?></textarea>
+                                                        <input type="hidden" class="form-control" id="<?= "hiddenInvoiceChildId" . $inx; ?>" name="invoice_child_id[]" value="" placeholder="hidden for invoice child/item id" value="<?= isset($ii_details['invoice_child_id']) ? $ii_details['invoice_child_id'] : '' ?>" />
+                                                    </td>
+                                                    <td style="width:8%;"><input type="number" class="form-control item-quantity" id="<?= "quantity" . $inx; ?>" name="quantity[]" oninput="calculateInvoice(this,<?= $inx; ?>)" value="<?= isset($ii_details['quantity']) ? $ii_details['quantity'] : '' ?>" min="1" />
+                                                    </td>
+                                                    <td style="width:20%;"><input type="text" class="form-control item-rate" id="<?= "rate" . $inx; ?>" name="rate[]" oninput="calculateInvoice(this,<?= $inx; ?>)" value="<?= isset($ii_details['unit_price']) ? $ii_details['unit_price'] : '' ?>" /> <!-- readonly /> -->
+                                                    </td>
+                                                    <td style="display:none;"><input type="number" class="form-control item-tax" id="<?= "tax" . $inx; ?>" name="tax[]" value="<?= isset($ii_details['tax']) ? $ii_details['tax'] : '' ?>" readonly />
+                                                    </td>
+                                                    <td style="width:22%;">
+                                                    <div class="input-group">
+                                                        <input type="number" style="width: 41%;" class="form-control item-discount-amount" id="<?= "item_discount_amount" . $inx; ?>" name="discount_amount[]" oninput="calculateInvoice(this,<?= $inx; ?>)" value="<?= isset($ii_details['discount_amount']) ? $ii_details['discount_amount'] : '' ?>" min="0" step="0.001" />
+                                                        <select class="item-discount-type  custom-select" id="<?= "discount_type" . $inx; ?>" name="discount_type[]" oninput="calculateInvoice(this,<?= $inx; ?>)">
+                                                            <option value="%" <?php if (isset($ii_details['discount_type']) && $ii_details['discount_type'] === '%') echo "selected"; ?>>
+                                                                    %</option>    
+                                                            <option value="₹" <?php if (isset($ii_details['discount_type']) && $ii_details['discount_type'] === '₹') echo "selected"; ?>>
+                                                                ₹</option>
+                                                        </select>
+                                                    </div>
+                                                    </td>
+                                                    <td style="width:15%;"><input type="number" class="form-control item-amount" id="<?= "amount" . $inx; ?>" name="amount[]" value="<?= isset($ii_details['subtotal'])  ? $ii_details['subtotal'] : '' ?>" readonly />
+                                                    </td>
+                                                    <?php if ($invoice_type === '1') : ?>
+                                                        <td class="last-column" style="width:5%">
+                                                                <span class="icon"><center><i class="fa fa-trash remove-item "></i></center></span>
+                                                        </td>
+                                                    <?php endif; ?>
+                                                </tr>
+
+                                            <?php endforeach;
+                                        } else { ?>
+                                            <tr>
+                                                <td style="width:17% !important;">
+                                                    <select class="form-control book-select fixed-width-select" id="book0" name="item_details[]" onchange="displayBookTag(this,0)" required data-toggle="select2" style="width: 249px !important;">
+                                                        <option value="">Select a <?= $flag_name ?></option>
+                                                        <?php if ($invoice_type === '1') { ?>
+                                                            <option value="add_new_book">+ Add New Book</option>
+                                                            <?php }
+                                                        foreach ($books as $book) :
+                                                            if ((int)$book->isactive === 1) : ?>
+                                                                <option value="<?= $book->book_id ?>"><?= $book->title; ?></option>
+                                                        <?php endif;
+                                                        endforeach; ?>
+                                                    </select>
+                                                    <!-- <textarea name="description[]" class="form-control" placeholder="Enter Description" id="" cols="26" rows="2" style="margin-top: 16px;border-color: lightgray;width:247px;"></textarea> -->
+                                                    <span>&ensp;</span>
+                                                    <textarea name="description[]" class="form-control" placeholder="Enter Description" id="description0" rows="2" style="border: 1px dashed #ddd"></textarea>
+                                                    <input type="hidden" class="form-control" id="hiddenInvoiceChildId0" name="invoice_child_id[]" value="" placeholder="hidden for invoice child/item id" />
+              
+                                                </td>
+                                                
+                                                <td style="width:8%;"><input type="number" class="form-control item-quantity" id="quantity0" name="quantity[]" oninput="calculateInvoice(this,0)" min="1" />
+                                                </td>
+                                                <td style="width:20%;"><input type="text" class="form-control item-rate" id="rate0" name="rate[]" oninput="calculateInvoice(this,0)" /></td>
+                                                <td style="display:none"><input type="text" class="form-control item-tax" id="tax0" name="tax[]" /></td>
+                                                <td style="width:22%;">
+                                                   <div class="input-group">
+                                                        <input type="number" style="width: 41%;" class="form-control item-discount-amount" id="item_discount_amount0" name="discount_amount[]" oninput="calculateInvoice(this,0)"  min="0" step="0.001" />
+                                                        <select class="item-discount-type custom-select" id="<?= "discount_type0"; ?>" name="discount_type[]" oninput="calculateInvoice(this,0)">
+                                                                <option value="%">%</option>
+                                                                <option value="₹">₹</option>
+                                                        </select>
+                                                    </div>
+                                                </td>
+                                                <td style="width:15%;"><input type="text" class="form-control item-amount" id="amount0" name="amount[]" />
+                                                </td>
+                                               
+                                                <?php if ($invoice_type === '1') : ?>
+                                                    <td class="last-column" style="width:5%">
+                                                    <span class="icon"><center><i class="fa fa-trash remove-item "></i></center></span>
+                                                    </td>
+                                                <?php endif; ?>
+
+                                            </tr>
+                                        <?php } ?>
+                                        <!-- You can add more rows as needed using JavaScript -->
+                                    </tbody>
+                                </table>
+
+
+                                <div class="form-group m-b-0">
+                                    <?php if ($invoice_type !== '2') : ?>
+                                        <!-- Show the "Add More Item" button only if invoice_type is not 1 -->
+                                        <!-- <a class="btn" id="addItem">
+                                            <h4><i class="fa fa-plus" aria-hidden="true"></i> Add More Item</h4>
+                                        </a> -->
+                                        <button type="button" id="addItem" class="btn btn-light waves-effect"><i class="fa fa-plus custom-icon" aria-hidden="true"></i>&ensp; Add More Item</button>
+
+                                    <?php endif; ?>
+                                </div>
+
+                            </div>
+                        <div class="offset-md-5 col-md-7">
+                            <h4><center>Calculation</center></h4>
+                             <div class="card" style="background-color: #FAFAFA;">
+                                <div class="card-body">
+                                    <div class="form-row">
+                                    <div class="form-group col-md-6">
+                                        <label for="subtotal">Subtotal</label>
+                                        <input type="number" class="form-control" id="subtotal" name="sub_total" readonly value="<?= isset($invoice_details['subtotal']) ? (float)$invoice_details['subtotal'] : 0 ?>" min="0" step="0.001">
+                                    </div>
+                                    <div class="form-group" style="display: none;">
+                                        <label for="invoicetax">Tax Amount</label>
+                                        <input type="hidden" class="form-control" id="invoicetax" name="invoice_tax" readonly value="<?= isset($invoice_details['tax']) ? (float)$invoice_details['tax'] : 0 ?>" min="0" step="0.001">
+                                    </div>
+                                    <div class="form-group col-md-6">
+                                        <label for="discount">Discount</label>
+                                        <div class="input-group">
+                                            <input type="number" style="width: 60%;" class="form-control" id="discount" name="discount" value="<?= isset($invoice_details['discount']) ? $invoice_details['discount'] : 0 ?>"  onchange="discountTypeKeyup(this)" value="0" min="0" step="0.001">
+                                            <?php
+                                            $disType = isset($invoice_details['dis_type']) ? $invoice_details['dis_type'] : '';
+
+                                            if (strlen($disType) > 0) {
+                                                echo '<select class="custom-select" id="discount-type" name="dis_type">';
+                                                // Length is greater than 0, proceed with displaying the select element without the name attribute
+                                            } else {
+                                                // Length is 0 or $invoice_details['dis_type'] is not set, proceed with displaying the select element with the name attribute
+                                                echo '<select style="display: none;" class="custom-select" id="discount-type">';
+                                            }
+                                            ?>                                            
+                                            <option value="%" <?php if (isset($invoice_details['dis_type']) && $invoice_details['dis_type'] === '%') echo "selected"; ?>>%</option>
+                                            <option value="₹" <?php if (isset($invoice_details['dis_type']) && $invoice_details['dis_type'] === '₹') echo "selected"; ?>>₹</option>    
+                                            </select>
+                                        </div>                                    
+                                    </div>
+                                </div>
+                                    <?php
+                                    // Check if it's a subscription invoice
+                                    $isSubscriptionInvoice = ($page_name === 'Add Subscription Invoice Details' || $page_name === 'Edit Subscription Invoice Details');
+
+                                    // Conditionally set the "hidden" attribute for the fields
+
+                                    $shippingChargesHidden = $isSubscriptionInvoice ? 'hidden' : '';
+
+                                    $shippingChargesStyle = $isSubscriptionInvoice ? 'display: none;' : '';
+                                    ?>
+                                    <div class="form-row" <?= $shippingChargesHidden ?> >
+                                    <div class="form-group col-md-6">
+                                        <span style="<?= $shippingChargesStyle ?>">
+                                            <label for="shippingChargesLabel">Charge Name </label>
+                                            <input type="text" class="form-control" id="shippingChargesLabel" name="shippingChargesLabel" placeholder="Shipping Charges Label" value="<?= isset($invoice_details['shipping_label']) ? $invoice_details['shipping_label'] : 'Shipping Charge' ?>" oninput="calculateOverallTotals()" <?= $shippingChargesHidden ?>>
+                                        </span>
+                                    </div>
+                                    <div class="form-group col-md-6">
+                                        <span style="<?= $shippingChargesStyle ?>">
+                                            <label for="shippingCharges">Charge Amount </label>
+                                            <input type="number" class="form-control" id="shippingCharges" name="shippingCharges" placeholder="Charges Amount" value="<?= isset($invoice_details['shipping_charge']) ? $invoice_details['shipping_charge'] : 0 ?>" oninput="calculateOverallTotals()" <?= $shippingChargesHidden ?> step="0.001" >
+                                        </span>
+                                    </div>
+                                    </div>
+
+
+                                    <div class="form-row">
+                                    <div class="form-group col-md-6">
+                                            <label for="exacttotal">Total</label>
+                                            <input type="number" class="form-control" id="exacttotal" name="exact_total_amount" value="<?= isset($invoice_details['total_amount']) ? (float)$invoice_details['exact_total_amount'] : 0 ?>" readonly min="0" step="0.001">
+                                    </div>
+                                    <div class="form-group col-md-6">
+                                        <label for="grandtotal">Total (Round-off)</label>
+                                        <input type="number" class="form-control" id="grandtotal" name="grand_total" readonly value="<?= isset($invoice_details['total_amount']) ? (int)round($invoice_details['total_amount']) : 0 ?>">
+                                    </div>
+                                    </div>
+                                    <div class="form-row">
+                                    <div class="form-group col-md-6">
+                                        <label for="balanceAmount">Balance Amount</label>
+                                        <input type="number" class="form-control" id="balanceAmount" name="balanceAmount" value="<?= (isset($invoice_details['status']) && $invoice_details['status'] === 'Draft') ? (isset($invoice_details['total_amount']) ? (int)round($invoice_details['total_amount']) : '') : '0' ?>" oninput="calculateOverallTotals()" readonly min="0" step="0.001">
+                                    </div>
+
+                                    <div class="form-group col-md-6">
+                                        <label for="paidAmount">Paid Amount</label>
+                                        <input type="number" class="form-control" id="paidAmount" name="paidAmount" value="<?= (isset($invoice_details['status']) && $invoice_details['status'] === 'Approved') ? (isset($invoice_details['total_amount']) ? (int)round($invoice_details['total_amount']) : '') : '0' ?>" oninput="calculateOverallTotals()" readonly min="0" step="0.001">
+                                    </div>
+                                    </div>
+                                </div>
+                             </div>
+                        </div>
+                        
+                        <div class="form-row">
+                            <div class="form-group col-md-5">
+                                <label for="payment_note">Payment Notes</label>
+                                <textarea class="form-control" id="payment_note" name="payment_note" rows="3"><?= isset($invoice_details['payment_note']) ? $invoice_details['payment_note'] : '' ?></textarea>
+                            </div>
+                        <!-- </div>
+                        <div class="form-row"> -->
+                            <div class="form-group col-md-5">
+                                <label for="notes">Notes</label>
+                                <textarea  class="form-control" id="notes" name="notes" rows="3"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Payment Modal -->
+                    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
+                        <div class="modal-dialog" role="document">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="paymentModalLabel">Select Mode of Payment</h5>
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                    <!-- Add your mode of payment options here -->
+                                    <select class="form-control" id="paymentMode" name="payment_method">
+                                        <option value="">Select a mode</option>
+                                        <option value="credit">Credit Card</option>
+                                        <option value="debit">Debit Card</option>
+                                        <option value="cash">Cash</option>
+                                        <option value="upi">UPI</option>
+                                        <option value="banktransfer">Bank Transfer</option>
+                                        <!-- Add more options as needed -->
+                                    </select>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                    <button type="submit" class="btn btn-primary" name="saveas" value="Approved" id="saveapproved">Save as Approved</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Customer Quick Add Modal -->
+                    <div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true" data-backdrop="static">
+                        <div class="modal-dialog" role="document">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="customerModalLabel">Add New Customer</h5>
+                                    <button type="button" class="close  closeCustomerModal" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                    <div class="form-row">
+                                        <div class="form-group col-md-6">
+                                            <label for="cus_first_name" class="col-form-label">First Name<span class="text-danger"> *</span></label>
+                                            <input type="text" class="form-control" id="cus_first_name" placeholder="First Name" />
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="cus_last_name" class="col-form-label">Last Name</label>
+                                            <input type="text" class="form-control" id="cus_last_name" placeholder="Last name" />
+                                        </div>
+                                        <!-- <div class="form-group col-md-4">
+                                        <label for="cus_date_of_birth" class="col-form-label">Date Of Birth</label>
+                                        <input type="date" id="cus_date_of_birth" class="form-control" max="<?= date('Y-m-d', strtotime('-18 years')); ?>" placeholder="Date Of Birth" />
+                                        </div> -->
+                                    </div>
+                                    <div class="form-row">
+                                        <div class="form-group col-md-6">
+                                            <label for="cus_email" class="col-form-label">Email</label>
+                                            <input type="text" class="form-control" id="cus_email" placeholder="Email" onkeyup="validateEmail(this.value)" onchange="checkExisting(this.value,'email','cus_email')" />
+                                            <span id="emailValidationMessage"></span>
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="cus_mobile_no" class="col-form-label">Mobile</label>
+                                            <div class="input-group mb-2">
+                                                <div class="input-group-prepend">
+                                                    <div class="input-group-text">+91</div>
+                                                </div>
+                                                <input type="text" class="form-control" id="cus_mobile_no" placeholder="Mobile Number (Enter only numbers)" maxlength="10" onkeypress="return restriction(event)" onchange="checkExisting(this.value,'mobile_no','cus_mobile_no')" />
+                                                <div class="invalid-feedback"> Please provide. </div>
+                                            </div>
+                                            <span id="mobileValidationMessage"></span>
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="baddress1" class="col-form-label">Billing Address 1</label>
+                                            <input type="text" class="form-control" id="baddress1" name="baddress1" placeholder="Address (eg : 1234 Main St)" />
+                                        </div>
+                                        <!-- Address 2 -->
+                                        <div class="form-group col-md-6">
+                                            <label for="baddress2" class="col-form-label">Billing Address 2</label>
+                                            <input type="text" class="form-control" id="baddress2" name="baddress2" placeholder="Address (eg : 1234 Main St)" />
+                                            
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="bcountry" class="col-form-label">Country</label>
+                                            <input type="text" class="form-control" id="bcountry" name="bcountry" placeholder="Country" />
+                                            
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="bstate" class="col-form-label">State</label>
+                                            <input type="text" class="form-control" id="bstate" name="bstate" placeholder="State" />
+                                            
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="sstate" class="col-form-label">City</label>
+                                            <input type="text" class="form-control" id="bcity" name="bcity" placeholder="City" />
+                                            
+                                        </div>
+                                        <div class="form-group col-md-6">
+                                            <label for="bpincode" class="col-form-label">Pincode</label>
+                                            <input type="text" class="form-control" id="bpincode" name="bpincode" minlength="6" maxlength="6" placeholder="Pincode" />
+                                            
+                                        </div>
+                                        <div class="form-row">
+                                            <!-- Checkbox for Copy -->
+                                            <div class="form-group col-md-12 text-right checkbox checkbox-purple">
+                                                <input type="checkbox" id="addressCopiedAsShipping" />
+                                                <label for="addressCopiedAsShipping"> Is the above address same as the shipping address?</label>
+                                            </div>
+                                        </div>
+                                        <div class="after-shipping-addr-add-more">
+                                            <div class="form-group">
+                                                <div class="form-row">
+                                                    <!-- Shipping Address 1 -->
+                                                    <div class="form-group col-md-6">
+                                                        <label for="saddress1" class="col-form-label">Shipping Address 1</label>
+                                                        <input type="text" class="form-control" id="saddress1" name="saddress1" placeholder="Address (eg : 1234 Main St)" />
+                                        
+                                                    </div>
+                                                    <!-- Shipping Address 2 -->
+                                                    <div class="form-group col-md-6">
+                                                        <label for="saddress2" class="col-form-label">Shipping Address 2</label>
+                                                        <input type="text" class="form-control" id="saddress2" name="saddress2" placeholder="Address (eg : 1234 Main St)" />
+                                                        
+                                                    </div>
+                                                    <!-- Country -->
+                                                    <div class="form-group col-md-6">
+                                                        <label for="scountry" class="col-form-label">Country</label>
+                                                        <input type="text" class="form-control" id="scountry" name="scountry" placeholder="Country" />
+                                                    
+                                                    </div>
+                                                    <!-- State -->
+                                                    <div class="form-group col-md-6">
+                                                        <label for="sstate" class="col-form-label">State</label>
+                                                        <input type="text" class="form-control" id="sstate" name="sstate" placeholder="State" />
+                                                        
+                                                    </div>
+                                                    <div class="form-group col-md-6">
+                                                        <label for="sstate" class="col-form-label">City</label>
+                                                        <input type="text" class="form-control" id="scity" name="scity" placeholder="City" />
+                                                        
+                                                    </div>
+                                                    <!-- Pincode -->
+                                                    <div class="form-group col-md-6">
+                                                        <label for="spincode" class="col-form-label">Pincode</label>
+                                                        <input type="text" class="form-control" id="spincode" name="spincode" minlength="6" maxlength="6" placeholder="Pincode" />
+                                                        
+                                                    </div>
+                                                </div>
+                                                <div class="modal-footer">
+                                                    <button type="button" class="btn btn-secondary closeCustomerModal" data-dismiss="modal" id="closeCustomerModal">Close</button>
+                                                    <button type="button" class="btn btn-primary save-invoice-customer" onclick="saveInvoiceCustomer()">Save Customer</button>
+                                                </div>
+
+                                                <!-- Country, State, City, Postal Code, etc. fields for Shipping Address -->
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <input type="hidden" id="status" name="status" value="<?= isset($invoice_details['status']) ? $invoice_details['status'] : 'Draft' ?>">
+                    <input type="hidden" id="hiddenInvoiceId" name="invoice_id" placeholder="hidden for invoice id" value="<?= isset($invoice_details['invoice_id']) ? $invoice_details['invoice_id'] : '' ?>" />
+                    <div class="form-group m-b-0">
+                        <?php if (!isset($invoice_details['status']) || $invoice_details['status'] == 'Approved') : ?>
+                            <button type="button" class="btn btn-primary waves-effect mr-1" name="cancel" value="Cancel" id="cancelButton">Cancel</button>
+                        <?php endif; ?>
+                        <?php if (!isset($invoice_details['status']) || $invoice_details['status'] !== 'Approved') : ?>
+                            <!-- Show the "Save as Draft" button only if the status is not "Approved" -->
+                            <button type="submit" class="btn btn-white waves-effect waves-light" name="saveas" value="Draft" id="saveDraftButton">Save as Draft</button>
+                            <button type="button" class="btn btn-primary waves-effect mr-1" name="void" value="Void" id="voidButton">Void</button>
+                        <?php endif; ?>
+                        <?php if (!isset($invoice_details['status']) || $invoice_details['status'] !== 'Approved') : ?>
+                            <!-- Show the "Save as Approved" button only if the status is not "Approved" -->
+                            <button type="button" class="btn btn-primary waves-effect mr-1" name="saveas" value="Approved" id="saveApprovedButton">Save as Approved</button>
+                        <?php endif; ?>
+
+                        <input type="hidden" name="invoice_type" value="<?php echo ($page_name === 'Add Subscription Invoice Details' || $page_name === 'Edit Subscription Invoice Details') ? '2' : '1'; ?>">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Reason for Void Modal -->
+<div class="modal fade" id="voidReasonModal" tabindex="-1" role="dialog" aria-labelledby="voidReasonModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="voidReasonModalLabel">Reason for Void</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <textarea class="form-control" id="voidReason" rows="3" placeholder="Enter reason for voiding..." required></textarea>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" id="submitVoidReason">Submit</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- </div>
+</div> -->
+
+
+<!-- Reason for Cancel Modal -->
+<div class="modal fade" id="cancelReasonModal" tabindex="-1" role="dialog" aria-labelledby="voidReasonModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="cancelReasonModalLabel">Reason for Cancel</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <textarea class="form-control" id="cancelReason" rows="3" placeholder="Enter reason for cancel..."></textarea>
+                <!-- <input type="hidden" id="invoiceId" name="invoiceId"> -->
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" id="submitCancelReason">Submit</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Add Book Modal -->
+<div class="modal fade" id="addBookModal" tabindex="-1" role="dialog" aria-labelledby="addBookModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addBookModalLabel">Add Book</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form id="addBookForm">
+                <div class="modal-body">
+                    <div class="form-row">
+                        <div class="form-group col-md-6">
+                            <label for="bookName">Book Name<span class="text-danger"> *</span></label>
+                            <input type="text" class="form-control" id="bookName" name="bookName" required>
+                        </div>
+                        <div class="form-group col-md-6">
+                            <label for="bookPrice">Price<span class="text-danger"> *</span></label>
+                            <input type="number" class="form-control" id="bookPrice" name="bookPrice" required min="0">
+                        </div>
+
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group col-md-6">
+                            <label for="publication_date" class="col-form-label">Publication Date<span class="text-danger"> *</span></label>
+                            <input type="date" class="form-control" id="publication_date" name="publication_date" value="<?= isset($details['publication_date']) ? $details['publication_date'] : '' ?>" max="<?= date('Y-m-d'); ?>" required placeholder="Publication Date">
+                            <div class="invalid-feedback"> Please provide. </div>
+                        </div>
+                        <div class="form-group col-md-6">
+                            <label for="isbn_code" class="col-form-label">ISBN Code</label>
+                            <input type="text" class="form-control" id="isbn_code" name="isbn_code" placeholder="ISBN Code" />
+                            <div class="invalid-feedback"> Please provide. </div>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group col-md-6">
+                            <label for="publisher" class="col-form-label">Publisher Name</label>
+                            <input type="text" class="form-control" id="publisher" name="publisher" placeholder="Publisher Name" value="<?= isset($details['publisher']) ? $details['publisher'] : '' ?>" />
+                            <div class="invalid-feedback"> Please provide. </div>
+                        </div>
+                        <div class="form-group col-md-6">
+                            <label for="publishers_code" class="col-form-label">Publisher Code<span class="text-danger"> *</span></label>
+                            <input type="text" class="form-control" id="publishers_code" name="publishers_code" placeholder="Publisher Code" required />
+                        </div>
+                    </div>
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="submit" class="btn btn-primary">Add Book</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div id="billing_shipping_addresses_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-body">
+
+                <div class="text-center mt-2 mb-4">
+                    <h4 id="form_add_edit">Billing & Shipping Address</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="hideBillingShippingModel(this)">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                    <h5 >Billing Address</h5>
+                    <div class="row">
+                        <div class="col-md-8">
+                            <div class="form-group">
+                                <label for="quick_billing_address"> Address<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_billing_address" required placeholder="Billing Address">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_billing_country"> Country</label>
+                                <select class="form-control" id="quick_billing_country">
+                                    <option value="">Select Country</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_billing_state"> State<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_billing_state" required placeholder="State">
+                            </div> 
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_billing_city"> City<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_billing_city" required placeholder="City">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_billing_postal_code"> Postal Code<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_billing_postal_code" required placeholder="Postal Code">
+                            </div>
+                        </div>
+                        <div class="form-group col-md-12 text-right">
+                            <input type="checkbox" id="addressCopiedAsShippingModel" >
+                            <label for="addressCopiedAsShippingModel"> Is the above address same as the shipping address?</label>
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <hr class="center-line">
+                    </div>
+                    <h5 >Shipping Address</h5>
+                    <div class="row">
+                        <div class="col-md-8">
+                            <div class="form-group">
+                                <label for="quick_shipping_address"> Address<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_shipping_address" required placeholder="Shipping Address">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_shipping_country"> Country</label>
+                                <select class="form-control" id="quick_shipping_country">
+                                    <option value="">Select Country</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_shipping_state"> State<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_shipping_state" required placeholder="State">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_shipping_city"> City<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_shipping_city" required placeholder="City">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="quick_shipping_postal_code"> Postal Code<span class="text-danger"> *</span></label>
+                                <input class="form-control" type="text" id="quick_shipping_postal_code" required placeholder="Postal Code">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group text-center">
+                        <button class="btn btn-rounded btn-primary" type="submit" onclick="submitAddress()">Submit</button>
+                    </div>
+                
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+
+
+<script>
+    var bookData = <?php echo json_encode($books); ?>;
+
+    localStorage.setItem('add_book_index', 0);
+    document.querySelector("#itemTable tbody tr:first-child .remove-item").style.visibility = 'hidden';
+    document.getElementById("addItem").addEventListener("click", function() {
+        var bookArray = bookData;
+        console.log(bookArray);
+        var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+        var counter = table.rows.length;
+        var newRow = table.insertRow(table.rows.length);
+
+        var cell1 = newRow.insertCell(0);
+        cell1.style.width ="17%";
+        var cell2 = newRow.insertCell(1);
+        cell2.style.width = "8%";
+        var cell3 = newRow.insertCell(2);
+        cell3.style.width = "20%";
+        var cell4 = newRow.insertCell(3);
+        cell4.style.display = "none";
+        var cell5 = newRow.insertCell(4);
+        cell5.style.width = "22%";
+        var cell6 = newRow.insertCell(5);
+        cell6.style.width = "15%";
+        var cell7 = newRow.insertCell(6);
+        cell7.style.width = "5%";
+        cell7.className = "last-column";
+
+        // var cell9 = newRow.insertCell(8);
+
+        html = `<select class="form-control book-select fixed-width-select" id="book${counter}" name="item_details[]" onchange="displayBookTag(this, ${counter})" data-toggle="select2" required>
+                    <option value="">Select a <?= $flag_name ?></option>
+                    <option value="add_new_book">+ Add New Book</option>`;
+
+        // Populate options from the bookArray
+        bookArray.forEach(function(book) {
+
+            html += `<option value="${book.book_id}">${book.title}</option>`;
+
+        });
+
+        html += `</select>`;
+        cell1.innerHTML = html;
+
+        // cell1.innerHTML = '<input type="text" class="form-control" name="item_details[]">';
+        cell1.innerHTML += '<span>&ensp;</span><textarea name="description[]" class="form-control" placeholder="Enter Description" id="description'+counter+'" rows="2"  style="border: 1px dashed #ddd"></textarea>';
+        cell1.innerHTML += '<input type="hidden" class="form-control" id="hiddenInvoiceChildId' + counter + '" placeholder="hidden for invoice child/item id" name="invoice_child_id[]" value="">';
+        cell2.innerHTML = '<input type="number" class="form-control item-quantity" id="quantity' + counter + '" name="quantity[]" oninput="calculateInvoice(this,' + counter + ')" min="1">';
+        cell3.innerHTML = '<input type="number" class="form-control item-rate" id="rate' + counter + '" name="rate[]" oninput="calculateInvoice(this,' + counter + ')" min="0" step="0.001">';
+        cell4.innerHTML = '<input type="hidden" type="number" class="form-control item-tax" id="tax' + counter + '" name="tax[]" min="0" step="0.001">';
+        cell5.innerHTML = '<div class="input-group"><input type="number" style="width: 41%;" class="form-control item-discount-amount" id="item_discount_amount' + counter + '" name="discount_amount[]" oninput="calculateInvoice(this,' + counter + ')" min="0" step="0.001"><select class="item-discount-type custom-select" style=""width:12%;" id="item_discount_type' + counter + '" name="discount_type[]" oninput="calculateInvoice(this,' + counter + ')"><option value="%">%</option><option value="₹">₹</option></select></div>';
+        cell6.innerHTML = '<input type="number" class="form-control item-amount" id="amount' + counter + '" name="amount[]" min="0" step="0.001">';
+        cell7.innerHTML = '<span class="icon"><center><i class="fa fa-trash remove-item "></i></center></span>';
+        $(newRow.querySelector('.book-select')).select2();
+        localStorage.setItem('add_book_index', counter);
+
+
+    });
+
+    function displayBookTag(inputElement, counter) {
+        var row = inputElement.parentElement.parentElement;
+        var bookId = inputElement.value;
+
+        // Check if the selected option is "add_new_book"
+        if (bookId === "add_new_book") {
+            // Open the modal dialog for adding a new book
+            $('#addBookModal').modal('show');
+            // Reset the select back to its default value
+            $(inputElement).val('');
+        } else {
+            // Get the selected book details
+            var selectedBook = bookData.find(book => book.book_id == bookId);
+
+            if (selectedBook) {
+                // console.log(row);
+                // Update the fields in the current row with book details
+                row.querySelector('#quantity' + counter).value = 1;
+                row.querySelector('#rate' + counter).value = selectedBook.price;
+                // row.querySelector('#rate' + counter).readOnly = true;
+                row.querySelector("#tax" + counter).value = selectedBook.tax ? selectedBook.tax : 0;
+                row.querySelector("#tax" + counter).readOnly = true;
+                calculateInvoice(inputElement, counter);
+            } else {
+                console.log(bookData);
+                // Handle case where selectedBook is undefined
+                console.log("Book ID:", bookId); // Check the extracted book ID
+                console.log("Book Array:", bookData);
+                console.error("Selected book not found!");
+            }
+        }
+    }
+
+
+    function calculateInvoice(inputElement, counter) {
+        if (!inputElement.classList.contains('item-quantity') && !inputElement.classList.contains('book-select')) {
+            $('#discount-type').hide();
+            $('#discount-type').removeAttr('name');
+        }
+        
+
+        
+        var row = inputElement.parentElement.parentElement;
+        var quantity = parseFloat(row.querySelector('#quantity' + counter).value);
+        var rate = parseFloat(row.querySelector('#rate' + counter).value);
+        var discountType = row.querySelector('select[name="discount_type[]"]').value; // Get the selected discount type
+        if (!inputElement.classList.contains('item-quantity')) {
+            var discountAmount = parseFloat(row.querySelector('input[name="discount_amount[]"]').value) || 0;
+        }
+
+        console.log(rate);
+        if (!isNaN(quantity) && !isNaN(rate)) {
+            var amount = quantity * rate;
+            amount = parseFloat(amount).toFixed(2);
+            if (discountType === '₹') {
+                // Calculate discount based on ₹
+                var discountedAmount = parseFloat(amount - discountAmount);
+                row.querySelector('#amount' + counter).value = parseFloat(amount).toFixed(2);
+            } else if (discountType === '%') {
+                // Calculate discount based on %
+                var discountPercentage = discountAmount;
+                var discountValue = parseFloat((amount * discountPercentage) / 100);
+                var discountedAmount = parseFloat(amount - discountValue);
+                row.querySelector('#amount' + counter).value = parseFloat(amount).toFixed(2);
+            } else {
+                // Invalid discount type
+                row.querySelector('#amount' + counter).value = parseFloat(amount).toFixed(2); // No discount applied
+            }
+        } else {
+            row.querySelector('#amount' + counter).value = ''; // Clear the amount if either quantity or rate is not a number
+        }
+        row.querySelector('#amount' + counter).readOnly = true;
+        calculateOverallTotals(inputElement);
+    }
+
+    function calculateOverallTotals(inputElement = 0) {
+        var itemAmountInputs = document.querySelectorAll('.item-amount');
+        var itemTaxInputs = document.querySelectorAll('.item-tax');
+        var itemDiscountAmountInputs = document.querySelectorAll('.item-discount-amount');
+        var itemDiscountTypeInputs = document.querySelectorAll('.item-discount-type');
+
+        var overallAmount = 0;
+        var overallTax = 0;
+        var overallDiscount = 0;
+
+        itemAmountInputs.forEach(function(input, index) {
+            var amount = parseFloat(input.value) || 0;
+            overallAmount += amount;
+
+            var tax = parseFloat(itemTaxInputs[index].value) || 0;
+            overallTax += tax;
+
+            var discountType = itemDiscountTypeInputs[index].value;
+            var discountAmount = parseFloat(itemDiscountAmountInputs[index].value) || 0;
+
+            if (discountType === '₹') {
+                overallDiscount += discountAmount;
+            } else if (discountType === '%') {
+                var discountValue = (amount * discountAmount) / 100;
+                overallDiscount += discountValue;
+            }
+        });
+
+        // Get the shipping charges value, tax, and discount values
+        var shippingCharges = parseFloat(document.getElementById('shippingCharges').value) || 0;
+        var tax = parseFloat($("#invoicetax").val()) || 0;
+        var discount = parseFloat($("#discount").val()) || 0;
+
+        // Calculate the total using the formula: subtotal - tax + shipping - discount
+        var total = overallAmount - overallTax + shippingCharges - overallDiscount;
+        console.log(total);
+
+        // Update the subtotal, tax, shipping charges, discount, and total in the calculation card
+        var subtotalElement = parseFloat(overallAmount.toFixed(2));
+        $("#subtotal").val(subtotalElement);
+
+        var taxElement = parseFloat(overallTax.toFixed(2));
+        $("#invoicetax").val(taxElement);
+
+        var discountElement = parseFloat(overallDiscount.toFixed(2));
+        if ($('#discount-type').css('display') == 'none') {
+            $("#discount").val(discountElement);
+        }
+
+        var totalElement = Math.round(total);
+        $("#exacttotal").val(parseFloat(total.toFixed(2)));
+        $("#grandtotal").val(totalElement);
+        var status = document.getElementById('status').value;
+
+        // $("#balanceAmount").val(totalElement);
+        if (status == 'Draft' || status == '') {
+            $("#balanceAmount").val(totalElement);
+            $("#paidAmount").val('0');
+        } else if (status == 'Approved') {
+            $("#balanceAmount").val('0');
+            $("#paidAmount").val(totalElement);
+        }
+
+        if (inputElement == 0) {
+            if ($('#discount-type').css('display') == 'block') {
+                var dis_count_value = 0;
+                var shippingCharges = parseInt($('#shippingCharges').val());
+                var subtotal = $('#subtotal').val();
+                if ($('#discount-type').val() == '%') {
+                    dis_count_value = subtotal *  $('#discount').val() / 100;
+
+                }else{
+                    dis_count_value =subtotal -  $('#discount').val();
+                }
+
+                if (isNaN(shippingCharges)) {
+                    shippingCharges =0;
+                }
+                $('#exacttotal').val((subtotal - dis_count_value) + shippingCharges);
+                $('#grandtotal').val((subtotal - dis_count_value) + shippingCharges);
+                $('#balanceAmount').val((subtotal - dis_count_value) + shippingCharges);
+                
+            }
+        }else if (inputElement.classList.contains('item-quantity')) {
+
+            var hasValue = false;
+            $('.item-discount-amount').each(function() {
+                if ($(this).val().trim() !== "") {
+                     hasValue = true;
+                } else {
+                     hasValue = false;
+                }
+            });
+
+            if(!hasValue){
+                $('#discount').trigger('change');
+            }
+        }
+
+        
+
+        if (inputElement.classList.contains('book-select')) {
+                
+            if ($('#discount-type').css('display') != 'none') {
+
+                var discount =$('#discount').val();
+                var subtotal= $('#subtotal').val();
+                var shippingCharges = parseInt($('#shippingCharges').val());
+
+                var last_multiple_value = 0 ;               
+                if ($('#discount-type').val() == '%') {
+                    
+                    last_multiple_value = (subtotal * discount) / 100;
+                } else {
+                    last_multiple_value = subtotal - discount;
+                }
+                
+                if (isNaN(shippingCharges)) {
+                    shippingCharges =0;
+                }
+
+                $('#exacttotal').val(subtotal-last_multiple_value + shippingCharges);
+                $('#grandtotal').val(parseInt(subtotal - last_multiple_value + shippingCharges));
+                $('#balanceAmount').val(parseInt(subtotal - last_multiple_value + shippingCharges));
+            }
+
+        }
+        
+
+    }
+
+    // Define a function to calculate the grand total
+    function calculateGrandTotal() {
+        var invoiceItems = []; // Create an empty array to store item details
+
+        // Loop through the rows of the item table to gather item details
+        var rows = document.querySelectorAll("#itemTable tbody tr");
+        rows.forEach(function(row) {
+            var item = {
+                subtotal: parseFloat(row.querySelector('input[name="amount[]"]').value) || 0,
+                discount_amount: parseFloat(row.querySelector('input[name="discount_amount[]"]').value) ||
+                    0,
+                discount_type: row.querySelector('select[name="discount_type[]"]').value
+            };
+            invoiceItems.push(item); // Add the item to the array
+        });
+
+        // Now you have the invoiceItems array populated with item details
+
+        // Calculate the grand total based on the invoiceItems array
+        var grandTotal = 0;
+        var manuallyEnteredDiscount = parseFloat(document.getElementById("discount").value) || 0;
+
+        invoiceItems.forEach(function(item) {
+            var amount = item.subtotal;
+
+            // Check if a discount is entered for the item, and if so, don't apply it again
+            if (item.discount_type === '₹' && item.discount_amount > 0) {
+                amount += item.discount_amount; // Add the discount back to the amount
+            } else if (item.discount_type === '%' && item.discount_amount > 0) {
+                var discountValue = (amount * item.discount_amount) / 100;
+                amount += discountValue; // Add the discount back to the amount
+            }
+
+            grandTotal += amount;
+        });
+
+        // Add the manually entered discount to the grand total
+        grandTotal -= manuallyEnteredDiscount;
+
+        console.log($('#discount-type'));
+
+        // Update the grand total in the UI
+        var grandTotalElement = parseFloat(grandTotal.toFixed(2));
+        document.getElementById("exacttotal").value = grandTotalElement;
+        document.getElementById("grandtotal").value = Math.round(grandTotalElement);
+    }
+</script>
+
+<!-- JavaScript for removing a row from the table -->
+<script>
+    // Function to remove a row from the table
+    function removeItem(row) {
+        var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+        table.removeChild(row);
+        calculateOverallTotals(); // Call the calculation function to update the totals
+    }
+
+    // Attach the removeItem function to the Remove buttons using event delegation
+    document.querySelector("#itemTable tbody").addEventListener("click", function(event) {
+        if (event.target.classList.contains("remove-item")) {
+            var row = event.target.closest("tr"); // Find the closest row to the clicked button
+            removeItem(row);
+        }
+    });
+</script>
+
+<script>
+    global_billarr = "";
+    global_billid = "";
+    $(document).ready(function() {
+        var iid_arr = <?php echo json_encode($invoice_item_details); ?>;
+        var custid = "<?= isset($invoice_details['customer_id']) ? $invoice_details['customer_id'] : ""; ?>";
+        var inv_number = "<?= isset($invoice_details['invoice_number']) ? $invoice_details['invoice_number'] : ""; ?>";
+        var ship_addrid = "";
+        if (custid != '') {
+            ship_addrid = "<?= isset($invoice_details['shipping_address_id']) ? $invoice_details['shipping_address_id'] : ""; ?>";
+            var bill_addrid = "<?= isset($invoice_details['billing_address_id']) ? $invoice_details['billing_address_id'] : ""; ?>";
+            var cust_ship_arr = <?= isset($customer_shipping_arr) ? json_encode($customer_shipping_arr) : "[]"; ?>;
+            if (cust_ship_arr.length > 0) {
+                $.each(cust_ship_arr, function(k, v) {
+                    $('#loadShippingDropdown').append($('<option>', {
+                        value: v.customer_address_id,
+                        text: v.address,
+                        selected: (v.customer_address_id == ship_addrid) ? true : false
+                    }));
+                });
+            }
+            if ((bill_addrid === "" || parseInt(bill_addrid) === 0)) {
+                $('#editAddressesCheckbox').prop('checked', true);
+                // $("#storeBillingAddress").prop("readonly", false);
+                $("#storeBillingAddress").prop("readonly", true);
+                $("#storeShippingAddress").prop("readonly", true);
+
+            }
+            $('#hiddenBillingAddressId').val(bill_addrid);
+            get_customer_membership_details(custid)
+        }
+        if (inv_number != '') {
+            $("#invoiceNumber").val(inv_number).prop("readonly", true);
+        } else {
+            var numbering_arr = <?php echo json_encode($invoice_number_formatting); ?>;
+            // console.log(numbering_arr);
+            var filtered_data = $.grep(numbering_arr, function(item) {
+                return item.id === '1';
+            });
+            var final_sno = generateSerialNumber(filtered_data);
+            $("#invoiceNumber").val(final_sno).prop("readonly", true);
+        }
+
+        var fromDateValue = "<?= isset($invoice_item_details[0]['from_subscription']) ? $invoice_item_details[0]['from_subscription'] : ""; ?>";
+        if (fromDateValue != '') {
+            updateToDateMinDate(fromDateValue)
+        }
+
+        $("#editAddressesCheckbox").on("change", function() {
+            if ($(this).is(":checked")) {
+                
+                    // $("#storeBillingAddress").prop("readonly", false);
+                    $("#storeBillingAddress").prop("readonly", true);
+                    $("#storeShippingAddress").prop("readonly", true);
+                    $('#hiddenBillingAddressId').val(0);
+
+                    $('#billing_shipping_addresses_modal').modal('show');
+                    $.ajax({
+                        type: "GET",
+                        url: "<?= base_url() . 'get_country' ?>",
+                        success: function(response) {
+                            var countries = JSON.parse(response);
+            
+                            // Loop through the countries array
+                            $.each(countries, function(index, country) {
+                                // Append an <option> element for each country
+                                $('#quick_billing_country').append('<option value="' + country.country_short_name + '">' + country.country_name + '</option>');
+                                $('#quick_shipping_country').append('<option value="' + country.country_short_name + '">' + country.country_name + '</option>');
+                            });                    },
+                        error: function() {
+                            alert("Error fetching address.");
+                        }
+                    });
+                
+            } else {
+                $("#storeBillingAddress").prop("readonly", true);
+                $("#storeShippingAddress").prop("readonly", true);
+
+                if (global_billarr !== "") {
+                    $("#storeBillingAddress").val(global_billarr);
+                    $('#hiddenBillingAddressId').val(global_billid);
+                }
+
+
+            }
+        });
+
+        function generateSerialNumber(filtered_data) {
+
+            var next_id_string = filtered_data[0].next_id;
+            var left_pad_string = filtered_data[0].left_pad;
+            // var prefix_string = String(filtered_data[0].id_formating); // don't remove
+            var prefix_string = <?= json_encode($financial_year); ?>;
+            var left_pad_numberic = parseInt(left_pad_string);
+            var next_id_numberic = parseInt(next_id_string);
+
+            var padded_id = next_id_string.padStart(left_pad_numberic, '0');
+
+            var serial_number = prefix_string + '-' + padded_id;
+            next_id_numberic++;
+            $("#hiddenNextId").val(next_id_numberic).prop("readonly", true);
+
+            return serial_number;
+        }
+
+
+        if (custid != '' && (ship_addrid == undefined || ship_addrid == null || ship_addrid == '0' || ship_addrid == '')) {
+
+            // $("#storeShippingAddress").prop("readonly", false);
+            $("#storeShippingAddress").prop("readonly", true);
+            console.log('ship addrid is undefined, null, 0, or empty');
+        }
+
+    });
+
+    //  Billing ajax call    
+    function get_customer_billing_details(cust_id) {
+
+        if (cust_id == '0') {
+            $('#customerModal').modal('show');
+        }else if(cust_id != ''){
+            $('#editAddressesCheckbox').prop('checked', false);
+            // $("#storeBillingAddress").prop("readonly", false);
+            $("#storeBillingAddress").prop("readonly", true);
+            // $("#storeShippingAddress").prop("readonly", false);
+            $("#storeShippingAddress").prop("readonly", true);
+            $('#customerModal').modal('hide');
+            $('#cus_mobile_no').val("");
+            $('#cus_first_name').val("");
+            $('#cus_last_name').val("");
+            $('#cus_email').val("");
+            $('#baddress1').val("");$('#baddress2').val("");$('#bcountry').val("");$('#bstate').val("");$('#bcity').val("");$('#bzip').val("");
+            $('#saddress1').val("");$('#saddress2').val("");$('#scountry').val("");$('#sstate').val("");$('#scity').val("");$('#szip').val("");
+            $("#emailValidationMessage").text("");
+            $("#mobileValidationMessage").text("");
+            $('#addressCopiedAsShipping').prop('checked', false);
+            $('.save-invoice-customer').prop('disabled', false);
+            $.ajax({
+                type: "POST",
+                url: "<?= base_url() . 'get_customer_billing_details' ?>",
+                data: {
+                    customer_id: cust_id
+                },
+                success: function(response) {
+                    cs = response['data']['customer_shipping'];
+                    cb = response['data']['customer_billing'];
+                    $('#hiddenBillingAddressId').val('');
+                    $("#editAddressesCheckbox").prop("checked", false);
+                    global_billarr = "";
+                    global_billid = "";
+                    var customer_billing_addressDetails = [];
+                    if (cb.length > 0) {
+                        cb = [cb[0]];
+                        console.log("cFAFAFAbbb",cb);
+                        $.each(cb, function(k, v) {
+                            var state = v.state_name ? v.state_name : v.state;
+                            state = v.postal_code ? state + "-" + v.postal_code : state;
+                            v.address_1 ? customer_billing_addressDetails.push(v.address_1 + " " + v.address_2) : "";
+                            v.city ? customer_billing_addressDetails.push(v.city) : "";
+                            state ? customer_billing_addressDetails.push(state) : "";
+                            v.country_name ? customer_billing_addressDetails.push(v.country_name) : "";
+                            customer_billing_id = v.customer_address_id;
+                            $('#hidden_first_name').val(v.first_name);
+                            $('#hidden_last_name').val(v.last_name);
+                        });
+                    }else{
+                        
+                    }
+                    global_billarr = customer_billing_addressDetails.join(', ') + ".";
+                    global_billid = customer_billing_id;
+                    $("#storeBillingAddress").val(global_billarr).prop("readonly", true);
+                    $('#hiddenBillingAddressId').val(global_billid);
+                    if (cs.length > 0) {
+                        $('#loadShippingDropdown').empty();
+                        $('#loadShippingDropdown').append($('<option>', {
+                            value: "",
+                            text: "Select an address"
+                        }));
+                        $.each(cs, function(k, v) {
+                            $('#loadShippingDropdown').append($('<option>', {
+                                value: v.customer_address_id,
+                                text: v.address,
+                            }));
+                        });
+                        $("#storeShippingAddress").val('');
+                    } else {
+                        $('#loadShippingDropdown').empty();
+                        $('#loadShippingDropdown').append($('<option>', {
+                            value: "",
+                            text: "Select an address"
+                        }));
+                        $("#editAddressesCheckbox").prop("checked", false);
+                        // $("#storeBillingAddress").prop("readonly", false);
+                        $("#storeBillingAddress").prop("readonly", true);
+                        $("#storeShippingAddress").prop("readonly", true);
+                    }
+                },
+                error: function() {
+                    alert("Error fetching address.");
+                    $("#editAddressesCheckbox").prop("checked", false);
+                    // $("#storeBillingAddress").prop("readonly", false);
+                    $("#storeBillingAddress").prop("readonly", true);   
+                    $("#storeShippingAddress").prop("readonly", true);
+                }
+            });
+        }
+    }
+
+
+    //  shipping ajax call
+    function get_customer_shipping_details(ship_addr_id) {
+        var cust_id = $("#customerName").val();
+        $.ajax({
+            type: "POST",
+            url: "<?= base_url() . 'get_customer_shipping_details' ?>",
+            data: {
+                shipping_address_id: ship_addr_id,
+                customer_id: cust_id
+            },
+            success: function(response) {
+                cs = response['data']['customer_shipping'];
+                customer_shipping = "";
+                customer_shipping_addressDetails = [];
+                if (cs.length > 0) {
+                    $.each(cs, function(k, v) {
+                        var state = v.state_name ? v.state_name : v.state;
+                        state = v.postal_code ? state + "-" + v.postal_code : state;
+                        v.address_1 ? customer_shipping_addressDetails.push(v.address_1 + " " + v.address_2) : "";
+                        v.city ? customer_shipping_addressDetails.push(v.city) : "";
+                        state ? customer_shipping_addressDetails.push(state) : "";
+                        v.country_name ? customer_shipping_addressDetails.push(v.country_name) : "";
+                        customer_shipping_id = v.customer_address_id;
+                        $('#hidden_first_name').val(v.first_name);
+                        $('#hidden_last_name').val(v.last_name);
+                    });
+                }
+                $("#storeShippingAddress").val(customer_shipping_addressDetails.join(', ') + ".").prop("readonly", true);
+            },
+            error: function() {
+                alert("Error fetching address.");
+            }
+        });
+    }
+
+    // membership ajax call
+    function get_customer_membership_details(cust_id) {
+     if (parseInt(cust_id) > 0) {
+        $.ajax({
+            type: "POST",
+            url: "<?= base_url() . 'get_customer_membership_details' ?>",
+            data: {
+                customer_id: cust_id
+            },
+            success: function(response) {
+                cm = response['data']['customer_membership'];
+                cm.sort(function(a, b) {
+                    return b.is_renew - a.is_renew;
+                });
+                if (cm.length > 0) {
+                    text1 = cm[0].is_renew == 1 ? " - Renewal" : "";
+                    text2 = cm[0].isactive == 0 ? " - Expried" : "";
+                    $(".subscribedetails").show(); // Change this line to use the class selector
+                    $("#schemeName").text("Earlier Membership : " + cm[0].title + " ( From: " + cm[0].formatted_from_subscription + " To: " + cm[0].formatted_to_subscription + " )" + text1 + text2);
+                } else {
+                    $(".subscribedetails").show(); // Change this line to use the class selector
+                    $("#schemeName").text("No Earlier Membership found");
+                }
+            },
+            error: function() {
+                alert("Error fetching address.");
+            }
+        });
+     }
+    }
+</script>
+<!-- bill_addr = "<?= isset($invoice_details['billing_address']) ? $invoice_details['billing_address'] : ""; ?>"; -->
+<!-- if (bill_addr != '') { $("#storeBillingAddress").val(bill_addr);} -->
+<script>
+    document.getElementById('saveapproved').addEventListener('click', function(event) {
+        var paymentMode = document.getElementById('paymentMode').value;
+
+        if (paymentMode !== "") {
+            // Get the balance amount
+            var balanceAmount = parseFloat(document.getElementById('balanceAmount').value) || 0;
+
+            // Replicate the balance amount value to the paid amount
+            document.getElementById('paidAmount').value = balanceAmount;
+
+            // Set the status field to 'Draft' before submitting
+            document.getElementById('status').value = 'Approved';
+        } else {
+            // Prevent the form submission
+            // document.getElementById('paymentMode').focus();
+            alert("Choose Your payment Mode ");
+            event.preventDefault(); // Pass the event parameter here
+        }
+    });
+</script>
+<script>
+    // Get the Invoice Date input element by its ID
+    const invoiceDateInput = document.getElementById("invoiceDate");
+
+    // Get the current date
+    const currentDate = new Date();
+
+    // Calculate the min and max date strings
+    const minDate = "YYYY-MM-DD"; // Replace with your desired minimum date
+    const maxDate = currentDate.toISOString().split("T")[0]; // Today's date in YYYY-MM-DD format
+
+    // Set the min and max date attributes
+    invoiceDateInput.setAttribute("min", minDate);
+    invoiceDateInput.setAttribute("max", maxDate);
+
+    const fromsubcriptionDateInput = document.getElementById("fromsubcription");
+    fromsubcriptionDateInput.setAttribute("max", maxDate);
+
+    function updateToDateMinDate(fromDateValue) {
+        const toDateInput = document.getElementById('tosubcription');
+        toDateInput.min = fromDateValue;
+    }
+
+    // function updateToDateMinDate(fromDateValue) {
+    //     const toDateInput = document.getElementById('tosubcription');
+
+    //     // Convert fromDateValue to a Date object
+    //     const fromDate = new Date(fromDateValue);
+
+    //     // Set the min attribute of 'tosubcription' input
+    //     toDateInput.min = fromDateValue;
+
+    //     // Calculate the date 1 year from the selected date
+    //     const maxDate = new Date(fromDate);
+    //     maxDate.setFullYear(fromDate.getFullYear() + 1);
+
+    //     // Format the max date as 'YYYY-MM-DD' (the format used by the 'date' input)
+    //     const formattedMaxDate = maxDate.toISOString().split('T')[0];
+
+    //     // Set the max attribute and default value of 'tosubcription' input
+    //     toDateInput.max = formattedMaxDate;
+    //     toDateInput.value = formattedMaxDate;
+    // }
+</script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        // Get the Due Date input element by its ID
+        // const dueDateInput = document.getElementById("dueDate");
+
+        // Get the current date
+        // const currentDate = new Date();
+
+        // Set the minimum date attribute to today's date (YYYY-MM-DD format)
+        // const minDate = currentDate.toISOString().split("T")[0];
+        // dueDateInput.setAttribute("min", minDate);
+
+        // Optional: Set the default value to today's date
+
+    });
+</script>
+<script>
+    // When the "Save as Approved" button is clicked
+    document.getElementById('saveApprovedButton').addEventListener('click', function() {
+        // Show the payment modal
+        $('#paymentModal').modal('show');
+
+
+        // When the "Confirm Payment" button in the modal is clicked
+        // Get the selected mode of payment
+        var selectedPaymentMode = document.getElementById('paymentMode').value;
+
+        // You can now use the selected payment mode as needed
+        // console.log('Selected Payment Mode: ' + selectedPaymentMode);
+
+        // Close the modal
+        $('#paymentModal').modal('hide');
+        document.getElementById('paymentMode').value = "";
+    });
+    // Add event listener for the "Close" button
+    document.getElementById('paymentModal').addEventListener('hidden.bs.modal', function() {
+        // Reset the payment_method value to an empty string
+        document.getElementById('paymentMode').value = "";
+    });
+</script>
+<script>
+    document.getElementById('myForm').addEventListener('submit', function(event) {
+        var form = event.target;
+        var status = document.getElementById('status').value;
+        if (form.checkValidity() === false) {
+            form.reportValidity(); // Display validation error messages
+            event.preventDefault(); // Prevent form submission if it's not valid
+            if (status == "Draft") {
+                $('#saveDraftButton').prop('disabled', false);
+                $('#saveApprovedButton').prop('disabled', false);
+                $('#saveapproved').prop('disabled', false);
+            }
+            if (status == "Approved") {
+                $('#saveDraftButton').prop('disabled', false);
+                $('#saveApprovedButton').prop('disabled', false);
+                $('#saveapproved').prop('disabled', false);
+            }
+        } else {
+            var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+            var counter = table.rows.length;
+            if (counter == 0) {
+                event.preventDefault(); // Prevent form submission if it's not valid
+                alert('At least one row should contain a values.');
+                $('#saveDraftButton').prop('disabled', false);
+                $('#saveApprovedButton').prop('disabled', false);
+                $('#saveapproved').prop('disabled', false);
+            } else {
+                if (status == "Draft") {
+                    $('#saveDraftButton').prop('disabled', true);
+                    $('#saveApprovedButton').prop('disabled', true);
+                    $('#saveapproved').prop('disabled', true);
+                }
+                if (status == "Approved") {
+                    $('#saveDraftButton').prop('disabled', true);
+                    $('#saveApprovedButton').prop('disabled', true);
+                    $('#saveapproved').prop('disabled', true);
+                }
+            }
+        }
+    });
+</script>
+<script>
+    function validateEmail(email) {
+        // Regular expression for a basic email validation
+        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+
+        var emailInput = document.getElementById("cus_email");
+        var validationMessage = document.getElementById("emailValidationMessage");
+
+        if (emailPattern.test(email)) {
+            validationMessage.textContent = "";
+        } else if (email == "") {
+            validationMessage.textContent = "";
+        } else {
+            validationMessage.textContent = "Invalid email address";
+            validationMessage.style.color = "red";
+        }
+    }
+
+    function checkExisting(inputvalue, fieldname, elementid) {
+        spanid = elementid == 'cus_email' ? "emailValidationMessage" : "mobileValidationMessage";
+        var validationMessage = document.getElementById(spanid);
+        $.ajax({
+            type: "POST",
+            url: "<?= base_url() . 'check_existing' ?>",
+            data: {
+                value: inputvalue,
+                module: 'customers',
+                field: fieldname
+            },
+            success: function(response) {
+                if (response['data']['status']) {
+                    validationMessage.textContent = response['data']['message'];
+                    validationMessage.style.color = "red";
+                    document.getElementById(elementid).value = "";
+                } else {
+                    validationMessage.textContent = "";
+                }
+            },
+            error: function() {
+                alert("Error occur.");
+            }
+        });
+    }
+
+    function restriction(event) {
+        var charCode = event.which || event.keyCode;
+        if ((charCode >= 48 && charCode <= 57)) {
+            return true;
+        } else {
+            event.preventDefault(); // Prevent the character from being entered
+            return false;
+        }
+    }
+</script>
+<script> 
+function saveInvoiceCustomer() {
+        var cus_first_name = document.getElementById("cus_first_name");
+        var cus_last_name = document.getElementById("cus_last_name");
+        var cus_email = document.getElementById("cus_email");
+        var cus_mobile_no = document.getElementById("cus_mobile_no");
+
+        var baddress1 = document.getElementById("baddress1");
+        var baddress2 = document.getElementById("baddress2");
+        var bcountry = document.getElementById("bcountry");
+        var bstate = document.getElementById("bstate");
+        var bcity = document.getElementById("bcity");
+        var bzip = document.getElementById("bpincode");
+
+        var saddress1 = document.getElementById("saddress1");
+        var saddress2 = document.getElementById("saddress2");
+        var scountry = document.getElementById("scountry");
+        var sstate = document.getElementById("sstate");
+        var scity = document.getElementById("scity");
+        var szip = document.getElementById("spincode");
+        $("#storeBillingAddress").val("");
+        $("#storeShippingAddress").val("");
+        if (!cus_first_name.value) {
+            // alert("Please fill in all required fields.");
+            alert("Please fill the Name.");
+            return;
+        }
+        $('.save-invoice-customer').prop('disabled', true);
+        $.ajax({
+            type: "POST",
+            url: "<?= base_url() . 'save_invoice_customer' ?>",
+            data: {
+                cus_first_name: cus_first_name.value,
+                cus_last_name: cus_last_name.value,
+                cus_email: cus_email.value,
+                cus_mobile_no: cus_mobile_no.value,
+                baddress1: baddress1.value,
+                baddress2: baddress2.value,
+                bcountry: bcountry.value,
+                bstate: bstate.value,
+                bcity: bcity.value,
+                bzip: bzip.value,
+                saddress1: saddress1.value,
+                saddress2: saddress2.value,
+                scountry: scountry.value,
+                sstate: sstate.value,
+                scity: scity.value,
+                szip: szip.value
+            },
+            success: function(response) {
+                console.log(response['data']);
+                if (response['data']['status']) {
+                   
+                    // Handle success response
+                    alert(response['data']['message']);
+
+                    // Append the customer's name to the dropdown
+                    var customerName = response['data']['cus_name'];
+                    var customerId = response['data']['cus_id'];
+                    var bAddressId = response['data']['billing_addr_id'];
+                    var sAddressId = response['data']['shipping_addr_id'];
+                    if(bAddressId !== null ){
+                        var ajax_billarr = "";
+                        var ajax_billing_address_arr = [];
+                        var fbstate = bstate.value ? bstate.value + "-" + bzip.value : bstate.value;
+                            baddress1.value ? ajax_billing_address_arr.push(baddress1.value + " " + baddress2.value) : "";
+                            bcity.value ? ajax_billing_address_arr.push(bcity.value) : "";
+                            fbstate ? ajax_billing_address_arr.push(fbstate) : "";
+                            bcountry.value ? ajax_billing_address_arr.push(bcountry.value) : "";
+                            ajax_billarr = ajax_billing_address_arr.join(', \n') + ".";
+                        $("#storeBillingAddress").val(ajax_billarr).prop("readonly", true);
+                        $('#hiddenBillingAddressId').val(bAddressId);
+                    }else{
+                        console.log("editAddress checkbox valid - true");
+                        $("#editAddressesCheckbox").prop("checked", false);
+                        // $("#storeBillingAddress").val("").prop("readonly", false);
+                        $("#storeBillingAddress").val("").prop("readonly", true);
+                        $("#storeShippingAddress").prop("readonly", true);
+                        $('#loadShippingDropdown').empty().append($('<option>', {value: "",text: "Select an address"}));
+                    }
+                    if(sAddressId !== null ){
+                        var ajax_shiparr = "";
+                        var ajax_shipping_address_arr = [];
+                        var fsstate = sstate.value ? sstate.value + "-" + szip.value : sstate.value;
+                            saddress1.value ? ajax_shipping_address_arr.push(saddress1.value + " " + saddress2.value) : "";
+                            scity.value ? ajax_shipping_address_arr.push(scity.value) : "";
+                            fsstate ? ajax_shipping_address_arr.push(fsstate) : "";
+                            scountry.value ? ajax_shipping_address_arr.push(scountry.value) : "";
+                            ajax_shiparr = ajax_shipping_address_arr.join(', \n') + ".";
+                        var newShippingAddrOption = $('<option>', {
+                            value: sAddressId,
+                            text: saddress1.value + " " + saddress2.value,
+                            selected: true // Optionally select the new option
+                        });
+                        $("#storeShippingAddress").val(ajax_shiparr).prop("readonly", true);
+                        $('#loadShippingDropdown').empty().append(newShippingAddrOption);
+                    }else{
+                        // $("#storeShippingAddress").val("").prop("readonly", false);
+                        $("#storeShippingAddress").val("").prop("readonly", true);
+                        $('#loadShippingDropdown').empty().append($('<option>', {value: "",text: "Select an address"}));
+                    }
+                    // Create a new option element
+                    var newOption = $('<option>', {
+                        value: customerId,
+                        text: customerName,
+                        selected: true // Optionally select the new option
+                    });
+
+                    // Append the new option to the dropdown
+                    $('#customerName').append(newOption);
+                    $('#customerModal').modal('hide');
+                        cus_first_name.value = "";cus_last_name.value = "";
+                        cus_email.value = "";cus_mobile_no.value = "";
+                        baddress1.value = "";baddress2.value = "";bcountry.value = "";bstate.value = "";bcity.value = "";bzip.value = "";
+                        saddress1.value = "";saddress2.value = "";scountry.value = "";sstate.value = "";scity.value = "";szip.value = "";
+                        document.getElementById("emailValidationMessage").textContent = "";
+                        document.getElementById("mobileValidationMessage").textContent = "";
+                        document.getElementById("addressCopiedAsShipping").checked = false;
+                        $('.save-invoice-customer').prop('disabled', false);
+                    // Reload the page and select the last appended value
+                    // location.reload();
+                } else {
+                    // Handle error response
+                    alert(response['data']['message']);
+                }
+            },
+
+            error: function() {
+                alert("Error occurred while saving customer.");
+            }
+        });
+    }   
+</script>
+
+<script>
+    $('.closeCustomerModal').click(function() {
+        // Reset customer dropdown value
+        $('#customerName').val("").trigger('change');
+        // Optionally, reset input fields
+        $('#cus_first_name').val("");
+        $('#cus_last_name').val("");
+        $('#cus_email').val("");
+        $('#cus_mobile_no').val("");
+        $('#baddress1').val("");
+        $('#baddress2').val("");
+        $('#bcountry').val("");
+        $('#bstate').val("");
+        $('#bcity').val("");
+        $('#bzip').val("");
+        $('#saddress1').val("");
+        $('#saddress2').val("");
+        $('#scountry').val("");
+        $('#sstate').val("");
+        $('#scity').val("");
+        $('#szip').val("");
+        $("#emailValidationMessage").text("");
+        $("#mobileValidationMessage").text("");
+        $('#editAddressesCheckbox').prop('checked', false);
+        $("#addressCopiedAsShipping").prop("checked", false);
+    });
+</script>
+<script>
+    // JavaScript code to handle form submission and AJAX request
+    $(document).ready(function() {
+        $('#addBookForm').submit(function(e) {
+            e.preventDefault(); // Prevent default form submission
+
+            // Serialize form data
+            var formData = $(this).serialize();
+
+            // Send AJAX request to save the book
+            $.ajax({
+                url: '<?php echo base_url("saveBook"); ?>', // URL to your controller function
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                success: function(response) {
+                    console.log("Response:", response); // Log the response object
+
+                    if (response.success) {
+                        // Book saved successfully
+                        alert(response.message);
+                        $('#addBookModal').modal('hide');
+                        $('#addBookForm')[0].reset();
+                        // Append the new book to the bookData array
+                        var newBook = {
+                            book_id: response.book_id,
+                            title: response.title,
+                            price: response.price,
+                            tax: response.tax
+                            // Add other properties as needed
+                        };
+                        bookData.push(newBook);
+
+                        console.log("Updated bookData:", bookData); // Log the updated bookData array
+
+                        // Retrieve the index from localStorage
+                        var addBookIndex = localStorage.getItem('add_book_index');
+
+                        // Reload only the dropdown at the specified index
+                        var dropdown = $('#itemTable tbody tr:eq(' + addBookIndex + ')').find('.book-select');
+                        dropdown.empty(); // Clear existing options
+                        // Add default and new book options
+                        dropdown.append('<option value="">Select a <?= $flag_name ?></option><option value="add_new_book">+ Add New Book</option>');
+                        bookData.forEach(function(book) {
+                            dropdown.append('<option value="' + book.book_id + '">' + book.title + '</option>');
+                        });
+                        dropdown.select2(); // Reinitialize select2
+
+                        // Select the newly added book in the dropdown
+                        dropdown.val(response.book_id).trigger('change');
+                    } else {
+                        // Failed to save book
+                        alert(response.message);
+                    }
+                },
+
+
+            });
+        });
+    });
+</script>
+<script>
+    // JavaScript code to handle voiding invoice and submitting reason
+
+    $(document).ready(function() {
+        // Handle clicking on the "Void" button
+        $('#voidButton').click(function() {
+            var invoiceId = <?= json_encode(isset($invoice_details['invoice_id']) ? $invoice_details['invoice_id'] : '') ?>;            $('#voidReasonModal').modal('show');
+            $('#submitVoidReason').data('invoiceId', invoiceId); // Set the invoice_id in the modal
+        });
+
+        // Handle submitting void reason
+        $('#submitVoidReason').click(function() {
+            var voidReason = $('#voidReason').val().trim(); // Trim the value to remove whitespace
+            var invoiceId = $(this).data('invoiceId'); // Get the invoice_id from the button data
+
+            // Check if voidReason is empty
+            if (voidReason === '') {
+                alert('Please enter a reason for voiding.');
+                return;
+            }
+
+            // Perform AJAX request to update status and reason
+            $.ajax({
+                type: 'POST',
+                url: '<?php echo base_url("updateInvoiceStatus"); ?>', // Adjust the URL to match your controller route
+                data: {
+                    invoice_id: invoiceId,
+                    void_reason: voidReason
+                },
+                success: function(response) {
+                    window.location.href = "<?php echo base_url('offline_invoice'); ?>";
+                    // Handle success response
+                    // For example, close modal and show success message
+                    $('#voidReasonModal').modal('hide');
+                    // alert('Invoice voided successfully!');
+                    // You may want to refresh the page or update the UI accordingly
+                },
+                error: function(xhr, status, error) {
+                    // Handle error response
+                    console.error(error);
+                    alert('Error occurred while voiding invoice.');
+                }
+            });
+        });
+    });
+</script>
+
+
+<script>
+    // JavaScript code to handle voiding invoice and submitting reason
+    $(document).ready(function() {
+        // Handle clicking on the "Cancel" button
+        $('#cancelButton').click(function() {
+            var invoiceIds = <?= json_encode(isset($invoice_details['invoice_id']) ? $invoice_details['invoice_id'] : '') ?>;
+            $('#cancelReasonModal').modal('show');
+            $('#cancelReasonModal').find('#cancelReason').data('invoiceIds', invoiceIds); // Set the invoice_id(s) in the modal
+        });
+
+        // Handle submitting cancel reason
+        $('#submitCancelReason').click(function() {
+            var cancelReason = $('#cancelReason').val();
+            var invoiceIds = $('#cancelReason').data('invoiceIds'); // Get the invoice_id(s) from the modal
+            if (cancelReason === '') {
+                alert('Please enter a reason for Cancelling.');
+                return;
+            }
+
+            // Perform AJAX request to update status and reason
+            $.ajax({
+                type: 'POST',
+                url: '<?php echo base_url("updateInvoiceCancelStatus"); ?>', // Adjust the URL to match your controller route
+                data: {
+                    invoice_id: invoiceIds,
+                    cancel_reason: cancelReason
+                },
+                success: function(response) {
+                    // Redirect to the invoice_list page upon successful cancellation
+                    window.location.href = "<?php echo base_url('offline_invoice'); ?>";
+                },
+                error: function(xhr, status, error) {
+                    // Handle error response
+                    console.error(error);
+                    alert('Error occurred while canceling invoice.');
+                }
+            });
+        });
+    });
+</script>
+<script>
+    $(document).ready(function() {
+        var status = "<?php echo isset($invoice_details['status']) ? $invoice_details['status'] : ''; ?>";
+
+        // Function to hide all buttons
+        function hideAllButtons() {
+            $('#cancelButton, #saveDraftButton, #voidButton, #saveApprovedButton').hide();
+        }
+
+        // Function to show buttons based on status
+        function showButtonsBasedOnStatus(status) {
+            hideAllButtons(); // Hide all buttons first
+
+            if (status === '') {
+                // Case 1: When status is empty, show Draft and Approved buttons
+                $('#saveDraftButton, #saveApprovedButton').show();
+            } else if (status === 'Draft') {
+                // Case 2: When status is Draft, show Void, Draft, and Approved buttons
+                $('#voidButton, #saveDraftButton, #saveApprovedButton').show();
+            } else if (status === 'Approved') {
+                // Case 3: When status is Approved, show Cancel button only
+                $('#cancelButton').show();
+            } else if (status === 'Cancelled' || status === 'Void') {
+                // Case 4 and 5: When status is Cancelled or Void, hide all buttons
+                hideAllButtons();
+            }
+        }
+
+        // Initial call to show buttons based on the initial status
+        showButtonsBasedOnStatus(status);
+
+        // Handling button clicks can be done similarly as in the previous example
+        // Handle click on the "Cancel" button
+        $('#cancelButton').click(function() {
+            console.log('Cancel button clicked');
+        });
+
+        // Handle click on the "Save as Draft" button
+        $('#saveDraftButton').click(function() {
+            console.log('Save as Draft button clicked');
+        });
+
+        // Handle click on the "Void" button
+        $('#voidButton').click(function() {
+            console.log('Void button clicked');
+        });
+
+        // Handle click on the "Save as Approved" button
+        $('#saveApprovedButton').click(function() {
+            console.log('Save as Approved button clicked');
+        });     
+    });
+    $("#addressCopiedAsShipping").on("change", function() {
+        if ($(this).is(":checked")) {
+            var customerAddress1 = $("#baddress1").val();
+            var customerAddress2 = $("#baddress2").val();
+            var customerCountry = $("#bcountry").val();
+            var customerState = $("#bstate").val();
+            var customerCity = $("#bcity").val();
+            var customerPostalCode = $("#bpincode").val();
+
+            $("#saddress1").val(customerAddress1).prop("readonly", false);
+            $("#saddress2").val(customerAddress2).prop("readonly", false);
+            $("#scountry").val(customerCountry).prop("readonly", false);
+            $("#sstate").val(customerState).prop("readonly", false);
+            $("#scity").val(customerCity).prop("readonly", false);
+            $("#spincode").val(customerPostalCode).prop("readonly", false);
+
+        } else {
+            // Clear the billing address fields when the checkbox is unchecked
+            $("#saddress1").val("").prop("readonly", false);
+            $("#saddress2").val("").prop("readonly", false);
+            $("#scountry").val("").prop("readonly", false);
+            $("#sstate").val("").prop("readonly", false);
+            $("#scity").val("").prop("readonly", false);
+            $("#spincode").val("").prop("readonly", false);
+        }
+    });
+
+
+    $("#addressCopiedAsShippingModel").on("change", function() {
+        if ($(this).is(":checked")) {
+            
+            var quick_customerAddress1 = $("#quick_billing_address").val();
+            var quick_customerCountry = $("#quick_billing_country").val();
+            var quick_customerState = $("#quick_billing_state").val();
+            var quick_customerCity = $("#quick_billing_city").val();
+            var quick_customerPostalCode = $("#quick_billing_postal_code").val();
+
+            $("#quick_shipping_address").val(quick_customerAddress1).prop("readonly", false);
+            $("#quick_shipping_country").val(quick_customerCountry).prop("readonly", false);
+            $("#quick_shipping_state").val(quick_customerState).prop("readonly", false);
+            $("#quick_shipping_city").val(quick_customerCity).prop("readonly", false);
+            $("#quick_shipping_postal_code").val(quick_customerPostalCode).prop("readonly", false);
+
+        } else {
+            // Clear the billing address fields when the checkbox is unchecked
+            $("#quick_shipping_address").val("").prop("readonly", false);
+            $("#quick_shipping_country").val("").prop("readonly", false);
+            $("#quick_shipping_state").val("").prop("readonly", false);
+            $("#quick_shipping_city").val("").prop("readonly", false);
+            $("#quick_shipping_postal_code").val("").prop("readonly", false);
+        }
+    });
+
+    function submitAddress() {
+        $('#storeBillingAddress').val("").prop('readonly',false);
+        $('#storeShippingAddress').val("").prop('readonly',false);
+        var cus_id = $('#customer_name').val() ? $('#customer_name').val() : $('#customerName').val();
+        console.log("Qucik add Addresses - customer id = ",cus_id);
+        var last_name = $("#hidden_last_name").val();
+        var first_name = $("#hidden_first_name").val();
+        var QB_AddressLine = $("#quick_billing_address").val();
+        var QB_Country = $("#quick_billing_country").val();
+        var QB_State = $("#quick_billing_state").val();
+        var QB_City = $("#quick_billing_city").val();
+        var QB_PostalCode = $("#quick_billing_postal_code").val();
+        var QS_AddressLine = $("#quick_shipping_address").val();
+        var QS_Country = $("#quick_shipping_country").val();
+        var QS_State = $("#quick_shipping_state").val();
+        var QS_City = $("#quick_shipping_city").val();
+        var QS_PostalCode = $("#quick_shipping_postal_code").val();
+        
+        var isValid = true;
+        var errorMessage = '';
+        if (cus_id === '') {
+            errorMessage += 'Please Select the Customer.\n';
+            isValid = false;
+        }
+        if (QB_AddressLine === '') {
+            errorMessage += 'Billing address is required.\n';
+            isValid = false;
+        }
+        if (QB_Country === '') {
+            errorMessage += 'Billing country is required.\n';
+            isValid = false;
+        }
+        if (QB_State === '') {
+            errorMessage += 'Billing state is required.\n';
+            isValid = false;
+        }
+        if (QB_City === '') {
+            errorMessage += 'Billing city is required.\n';
+            isValid = false;
+        }
+        if (QB_PostalCode === '') {
+            errorMessage += 'Billing postal code is required.\n';
+            isValid = false;
+        }
+        if (QS_AddressLine === '') {
+            errorMessage += 'Shipping address is required.\n';
+            isValid = false;
+        }
+        if (QS_Country === '') {
+            errorMessage += 'Shipping country is required.\n';
+            isValid = false;
+        }
+        if (QS_State === '') {
+            errorMessage += 'Shipping state is required.\n';
+            isValid = false;
+        }
+        if (QS_City === '') {
+            errorMessage += 'Shipping city is required.\n';
+            isValid = false;
+        }
+        if (QS_PostalCode === '') {
+            errorMessage += 'Shipping postal code is required.\n';
+            isValid = false;
+        }
+
+        if (!isValid) {
+            alert(errorMessage);
+        } else {
+            var formData = {
+                customer_id :cus_id,
+                last_name: last_name,
+                first_name: first_name,
+                QB_address: QB_AddressLine,
+                QB_country: QB_Country,
+                QB_state: QB_State,
+                QB_city: QB_City,
+                QB_zip: QB_PostalCode,
+                QS_address: QS_AddressLine,
+                QS_country: QS_Country,
+                QS_state: QS_State,
+                QS_city: QS_City,
+                QS_zip: QS_PostalCode   
+            };
+            console.log("Before -",formData);
+            $.ajax({
+                type: "POST",
+                url: "<?php echo base_url('qucik_add_addresses'); ?>",
+                data: formData,
+                success: function(response) {
+                    console.log(response);
+                    if (response['data']['status']) {
+
+                    alert(response['data']['message']);
+                    $('#billing_shipping_addresses_modal').modal('hide');
+                     
+                    var customerId = response['data']['cus_id'];
+                    var QB_AddressId = response['data']['billing_addr_id'];
+                    var QS_AddressId = response['data']['shipping_addr_id'];
+
+                    if(QB_AddressId !== null ){
+                        var quick_billing_Address = QB_AddressLine + ','+QB_City + ',' + QB_State + ',' +QB_Country + '-' + QB_PostalCode + '.' ;
+                        $('#storeBillingAddress').empty();
+                        $('#storeBillingAddress').val(quick_billing_Address).prop("readonly", true);
+                        $('#hiddenBillingAddressId').val(QB_AddressId);
+                    }
+                    
+                    if(QS_AddressId !== null ){
+                        var quick_shipping_Address = QS_AddressLine + ','+QS_City + ',' + QS_State + '-' +QS_Country + '-' + QS_PostalCode + '.' ;
+                        $('#storeShippingAddress').empty(); 
+                        var new_QS_ShippingAddrOption = $('<option>', {
+                            value: QS_AddressId,
+                            text: QS_AddressLine,
+                            selected: true 
+                        });
+                        $('#storeShippingAddress').val(quick_shipping_Address).prop("readonly", true);
+                        $('#loadShippingDropdown').empty().append(new_QS_ShippingAddrOption);
+                    }
+                } else {
+                    // Handle error response
+                    alert(response['data']['message']);
+                }
+            },
+
+            error: function() {
+                alert("Error occurred while saving Addresses.");
+            }
+            });
+
+            $('#storeBillingAddress').prop('readonly',true);
+            $('#storeShippingAddress').prop('readonly',true);
+            $('#editAddressesCheckbox').click();
+        }
+    }
+
+
+    function hideBillingShippingModel(params) {
+        $('#editAddressesCheckbox').click();
+    }
+
+
+    $('#discount').keyup(function() {
+        if($('#discount-type').css('display') == 'none'){
+            $('#discount-type').val('%');
+        }
+        $('#discount-type').show();
+        $('#discount-type').attr('name', 'dis_type');
+
+        $('.item-discount-amount').val('');
+
+        var discountValue = $(this).val();
+        var discountType = $('#discount-type').val();
+
+        var totalAmount = 0 ;
+        var discountLastValue = 0;
+        $('.item-amount').each(function() {
+            totalAmount += parseInt($(this).val());
+        });
+
+        if (discountType == '%') {
+            discountLastValue = totalAmount - (totalAmount * discountValue / 100 );
+        }else{
+            discountLastValue = totalAmount - discountValue;
+        }
+
+        var shippingCharges = $('#shippingCharges').val();
+
+        if (isNaN(shippingCharges)) {
+            shippingCharges =0;
+        }
+        discountLastValue += parseInt(shippingCharges);
+
+        $('#exacttotal').val(discountLastValue);
+        $('#grandtotal').val(parseInt(discountLastValue));
+        $('#balanceAmount').val(parseInt(discountLastValue));
+
+
+        console.log("last Discount value");
+        console.log(discountLastValue);
+
+    // var discountedPrice = calculateDiscountedPrice(discountValue);
+    // $('#discounted-price').text(discountedPrice);
+    });
+
+    function discountTypeKeyup(params) {
+        if($('#discount-type').css('display') == 'none'){
+            $('#discount-type').val('%');
+        }
+        $('#discount-type').show();
+
+        $('.item-discount-amount').val('');
+
+        var discountValue = $('#discount').val();
+        var discountType = $('#discount-type').val();
+
+        var totalAmount = 0 ;
+        var discountLastValue = 0;
+        $('.item-amount').each(function() {
+            totalAmount += parseInt($(this).val());
+        });
+
+        if (discountType == '%') {
+            discountLastValue = totalAmount - (totalAmount * discountValue / 100 );
+        }else{
+            discountLastValue = totalAmount - discountValue;
+        }
+
+        var shippingCharges = $('#shippingCharges').val();
+        if (isNaN(shippingCharges)) {
+            shippingCharges =0;
+        }
+        discountLastValue += parseInt(shippingCharges);
+        $('#exacttotal').val(discountLastValue );
+        $('#grandtotal').val(parseInt(discountLastValue));
+        $('#balanceAmount').val(parseInt(discountLastValue));
+
+    }
+
+    $('#discount-type').change(function () {
+      
+        var discountValue = $('#discount').val();
+        var discountType = $(this).val();
+
+        var totalAmount = 0 ;
+        var discountLastValue = 0;
+        $('.item-amount').each(function() {
+            totalAmount += parseInt( $(this).val());
+        });
+
+        if (discountType == '%') {
+            discountLastValue = totalAmount - (totalAmount * discountValue / 100 );
+        }else{
+            discountLastValue = totalAmount - discountValue;
+        }
+
+        var shippingCharges = $('#shippingCharges').val();
+        if (isNaN(shippingCharges)) {
+            shippingCharges =0;
+        }
+        discountLastValue += parseInt(shippingCharges);
+
+        $('#exacttotal').val(discountLastValue);
+        $('#grandtotal').val(parseInt(discountLastValue));
+        $('#balanceAmount').val(parseInt(discountLastValue));
+    })
+
+
+</script>
\ No newline at end of file
diff --git a/app/Views/invoice_pdf_template.php b/app/Views/invoice_pdf_template.php
index c18b75b9..f3eb8e47 100644
--- a/app/Views/invoice_pdf_template.php
+++ b/app/Views/invoice_pdf_template.php
@@ -139,30 +139,22 @@
             background-color: #FFEAEF;
         }
 
-        /* Style for the table containing - summary-invoice details */
-        table.summary-table {
+        /* Define your CSS styles here */
+        .summary-table {
             width: 100%;
             border-collapse: collapse;
             vertical-align: top;
         }
-
         /* Style for the table containing - summary-invoice subtotal-table details */
-        table.subtotal-table {
+        .subtotal-table {
             width: 100%;
             border-collapse: collapse;
         }
-
         /* Style for the notes and terms information */
         .notes-container,
         .terms-container {
-            text-align: center;
             margin-top: 20px;
         }
-
-        .subtotal-table td:last-child {
-            font-weight: bold;
-        }
-
         /* Style for the table containing - footer-table details */
         table.footer-table {
             font-family: Nunito Sans;
@@ -204,7 +196,7 @@
             <td class="billing-address-container" style="vertical-align: top;">
                 <?php foreach ($data as $value) : ?>
                     <b>BILLING TO :</b><br>
-                    <b><?= $value->customer_name ?></b><br>
+                    <b><?= isset($value->customer_biller_name) && trim($value->customer_biller_name) !== '' ? $value->customer_biller_name : $value->customer_name ?></b><br>
                     <?php if ($value->customer_bill_address && ($value->baddr_id !== null || $value->baddr_id !== '')) { ?>
                         <?= $value->customer_bill_address ? $value->customer_bill_address . " ," : "" ?><br>
                         <?= $value->customer_bill_city ? $value->customer_bill_city : "" ?>&nbsp;<?= $value->customer_bill_state ? $value->customer_bill_state : "" ?>
@@ -213,15 +205,15 @@
                     <?php } else if ($value->baddr_id === null || $value->baddr_id === '') {
                         echo $value->billing_address ? '<p style="white-space: pre-line">' . $value->billing_address . '</p>' : '';
                     } ?>
-                    <?= $value->mobile_no ? "Phone : +91" . $value->mobile_no . " ." : "" ?><br>
-                    <?= $value->email ? "Email : " . $value->email . " ." : "" ?>
+                    <?= $value->bmobile ? "Phone : +91" . $value->bmobile . " ." : ($value->mobile_no ? "Phone : +91" . $value->mobile_no . " ." : "") ?><br>
+                    <?= $value->bemail ? "Email : " . $value->bemail . " ." : ($value->email ? "Email : " . $value->email . " ." : "" ) ?>
 
                 <?php endforeach; ?>
             </td>
             <td class="shipping-address-container" style="vertical-align: top;">
                 <?php foreach ($data as $value) : ?>
                     <b>SHIPPING TO :</b><br>
-                    <b><?= $value->customer_name ?></b><br>
+                    <b><?= isset($value->customer_shipper_name) && trim($value->customer_shipper_name) !== '' ? $value->customer_shipper_name : $value->customer_name ?></b><br>
                     <?php if ($value->customer_ship_address && ($value->saddr_id !== null || $value->saddr_id !== '')) { ?>
                         <?= $value->customer_ship_address ? $value->customer_ship_address . " ," : "" ?><br>
                         <?= $value->customer_ship_city ? $value->customer_ship_city : "" ?>&nbsp;<?= $value->customer_ship_state ? $value->customer_bill_state : "" ?>
@@ -230,8 +222,8 @@
                     <?php } else if ($value->saddr_id === null || $value->saddr_id === '') {
                         echo $value->shipping_address ? '<p style="white-space: pre-line">' . $value->shipping_address . '</p>' : '';
                     } ?>
-                    <?= $value->mobile_no ? "Phone : +91" . $value->mobile_no . " ." : "" ?><br>
-                    <?= $value->email ? "Email : " . $value->email . " ." : "" ?>
+                    <?= $value->smobile ? "Phone : +91" . $value->smobile . " ." : "" ?><br>
+                    <?= $value->semail ? "Email : " . $value->semail . " ." : "" ?>
 
                 <?php endforeach; ?>
             </td>
@@ -282,10 +274,10 @@
     </table>
     <!-- table containing - invoice details ends -->
     <!-- table containing - summary details -->
-    <table class="summary-table mt-1">
+    <table class="summary-table mt-1" style="width: 100%;">
         <?php if (!empty($data)) : ?>
             <tr>
-                <td colspan="6" style="width: 60%;  vertical-align: top;">
+                <td colspan="6" style="width: 60%; vertical-align: top; display:flex;">
                     <?php foreach ($data as $value) : ?>
                         <div class="notes-container">
                             <?php if (!empty($value->reason)) : ?>
@@ -293,23 +285,27 @@
                                     <h6>Reason</h6>
                                     <?php echo nl2br($value->reason); ?>
                                 </div>
+                            <?php else : ?><div style="text-align: left !important;"><p>&nbsp;&nbsp; </p></div>
                             <?php endif; ?>
                             <?php if (!empty($value->notes)) : ?>
                                 <div style="text-align: left !important;">
                                     <h6>Notes</h6>
                                     <?php echo nl2br($value->notes); ?>
                                 </div>
+                            <?php else : ?><div style="text-align: left !important;"><p>&nbsp;&nbsp; </p></div>
                             <?php endif; ?>
                             <?php if (!empty($value->payment_note)) : ?>
                                 <div style="text-align: left !important;">
                                     <h6>Payment Notes</h6>
                                     <?php echo nl2br($value->payment_note); ?>
                                 </div>
+                            <?php else : ?><div style="text-align: left !important;"><p>&nbsp;&nbsp; </p></div>
                             <?php endif; ?>
                             <?php if (!empty($value->terms)) : ?>
                                 <pre style="font-family: 'Times New Roman', Times, sans-serif; font-size: 12px; text-align: left;">
                                             <?= $row->terms ?>
-                                            </pre>
+                                </pre>
+                            <?php else : ?><div style="text-align: left !important;"><p>&nbsp;&nbsp; </p></div>
                             <?php endif; ?>
                         </div>
                         <br>
@@ -379,10 +375,12 @@
             </td>
             <td colspan="6" style="width: 40%; vertical-align: bottom;">
                 <div class="terms-container">
-                    <!-- <img src="<?php // echo base_url('public/uploads/default_sign_sm.png'); ?>" alt="Authorized Signatory" class="Authorized-Signatory"> -->
+                <center>
+                    <img src="<?php echo base_url('public/uploads/default_sign_sm.png'); ?>" alt="Authorized Signatory" class="Authorized-Signatory">
                     <div>
-                        <h6 style="text-align:center;">Authorized Signatory</h6>
+                         <h6>Authorized Signatory</h6>
                     </div>
+                </center>
                 </div>
             </td>
         </tr>