From 74924414a4fb020010125f15c520ce8bc9940fc6 Mon Sep 17 00:00:00 2001
From: VE10-Sanjeev <sanjeev.p@venbainfotech.com>
Date: Thu, 13 Jun 2024 07:33:20 +0000
Subject: [PATCH] FIX_design : ps

---
 app/Views/invoice_form.php | 183 +++++++++++++++++++++++--------------
 1 file changed, 113 insertions(+), 70 deletions(-)

diff --git a/app/Views/invoice_form.php b/app/Views/invoice_form.php
index b1172eef..a3bdebe1 100644
--- a/app/Views/invoice_form.php
+++ b/app/Views/invoice_form.php
@@ -1,22 +1,55 @@
 <style>
-    td .select2-container {
-        width: 249px !important;
+   
+    .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-right: none;
+        position: relative;
     }
 
-    .blueText {
-        color: blue !important;
-    }
-    textarea.form-control {
-        height: 37px !important;
-    }
+    .last-column .icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        justify-content: center;
+  align-items: center;
+  color: red; /* Change to the desired color */
+}
 
-</style>
+/* For Webkit (Chrome, Safari, Opera) */
+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;
+}
+    </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">
-                <h4 class="header-title"><?= $page_name; ?></h4>
                 <br>
                 <form method="POST" enctype="multipart/form-data" action="<?= base_url() . "save_invoice"; ?>" id="myForm">
                     
@@ -78,11 +111,11 @@
                             <div class="form-group col-md-6">
                                 <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="4" readonly><?= isset($invoice_details['billing_address']) ? $invoice_details['billing_address'] : '' ?></textarea>
+                                <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-6">
                                 <label for="storeShippingAddress">Shipping Address</label>
-                                <textarea class="form-control" id="storeShippingAddress" name="shipping_address" rows="4" readonly><?= isset($invoice_details['shipping_address']) ? $invoice_details['shipping_address'] : '' ?></textarea>
+                                <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">
@@ -130,16 +163,15 @@
                                 <br />
 
                                 <table class="table table-bordered" id="itemTable">
-                                    <thead>
+                                    <thead class="thead-light">
                                         <tr>
                                             <th>Item Details</th>
-                                            <th>Qty</th>
-                                            <th>Rate</th>
-                                            <th style="display:none;">Tax</th>
-                                            <th>Amount </th>
-                                            <th style="text-align: center !important" colspan="2">Discount</th>
-                                            <th hidden></th>
-                                            <?php if ($invoice_type === '1') : ?> <th></th> <?php endif; ?>
+                                            <th class="text-right">QUANTITY</th>
+                                            <th class="text-right">RATE</th>
+                                            <th style="display:none;">TAX</th>
+                                            <th class="text-right">AMOUNT</th>
+                                            <th class="text-right">DISCOUNT</th>
+                                            <?php if ($invoice_type === '1') : ?>       <th class="last-column"></th><?php endif; ?>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -148,7 +180,7 @@
                                             foreach ($invoice_item_details as $inx => $ii_details) :  ?>
                                                 <tr>
                                                     <td style="width:17% !important;">
-                                                        <select class="form-control book-select" id="<?= "book" . $inx; ?>bookSelect" name="item_details[]" onchange="displayBookTag(this,<?= $inx; ?>)" required data-toggle="select2" style="width: 249px !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') { ?>
 
@@ -165,31 +197,35 @@
                                                                     } ?></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>
+                                                        <!-- <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:12%;"><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="width:8%;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 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:10%;"><input type="number" class="form-control item-amount" id="<?= "amount" . $inx; ?>" name="amount[]" value="<?= isset($ii_details['subtotal'])  ? $ii_details['subtotal'] : '' ?>" readonly />
                                                     </td>
-                                                    <td style="width:10%;"><input type="number" 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" />
-
-                                                    </td>
-                                                    <td style="width:7%;">
-                                                        <select class="form-control item-discount-type" 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"; ?>>
+                                                    <td style="width:25%;">
+                                                    <div class="input-group">
+                                                        <input type="number" 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 hidden><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>
+                                                    
                                                     <?php if ($invoice_type === '1') : ?>
-                                                        <td style="width:5%">
-                                                            <center><i class="fa fa-trash remove-item "></i></center>
+                                                        <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>
@@ -198,7 +234,7 @@
                                         } else { ?>
                                             <tr>
                                                 <td style="width:17% !important;">
-                                                    <select class="form-control book-select" id="book0" name="item_details[]" onchange="displayBookTag(this,0)" required data-toggle="select2" style="width: 249px !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>
@@ -209,28 +245,32 @@
                                                         <?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>
+                                                    <!-- <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:12%;"><input type="text" class="form-control item-rate" id="rate0" name="rate[]" oninput="calculateInvoice(this,0)" /></td>
-                                                <td style="width:8%;display:none"><input type="text" class="form-control item-tax" id="tax0" name="tax[]" /></td>
+                                                <td style="display:none"><input type="text" class="form-control item-tax" id="tax0" name="tax[]" /></td>
                                                 <td style="width:12%;"><input type="text" class="form-control item-amount" id="amount0" name="amount[]" />
                                                 </td>
-                                                <td class="discount-cell" style="width:10%;"><input type="number" class="form-control item-discount-amount" id="item_discount_amount0" name="discount_amount[]" oninput="calculateInvoice(this,0)"  min="0" step="0.001" />
-
+                                                <td style="width:25%;">
+                                                   <div class="input-group">
+                                                        <input type="number" 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:7%;">
-                                                    <select class="form-control item-discount-type" id="<?= "discount_type0"; ?>" name="discount_type[]" oninput="calculateInvoice(this,0)">
-                                                        <option value="%">%</option>
-                                                        <option value="₹">₹</option>
-                                                    </select>
-                                                </td>
-                                                <td hidden ><input type="hidden" class="form-control" id="hiddenInvoiceChildId0" name="invoice_child_id[]" value="" placeholder="hidden for invoice child/item id" /></td>
+                                               
                                                 <?php if ($invoice_type === '1') : ?>
-                                                    <td style="width: 5%;">
-                                                        <center><i class="fa fa-trash remove-item "></i></center>
+                                                    <td class="last-column" style="width:5%">
+                                                    <span class="icon"><center><i class="fa fa-trash remove-item "></i></center></span>
                                                     </td>
                                                 <?php endif; ?>
 
@@ -239,21 +279,23 @@
                                         <!-- You can add more rows as needed using JavaScript -->
                                     </tbody>
                                 </table>
-                                <div class="form-group text-right m-b-0">
+                                <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">
+                                        <!-- <a class="btn" id="addItem">
                                             <h4><i class="fa fa-plus" aria-hidden="true"></i> Add More Item</h4>
-                                        </a>
+                                        </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>
                         <div class="form-row">
-                            <div class="offset-md-6 col-md-6 card">
+                            <div class="offset-md-6 col-md-6 card"  style="background-color: #f1f5f7;">
+                            <h4><center>Calculation</center></h4>
                                 <div class="card-body">
-                                    <h4>Calculation</h4>
                                     <div class="form-row">
                                     <div class="form-group col-md-6">
                                         <label for="subtotal">Subtotal</label>
@@ -335,15 +377,15 @@
                             </div>
                         </div>
                         <div class="form-row">
-                            <div class="form-group col-md-12">
+                            <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="2"><?= isset($invoice_details['payment_note']) ? $invoice_details['payment_note'] : '' ?></textarea>
+                                <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-12">
+                        <!-- </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="2"></textarea>
+                                <textarea  class="form-control" id="notes" name="notes" rows="3"></textarea>
                             </div>
                         </div>
                     </div>
@@ -510,7 +552,7 @@
                     </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 text-right m-b-0">
+                    <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; ?>
@@ -757,14 +799,14 @@
 
         var cell5 = newRow.insertCell(4);
         var cell6 = newRow.insertCell(5);
-        cell6.style.width = "10%";
+        cell6.style.width = "25%";
         var cell7 = newRow.insertCell(6);
-        var cell8 = newRow.insertCell(7);
-        cell8.style.width = " 5%";
+        cell7.style.width = "5%";
+        cell7.className = "last-column";
 
         // var cell9 = newRow.insertCell(8);
 
-        html = `<select class="form-control book-select" id="book${counter}" name="item_details[]" onchange="displayBookTag(this, ${counter})" data-toggle="select2" required>
+        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>`;
 
@@ -779,14 +821,14 @@
         cell1.innerHTML = html;
 
         // cell1.innerHTML = '<input type="text" class="form-control" name="item_details[]">';
-        cell1.innerHTML += '<textarea name="description[]" class="form-control" placeholder="Enter Description" id="description'+counter+'" cols="26" rows="2"  style="margin-top: 16px;border-color: lightgray;width:247px;"></textarea>';
+        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 = '<input type="number" class="form-control item-amount" id="amount' + counter + '" name="amount[]" min="0" step="0.001">';
-        cell6.innerHTML = '<input type="number" class="form-control item-discount-amount" id="item_discount_amount' + counter + '" name="discount_amount[]" oninput="calculateInvoice(this,' + counter + ')" min="0" step="0.001">';
-        cell7.innerHTML = '<select class="form-control item-discount-type" style=""width:12%;" id="item_discount_type' + counter + '" name="discount_type[]" oninput="calculateInvoice(this,' + counter + ')"><option value="%">%</option><option value="₹">₹</option></select>';
-        cell8.innerHTML = '<input type="hidden" class="form-control" id="hiddenInvoiceChildId' + counter + '" placeholder="hidden for invoice child/item id" name="invoice_child_id[]" value=""><center><i class="fa fa-trash remove-item "></center>';
+        cell6.innerHTML = '<div class="input-group"><input type="number" 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>';
+        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);
 
@@ -1217,6 +1259,7 @@
                     global_billid = "";
                     var customer_billing_addressDetails = [];
                     if (cb.length > 0) {
+                        cb = [cb[0]];
                         console.log("cbbbbbbbbb",cb);
                         $.each(cb, function(k, v) {
                             var state = v.state_name ? v.state_name : v.state;
@@ -1232,7 +1275,7 @@
                     }else{
                         
                     }
-                    global_billarr = customer_billing_addressDetails.join(', \n') + ".";
+                    global_billarr = customer_billing_addressDetails.join(', ') + ".";
                     global_billid = customer_billing_id;
                     $("#storeBillingAddress").val(global_billarr).prop("readonly", true);
                     $('#hiddenBillingAddressId').val(global_billid);
@@ -1300,7 +1343,7 @@
                         $('#hidden_last_name').val(v.last_name);
                     });
                 }
-                $("#storeShippingAddress").val(customer_shipping_addressDetails.join(', \n') + ".").prop("readonly", true);
+                $("#storeShippingAddress").val(customer_shipping_addressDetails.join(', ') + ".").prop("readonly", true);
             },
             error: function() {
                 alert("Error fetching address.");