FEAT_DYNAMIC_REQUIRED_AND_NOT_REQUIRED_CLAIM_GPA_SRI

app/Views/ticket_form_gpa.php

@@ -1,16 +1,16 @@
 <style>
-.readonly-select {
+    .readonly-select {
         pointer-events: none;
         background-color: #e0e0e0;
         color: #666;
-}
+    }
 </style>
 
 <div class="row">
     <div class="col-12">
         <div class="<?= !isset($ticket_data) ? "card" : "" ?>" style="margin-right: 23px;">
             <div class="card-body">
-                <?php if(!isset($ticket_data)){ ?>
+                <?php if (!isset($ticket_data)) { ?>
                     <!-- Header Section -->
                     <div class="row mb-3">
                         <div class="col-6 d-flex align-items-center">
@@ -118,7 +118,7 @@
                                     <?php
                                     if (isset($ticket_type) && count($ticket_type)) {
                                         foreach ($ticket_type as $key => $value) {
-                                                if($key != 1){
+                                            if ($key != 1) {
                                                 $selected = (isset($ticket_data) && $ticket_data['ticket_type_id'] == $key) ? 'selected' : ((isset($selected_ticket_type) && $selected_ticket_type == $key) ? 'selected' : '');
                                                 echo "<option value='" . $key . "' $selected>" . $value . "</option>";
                                             }
@@ -280,7 +280,7 @@
                     <div class="form-group col-md-12 text-right m-b-0" style="margin-top: 29px;">
                         <button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
                             id="btnSubmit">Submit</button>
-                        <?php if(get_role_id() == 5 && isset($ticket_data) && in_array($ticket_data['claim_status_id'],[23,33,43])) { ?>
+                        <?php if (get_role_id() == 5 && isset($ticket_data) && in_array($ticket_data['claim_status_id'], [23, 33, 43])) { ?>
                             <a class="btn btn-secondary waves-effect waves-light mr-1" onclick="showConfirmationModal(event)">Rejected Approve</a>
                         <?php } ?>
                     </div>
@@ -291,10 +291,9 @@
 </div>
 
 <script>
+    let GlobelExtraFields = [];
 
-let GlobelExtraFields = [];
+    $(document).ready(function() {
-
-$(document).ready(function() {
 
         var date_of_join = flatpickr("#date_of_join", {
             dateFormat: "d/m/Y",
@@ -326,8 +325,14 @@ $(document).ready(function() {
             allowInput: false
         });
 
-    flatpickr("#approved_date", { dateFormat: "d/m/Y", allowInput: false });
+        flatpickr("#approved_date", {
-    flatpickr("#settled_date", { dateFormat: "d/m/Y", allowInput: false });
+            dateFormat: "d/m/Y",
+            allowInput: false
+        });
+        flatpickr("#settled_date", {
+            dateFormat: "d/m/Y",
+            allowInput: false
+        });
 
         // updateClaimStatusDisplay("<?= isset($ticket_data['claim_status_id']) ? $ticket_data['claim_status_id'] : 0 ?>")
         var extraFields = <?= json_encode(isset($extra_fields) ? $extra_fields : []); ?>;
@@ -336,9 +341,9 @@ $(document).ready(function() {
         claimStatusFieldChanges(extraFields);
 
 
-})
+    })
 
-function updateClaimStatusDisplay(value) {
+    function updateClaimStatusDisplay(value) {
 
         console.log('value', value);
 
@@ -350,18 +355,18 @@ function updateClaimStatusDisplay(value) {
             $('.approved').show();
         } else if (value == 24 || value == 34 || value == 44) { // SETTLED
             $('.settled').show();
-    }else if (value == 47 || value == 53 || value == 58) { // CANCELLED
+        } else if (value == 47 || value == 53 || value == 58) { // CANCELLED
             $('.canceled').show();
-    }else if (value == 48 || value == 54 || value == 59) { // RETURNED
+        } else if (value == 48 || value == 54 || value == 59) { // RETURNED
             $('.returned').show();
         }
-}
+    }
 
-$('#claim_status_id').on('change', function() {
+    $('#claim_status_id').on('change', function() {
         updateClaimStatusDisplay($(this).val());
-});
+    });
 
-function claimStatusFieldChanges(fields) {
+    function claimStatusFieldChanges(fields) {
         console.log('fields', fields);
         fields.forEach(function(fieldId) {
             var $field = $("#" + fieldId);
@@ -374,19 +379,19 @@ function claimStatusFieldChanges(fields) {
 
                 var $label = $parentDiv.find("label[for='" + fieldId + "']");
                 if ($label.length && !$label.find(".text-danger").length) {
-                $label.append(' <span class="text-danger">*</span>');
+                    // $label.append(' <span class="text-danger">*</span>');
                 }
             }
         });
-}
+    }
 
-function claimStatusFieldRemoveREquired(fields, remove_or_add, thirdClass) {
+    function claimStatusFieldRemoveREquired(fields, remove_or_add, thirdClass) {
 
-console.log('--------------------------- claimStatusFieldRemoveREquired ---------------------------');
+        console.log('--------------------------- claimStatusFieldRemoveREquired ---------------------------');
-console.log('fields', fields);
+        console.log('fields', fields);
-console.log('remove_or_add', remove_or_add);
+        console.log('remove_or_add', remove_or_add);
 
-fields.forEach(function(fieldId) {
+        fields.forEach(function(fieldId) {
             var $field = $("#" + fieldId);
 
             if ($field.length) {
@@ -404,16 +409,59 @@ fields.forEach(function(fieldId) {
                 // }
 
             }
-});
+        });
 
-$('.'+thirdClass).find('input, textarea').attr('required', true);
+        // $('.'+thirdClass).find('input, textarea').attr('required', true);
+        let extrafieldsArray = $('#extra_fields_array_for_validate').val();
+        try {
+            extrafieldsArray = JSON.parse(extrafieldsArray); // Convert string to object
+        } catch (error) {
+            console.error("Invalid JSON format in extra_fields_array_for_validate:", error);
+            return;
+        }
 
-}
+        var selectedClaimStatus = $('#claim_status_id').val();
+        var $thirdClass = $(`.${thirdClass}`);
+        var hasValue = $thirdClass.find('input, textarea, select').filter(function() {
+            return $(this).val().trim() !== ''; // Check if at least one field is not empty
+        }).length > 0;
+        console.log ("has value ",hasValue);
+        $thirdClass.each(function() {
+            var id = $(this).find('[id]').first().attr('id');
+            var $label = $(this).find('label');
+            var $thisDiv = $(this);
+            var $inputs = $thisDiv.find('input, textarea, select');
 
-$(document).on("input", function (event) {
 
-let fields = GlobelExtraFields; 
+            // ✅ Condition 1: Check if this ID is in extraFieldsArray (required by status)
-console.log('fields', fields);
+            var shouldAddRequired = extrafieldsArray[selectedClaimStatus] && extrafieldsArray[selectedClaimStatus].includes(id);
+            console.log ("shouldAddRequired ",shouldAddRequired);
+
+            // ✅ Condition 2: If any field in the class has a value, make all required
+            if (shouldAddRequired || hasValue) {
+                if ($label.length && !$label.find('.text-danger').length) {
+                    $label.append(' <span class="text-danger">*</span>');
+                }
+                // console.log("input from if ", $inputs);
+                // $inputs.attr('required', true);
+                $('.' + thirdClass).find('input, textarea,select').attr('required', true);
+                console.log(`class ${thirdClass} added required label and added required field`);
+            } else {
+                $label.find('.text-danger').remove();
+                console.log("input ", $inputs);
+                // $inputs.prop('required', false);
+                $('.' + thirdClass).find('input, textarea,select').attr('required', false);
+                console.log(`class ${thirdClass} removed required label and removed required field`);
+            }
+        });
+
+
+    }
+
+    $(document).on("input", function(event) {
+
+        let fields = GlobelExtraFields;
+        console.log('fields', fields);
         let targetId = event.target.id;
         console.log('targetId', targetId);
         console.log('fields.includes(targetId)', fields.includes(targetId));
@@ -427,7 +475,7 @@ console.log('fields', fields);
             // addRequiredFieldSymbol(targetId);
             if ($parentDiv.length) {
                 let thirdClass = $parentDiv.attr("class").split(" ")[2] || "";
-            addRequiredFieldSymbolByClass(thirdClass);
+                // addRequiredFieldSymbolByClass(thirdClass);
                 console.log('thirdClass', thirdClass);
 
                 if (thirdClass) {
@@ -441,62 +489,61 @@ console.log('fields', fields);
                 }
             }
         }
-});
-// function addRequiredFieldSymbol(field_name) {
-//     // Find the field with the given name
-//     var $field = $(`[name="${field_name}"]`);
-    
-//     if ($field.length) {
-//         // Find the parent div of this field
-//         var $parentDiv = $field.closest('div');
-        
-//         if ($parentDiv.length) {
-//             // Get the classes as an array
-//             var classes = $parentDiv.attr('class') ? $parentDiv.attr('class').split(/\s+/) : [];
-            
-//             if (classes.length > 0) {
-//                 // Get the last class in the array
-//                 var lastClass = classes[classes.length - 1];
-                
-//                 // Find all divs with this last class
-//                 var $allDivsWithClass = $(`.${lastClass}`);
-                
-//                 // Add asterisk to all labels within these divs
-//                 $allDivsWithClass.each(function() {
-//                     var $label = $(this).find('label');
-//                     if ($label.length && !$label.find('.text-danger').length) {
-//                         $label.append(' <span class="text-danger">*</span>');
-//                     }
-//                 });
-                
-//                 console.log(`Added required symbol to ${$allDivsWithClass.length} labels with class "${lastClass}"`);
-//             } else {
-//                 console.warn(`Parent div for field "${field_name}" has no classes`);
-//             }
-//         } else {
-//             console.warn(`No parent div found for field name="${field_name}"`);
-//         }
-//     } else {
-//         console.warn(`No field found with name="${field_name}"`);
-//     }
-// }
-function addRequiredFieldSymbolByClass(className) {
-    // Find all divs with the specified class
-    var $divsWithClass = $(`.${className}`);
-    
-    if ($divsWithClass.length) {
-        // Add asterisk to all labels within these divs
-        $divsWithClass.each(function() {
-            var $label = $(this).find('label');
-            if ($label.length && !$label.find('.text-danger').length) {
-                $label.append(' <span class="text-danger">*</span>');
-            }
     });
+    // function addRequiredFieldSymbol(field_name) {
+    //     // Find the field with the given name
+    //     var $field = $(`[name="${field_name}"]`);
 
-        console.log(`Added required symbol to ${$divsWithClass.length} labels with class "${className}"`);
+    //     if ($field.length) {
-    } else {
+    //         // Find the parent div of this field
-        console.warn(`No divs found with class="${className}"`);
+    //         var $parentDiv = $field.closest('div');
-    }
-}
 
+    //         if ($parentDiv.length) {
+    //             // Get the classes as an array
+    //             var classes = $parentDiv.attr('class') ? $parentDiv.attr('class').split(/\s+/) : [];
+
+    //             if (classes.length > 0) {
+    //                 // Get the last class in the array
+    //                 var lastClass = classes[classes.length - 1];
+
+    //                 // Find all divs with this last class
+    //                 var $allDivsWithClass = $(`.${lastClass}`);
+
+    //                 // Add asterisk to all labels within these divs
+    //                 $allDivsWithClass.each(function() {
+    //                     var $label = $(this).find('label');
+    //                     if ($label.length && !$label.find('.text-danger').length) {
+    //                         $label.append(' <span class="text-danger">*</span>');
+    //                     }
+    //                 });
+
+    //                 console.log(`Added required symbol to ${$allDivsWithClass.length} labels with class "${lastClass}"`);
+    //             } else {
+    //                 console.warn(`Parent div for field "${field_name}" has no classes`);
+    //             }
+    //         } else {
+    //             console.warn(`No parent div found for field name="${field_name}"`);
+    //         }
+    //     } else {
+    //         console.warn(`No field found with name="${field_name}"`);
+    //     }
+    // }
+    // function addRequiredFieldSymbolByClass(className) {
+    //     // Find all divs with the specified class
+    //     var $divsWithClass = $(`.${className}`);
+
+    //     if ($divsWithClass.length) {
+    //         // Add asterisk to all labels within these divs
+    //         $divsWithClass.each(function() {
+    //             var $label = $(this).find('label');
+    //             if ($label.length && !$label.find('.text-danger').length) {
+    //                 $label.append(' <span class="text-danger">*</span>');
+    //             }
+    //         });
+
+    //         console.log(`Added required symbol to ${$divsWithClass.length} labels with class "${className}"`);
+    //     } else {
+    //         console.warn(`No divs found with class="${className}"`);
+    //     }
+    // }
 </script>