diff --git a/app/Views/campaign_creation.php b/app/Views/campaign_creation.php
new file mode 100644
index 00000000..f82ef560
--- /dev/null
+++ b/app/Views/campaign_creation.php
@@ -0,0 +1,88 @@
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div class="float-right">
+                    <a href="<?= base_url()."campaign_creation_form/0"; ?>" class="btn btn-primary"><i class="ri-file-edit-line"></i> Add campaign </a>
+                </div><!-- end col-->                
+                <br>
+                <h4 class="header-title mb-3"><?= $page_name; ?></h4>
+                <?php if (session()->getFlashdata('success') || session()->getFlashdata('error')) : ?>
+                    <?php if (session()->getFlashdata('success')) : ?>
+                        <div class="alert alert-success alert-dismissible fade show" role="alert">
+                            <?= session('success') ?>
+                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                    <?php endif; ?>
+                    <?php if (session()->getFlashdata('error')) : ?>
+                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                            <?= session('error') ?>
+                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                    <?php endif; ?>
+                <?php endif; ?>
+                <div class="table-responsive">
+                    <table id="scroll-horizontal-datatable_customer" class="table w-100 nowrap">
+                        <thead class="thead-light">
+                            <tr>
+                                <th hidden></th>
+                                <th>Campaign Name</th>
+                                <th>Template Name</th>
+                                <th>Group Name</th>
+                                <th>Total Customer</th>
+                                <th>Scheduled at</th>
+                                <th>Created at</th>
+                                <th>Created by</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <?php foreach ($campaign as $c) :
+                            if ($c['isactive']) {
+                                $class = 'badge badge-soft-success';
+                                $message = 'Active';
+                            } else {
+                                $class = 'badge badge-soft-danger';
+                                $message = 'In-Active';
+                            } 
+                            $scheduled_date = date('d/m/Y', strtotime($c['scheduled_date']));
+                            $scheduled_time = date('h:i A', strtotime($c['scheduled_time']));
+                            ?>
+                            <tr>
+                                <td hidden><?= $c['campaign_id']; ?></td>
+                                <td><?= $c['campaign_name']; ?></td>
+                                <td><?= $c['template_name']; ?></td>
+                                <td><?= $c['group_name']; ?></td>
+                                <td><?= $c['customer_group_count']; ?></td>
+                                <td><?= $scheduled_date." ".$scheduled_time; ?></td>
+                                <td><?= $c['formatted_created_on']; ?></td>
+                                <td><?= $c['created_by_name']; ?></td>
+                                <td><span class="<?php echo $class; ?>"><?php echo $message; ?></span></td>
+                                <td>
+                                    <a href="<?= base_url()."campaign_creation_form/".$c['campaign_id']; ?>" class="edit-button" title="Click to Edit Campaign" ><i class="ri-pencil-line"></i></a>
+                                    <?php if ($c['isactive']) { ?> <a href="<?= base_url() . "campaign_creation_delete/".$c['campaign_id']; ?>" class="delete-button" title="Click to Delete Campaign" ><i class="ri-delete-bin-line"></i></a> <?php } ?>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+            </div> <!-- end card body-->
+        </div> <!-- end card -->
+    </div><!-- end col-->
+</div><!-- end row-->
+
+<script>
+    $(document).ready(function() {
+        $('#scroll-horizontal-datatable_customer').DataTable({
+            "order": [
+                [0, "desc"]
+            ] // 4 is the column index of "created_on" in your table
+            // Other DataTables configuration options
+        });
+    });
+</script>
diff --git a/app/Views/campaign_creation_form.php b/app/Views/campaign_creation_form.php
new file mode 100644
index 00000000..2d98c12a
--- /dev/null
+++ b/app/Views/campaign_creation_form.php
@@ -0,0 +1,154 @@
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-body">
+                <h4 class="header-title"><?= $page_name; ?></h4>
+                <form class="parsley-examples" action="<?= base_url() . "campaign_creation_insert"; ?>" method="post" enctype="multipart/form-data" id="myForm">
+                    <div class="form-group">
+                        <div class="form-row">
+                            <div class="form-group col-md-6">
+                                <label for="campaign_name" class="col-form-label">Campaign Name<span class="text-danger"> *</span></label>
+                                <input type="text" class="form-control" id="campaign_name" name="campaign_name" value="<?= isset($campaign_details['campaign_name']) ? $campaign_details['campaign_name'] : '' ?>" placeholder="Campaign Name" required />
+                                <div class="invalid-feedback"> Please provide. </div>
+                            </div>
+                            <div class="form-group col-md-6">
+                                <label for="group_id" class="col-form-label">Group<span class="text-danger"></span></label>
+                                <!-- <select id="group_id" name="group_id[]" class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Choose ..." required> -->
+                                <select id="group_id" name="group_id[]" class="form-control"  multiple="multiple" required>
+                                <option value="">Choose the Group</option>
+                                    <?php foreach ($group_details as $value) { ?>
+                                        <option value="<?php echo $value['group_id']; ?>"
+                                            <?php if (isset($campaign_details['group_id']) && in_array($value['group_id'], $campaign_details['group_id'])) echo "selected"; ?>>
+                                            <?php echo $value['group_name']; ?>
+                                        </option>
+                                    <?php } ?>
+                                </select>
+                            </div>
+                            <div class="form-group col-md-4">
+                                <label for="mode" class="col-form-label col-md-3">Mode<span class="text-danger"></span></label>
+                                <div class="col-md-9 mt-1">
+                                    <div class="custom-control custom-radio custom-control-inline">
+                                        <input type="radio" id="emailRadio" name="mode" class="custom-control-input" value="Email" checked>
+                                        <label class="custom-control-label" for="emailRadio">Email</label>
+                                    </div>
+                                    <div class="custom-control custom-radio custom-control-inline">
+                                        <input type="radio" id="whatsappRadio" name="mode" class="custom-control-input" value="Whatsapp">
+                                        <label class="custom-control-label" for="whatsappRadio">Whatsapp</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group col-md-8">
+                                <label for="scheduled" class="col-form-label">Scheduled Date/Time<span class="text-danger"></span></label>
+                                <div class="row">
+                                    <div class="col-6">
+                                        <input class="form-control" type="date" name="scheduled_date" id="example-date" value="<?= isset($campaign_details['scheduled_date']) ? $campaign_details['scheduled_date'] : '' ?>">
+                                    </div>
+                                    <div class="col-6">
+                                        <input class="form-control" type="time" name="scheduled_time" id="example-time" value="<?= isset($campaign_details['scheduled_time']) ? $campaign_details['scheduled_time'] : '' ?>">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group col-md-12">
+                                <label for="load_templateid" class="col-form-label">Template<span class="text-danger"></span></label>
+                                <select id="load_templateid" name="template_id" class="form-control" required>
+                                    <option value="">Choose the Template</option>
+                                    <!-- <?php foreach ($template_details as $value) { ?>
+                                        <option value="<?php echo $value['template_id']; ?>" <?php if (isset($campaign_details['template_id']) && ($campaign_details['template_id'] === $value['template_id'])) echo "selected"; ?>>
+                                            <?php echo $value['template_name']; ?></option>
+                                    <?php } ?> -->
+                                </select>
+                            </div>
+                            <!-- <div class="form-group col-md-12">
+                                <label for="templatemessage" class="col-form-label">Template Message<span class="text-danger"> *</span></label>
+                                <textarea id="summernote-basic" name="templatemessage" class="form-control" rows="7">
+                                <?php if(isset($campaign_details['message'])){ echo $campaign_details['message']; }else{ ?> 
+                                    <h5>Hello {User}, </h5>
+                                            <p>Please, write text here!</p>
+                                <?php } ?>
+                                </textarea>
+                            </div> -->
+                        </div>
+                        
+                        <input type="hidden" id="campaign_id" name="campaign_id" placeholder="hidden for template id" value="<?= isset($campaign_details['campaign_id']) ? $campaign_details['campaign_id'] : '' ?>" />
+                        <?php if (!empty($campaign_details)) { ?>
+                            <div class="form-group text-right m-b-0 checkbox checkbox-purple">
+                                <input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($campaign_details) && $campaign_details['isactive'] == 1 ? 'checked' : '' ?>>
+                                <label for="isactive"> Is Active</label>
+                            </div>
+                            <br>
+                        <?php } ?>
+                        <div class="form-group text-right m-b-0">
+                            <button class="btn btn-success waves-effect waves-light mr-1" type="submit" id="submitBtn">
+                                Submit
+                            </button>
+                            <button type="reset" class="btn btn-primary waves-effect mr-1">
+                                Reset
+                            </button>
+                            <a href="<?= base_url() . "campaign_creation"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
+                        </div>
+                    </div>
+                </form>
+            </div> <!-- end card-body-->
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+</div><!-- end row -->
+<script>
+    $(document).ready(function() {
+        // Listen for changes in the radio buttons
+        var mode = "<?= isset($campaign_details['mode']) ? $campaign_details['mode'] : ""; ?>";
+        var template = "<?= isset($campaign_details['template_id']) ? $campaign_details['template_id'] : ""; ?>";
+        load_details(mode,template);
+
+        $('input[name="mode"]').on('change', function() {
+            var selectedValue = $(this).val();
+            console.log('selectedValue',selectedValue);
+            load_details(selectedValue,template);
+        });
+
+        if(mode != ""){
+            var emailRadio = document.getElementById("emailRadio");
+            var whatsappRadio = document.getElementById("whatsappRadio");
+            if(mode == 'Email'){
+                emailRadio.checked = true;
+                whatsappRadio.checked = false;
+            }
+            if(mode == 'Whatsapp'){
+                emailRadio.checked = false;
+                whatsappRadio.checked = true;                
+            }
+            load_details(mode,template);
+        }
+    });
+
+    function load_details(mode,template) {
+        var mode = (mode != "") ? mode : 'Email';
+        var temp_arr = <?php echo json_encode($template_details); ?>;
+        var filtered_data = $.grep(temp_arr, function(item) {
+            return item['mode'] === mode;
+        });
+        $('#load_templateid').empty();
+        $('#load_templateid').append($('<option>', { value: "", text: "Choose the Template" }));
+        $.each(filtered_data, function(k, v) {
+            $('#load_templateid').append($('<option>', {
+                value: v.template_id,
+                text: v.template_name,
+                selected: (v.template_id == template) ? true : false
+            }));
+        });    
+    }
+</script>
+<script>
+    document.getElementById('myForm').addEventListener('submit', function(event) {
+        var form = event.target;
+        
+        if (form.checkValidity() === false) {
+        
+            form.reportValidity(); // Display validation error messages
+            event.preventDefault(); // Prevent form submission if it's not valid
+            $('#submitBtn').prop('disabled', false);
+        } else {
+        
+            $('#submitBtn').prop('disabled', true);
+        }
+   });
+</script>
\ No newline at end of file
diff --git a/app/Views/customer_group.php b/app/Views/customer_group.php
new file mode 100644
index 00000000..0cb0fe81
--- /dev/null
+++ b/app/Views/customer_group.php
@@ -0,0 +1,153 @@
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div class="float-right">
+                    <a href="<?= base_url()."view_customer_group/0"; ?>" class="btn btn-primary"><i class="ri-team-line"></i> Add Customer Group </a>
+                </div><!-- end col-->
+                <br>
+                <h4 class="header-title mb-3"><?= $page_name; ?></h4>
+                <?php if (session()->getFlashdata('success') || session()->getFlashdata('error')) : ?>
+                <?php if (session()->getFlashdata('success')) : ?>
+                    <div class="alert alert-success alert-dismissible fade show" role="alert">
+                        <?= session('success') ?>
+                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                <?php endif; ?>
+                <?php if (session()->getFlashdata('error')) : ?>
+                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                        <?= session('error') ?>
+                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                <?php endif; ?>
+                <?php endif; ?>
+                <div class="table-responsive">
+                    <table id="scroll-horizontal-datatable_customer" class="table w-100 nowrap">
+                        <thead class="thead-light">
+                            <tr>
+                                <th hidden></th>
+                                <th>Group Name</th>
+                                <th>Created at</th>
+                                <th>Created by</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <?php foreach ($customer_group as $group) :
+                            if ($group['isactive']) {
+                                $class = 'badge badge-soft-success';
+                                $message = 'Active';
+                            } else {
+                                $class = 'badge badge-soft-danger';
+                                $message = 'In-Active';
+                            } ?>
+                            <tr>
+                                <td hidden><?= $group['group_id']; ?></td>
+                                <td><?= $group['group_name']; ?></td>
+                                <td><?= $group['formatted_created_on']; ?></td>
+                                <td><?= $group['created_by_name']; ?></td>
+                                <td><span class="<?php echo $class; ?>"><?php echo $message; ?></span></td>
+                                <td>
+                                    <a href="<?= base_url() . "view_customer_group/" . $group['group_id']; ?>"  class="edit-button" title="Edit" ><i class="ri-pencil-line"></i></a>
+                                    <a class="preview-button" title="Customer list" data-toggle="modal" data-target="#scrollable-modal" data-primary-key="<?php echo $group['group_id']; ?>" data-group-name="<?php echo $group['group_name']; ?>"><i class="ri-pages-line"></i></a>
+                                    <?php if ($group['isactive']) { ?> <a href="<?= base_url() . "delete_customer_group/" . $group['group_id']; ?>" class="delete-button" title="Delete" ><i class="ri-delete-bin-line"></i></a> <?php } ?>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?> 
+                        </tbody>
+                    </table>
+                </div>
+            </div> <!-- end card body-->
+        </div> <!-- end card -->
+    </div><!-- end col-->
+</div>
+<div class="modal" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
+                                            <div class="modal-dialog modal-dialog-scrollable" role="document">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <h5 class="modal-title" id="scrollableModalTitle">Customer list</h5>
+                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                            <span aria-hidden="true">&times;</span>
+                                                        </button>
+                                                    </div>
+                                                    <div class="modal-body" id="ajax-content">
+                                                    <table class="table table-bordered" id="data-table">
+                                                        <thead>
+                                                            <tr>
+                                                                <th style="width:10%;">#</th>
+                                                                <th style="width:30%;">Name</th>
+                                                                <th style="width:30%;">Email</th>
+                                                                <th style="width:30%;">Mobile</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            <!-- Table rows will be populated here -->
+                                                        </tbody>
+                                                    </table>
+
+                                                    </div>
+                                                    <div class="modal-footer">
+                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                                    </div>
+                                                </div><!-- /.modal-content -->
+                                            </div><!-- /.modal-dialog -->
+                                        </div><!-- /.modal -->  
+<!-- end row-->
+<script>
+$(document).ready(function() {
+    $('#scroll-horizontal-datatable_customer').DataTable({
+        "order": [[0, "desc"]] // 4 is the column index of "created_on" in your table
+        // Other DataTables configuration options
+    });
+});
+</script>
+<script>
+    $(document).ready(function() {
+        
+        $('#scrollable-modal').on('show.bs.modal', function(event) {
+        // Get the data-primary-key attribute from the modal trigger
+        var primaryKey = $(event.relatedTarget).data('primary-key');
+        var groupName = $(event.relatedTarget).data('group-name');
+        $('#scrollableModalTitle').text(groupName + ' - Customer list');
+        
+        // Get the table reference
+        var table = $("#data-table tbody");
+        var route =  "<?= base_url().'preview_customer_group/'?>"+primaryKey;
+        
+            $.ajax({
+                method: 'GET',
+                url: route,
+                success: function(response) {
+                    if (response.length > 0) {
+                        // Clear existing rows
+                        table.empty();
+                        $x=0;
+                        // Loop through the response and create table rows
+                        $.each(response, function (index, item) {
+                            var row = $("<tr>");
+                            row.append($("<td style='width:10%;'>").text(++$x));
+                            row.append($("<td style='width:30%;'>").text(item.customer_name));
+                            row.append($("<td style='width:30%;'>").text(item.email));
+                            row.append($("<td style='width:30%;'>").text(item.mobile_no));
+                            table.append(row);
+                        });
+                    } else {
+                        // Handle the case where there is no data
+                        table.empty();
+                        table.append("<tr><td colspan='4' style='width:100%; text-align: center; vertical-align: middle;'>No data available</td></tr>");
+                    }
+                },
+                error: function () {
+                    // alert("An error occurred.");
+                    console.log("CG Preview List - An error occurred.");
+                    table.empty();
+                    table.append("<tr><td colspan='4' style='width:100%; text-align: center; vertical-align: middle;'>No data available</td></tr>");
+                }
+            });
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/app/Views/customer_group_form.php b/app/Views/customer_group_form.php
new file mode 100644
index 00000000..2937a3e1
--- /dev/null
+++ b/app/Views/customer_group_form.php
@@ -0,0 +1,589 @@
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-body">
+                <h4 class="header-title"><?= $page_name; ?></h4>
+                <p class="sub-header"></p>
+                <form id="myForm" class="needs-validation" novalidate method="POST" enctype="multipart/form-data" action="<?= base_url() . "insert_customer_group"; ?>" >
+                    <div class="form-row">
+                        <div class="form-group col-md-12">
+                            <label for="groupname" class="col-form-label">Group Name<span class="text-danger"> *</span></label>
+                            <input type="text" class="form-control" id="groupname" name="groupname" value="<?= isset($customer_group['groupname']) ? $customer_group['groupname'] : '' ?>" placeholder="Group Name" required />
+                            <div class="invalid-feedback"> Please provide. </div>
+                        </div>
+                    </div>
+                    <br />
+                    <div class="form-row">
+                        <div class="form-group col-md-12">
+                            <h4 class="header-title">Select Criteria</h4>
+                            
+                            <table class="table table-borderless" id="itemTable">
+                                <thead>
+                                    <tr>
+                                        <th>Field</th>
+                                        <th>Condition</th>
+                                        <th>Value</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                <?php if(!empty($customer_group) && !empty($customer_group['column'])){ for ($i = 0; $i < count($customer_group['column']); $i++) {  ?>
+                                    <tr>
+                                        <td style="width:30%;">
+                                            <select class="form-control" data-toggle="select2" id=<?= "column".$i; ?> name="column[]" >
+                                            <?php foreach ($field as $f) : ?>
+                                                <option value="<?= $f['value']; ?>"  
+                                                    fieldflag="<?= $f['fieldflag']; ?>"
+                                                         <?php if ($f['disable']) echo 'disabled'; ?>
+                                                         <?php if(isset($customer_group['column'][$i]) && $customer_group['column'][$i] == $f['value'] ){echo "selected";}?>>
+                                                               <?= $f['text']; ?></option>
+                                                <?php endforeach; ?>
+                                            </select>
+                                        </td>
+                                        <td style="width:30%;">
+                                            <select class="form-control" data-toggle="select2" id=<?= "operator".$i; ?> name="operator[]" onchange="FieldChange(this,<?= $i; ?>)">
+                                            <?php foreach ($operator as $value => $label) { ?>
+                                                <option value="<?php echo $value; ?>" <?php if(isset($customer_group['operator'][$i]) && $customer_group['operator'][$i] == $value ){echo "selected";}?> >
+                                                    <?php echo $label; ?>
+                                                </option>
+                                            <?php } ?>
+                                            </select>
+                                        </td>
+                                        <td style="width:30%;">
+                                        <?php if ($customer_group['operator'][$i] == 'greater than' || $customer_group['operator'][$i] == 'greater than or equal to' || $customer_group['operator'][$i] == 'less than' || $customer_group['operator'][$i] == 'less than or equal to') { ?>
+                                            <input type="date" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Date" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
+                                        <?php }else if($customer_group['operator'][$i] === 'between') { 
+                                            $dates = (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? explode(',', $customer_group['values'][$i]) : [] ; 
+                                            ?>
+                                            <div style="display: inline-flex;">
+                                            <input type="date" class="form-control" id=<?= "values".$i.'1'; ?> placeholder="Enter the Start Date" onchange="concatBetween(<?= $i ?>)" value="<?= (isset($dates[0]) && $dates[0] != "" ) ? str_replace(' ', '', $dates[0]) : '' ?>" />
+                                            <input type="date" class="form-control ml-1" id=<?= "values".$i.'2'; ?> placeholder="Enter the End Date" onchange="concatBetween(<?= $i ?>)" value="<?= (isset($dates[1]) && $dates[1] != "" ) ? str_replace(' ', '', $dates[1]) : '' ?>"  />
+                                            </div>
+                                            <input type="hidden" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="values" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
+                                        <?php } else if(($customer_group['operator'][$i] === 'contain' || $customer_group['operator'][$i] == 'not contain')) { ?>
+                                            <input type="text" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Multiple Values with comma Seprator" onkeypress="return restriction(event,'M')" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
+                                        <?php }else if($customer_group['operator'][$i] === 'is null' || $customer_group['operator'][$i] == 'is not null') { ?>
+                                            <input type="hidden" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Values" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
+                                        <?php } else { ?>
+                                            <input type="text" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Values" onkeypress="return restriction(event,2)" 
+                                            value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
+                                        <?php } ?>
+                                        </td>
+                                        <td style="width:10%;">
+                                            <button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item "><i class="fa fa-trash"></i></button>
+                                        </td>
+                                    </tr>
+                                <?php } }else{ ?>
+                                    <tr>
+                                        <td style="width:30%;">
+                                            <select class="form-control" data-toggle="select2" id="column0" name="column[]" >
+                                                <?php foreach ($field as $f) : ?>
+                                                <option value="<?= $f['value']; ?>"  
+                                                    fieldflag="<?= $f['fieldflag']; ?>"
+                                                         <?php if ($f['disable']) echo 'disabled'; ?> >
+                                                               <?= $f['text']; ?></option>
+                                                <?php endforeach; ?>
+                                            </select>
+                                        </td>
+                                        <td style="width:30%;">
+                                            <select class="form-control" data-toggle="select2" id="operator0" name="operator[]" onchange="FieldChange(this,0)">
+                                            <?php foreach ($operator as $value => $label) { ?>
+                                                <option value="<?php echo $value; ?>">
+                                                    <?php echo $label; ?>
+                                                </option>
+                                            <?php } ?>
+                                            </select>
+                                        </td>
+                                        <td style="width:30%;">
+                                            <input type="text" class="form-control" id="values0" name="values[]" placeholder="Enter the Values" onkeypress="return restriction(event,1)"  />
+                                        </td>
+                                        <td style="width:10%;">
+                                            <button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item "><i class="fa fa-trash"></i></button>
+                                        </td>
+                                    </tr>
+                                <?php } ?>
+
+                                </tbody>
+                            </table>
+                            <div class="form-group text-right m-b-0">
+                                <button type="button" id="addItem" class="btn btn-soft-dark btn-rounded waves-effect waves-light mr-3 add-item"> + Add New Criteria</button>
+                            </div>
+                            <?php if (!empty($customer_group)) { ?>
+                            <div class="form-group text-right checkbox checkbox-purple mr-3">
+                                <input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($customer_group) && $customer_group['isactive'] == 1 ? 'checked' : '' ?>>
+                                <label for="isactive"> Is Active</label>
+                            </div>
+                            <?php } ?>
+                            <input type="hidden" id="string_flag" name="string_flag" placeholder="hidden" value="preview" />
+                            <input type="hidden" id="group_id" name="group_id" placeholder="hidden for primary id" value="<?= isset($customer_group['group_id']) ? $customer_group['group_id'] : '' ?>" /> 
+                        </div>
+                    </div>    
+                    <div class="form-group text-right m-b-0">
+                        <button type="button" class="btn btn-purple waves-effect mr-1" data-toggle="modal" data-target="#scrollable-modal">Save</button>
+                        <button type="button" class="btn btn-primary waves-effect mr-1" onclick="refreshPage()">Reset</button>
+                        <a href="<?= base_url() . "customer_group"; ?>" class="btn btn-secondary waves-effect mr-3">Cancel</a>
+                    </div>
+                                        <div class="modal" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
+                                            <div class="modal-dialog modal-dialog-scrollable" role="document">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <h5 class="modal-title" id="scrollableModalTitle">Customer list</h5>
+                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                            <span aria-hidden="true">&times;</span>
+                                                        </button>
+                                                    </div>
+                                                    <div class="modal-body" id="ajax-content">
+                                                    <table class="table table-bordered" id="data-table">
+                                                        <thead>
+                                                            <tr>
+                                                                <th style="width:10%;">#</th>
+                                                                <th style="width:30%;">Name</th>
+                                                                <th style="width:30%;">Email</th>
+                                                                <th style="width:30%;">Mobile</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            <!-- Table rows will be populated here -->
+                                                        </tbody>
+                                                    </table>
+
+                                                    </div>
+                                                    <div class="modal-footer">
+                                                        <button id="save" class="btn btn-success waves-effect waves-light mr-1" type="submit" id="submitBtn"> Submit </button>
+                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                                        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
+                                                    </div>
+                                                </div><!-- /.modal-content -->
+                                            </div><!-- /.modal-dialog -->
+                                        </div><!-- /.modal -->  
+
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
+<script>
+const myArray = [];
+document.getElementById("addItem").addEventListener("click", function() {
+    var fieldArray = <?php echo json_encode($field); ?>;
+    var operatorArray = <?php echo json_encode($operator); ?>;
+    
+    var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+    var rows = table.getElementsByTagName("tr");
+    var hasValue = false;
+    var rowCounter = rows.length; // Get the current number of rows
+
+    // Check if any existing fields are empty
+    for (var i = 0; i < rows.length; i++) {
+        var cells = rows[i].getElementsByTagName("td");
+        for (var j = 0; j < cells.length; j++) {
+            var input = cells[j].querySelector('input, select');
+            if (input && input.value.trim() === "") {
+                alert("Field in row " + (i + 1) + " is empty.");
+                return; // Exit the loop after the first empty field is found.
+            } else {
+                hasValue = true;
+            }
+        }
+    }
+
+    if (!hasValue) {
+        alert("At least one row should contain a value.");
+        return; // Exit the function to prevent adding a new row.
+    }
+
+    var newRow = table.insertRow(rowCounter);
+
+    var cell1 = newRow.insertCell(0);
+    var cell2 = newRow.insertCell(1);
+    var cell3 = newRow.insertCell(2);
+    var cell4 = newRow.insertCell(3);
+    
+
+    const select1 = document.createElement('select');
+    select1.className = 'form-control';
+    select1.name = 'column[]';
+    select1.setAttribute("data-toggle", "select2");
+    select1.id = 'column' + rowCounter; // Set a dynamic ID for the select input
+    // select1.onchange = function() {
+    //     disableSelectedOptions(this,rowCounter); 
+    // };
+
+    const select2 = document.createElement('select');
+    select2.className = 'form-control';
+    select2.name = 'operator[]';
+    select2.setAttribute("data-toggle", "select2");
+    select2.id = 'operator' + rowCounter; // Set a dynamic ID for the select input
+    select2.onchange = function() {
+      FieldChange(this, rowCounter); 
+    };
+    
+    exstingColumnId = 'column'+(rowCounter-1);
+    // if($('#' + exstingColumnId).val() != ""){
+    //     myArray.push($('#' + exstingColumnId).val());
+    // }
+    // console.log(myArray);
+
+    fieldArray.forEach((option) => {
+            const fieldoption = document.createElement('option');
+            fieldoption.value = option.value;
+            fieldoption.setAttribute("fieldflag", option.fieldflag);
+            fieldoption.text = option.text;
+            // fieldoption.disabled = option.disable ? true : (option.disable == myArray[0] ? true : false);
+            // if (myArray.includes(option.value)) {
+            //    fieldoption.disabled = true;
+            // }
+            // else{
+            //    fieldoption.disabled = false;
+            // }
+            select1.appendChild(fieldoption);
+        });
+
+    for (const value in operatorArray) {
+        const optionElement = document.createElement('option');
+        optionElement.value = value;
+        optionElement.text = operatorArray[value];
+        select2.appendChild(optionElement);
+    }
+
+    const inputElement = document.createElement('input');
+    inputElement.type = 'text';
+    inputElement.className = 'form-control';
+    inputElement.name = 'values[]';
+    inputElement.placeholder = 'Enter the Values';
+    inputElement.id = 'values' + rowCounter; // Set a dynamic ID for the input field
+
+    cell1.appendChild(select1);
+    cell2.appendChild(select2);
+    cell3.appendChild(inputElement);
+    cell4.innerHTML = '<button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item"><i class="fa fa-trash"></i></button>';
+
+    $(select1).select2();
+    $(select2).select2();
+});
+
+
+// document.getElementById("addItemold").addEventListener("click", function() {
+//     var fieldArray = <?php echo json_encode($field); ?>;
+//     var operatorArray = <?php echo json_encode($operator); ?>;
+    
+//     var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+//     var rows = table.getElementsByTagName("tr");
+//     var hasValue = false;
+
+//     // Check if any existing fields are empty
+//     for (var i = 0; i < rows.length; i++) {
+//         var cells = rows[i].getElementsByTagName("td");
+//         for (var j = 0; j < cells.length; j++) {
+//             var input = cells[j].querySelector('input, select');
+//             if (input && input.value.trim() === "") {
+//                 alert("Field in row " + (i + 1) + " is empty.");
+//                 return; // Exit the loop after the first empty field is found.
+//             }else {
+//                 hasValue = true;
+//             }
+//         }
+//     }
+
+//     if (!hasValue) {
+//         alert("At least one row should contain a value.");
+//         return; // Exit the function to prevent adding a new row.
+//     }
+
+//     var newRow = table.insertRow(table.rows.length);
+    
+//     var cell1 = newRow.insertCell(0);
+//     var cell2 = newRow.insertCell(1);
+//     var cell3 = newRow.insertCell(2);
+//     var cell4 = newRow.insertCell(3);
+
+//     const select1 = document.createElement('select');
+//     select1.className = 'form-control';
+//     select1.name = 'column[]';
+//     select1.setAttribute("data-toggle", "select2");
+    
+
+//     const select2 = document.createElement('select');
+//     select2.className = 'form-control';
+//     select2.name = 'operator[]';
+//     select2.setAttribute("data-toggle", "select2");
+    
+
+//     for (const fieldvalue in fieldArray) {
+//         const fieldoption = document.createElement('option');
+//         fieldoption.value = fieldvalue;
+//         fieldoption.text = fieldArray[fieldvalue];
+//         select1.appendChild(fieldoption);
+//     }
+
+//     for (const value in operatorArray) {
+//         const optionElement = document.createElement('option');
+//         optionElement.value = value;
+//         optionElement.text = operatorArray[value];
+//         select2.appendChild(optionElement);
+//     }
+
+//     const inputElement = document.createElement('input');
+//     inputElement.type = 'text';
+//     inputElement.className = 'form-control';
+//     inputElement.name = 'values[]';
+//     inputElement.placeholder = 'Enter the Values';
+
+//     cell1.appendChild(select1);
+//     cell2.appendChild(select2);
+//     cell3.appendChild(inputElement);
+//     cell4.innerHTML = '<button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item"><i class="fa fa-trash"></i></button>';
+
+//     $(select1).select2();
+//     $(select2).select2();
+// });
+</script>
+
+<script>
+    // Function to remove a row from the table
+    function removeItem(row) {
+        var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+        var rows = table.getElementsByTagName("tr");
+        if (rows.length > 1) {
+            var rowIndex = row.rowIndex; // Get the row index
+            console.log(rowIndex);
+            var exstingColumnId = 'column' + (rowIndex-1);
+            var valueToRemove = $('#' + exstingColumnId).val();
+            // var indexToRemove = myArray.indexOf(valueToRemove);
+            // if (indexToRemove !== -1) {
+            //     myArray.splice(indexToRemove, 1); // Remove the element at the specified index
+            // }
+            // console.log('myArray',myArray);
+            table.removeChild(row);
+        } else {
+            alert('At least one row should contain a value.');
+        }
+        
+    }
+
+    // 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>
+<!-- function removeItem(row) {
+        var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
+        var rows = table.getElementsByTagName("tr");
+        var hasValue = false; // Flag to track if the row to be removed has a value.
+
+        // Check if the row to be removed has values
+        var cells = row.getElementsByTagName("td");
+        for (var j = 0; j < cells.length; j++) {
+            var input = cells[j].querySelector('input, select');
+            if (input && input.value.trim() !== "") {
+                hasValue = true;
+                break; // Exit the loop after the first value is found in the row.
+            }
+        }
+
+        if (hasValue || rows.length > 1) {
+            table.removeChild(row);
+        } else {
+            alert('At least one row should contain a value.');
+        }
+} -->
+
+<!-- <script>
+    document.getElementById('previewButton').addEventListener('click', function() {
+        const name = "sanjeev";
+        const email = "document.getElementById('email').value";
+
+        // Update the modal with the preview data
+        // document.getElementById('previewName').textContent = name;
+        // document.getElementById('previewEmail').textContent = email;
+
+        // Show the modal
+        const modal = document.getElementById('previewModal');
+        modal.style.display = 'block';
+
+        // Close the modal when the close button is clicked
+        document.getElementById('closeModal').addEventListener('click', function() {
+            modal.style.display = 'none';
+        });
+
+        // Close the modal when clicking outside of it
+        window.onclick = function(event) {
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        };
+    });
+</script> -->
+<script>
+    $(document).ready(function() {
+        
+        $('#scrollable-modal').on('show.bs.modal', function() {
+            var formData = $("#myForm").serialize();
+            var groupName = $("#groupname").val();
+            // Use AJAX to load content into the modal
+            // Get the table reference
+            var table = $("#data-table tbody");
+            $.ajax({
+                type: "POST",
+                url: "<?= base_url() . 'insert_customer_group' ?>",
+                data: formData,
+                dataType: "json", // Expect JSON response
+                success: function(response) {
+                    if (response.length > 0) {
+                        $('#scrollableModalTitle').text(groupName + ' - Customer list');
+                        // Clear existing rows
+                        table.empty();
+                        $x=0;
+                        // Loop through the response and create table rows
+                        $.each(response, function (index, item) {
+                            var row = $("<tr>");
+                            row.append($("<td style='width:10%;'>").text(++$x));
+                            row.append($("<td style='width:30%;'>").text(item.customer_name));
+                            row.append($("<td style='width:30%;'>").text(item.email));
+                            row.append($("<td style='width:30%;'>").text(item.mobile_no));
+                            table.append(row);
+                        });
+                    } else {
+                        // Handle the case where there is no data
+                        table.empty();
+                        table.append("<tr><td colspan='4' style='width:100%; text-align: center; vertical-align: middle;'>No data available</td></tr>");
+                    }
+                },
+                error: function () {
+                    // alert("An error occurred.");
+                    console.log("CG Preview Form - An error occurred.");
+                    table.empty();
+                    table.append("<tr><td colspan='4' style='width:100%; text-align: center; vertical-align: middle;'>No data available</td></tr>");
+                }
+            });
+        });
+    });
+</script>
+<script>
+        $("#save").on("click", function () {
+            $("#string_flag").val("save");
+        });
+
+function FieldChange(selectElement, rowCounter) {
+    var id = selectElement.id;
+    var selectedOperator = selectElement.value;
+    var inputId = 'values' + rowCounter;
+    var column = $("#column"+rowCounter).find(':selected').attr('fieldflag');
+    if (column == 2 && (selectedOperator == 'greater than' || selectedOperator == 'greater than or equal to' || selectedOperator == 'less than' || selectedOperator == 'less than or equal to')) {
+        $('#' + inputId).replaceWith('<input type="date" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Date" />');
+    }else if(column == 2 && selectedOperator === 'between') {
+        var inputHtml = '<div style="display: inline-flex;"><input type="date" class="form-control" id="' + inputId + '1" placeholder="Enter the Start Date" onchange="concatBetween(' + rowCounter + ')" />' +
+                        '<input type="date" class="form-control ml-1" id="' + inputId + '2" placeholder="Enter the End Date" onchange="concatBetween(' + rowCounter + ')" /></div>'+
+                        '<input type="hidden" class="form-control" id="' + inputId + '" name="values[]" placeholder="values" />';
+        $('#' + inputId).replaceWith(inputHtml);
+    }
+    else if(column == 1 && (selectedOperator === 'contain' || selectedOperator == 'not contain')) {
+        $('#' + inputId).replaceWith('<input type="text" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Multiple Values with comma Seprator" onkeypress="return restriction(event,2)" />');
+    }else if(selectedOperator === 'is null' || selectedOperator == 'is not null') {
+        $('#' + inputId).replaceWith('<input type="hidden" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Values" value="0" />');
+    } else {
+        $('#' + inputId).replaceWith('<input type="text" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Values" onkeypress="return restriction(event,1)" />');
+    }
+    
+}
+function concatBetween(Counter) {
+    // This function will be called when the date input changes
+    var Id = 'values' + Counter;
+    var started = $('#' +Id+'1').val();
+    var ended =  $('#' +Id+'2').val();
+    if(started != "" && ended != ""){
+        $("#"+Id).val(started + ',' + ended);
+    }
+    // console.log("id: " + Id);
+    // console.log("counter: " + Counter);
+    // console.log("sv: " + started);
+    // console.log("ev: " + ended);    
+}
+
+</script>
+<script>
+function restriction(event,temporary_flag) {
+    var charCode = event.which || event.keyCode;
+    if (Number(temporary_flag) == 2 && 
+        ((charCode >= 65 && charCode <= 90) ||  // A-Z
+        (charCode >= 97 && charCode <= 122) || // a-z
+        (charCode >= 48 && charCode <= 57) ||  // 0-9
+        charCode == 44 // comma
+    )){
+        return true; 
+    }
+    else if (Number(temporary_flag) == 1 && 
+        ((charCode >= 48 && charCode <= 57) || // 0-9
+        (charCode >= 65 && charCode <= 90) || // A-Z
+        (charCode >= 97 && charCode <= 122)   // a-z
+    )) {
+        return true; 
+    } else {
+        event.preventDefault(); // Prevent the character from being entered
+        return false;
+    }
+}
+</script>
+<script>
+    // // Function to disable options in the "Choose the Field" dropdowns
+    // function disableOptions(selectId) {
+    //     console.log('inside');
+    //     // Get all select elements with the specified name attribute
+    //     var selectElements = document.querySelectorAll('select[name="column[]"]');
+
+    //     // Iterate through the select elements
+    //     selectElements.forEach(function (select) {
+    //         console.log(select.id,selectId);
+    //         if (select.id !== selectId) {
+    //             console.log('if');
+    //             // Find the "Choose the Field" option and disable it
+    //             var chooseOption = select.querySelector('option[value=""]');
+    //             if (chooseOption) {
+    //                 console.log('if-if');
+    //                 chooseOption.disabled = true;
+    //             }
+    //         }
+    //     });
+    // }
+
+    // // Event listener for changes in the "Choose the Field" dropdowns
+    // document.addEventListener('change', function (e) {
+    //     var target = e.target;
+    //     console.log(target,'target');
+    //     if (target.name === 'column[]' && target.value === '') {
+    //         console.log('if');
+    //         // Disable the "Choose the Field" option in other dropdowns
+    //         disableOptions(target.id);
+    //     }else{
+    //         console.log('else');
+    //     }
+    // });
+
+    // function disableSelectedOptions(selectElement, rowCounter) {
+
+    //     var id = selectElement.id;
+    //     var selectedOperator = selectElement.value;
+    // }
+</script>
+<script>
+    document.getElementById('myForm').addEventListener('submit', function(event) {
+        var form = event.target;
+        
+        if (form.checkValidity() === false) {
+        
+            form.reportValidity(); // Display validation error messages
+            event.preventDefault(); // Prevent form submission if it's not valid
+            $('#submitBtn').prop('disabled', false);
+        } else {
+        
+            $('#submitBtn').prop('disabled', true);
+        }
+   });
+</script>
+
+
+
diff --git a/app/Views/template_creation.php b/app/Views/template_creation.php
new file mode 100644
index 00000000..7ff156cc
--- /dev/null
+++ b/app/Views/template_creation.php
@@ -0,0 +1,89 @@
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div class="float-right">
+                    <a href="<?= base_url()."template_creation_form/0"; ?>" class="btn btn-primary"><i class="ri-file-edit-line"></i> Add Template </a>
+                </div><!-- end col-->                
+                <br>
+                <h4 class="header-title mb-3"><?= $page_name; ?></h4>
+                <?php if (session()->getFlashdata('success') || session()->getFlashdata('error')) : ?>
+                    <?php if (session()->getFlashdata('success')) : ?>
+                        <div class="alert alert-success alert-dismissible fade show" role="alert">
+                            <?= session('success') ?>
+                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                    <?php endif; ?>
+                    <?php if (session()->getFlashdata('error')) : ?>
+                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                            <?= session('error') ?>
+                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                    <?php endif; ?>
+                <?php endif; ?>
+                <div class="table-responsive">
+                    <table id="scroll-horizontal-datatable_customer" class="table w-100 nowrap">
+                        <thead class="thead-light">
+                            <tr>
+                                <th hidden></th>
+                                <th>Template Name</th>
+                                <th>Mode</th>
+                                <th>Created at</th>
+                                <th>Created by</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <?php foreach ($template as $temp) :
+                            if ($temp['isactive']) {
+                                $class = 'badge badge-soft-success';
+                                $message = 'Active';
+                            } else {
+                                $class = 'badge badge-soft-danger';
+                                $message = 'In-Active';
+                            } ?>
+                            <tr>
+                                <td hidden><?= $temp['template_id']; ?></td>
+                                <td><?= $temp['template_name']; ?></td>
+                                <td><?= $temp['mode']; ?></td>
+                                <td><?= $temp['formatted_created_on']; ?></td>
+                                <td><?= $temp['created_by_name']; ?></td>
+                                <td><span class="<?php echo $class; ?>"><?php echo $message; ?></span></td>
+                                <td>
+                                    <a href="<?= base_url()."template_creation_form/".$temp['template_id']; ?>" class="edit-button" title="Click to Edit Template" ><i class="ri-pencil-line"></i></a>
+                                    <?php if ($temp['isactive']) { ?> <a href="<?php echo "template_creation_delete/".$temp['template_id']; ?>" class="delete-button" title="Click to Delete Template" ><i class="ri-delete-bin-line"></i></a> <?php } ?>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+            </div> <!-- end card body-->
+        </div> <!-- end card -->
+    </div><!-- end col-->
+</div><!-- end row-->
+
+<script>
+    $(document).ready(function() {
+        $('#scroll-horizontal-datatable_customer').DataTable({
+            "order": [
+                [0, "desc"]
+            ] // 4 is the column index of "created_on" in your table
+            // Other DataTables configuration options
+        });
+    });
+</script>
+<!-- <script>
+    $(document).ready(function() {
+        $('#bs-example-modal-lg').on('show.bs.modal', function(event) {
+            var primaryKey = $(event.relatedTarget).data('primary-key');
+            console.log(primaryKey);
+            var groupName = $(event.relatedTarget).data('modal-title');
+            $('#myLargeModalLabel').text(groupName);
+        });
+    });
+</script> -->
\ No newline at end of file
diff --git a/app/Views/template_creation_form.php b/app/Views/template_creation_form.php
new file mode 100644
index 00000000..3183df4d
--- /dev/null
+++ b/app/Views/template_creation_form.php
@@ -0,0 +1,106 @@
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-body">
+                <h4 class="header-title"><?= $page_name; ?></h4>
+                <form class="parsley-examples" action="<?= base_url() . "template_creation_insert"; ?>" method="post" enctype="multipart/form-data" id="myForm">
+                    <div class="form-group">
+                        <div class="form-row">
+                            <div class="form-group col-md-12">
+                                <label for="templatename" class="col-form-label">Template Name<span class="text-danger"> *</span></label>
+                                <input type="text" class="form-control" id="templatename" name="templatename" value="<?= isset($template_details['template_name']) ? $template_details['template_name'] : '' ?>" placeholder="Template Name" required />
+                                <div class="invalid-feedback"> Please provide. </div>
+                            </div>
+                            <div class="form-group col-md-6">
+                                <label for="mode" class="col-form-label col-md-3">Mode<span class="text-danger"></span></label>
+                                <div class="col-md-9 mt-1">
+                                    <div class="custom-control custom-radio custom-control-inline">
+                                        <input type="radio" id="emailRadio" name="mode" class="custom-control-input" value="Email" checked>
+                                        <label class="custom-control-label" for="emailRadio">Email</label>
+                                    </div>
+                                    <div class="custom-control custom-radio custom-control-inline">
+                                        <input type="radio" id="whatsappRadio" name="mode" class="custom-control-input" value="Whatsapp">
+                                        <label class="custom-control-label" for="whatsappRadio">Whatsapp</label>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="form-group col-md-6" id="emailSubject" style="display: block;">
+                                    <label for="templatename" class="col-form-label">subject</label>
+                                    <input type="text" class="form-control" id="subject" name="subject" value="<?= isset($template_details['subject']) ? $template_details['subject'] : '' ?>" placeholder="Subject" />
+                            </div>
+                            
+                            <div class="form-group col-md-12">
+                                <label for="templatemessage" class="col-form-label">Template Message<span class="text-danger"> *</span></label>
+                                <textarea id="summernote-basic" name="templatemessage" class="form-control" rows="7">
+                                <?php if(isset($template_details['message'])){ echo $template_details['message']; }else{ ?> 
+                                    <h5>Hello {User}, </h5>
+                                            <p>Please, write text here!</p>
+                                <?php } ?>
+                                </textarea>
+                            </div>
+                        </div>
+                        <input type="hidden" id="template_id" name="template_id" placeholder="hidden for template id" value="<?= isset($template_details['template_id']) ? $template_details['template_id'] : '' ?>" />
+                        <?php if (!empty($template_details)) { ?>
+                            <div class="form-group text-right m-b-0 checkbox checkbox-purple">
+                                <input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($template_details) && $template_details['isactive'] == 1 ? 'checked' : '' ?>>
+                                <label for="isactive"> Is Active</label>
+                            </div>
+                            <br>
+                        <?php } ?>
+                        <div class="form-group text-right m-b-0">
+                            <button class="btn btn-success waves-effect waves-light mr-1" type="submit" id="submitBtn">
+                                Submit
+                            </button>
+                            <button type="reset" class="btn btn-primary waves-effect mr-1">
+                                Reset
+                            </button>
+                            <a href="<?= base_url() . "template_creation"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
+                        </div>
+                    </div>
+                </form>
+            </div> <!-- end card-body-->
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+</div><!-- end row -->
+<script>
+    $(document).ready(function() {
+        // Listen for changes in the radio buttons
+        $('input[name="mode"]').on('change', function() {
+            var selectedValue = $(this).val();
+            if (selectedValue === 'Email') {
+                $('#emailSubject').show();
+            } else {
+                $('#emailSubject').hide();
+            }
+        });
+
+        var mode = "<?= isset($template_details['mode']) ? $template_details['mode'] : ""; ?>";
+        if(mode != ""){
+            var emailRadio = document.getElementById("emailRadio");
+            var whatsappRadio = document.getElementById("whatsappRadio");
+            if(mode == 'Email'){
+                emailRadio.checked = true;
+                whatsappRadio.checked = false;
+                $('#emailSubject').show();
+            }else if(mode == 'Whatsapp'){
+                emailRadio.checked = false;
+                whatsappRadio.checked = true;
+                $('#emailSubject').hide();
+            }
+        }
+
+    });
+</script>
+<script>
+    document.getElementById('myForm').addEventListener('submit', function(event) {
+        var form = event.target;
+        if (form.checkValidity() === false) {
+            form.reportValidity(); // Display validation error messages
+            event.preventDefault(); // Prevent form submission if it's not valid
+            $('#submitBtn').prop('disabled', false);
+        } else {
+            $('#submitBtn').prop('disabled', true);
+        }
+   });
+</script>
\ No newline at end of file