From 93fc0a23075e00678802abc1a9b519f61e13a304 Mon Sep 17 00:00:00 2001
From: Srinivas-Saravanan <srinivas.saravanan@venbainfotech.com>
Date: Tue, 25 Feb 2025 17:02:20 +0530
Subject: [PATCH] FEAT_CLAIM_STATUS_FOR_MAIL_TEMPLATE

---
 app/Controllers/TicketController.php |  26 +
 app/Views/ticket_mail_template.php   | 909 ++++++++++++++-------------
 2 files changed, 492 insertions(+), 443 deletions(-)

diff --git a/app/Controllers/TicketController.php b/app/Controllers/TicketController.php
index 60394874..36007889 100644
--- a/app/Controllers/TicketController.php
+++ b/app/Controllers/TicketController.php
@@ -593,6 +593,17 @@ class TicketController extends BaseController
         $data['policy_type']  = $this->ticketType;
         $data['placeHolders'] = $this->placeHolders;
         $data['ticket_data']  = $this->ticketMailTemplateModel->where('is_active', 1)->findAll();
+
+        foreach ($data['ticket_data'] as $key => $ticket_data) {
+
+            $tooltip_array = $this->claimStatus->select('claim_status')->where('ticket_type',$data['ticket_data'][$key]['ticket_type'])->where('trigger_type',$data['ticket_data'][$key]['trigger_type'])->where('is_active',1)->first();
+            if (isset($tooltip_array) && $tooltip_array != null){
+                $data['ticket_data'][$key]['tool_tip'] = $tooltip_array['claim_status'];
+            }else{
+                $data['ticket_data'][$key]['tool_tip'] =$data['ticket_data'][$key]['template_name'];
+            }
+        }
+        // dd($data['ticket_data']);
         $data['ticket_type']  = $this->ticketType;
         $data['trigger_type'] = $this->triggerType;
         return $this->loadLayout('ticket_mail_template', $data);
@@ -621,6 +632,21 @@ class TicketController extends BaseController
         } elseif ($action == 2) {
             $table_id = (int)$this->request->getPost('id');
             $data = $this->ticketMailTemplateModel->where('id', $table_id)->where('is_active', 1)->first();
+            if ($data && isset($data['ticket_type']) && isset($data['trigger_type'])) {
+                $tooltip_array = $this->claimStatus->select('claim_status')
+                    ->where('ticket_type', $data['ticket_type'])
+                    ->where('trigger_type', $data['trigger_type'])
+                    ->where('is_active', 1)
+                    ->first();
+                
+                $data['tool_tip'] = (isset($tooltip_array['claim_status'])) 
+                    ? $tooltip_array['claim_status'] 
+                    : $data['template_name'];
+            } else {
+                // Handle case where $data is null or missing required fields
+                $data = $data ?: []; // Ensure $data is an array if null
+                $data['tool_tip'] = $data['template_name'];
+            }
             if ($data) {
                 return $this->respond(['status' => true, 'data' => $data], 200);
             } else {
diff --git a/app/Views/ticket_mail_template.php b/app/Views/ticket_mail_template.php
index 511cf300..213312b4 100644
--- a/app/Views/ticket_mail_template.php
+++ b/app/Views/ticket_mail_template.php
@@ -1,56 +1,56 @@
 <style>
-.table th,
-.table td {
-    padding: 8px;
-}
+    .table th,
+    .table td {
+        padding: 8px;
+    }
 
-table.dataTable tbody td {
-    padding: 4px 4px !important;
-}
+    table.dataTable tbody td {
+        padding: 4px 4px !important;
+    }
 
-.col-12 {
+    .col-12 {
 
-    max-width: 98% !important;
-}
+        max-width: 98% !important;
+    }
 
-.dataTables_filter {
-    position: absolute;
-}
+    .dataTables_filter {
+        position: absolute;
+    }
 
-.right-align-input {
-    text-align: right;
-}
+    .right-align-input {
+        text-align: right;
+    }
 
-.addbtnStyle {
-    margin-left: 20px !important;
-}
+    .addbtnStyle {
+        margin-left: 20px !important;
+    }
 
-.custom-dropdown-menu {
-    display: none;
-    position: absolute;
-    background-color: #ffffff !important;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    border-radius: 0.25rem;
-    padding: 0.5rem 0;
-    min-width: 10rem;
-    z-index: 9999;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
+    .custom-dropdown-menu {
+        display: none;
+        position: absolute;
+        background-color: #ffffff !important;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 0.25rem;
+        padding: 0.5rem 0;
+        min-width: 10rem;
+        z-index: 9999;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
 
-.custom-dropdown-menu .dropdown-item {
-    display: block !important;
-    width: 100% !important;
-    padding: 0.5rem 1rem !important;
-    color: #212529 !important;
-    text-decoration: none !important;
-    background-color: transparent !important;
-}
+    .custom-dropdown-menu .dropdown-item {
+        display: block !important;
+        width: 100% !important;
+        padding: 0.5rem 1rem !important;
+        color: #212529 !important;
+        text-decoration: none !important;
+        background-color: transparent !important;
+    }
 
-.custom-dropdown-menu .dropdown-item:hover {
-    background-color: #f8f9fa !important;
-    color: #16181b !important;
-    cursor: pointer !important;
-}
+    .custom-dropdown-menu .dropdown-item:hover {
+        background-color: #f8f9fa !important;
+        color: #16181b !important;
+        cursor: pointer !important;
+    }
 </style>
 
 <div class="col-12">
@@ -75,28 +75,37 @@ table.dataTable tbody td {
                     </thead>
                     <tbody>
                         <?php if (isset($ticket_data)) { ?>
-                        <?php foreach($ticket_data as $index => $row){ ?>
-                        <tr>
-                            <td><?php echo $row['template_name'] ?? ""; ?></td>
-                            <td><?php echo $ticket_type[$row['ticket_type']] ?? ""; ?></td>
-                            <td><?php echo $trigger_type[$row['trigger_type']] ?? ""; ?></td>
-                            <td><?=$row['is_auto_mail'] == 1?'Auto':"Manual" ?></td>
-                            <td>
-                                <div class="btn-group dropdown">
-                                    <a href="javascript: void(0);"
-                                        class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown"
-                                        aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
-                                    <div class="dropdown-menu dropdown-menu-right">
-                                        <a class="dropdown-item" href="#"
-                                            onclick="getMailTemplateData(<?=$row['id']?>)"><i
-                                                class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
-                                        <a class="dropdown-item" onclick="deleteTemplate(<?=$row['id']?>)"><i
-                                                class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete</a>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                        <?php } ?>
+                            <?php foreach ($ticket_data as $index => $row) { ?>
+                                <tr>
+                                    <td> <?php echo $row['template_name'] ?? ""; ?> &nbsp;
+                                        <i class="fe-alert-circle"
+                                            style="color: #000;"
+                                            aria-hidden="true"
+                                            data-toggle="tooltip"
+                                            data-placement="top"
+                                            title="<?php echo ($row['tool_tip'] ?? ''); ?>"></i>
+
+                                    </td>
+
+                                    <td><?php echo $ticket_type[$row['ticket_type']] ?? ""; ?></td>
+                                    <td><?php echo $trigger_type[$row['trigger_type']] ?? ""; ?></td>
+                                    <td><?= $row['is_auto_mail'] == 1 ? 'Auto' : "Manual" ?></td>
+                                    <td>
+                                        <div class="btn-group dropdown">
+                                            <a href="javascript: void(0);"
+                                                class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown"
+                                                aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
+                                            <div class="dropdown-menu dropdown-menu-right">
+                                                <a class="dropdown-item" href="#"
+                                                    onclick="getMailTemplateData(<?= $row['id'] ?>)"><i
+                                                        class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
+                                                <a class="dropdown-item" onclick="deleteTemplate(<?= $row['id'] ?>)"><i
+                                                        class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete</a>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            <?php } ?>
                         <?php } ?>
                     </tbody>
                 </table>
@@ -135,11 +144,11 @@ table.dataTable tbody td {
                                 <select class="form-control" id="policy_type" name="ticket_type" required>
                                     <option value="">Select Policy Type</option>
                                     <?php
-                                        if (isset($policy_type) && count($policy_type)) {
-                                            foreach ($policy_type as $key => $value) {
-                                                echo "<option value=" . $key . ">" . $value . "</option>";
-                                            }
+                                    if (isset($policy_type) && count($policy_type)) {
+                                        foreach ($policy_type as $key => $value) {
+                                            echo "<option value=" . $key . ">" . $value . "</option>";
                                         }
+                                    }
                                     ?>
                                 </select>
                             </div>
@@ -149,11 +158,11 @@ table.dataTable tbody td {
                                 <select class="form-control" id="trigger_type" name="trigger_type" required>
                                     <option value="">Select status</option>
                                     <?php
-                                        if (isset($trigger_type) && count($trigger_type)) {
-                                            foreach ($trigger_type as $key => $value) {
-                                                echo "<option value=" . $key . ">" . $value . "</option>";
-                                            }
+                                    if (isset($trigger_type) && count($trigger_type)) {
+                                        foreach ($trigger_type as $key => $value) {
+                                            echo "<option value=" . $key . ">" . $value . "</option>";
                                         }
+                                    }
                                     ?>
                                 </select> <input id="primaryKey" type="hidden">
                             </div>
@@ -171,6 +180,12 @@ table.dataTable tbody td {
 
                             </div>
 
+                            <div class="form-group col-md-6">
+                                <label for="claim_status_for_template">Claim Status</label>
+                                <input type="text" readonly id="claim_status_for_template" class="form-control" />
+                            </div>
+
+
                         </div>
 
                         <div class="form-row">
@@ -191,12 +206,15 @@ table.dataTable tbody td {
                                         <select id="ticket_mail_customButton" class="form-control"
                                             style="border:none;right: 6px;width: auto;position: absolute;z-index: 1;top: 17px;height: 32px;float: right;">
                                             <option value="">PlaceHolders</option>
-                                            <?php  foreach ($placeHolders as $key => $value): ?>
-                                            <?php // if($value == 'member_name' || $value == 'member_mobile' || $value == 'nhance_logo' || $value == 'client_logo' || $value == 'app_link' || $value == 'client_name'){ ?>member_mobile
-                                            <?php $valueChange = str_replace('_', ' ', $value); $valueChange = ucwords($valueChange); ?>
-                                                        <option value="<?php echo $key; ?>"><?php echo $valueChange; ?></option>
-                                            </option>
-                                            <?php //} ?>
+                                            <?php foreach ($placeHolders as $key => $value): ?>
+                                                <?php // if($value == 'member_name' || $value == 'member_mobile' || $value == 'nhance_logo' || $value == 'client_logo' || $value == 'app_link' || $value == 'client_name'){ 
+                                                ?>member_mobile
+                                                <?php $valueChange = str_replace('_', ' ', $value);
+                                                $valueChange = ucwords($valueChange); ?>
+                                                <option value="<?php echo $key; ?>"><?php echo $valueChange; ?></option>
+                                                </option>
+                                                <?php //} 
+                                                ?>
                                             <?php endforeach; ?>
                                         </select>
                                     </div>
@@ -216,392 +234,397 @@ table.dataTable tbody td {
 </div><!-- /.modal -->
 
 <!-------------------------------------------------------------------------------------------------->
-
 <script>
-// Datatable document ready
-$(document).ready(function() {
-
-    var ticketsTable = $('#scroll-horizontal-datatable');
-
-    if (ticketsTable.length) {
-
-        ticketsTable.DataTable({
-            scrollX: true,
-            dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
-            buttons: [{
-                text: 'Add Template',
-                className: 'buttons-html5 addbtnStyle',
-                action: function(e, dt, node, config) {
-                    openModal()
-                }
-            }],
-            language: {
-                search: "_INPUT_",
-                searchPlaceholder: "Search..."
-            },
-            paging: true, // Enable pagination
-            pageLength: 25, // Set default number of rows per page (optional)
-            ordering: false,
-        });
-    } else {
-        console.error("Table atet found.");
-    }
-    var toolbar = "bold,italic,strikethrough,|,superscript,subscript,|,align,";
-    const editorConfig = {
-        buttons: toolbar.concat(['fontsize']),
-        fontsize: [8, 10, 12, 14, 16, 18, 20, 22, 24], // Customize font sizes
-        showPlaceholder: false,
-        toolbarButtonSize: 'small',
-        toolbarAdaptive: false,
-        saveHeightInStorage: true,
-        minHeight: 400,
-        extraButtons: [{
-            name: 'info',
-            iconURL: '<?= base_url()."public"; ?>/assets/images/image-solid.svg', // Replace with the actual icon URL
-            exec: function(editor) {
-                const fileInput = document.getElementById("Question_title_fileInput");
-                fileInput.click();
-            },
-        }, ],
-    };
-
-    const editor = Jodit.make("#ticket_mail_editor", editorConfig);
-
-    let lastActiveField = null;
-
-    // Track last active input field
-    $("#template_subject").on("focus", function() {
-        lastActiveField = this;
+    $(document).ready(function() {
+        $('[data-toggle="tooltip"]').tooltip();
     });
-
-    // Track Jodit editor focus separately
-    editor.events.on("focus", function() {
-        lastActiveField = editor;
-    });
-
-    document.addEventListener('change', function(event) {
-        var target = event.target;
-        if (target.matches('#ticket_mail_customButton')) {
-            let placeholderValue = $(target).val();
-            if (!placeholderValue) return;
-
-            if (lastActiveField) {
-                if (lastActiveField.id === "template_subject") {
-                    insertAtCursor(lastActiveField, placeholderValue);
-                } else {
-                    editor.selection.insertHTML(placeholderValue);
-                }
-            }
-
-            $(target).val('');
-        }
-    });
-
-    function insertAtCursor(input, textToInsert) {
-        if (document.selection) {
-            input.focus();
-            var sel = document.selection.createRange();
-            sel.text = textToInsert;
-        } else if (input.selectionStart || input.selectionStart === 0) {
-            let startPos = input.selectionStart;
-            let endPos = input.selectionEnd;
-            input.value = input.value.substring(0, startPos) + textToInsert + input.value.substring(endPos,
-                input.value.length);
-            input.selectionStart = input.selectionEnd = startPos + textToInsert.length;
-        } else {
-            input.value += textToInsert;
-        }
-    }
-
-
-    $('.close').click(function() {
-        $('#template_subject').val('');
-        $('#template_name').val('');
-        $('#primaryKey').val('');
-        $('#policy_type').val('').change();
-        $('#trigger_type').val('').change();
-        editor.setEditorValue('');
-        $('#primaryKey').val(null);
-        $('#statusSwitch').prop('checked', false);
-
-    })
-    $('#ticket_mail_editor_modal').submit(function(event) {
-
-        event.preventDefault();
-        let isValid = true;
-        $('#ticket_mail_editor_modal [required]').each(function() {
-            if (!this.value.trim()) {
-                isValid = false;
-                $(this).addClass('is-invalid'); // Add a red border for visibility
-            } else {
-                $(this).removeClass('is-invalid');
-            }
-        });
-
-        if (!isValid) {
-            toastr.error('Please fill all required fields.', 'Validation Error');
-            return; // Prevent submission
-        }
-        var joditEditor = editor;
-        if (joditEditor) {
-            var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html();
-            var formData = $(this).serializeArray();
-            formData.push({
-                name: 'mail_content',
-                value: mailContent
-            });
-            // formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() });
-            var isAutoMailEnabled = $('#statusSwitch').is(':checked') ? 1 : 0;
-            formData.push({
-                name: 'is_auto_mail',
-                value: isAutoMailEnabled
-            });
-            var primary_key = $('#primaryKey').val();
-            if (primary_key != null && primary_key != '') {
-                formData.push({
-                    name: 'id',
-                    value: primary_key
-                });
-            }
-            $('.loader').fadeIn();
-            $('.loader-mask').fadeIn();
-            var form_action = '<?= base_url("ticket/crud_mail_template/1") ?>';
-            $.ajax({
-                url: form_action,
-                type: "POST",
-                data: formData,
-                dataType: 'json',
-                success: function(res) {
-                    if (res.status == true) {
-                        $('#new_mail_template').find('.close').click();
-                        $('.loader').fadeOut();
-                        $('.loader-mask').delay(350).fadeOut('slow');
-                        toastr.success('Template saved successfully!', 'Success');
-                        location.reload();
-                    } else if (res.status == false) {
-                        toastr.error('Failed to Save Data', 'error');
-                    }
-
-                },
-                error: function(xhr, status, error) {
-                    console.error(xhr.responseText);
-                    console.error(status, error);
-                    setTimeout(function() {
-                        $('.loader').fadeOut();
-                        $('.loader-mask').delay(350).fadeOut('slow');
-                        toastr.error('Something Wrong!', 'warning');
-                    }, 1000);
-                }
-            });
-        } else {
-            console.error("Jodit editor instance is not defined.");
-        }
-    })
-
-});
-
-function openModal() {
-    var myModal = new bootstrap.Modal(document.getElementById('new_mail_template'));
-    myModal.show();
-}
-
-function deleteTemplate(id) {
-    const url = '<?= base_url("ticket/crud_mail_template/3") ?>';
-    const data = {
-        id: id
-    }; // Ensure data is passed as an object
-
-    Swal.fire({
-        title: "Are you sure?",
-        text: "You need to remove this template.",
-        icon: "info",
-        showCancelButton: true,
-        confirmButtonColor: "#3085d6",
-        confirmButtonText: "Yes",
-    }).then((result) => {
-        if (result.isConfirmed) {
-            $('.loader').fadeIn();
-            $('.loader-mask').fadeIn();
-            $.ajax({
-                url: url,
-                type: "POST",
-                data: data,
-                success: function(res) {
-                    if (res.status === true) {
-                        location.reload();
-                        $('.loader').fadeOut();
-                        $('.loader-mask').delay(350).fadeOut('slow');
-                        toastr.success('Template Deleted successfully!', 'Success');
-                    } else if (res.status === false) {
-                        toastr.error('Failed to Delete Template', 'Error');
-                        $('.loader').fadeOut();
-                        $('.loader-mask').delay(350).fadeOut('slow');
-                    }
-                },
-                error: function(xhr, status, error) {
-                    console.error(xhr.responseText);
-                    console.error(status, error);
-                    setTimeout(function() {
-                        $('.loader').fadeOut();
-                        $('.loader-mask').delay(350).fadeOut('slow');
-                        toastr.error('Something went wrong!', 'Warning');
-                    }, 1000);
-                }
-            });
-        }
-    });
-}
-
-function getMailTemplateData(id) {
-    const template_name = 'new_mail_template';
-    $('.loader').fadeIn();
-    $('.loader-mask').fadeIn();
-
-    var form_action = '<?= base_url("ticket/crud_mail_template/2") ?>';
-    var data = {
-        id: id
-    };
-
-    $.ajax({
-        url: form_action,
-        type: "POST",
-        data: data,
-        success: function(res) {
-            console.log('get Mail Template Data', res);
-            if (res) {
-                if (res.status == true) {
-                    // Open the modal
-                    openModal();
-
-                    // Populate the form fields
-                    $('#template_subject').val(res.data.subject);
-                    $('#template_name').val(res.data.template_name);
-                    $('#primaryKey').val(res.data.id);
-                    $('#policy_type').val(res.data.ticket_type).change();
-                    $('#trigger_type').val(res.data.trigger_type).change();
-                    $('.jodit-wysiwyg').html(res.data.mail_content);
-
-                    // Set the auto mail switch
-                    if (res.data.is_auto_mail == 1) {
-                        $('#statusSwitch').prop('checked', true);
-                    } else {
-                        $('#statusSwitch').prop('checked', false);
-                    }
-
-                    // Populate any additional fields if necessary, like placeholders
-                    // Assuming `placeholders` is an array in the response
-                    if (res.placeholders) {
-                        res.placeholders.forEach(function(placeholder) {
-                            // You can populate any dropdown or field as required
-                            $('#ticket_mail_customButton').val(placeholder);
-                        });
-                    }
-                } else {
-                    toastr.error('Data Not Found', 'error');
-                }
-            }
-            $('.loader').fadeOut();
-            $('.loader-mask').delay(350).fadeOut('slow');
-        },
-        error: function(xhr, status, error) {
-            console.error(xhr.responseText);
-            console.error(status, error);
-            setTimeout(function() {
-                $('.loader').fadeOut();
-                $('.loader-mask').delay(350).fadeOut('slow');
-                toastr.warning('Something Went Wrong!', 'warning');
-            }, 1000);
-        }
-    });
-}
 </script>
 <script>
-document.addEventListener("DOMContentLoaded", function() {
-    const table = document.getElementById("scroll-horizontal-datatable");
+    // Datatable document ready
+    $(document).ready(function() {
 
-    // Create custom dropdown
-    function createCustomDropdown(row) {
-        // Get the original dropdown items
-        const originalDropdown = row.querySelector('.dropdown-menu');
-        if (!originalDropdown) return null;
+        var ticketsTable = $('#scroll-horizontal-datatable');
 
-        // Create new dropdown with proper background and spacing
-        const customDropdown = document.createElement('div');
-        customDropdown.className = 'custom-dropdown-menu';
+        if (ticketsTable.length) {
 
-        // Copy inner content while maintaining icon alignment
-        customDropdown.innerHTML = originalDropdown.innerHTML;
+            ticketsTable.DataTable({
+                scrollX: true,
+                dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
+                buttons: [{
+                    text: 'Add Template',
+                    className: 'buttons-html5 addbtnStyle',
+                    action: function(e, dt, node, config) {
+                        openModal()
+                    }
+                }],
+                language: {
+                    search: "_INPUT_",
+                    searchPlaceholder: "Search..."
+                },
+                paging: true, // Enable pagination
+                pageLength: 25, // Set default number of rows per page (optional)
+                ordering: false,
+            });
+        } else {
+            console.error("Table atet found.");
+        }
+        var toolbar = "bold,italic,strikethrough,|,superscript,subscript,|,align,";
+        const editorConfig = {
+            buttons: toolbar.concat(['fontsize']),
+            fontsize: [8, 10, 12, 14, 16, 18, 20, 22, 24], // Customize font sizes
+            showPlaceholder: false,
+            toolbarButtonSize: 'small',
+            toolbarAdaptive: false,
+            saveHeightInStorage: true,
+            minHeight: 400,
+            extraButtons: [{
+                name: 'info',
+                iconURL: '<?= base_url() . "public"; ?>/assets/images/image-solid.svg', // Replace with the actual icon URL
+                exec: function(editor) {
+                    const fileInput = document.getElementById("Question_title_fileInput");
+                    fileInput.click();
+                },
+            }, ],
+        };
 
-        return customDropdown;
+        const editor = Jodit.make("#ticket_mail_editor", editorConfig);
+
+        let lastActiveField = null;
+
+        // Track last active input field
+        $("#template_subject").on("focus", function() {
+            lastActiveField = this;
+        });
+
+        // Track Jodit editor focus separately
+        editor.events.on("focus", function() {
+            lastActiveField = editor;
+        });
+
+        document.addEventListener('change', function(event) {
+            var target = event.target;
+            if (target.matches('#ticket_mail_customButton')) {
+                let placeholderValue = $(target).val();
+                if (!placeholderValue) return;
+
+                if (lastActiveField) {
+                    if (lastActiveField.id === "template_subject") {
+                        insertAtCursor(lastActiveField, placeholderValue);
+                    } else {
+                        editor.selection.insertHTML(placeholderValue);
+                    }
+                }
+
+                $(target).val('');
+            }
+        });
+
+        function insertAtCursor(input, textToInsert) {
+            if (document.selection) {
+                input.focus();
+                var sel = document.selection.createRange();
+                sel.text = textToInsert;
+            } else if (input.selectionStart || input.selectionStart === 0) {
+                let startPos = input.selectionStart;
+                let endPos = input.selectionEnd;
+                input.value = input.value.substring(0, startPos) + textToInsert + input.value.substring(endPos,
+                    input.value.length);
+                input.selectionStart = input.selectionEnd = startPos + textToInsert.length;
+            } else {
+                input.value += textToInsert;
+            }
+        }
+
+
+        $('.close').click(function() {
+            $('#template_subject').val('');
+            $('#template_name').val('');
+            $('#primaryKey').val('');
+            $('#policy_type').val('').change();
+            $('#trigger_type').val('').change();
+            editor.setEditorValue('');
+            $('#primaryKey').val(null);
+            $('#statusSwitch').prop('checked', false);
+
+        })
+        $('#ticket_mail_editor_modal').submit(function(event) {
+
+            event.preventDefault();
+            let isValid = true;
+            $('#ticket_mail_editor_modal [required]').each(function() {
+                if (!this.value.trim()) {
+                    isValid = false;
+                    $(this).addClass('is-invalid'); // Add a red border for visibility
+                } else {
+                    $(this).removeClass('is-invalid');
+                }
+            });
+
+            if (!isValid) {
+                toastr.error('Please fill all required fields.', 'Validation Error');
+                return; // Prevent submission
+            }
+            var joditEditor = editor;
+            if (joditEditor) {
+                var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html();
+                var formData = $(this).serializeArray();
+                formData.push({
+                    name: 'mail_content',
+                    value: mailContent
+                });
+                // formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() });
+                var isAutoMailEnabled = $('#statusSwitch').is(':checked') ? 1 : 0;
+                formData.push({
+                    name: 'is_auto_mail',
+                    value: isAutoMailEnabled
+                });
+                var primary_key = $('#primaryKey').val();
+                if (primary_key != null && primary_key != '') {
+                    formData.push({
+                        name: 'id',
+                        value: primary_key
+                    });
+                }
+                $('.loader').fadeIn();
+                $('.loader-mask').fadeIn();
+                var form_action = '<?= base_url("ticket/crud_mail_template/1") ?>';
+                $.ajax({
+                    url: form_action,
+                    type: "POST",
+                    data: formData,
+                    dataType: 'json',
+                    success: function(res) {
+                        if (res.status == true) {
+                            $('#new_mail_template').find('.close').click();
+                            $('.loader').fadeOut();
+                            $('.loader-mask').delay(350).fadeOut('slow');
+                            toastr.success('Template saved successfully!', 'Success');
+                            location.reload();
+                        } else if (res.status == false) {
+                            toastr.error('Failed to Save Data', 'error');
+                        }
+
+                    },
+                    error: function(xhr, status, error) {
+                        console.error(xhr.responseText);
+                        console.error(status, error);
+                        setTimeout(function() {
+                            $('.loader').fadeOut();
+                            $('.loader-mask').delay(350).fadeOut('slow');
+                            toastr.error('Something Wrong!', 'warning');
+                        }, 1000);
+                    }
+                });
+            } else {
+                console.error("Jodit editor instance is not defined.");
+            }
+        })
+
+    });
+
+    function openModal() {
+        var myModal = new bootstrap.Modal(document.getElementById('new_mail_template'));
+        myModal.show();
     }
 
-    let activeDropdown = null;
+    function deleteTemplate(id) {
+        const url = '<?= base_url("ticket/crud_mail_template/3") ?>';
+        const data = {
+            id: id
+        }; // Ensure data is passed as an object
 
-    // Add click event listener to rows
-    table.querySelectorAll("tbody tr").forEach(row => {
-        const customDropdown = createCustomDropdown(row);
-        if (!customDropdown) return;
-
-        document.body.appendChild(customDropdown);
-
-        row.addEventListener("click", function(event) {
-            // Ignore clicks on the action column
-            if (event.target.closest('td:last-child')) {
-                return;
+        Swal.fire({
+            title: "Are you sure?",
+            text: "You need to remove this template.",
+            icon: "info",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            confirmButtonText: "Yes",
+        }).then((result) => {
+            if (result.isConfirmed) {
+                $('.loader').fadeIn();
+                $('.loader-mask').fadeIn();
+                $.ajax({
+                    url: url,
+                    type: "POST",
+                    data: data,
+                    success: function(res) {
+                        if (res.status === true) {
+                            location.reload();
+                            $('.loader').fadeOut();
+                            $('.loader-mask').delay(350).fadeOut('slow');
+                            toastr.success('Template Deleted successfully!', 'Success');
+                        } else if (res.status === false) {
+                            toastr.error('Failed to Delete Template', 'Error');
+                            $('.loader').fadeOut();
+                            $('.loader-mask').delay(350).fadeOut('slow');
+                        }
+                    },
+                    error: function(xhr, status, error) {
+                        console.error(xhr.responseText);
+                        console.error(status, error);
+                        setTimeout(function() {
+                            $('.loader').fadeOut();
+                            $('.loader-mask').delay(350).fadeOut('slow');
+                            toastr.error('Something went wrong!', 'Warning');
+                        }, 1000);
+                    }
+                });
             }
-
-            // Hide any active dropdown
-            if (activeDropdown) {
-                activeDropdown.style.display = 'none';
-            }
-
-            // Get click position
-            const rect = event.target.getBoundingClientRect();
-
-            // Position the dropdown with some offset
-            customDropdown.style.display = 'block';
-            customDropdown.style.position = 'fixed';
-            customDropdown.style.left = `${rect.left}px`;
-            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
-
-            // Set as active dropdown
-            activeDropdown = customDropdown;
-
-            event.stopPropagation();
         });
+    }
 
-        // Preserve click handlers and add auto-close
-        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
-            item.addEventListener('click', function(e) {
-                const onclickAttr = this.getAttribute('onclick');
-                if (onclickAttr) {
-                    eval(onclickAttr);
+    function getMailTemplateData(id) {
+        const template_name = 'new_mail_template';
+        $('.loader').fadeIn();
+        $('.loader-mask').fadeIn();
+
+        var form_action = '<?= base_url("ticket/crud_mail_template/2") ?>';
+        var data = {
+            id: id
+        };
+
+        $.ajax({
+            url: form_action,
+            type: "POST",
+            data: data,
+            success: function(res) {
+                console.log('get Mail Template Data', res);
+                if (res) {
+                    if (res.status == true) {
+                        // Open the modal
+                        openModal();
+
+                        // Populate the form fields
+                        $('#template_subject').val(res.data.subject);
+                        $('#template_name').val(res.data.template_name);
+                        $('#primaryKey').val(res.data.id);
+                        $('#policy_type').val(res.data.ticket_type).change();
+                        $('#trigger_type').val(res.data.trigger_type).change();
+                        $('#claim_status_for_template').val(res.data.tool_tip);
+                        $('.jodit-wysiwyg').html(res.data.mail_content);
+
+                        // Set the auto mail switch
+                        if (res.data.is_auto_mail == 1) {
+                            $('#statusSwitch').prop('checked', true);
+                        } else {
+                            $('#statusSwitch').prop('checked', false);
+                        }
+
+                        // Populate any additional fields if necessary, like placeholders
+                        // Assuming `placeholders` is an array in the response
+                        if (res.placeholders) {
+                            res.placeholders.forEach(function(placeholder) {
+                                // You can populate any dropdown or field as required
+                                $('#ticket_mail_customButton').val(placeholder);
+                            });
+                        }
+                    } else {
+                        toastr.error('Data Not Found', 'error');
+                    }
+                }
+                $('.loader').fadeOut();
+                $('.loader-mask').delay(350).fadeOut('slow');
+            },
+            error: function(xhr, status, error) {
+                console.error(xhr.responseText);
+                console.error(status, error);
+                setTimeout(function() {
+                    $('.loader').fadeOut();
+                    $('.loader-mask').delay(350).fadeOut('slow');
+                    toastr.warning('Something Went Wrong!', 'warning');
+                }, 1000);
+            }
+        });
+    }
+</script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const table = document.getElementById("scroll-horizontal-datatable");
+
+        // Create custom dropdown
+        function createCustomDropdown(row) {
+            // Get the original dropdown items
+            const originalDropdown = row.querySelector('.dropdown-menu');
+            if (!originalDropdown) return null;
+
+            // Create new dropdown with proper background and spacing
+            const customDropdown = document.createElement('div');
+            customDropdown.className = 'custom-dropdown-menu';
+
+            // Copy inner content while maintaining icon alignment
+            customDropdown.innerHTML = originalDropdown.innerHTML;
+
+            return customDropdown;
+        }
+
+        let activeDropdown = null;
+
+        // Add click event listener to rows
+        table.querySelectorAll("tbody tr").forEach(row => {
+            const customDropdown = createCustomDropdown(row);
+            if (!customDropdown) return;
+
+            document.body.appendChild(customDropdown);
+
+            row.addEventListener("click", function(event) {
+                // Ignore clicks on the action column
+                if (event.target.closest('td:last-child')) {
+                    return;
                 }
 
-                const href = this.getAttribute('href');
-                if (href && href !== '#') {
-                    window.location.href = href;
-                }
-
-                // Close the dropdown after handling the click
+                // Hide any active dropdown
                 if (activeDropdown) {
                     activeDropdown.style.display = 'none';
-                    activeDropdown = null;
                 }
 
-                e.stopPropagation();
+                // Get click position
+                const rect = event.target.getBoundingClientRect();
+
+                // Position the dropdown with some offset
+                customDropdown.style.display = 'block';
+                customDropdown.style.position = 'fixed';
+                customDropdown.style.left = `${rect.left}px`;
+                customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+
+                // Set as active dropdown
+                activeDropdown = customDropdown;
+
+                event.stopPropagation();
+            });
+
+            // Preserve click handlers and add auto-close
+            customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+                item.addEventListener('click', function(e) {
+                    const onclickAttr = this.getAttribute('onclick');
+                    if (onclickAttr) {
+                        eval(onclickAttr);
+                    }
+
+                    const href = this.getAttribute('href');
+                    if (href && href !== '#') {
+                        window.location.href = href;
+                    }
+
+                    // Close the dropdown after handling the click
+                    if (activeDropdown) {
+                        activeDropdown.style.display = 'none';
+                        activeDropdown = null;
+                    }
+
+                    e.stopPropagation();
+                });
             });
         });
-    });
 
-    // Close dropdown when clicking outside
-    document.addEventListener("click", function() {
-        if (activeDropdown) {
-            activeDropdown.style.display = 'none';
-            activeDropdown = null;
-        }
+        // Close dropdown when clicking outside
+        document.addEventListener("click", function() {
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+                activeDropdown = null;
+            }
+        });
     });
-});
 </script>
\ No newline at end of file