diff --git a/resources/views/form/list.blade.php b/resources/views/form/list.blade.php
index 1d4bf1ef..ad53f26a 100644
--- a/resources/views/form/list.blade.php
+++ b/resources/views/form/list.blade.php
@@ -19,11 +19,9 @@
             <h4 class="page-title">{{$formname}}</h4>
         </div>
         <div class="col-4 p-2">
-            <a href="/form/downloaddata?form_id={{$form_id}}" id="download-btn" class="btn btn-info btn-xs float-end">Download</a>
-            <button type="button" id="emailme" class="btn btn-warning btn-xs float-end me-2">Email</button>
+            <button type="button" id="export-btn" class="btn btn-info btn-xs float-end" data-bs-toggle="modal" data-bs-target="#export-modal">Export</button>
         </div>
         <div class="col-12">
-            <p>Showing data for last 30 days, please use above button "Download" to download all submissions</p>
         </div>
     </div>
     <!-- end page title -->
@@ -72,6 +70,15 @@
                                                 @if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' )
                                                 <th data-priority="1">Workflow Status</th>
                                                 @endif
+                                                @foreach(($positionColumns ?? []) as $positionField)
+                                                <th data-priority="1">{{ ucfirst($positionField) }}</th>
+                                                @endforeach
+                                                @if(isset($form) && isset($form->show_manager_details) && $form->show_manager_details == 'yes' )
+                                                <th data-priority="1">L1 Manager</th>
+                                                <th data-priority="1">L1 Employee Code</th>
+                                                <th data-priority="1">L2 Manager</th>
+                                                <th data-priority="1">L2 Employee Code</th>
+                                                @endif
                                                 @foreach($questions as $code => $question)
                                                     @if($question->type == 'hidden')
                                                         @continue
@@ -105,6 +112,33 @@
     </div>
 </div>
 
+<div class="modal fade" id="export-modal" tabindex="-1" role="dialog" aria-labelledby="export-modal-label" aria-hidden="true">
+    <div class="modal-dialog modal-sm" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="export-modal-label">Export</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="mb-2">
+                    <label for="export-startdate" class="form-label">Start Date</label>
+                    <input type="date" class="form-control form-control-sm" id="export-startdate" required>
+                </div>
+                <div class="mb-2">
+                    <label for="export-enddate" class="form-label">End Date</label>
+                    <input type="date" class="form-control form-control-sm" id="export-enddate" required>
+                </div>
+                <div id="export-date-error" class="text-danger small d-none"></div>
+                <small class="text-muted">Maximum date range is 12 months.</small>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-warning btn-sm" id="export-email-btn">Email</button>
+                <button type="button" class="btn btn-info btn-sm" id="export-download-btn">Download</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <style type="text/css">
 #pageloader {
   background: rgba( 255, 255, 255, 0.8 );
@@ -195,6 +229,15 @@
                 @if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' )
                 { "data": "workflow_status" },
                 @endif
+                @foreach(($positionColumns ?? []) as $positionField)
+                { "data": "{{ $positionField }}" },
+                @endforeach
+                @if(isset($form) && isset($form->show_manager_details) && $form->show_manager_details == 'yes')
+                { "data": "manager1_name" },
+                { "data": "manager1_code" },
+                { "data": "manager2_name" },
+                { "data": "manager2_code" },
+                @endif
                 @foreach($questions as $code => $question)
                     @if($question->type == 'hidden')
                         @continue
@@ -237,20 +280,85 @@
                 @endforeach
             ],
             "initComplete": function(settings, json) {
-                var api = this.api();
                 var textBox = $('.dataTables_filter label input');
                 textBox.unbind();
-                textBox.bind('keyup input', function(e) {
-                    if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
-                        // do nothing
-                    } else if(e.keyCode == 13 || !textBox.val()) {
-                        api.search(this.value).draw();
+                textBox.on('keydown', function(e) {
+                    if (e.keyCode === 13) {
+                      e.preventDefault();
+                      runServerSearch($(this).val());
+                    }
+                });
+                textBox.on('input', function() {
+                    if (!$(this).val()) {
+                      runServerSearch('');
                     }
                 });
             }
           });
 
           let lastkey = '{{$lastkey}}';
+          let currentFilterParams = {};
+
+          function runServerSearch(keyword) {
+            currentFilterParams = Object.assign({}, currentFilterParams, {
+              form_id: $('#form_id').val(),
+              startdate: $('#startdate').val(),
+              enddate: $('#enddate').val()
+            });
+            keyword = (keyword || '').trim();
+            if (keyword) {
+              currentFilterParams.keyword = keyword;
+            } else {
+              delete currentFilterParams.keyword;
+            }
+            lastkey = 1;
+            loadRows(lastkey, false, currentFilterParams);
+          }
+
+          function parseYmd(ymd) {
+            var parts = String(ymd || '').split('-');
+            if (parts.length !== 3) return null;
+            var y = parseInt(parts[0], 10);
+            var m = parseInt(parts[1], 10) - 1;
+            var d = parseInt(parts[2], 10);
+            if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
+            var date = new Date(y, m, d);
+            if (date.getFullYear() !== y || date.getMonth() !== m || date.getDate() !== d) return null;
+            return date;
+          }
+
+          function addMonthsClamped(date, months) {
+            var y = date.getFullYear();
+            var m = date.getMonth() + months;
+            var d = date.getDate();
+            var result = new Date(y, m, 1);
+            var lastDay = new Date(result.getFullYear(), result.getMonth() + 1, 0).getDate();
+            result.setDate(Math.min(d, lastDay));
+            return result;
+          }
+
+          function validateExportDateRange(startdate, enddate, silent) {
+            if (!startdate || !enddate) {
+              if (!silent) Swal.fire('Error!', 'Start date and end date are required.', 'error');
+              return false;
+            }
+            var start = parseYmd(startdate);
+            var end = parseYmd(enddate);
+            if (!start || !end) {
+              if (!silent) Swal.fire('Error!', 'Start date or end date is invalid.', 'error');
+              return false;
+            }
+            if (end < start) {
+              if (!silent) Swal.fire('Error!', 'End date must be on or after start date.', 'error');
+              return false;
+            }
+            var maxEnd = addMonthsClamped(start, 12);
+            if (end > maxEnd) {
+              if (!silent) Swal.fire('Error!', 'Date range must not exceed 12 months.', 'error');
+              return false;
+            }
+            return true;
+          }
 
           function bindRowActions() {
             $('.btn-edit').off('click').on('click', function(){
@@ -346,10 +454,10 @@
               partition: '{{ $formdata->partition ?? '' }}',
               limit: 50
             };
+            params['user_id'] = '{{ $formdata->user_id ?? '' }}';
             @if(isset($formdata->all_data_access) && $formdata->all_data_access == 1)
                 params['alldata'] = 1;
             @else
-                params['user_id'] = '{{ $formdata->user_id ?? '' }}';
                 params['team_report'] = 1;
             @endif
 
@@ -383,14 +491,16 @@
             });
           }
 
-          let currentFilterParams = {};
-
           $('#apply-date-range').on('click', function() {
+            var keyword = currentFilterParams.keyword || '';
             currentFilterParams = {
               form_id: $('#form_id').val(),
               startdate: $('#startdate').val(),
               enddate: $('#enddate').val()
             };
+            if (keyword) {
+              currentFilterParams.keyword = keyword;
+            }
             lastkey = 1;
             loadRows(lastkey, false, currentFilterParams);
           });
@@ -408,17 +518,84 @@
             }
           });
 
-          $('.btn-primary').click(function(){
-            $("#pageloader").fadeIn();
+          $('#export-modal').on('show.bs.modal', function() {
+            $('#export-startdate').val($('#startdate').val() || '');
+            $('#export-enddate').val($('#enddate').val() || '');
+            $('#export-date-error').addClass('d-none').text('');
+            syncExportDateLimits();
           });
 
-          $('#emailme').click(function(){
+          function formatYmd(date) {
+            var y = date.getFullYear();
+            var m = String(date.getMonth() + 1).padStart(2, '0');
+            var d = String(date.getDate()).padStart(2, '0');
+            return y + '-' + m + '-' + d;
+          }
+
+          function syncExportDateLimits() {
+            var startdate = $('#export-startdate').val() || '';
+            var enddate = $('#export-enddate').val() || '';
+            var start = parseYmd(startdate);
+            var end = parseYmd(enddate);
+            var $startInput = $('#export-startdate');
+            var $endInput = $('#export-enddate');
+            var $error = $('#export-date-error');
+
+            $startInput.removeAttr('max');
+            $endInput.removeAttr('min').removeAttr('max');
+
+            if (start) {
+              $endInput.attr('min', startdate);
+              $endInput.attr('max', formatYmd(addMonthsClamped(start, 12)));
+            }
+            if (end) {
+              $startInput.attr('max', enddate);
+              $startInput.attr('min', formatYmd(addMonthsClamped(end, -12)));
+            }
+
+            if (startdate && enddate && !validateExportDateRange(startdate, enddate, true)) {
+              var msg = 'Date range must not exceed 12 months.';
+              if (end && start && end < start) {
+                msg = 'End date must be on or after start date.';
+              }
+              $error.removeClass('d-none').text(msg);
+              return false;
+            }
+            $error.addClass('d-none').text('');
+            return true;
+          }
+
+          $('#export-startdate, #export-enddate').on('change input', function() {
+            syncExportDateLimits();
+          });
+
+          $('#export-download-btn').on('click', function(e) {
+            e.preventDefault();
+            var startdate = $('#export-startdate').val() || '';
+            var enddate = $('#export-enddate').val() || '';
+            if (!validateExportDateRange(startdate, enddate)) {
+              syncExportDateLimits();
+              return false;
+            }
+            var url = '/form/downloaddata?form_id=' + encodeURIComponent(formId)
+              + '&startdate=' + encodeURIComponent(startdate)
+              + '&enddate=' + encodeURIComponent(enddate);
+            window.location.href = url;
+            $('#export-modal').modal('hide');
+          });
+
+          $('#export-email-btn').on('click', function(e) {
+            e.preventDefault();
+            var startdate = $('#export-startdate').val() || '';
+            var enddate = $('#export-enddate').val() || '';
+            if (!validateExportDateRange(startdate, enddate)) {
+              syncExportDateLimits();
+              return false;
+            }
             $("#pageloader").fadeIn();
-            var startdate = $('#startdate').val() || '';
-            var enddate = $('#enddate').val() || '';
-            var url = '/form/downloaddata?email=1&form_id=' + encodeURIComponent(formId);
-            if (startdate) url += '&startdate=' + encodeURIComponent(startdate);
-            if (enddate) url += '&enddate=' + encodeURIComponent(enddate);
+            var url = '/form/downloaddata?email=1&form_id=' + encodeURIComponent(formId)
+              + '&startdate=' + encodeURIComponent(startdate)
+              + '&enddate=' + encodeURIComponent(enddate);
 
             $.ajax({
               type: "GET",
@@ -426,22 +603,15 @@
               success: function() {
                 $('#notifications').append('<div class="alert alert-success">Email Sent Successfully</div>');
                 $("#pageloader").fadeOut();
+                $('#export-modal').modal('hide');
               },
-              error: function() {
+              error: function(xhr) {
                 $("#pageloader").fadeOut();
-                Swal.fire('Error!', 'Could not send email.', 'error');
+                var message = xhr.responseJSON?.message || 'Could not send email.';
+                Swal.fire('Error!', message, 'error');
               }
             });
           });
-
-          $('#startdate, #enddate').on('change', function(){
-            var startdate = $('#startdate').val() || '';
-            var enddate = $('#enddate').val() || '';
-            var url = '/form/downloaddata?form_id=' + encodeURIComponent(formId);
-            if (startdate) url += '&startdate=' + encodeURIComponent(startdate);
-            if (enddate) url += '&enddate=' + encodeURIComponent(enddate);
-            $('#download-btn').attr('href', url);
-          });
         });
     </script>
 </body>
diff --git a/resources/views/form/personalization-1694503336-f9a0ca13-2b04-4b76-8a1e-4c8f01e8a15f.blade.php b/resources/views/form/personalization-1694503336-f9a0ca13-2b04-4b76-8a1e-4c8f01e8a15f.blade.php
index dcd2c8e2..6b0720ff 100644
--- a/resources/views/form/personalization-1694503336-f9a0ca13-2b04-4b76-8a1e-4c8f01e8a15f.blade.php
+++ b/resources/views/form/personalization-1694503336-f9a0ca13-2b04-4b76-8a1e-4c8f01e8a15f.blade.php
@@ -1,296 +1,308 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    @include('layouts.shared/title-meta', ['title' => "Form"])
-    @include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
-    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
-    <link href="{{ URL::asset('assets/libs/cropper/cropper.min.css')}}" rel="stylesheet" type="text/css" />
-    <link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" />
-</head>
-<div id="pageloader">
-   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
-</div>
-<body class="loading">
-    <div class="account-pages">
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-md-8 col-lg-6 col-xl-5 p-0">
-                    <div class="card bg-pattern">
-                        <div class="card-body p-3 row">
-
-                            @if(Session::has('error'))<div class="alert alert-danger">{{Session::get('error')}}</div>
-                            <br>@endif
-                            @if(session('success'))<div class=" alert alert-success">{{ session('success') }}
-                            </div>
-                            <br>@endif
-                            <div class="col-8">
-                                <h4 class="page-title">{{$form->title}}</h4>
-                            </div>
-                            <div id="template-wrapper" class="row">
-                                <h5>Select any one of the templates</h5>
-                                @foreach($personalizations as $pers)
-                                <div class="col-6 col-md-4 mt-3">
-                                    <img src="{{$pers->icon}}" class="img-fluid" persdata='{!! json_encode($pers) !!}'><br />
-                                    <span>{{$pers->title}}</span>
-                                </div>
-                                @endforeach
-                            </div>
-
-                            <div id="form-wrapper">
-                                <form method="POST" action="/form/submitpersonalized" id="report-form" enctype="multipart/form-data">
-                                    <input type="hidden" name="form_id" value="{{$form_id}}">
-                                    <input type="hidden" name="form_info" id="form_info" value="">
-                                    @csrf
-                                    <div class="row">
-                                        <div class="col-7">
-                                            <label for="field-template_id" class="form-label"> Selected Template </label>
-                                        </div>
-                                        <div class="col-4 mb-2" id="wrapper-template_id">
-                                            <img src="" class="img-thumbnail" style="max-height:150px">
-                                        </div>
-                                        <br class="clearfix" />
-                                        @foreach($questions as $question)
-                                            <div class="col-md-12 mb-2 question-wrapper" id="wrapper-{{$question->id}}">
-                                            <label for="field-{{$question->code}}" class="form-label">{{$question->question}} <span class="req-star text-danger" style="display:none" aria-hidden="true">*</span> </label>
-                                            @switch($question->type)
-                                                @case('hidden')
-                                                    <input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" value="{{isset($question->value)?$question->value:''}}">
-                                                    @break
-                                                @case('text')
-                                                @case('email')
-                                                @case('tel')
-                                                @case('date')
-                                                    <input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control"  value="{{isset($question->value)?$question->value:''}}" maxlength={{ isset($question->code) ? ($question->code == 'message_body' ? '220' : '') : '' }}>
-                                                    @break
-                                                @case('number')
-                                                    <input type="{{$question->type}}" min="0" max="9999999999" step="1" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control"   value="{{isset($question->value)?$question->value:0}}">
-                                                    @break
-                                                @case('textarea')
-                                                    <textarea id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" >{{isset($question->value)?$question->value:''}}</textarea>
-                                                    @break
-                                                @case('dropdown')
-                                                    <select class="form-control" id="field-{{$question->code}}" name="{{$question->code}}" >
-                                                        <option value=""> -- Select -- </option>
-                                                        @foreach($question->options as $option)
-                                                        <option value="{{$option->value}}" {{isset($question->value) && $question->value == $option->value ? 'selected':''}}>{{$option->display}}</option>
-                                                        @endforeach
-                                                    </select>
-                                                    @break
-                                                @case('checkbox')
-                                                    @foreach($question->options as $option)
-                                                    <div class="form-check mb-2 form-check-primary">
-                                                        <input class="form-check-input" type="checkbox" id="field-{{$question->code}}-{{$option->value}}" name="{{$question->code}}[]" value="{{$option->value}}" {{isset($question->value) && $question->value != '' && in_array($option->value, $question->value) ? 'checked':''}}>
-                                                        <label class="form-check-label" for="field-{{$question->code}}-{{$option->value}}">{{$option->display}}</label>
-                                                    </div>
-                                                    @endforeach
-                                                    @break
-                                                @case('file')
-                                                    <input type="file" name="{{$question->code}}" class="dropify"
-                                                    data-allowed-file-extensions="png jpg jpeg" />
-                                                    <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
-                                                    @break
-                                                @case('multitextbox')
-                                                <div class="row">
-                                                    @foreach($question->options as $option)
-                                                    <div class="col-6">{{$option->display}}</div>
-                                                    <div class="col-6 mb-1">
-                                                        <input type="text" id="field-{{$option->value}}" name="{{$option->value}}" class="form-control"  value="{{isset($option->val)?$option->val:''}}">
-                                                    </div>
-                                                    @endforeach
-                                                </div>
-                                                @break
-                                            @endswitch
-                                            </div>
-                                        @endforeach
-                                        @if(!isset($form->is_approval) || (isset($form->is_approval) && $form->is_approval != 'yes' ) )
-                                        <div class="text-center d-grid mt-3">
-                                            <button class="btn btn-primary" type="submit" id="submit-btn"> Submit </button>
-                                        </div>
-                                        @endif
-                                    </div>
-                                </form>
-                            </div>
-                            <div id="cropper-wrapper">
-                                <form method="POST" action="/form/submitpersonalizedimages" id="image-form" enctype="multipart/form-data">
-                                    <input type="hidden" name="form_id" value="{{$form_id}}">
-                                    @csrf
-                                    <div class="row">
-                                        <div class="col-12 img-container">
-                                          
-                                        </div>
-                                        <div class="col-12 mt-1">
-                                          <button class="btn btn-primary" id="cropandgo">Use Image and download</button>
-                                        </div>    
-                                    </div>
-                                </form>
-                            </div>
-
-                        </div> <!-- end card-body -->
-                    </div>
-                    <!-- end card -->
-
-                    <!-- end row -->
-
-                </div> <!-- end col -->
-            </div>
-            <!-- end row -->
-        </div>
-        <!-- end container -->
-    </div>
-    <!-- end page -->
-<style type="text/css">
-#pageloader {
-  background: rgba( 255, 255, 255, 0.8 );
-  display: none;
-  height: 100%;
-  position: fixed;
-  width: 100%;
-  z-index: 9999;
-}
-
-#pageloader img {
-  left: 50%;
-  margin-left: -32px;
-  margin-top: -32px;
-  position: absolute;
-  top: 50%;
-}
-</style>
-@include('layouts.shared/footer-script')
-<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
-<script src="{{asset('assets/libs/cropper/cropper.min.js')}}"></script>
-<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
-<script type="text/javascript">
-    jQuery(document).ready(function($){
-        $('#form-wrapper').hide()
-        $('#cropper-wrapper').hide()
-        $('#template-wrapper .img-fluid').click(function(){
-            $('#form_info').val( $(this).attr('persdata') )
-            console.log($(this).attr('persdata'))
-            let personalize = JSON.parse( $(this).attr('persdata') )
-            $('.question-wrapper').hide()
-            $('#report-form .question-wrapper').each(function () {
-                $(this).find('.req-star').hide()
-                $(this).find(':input').removeAttr('required')
-            })
-            for(let que of personalize.questions) {
-                let $w = $('#wrapper-'+que)
-                $w.show()
-                $w.find('.req-star').show()
-                $w.find('input:not([type="hidden"]):not([type="checkbox"]), textarea, select').attr('required', 'required')
-            }
-            $('#report-form :input').removeAttr('readonly')
-            $('#wrapper-template_id img').attr('src', personalize.icon)
-            $('#template-wrapper').hide()
-            $('#form-wrapper').show()
-            
-            // $('.dropify').unbind()
-            // $('.dropify').dropify({
-            //     messages: {
-            //         'default': 'Drag and drop a file here or click',
-            //         'replace': 'Drag and drop or click to replace',
-            //         'remove': 'Remove',
-            //         'error': 'Ooops, something wrong appended.'
-            //     },
-            //     error: {
-            //         'fileSize': 'The file size is too big (500MB max).'
-            //     }
-            // });
-
-        })
-
-        $('.dropify').dropify({
-            messages: {
-                'default': 'Drag and drop a file here or click',
-                'replace': 'Drag and drop or click to replace',
-                'remove': 'Remove',
-                'error': 'Ooops, something wrong appended.'
-            },
-            error: {
-                'fileSize': 'The file size is too big (500MB max).'
-            }
-        });
-
-        $('#wrapper-template_id img').click(function(){
-            $('#form-wrapper').hide()
-            $('#cropper-wrapper').hide()
-            $('#template-wrapper').show()
-        })
-
-        $('#report-form').on('submit', function(event){
-            event.preventDefault();
-            $("#pageloader").fadeIn();
-            $.ajax({
-                type: "POST",
-                url: '/form/submitpersonalized',
-                data: new FormData($('#report-form')[0]),
-                processData: false,
-                contentType: false,
-                success: function( data ) {
-                    $('#cropper-wrapper').show()
-                    $('#form-wrapper').hide()
-                    $("#pageloader").fadeOut();
-                    console.log(data)
-                    if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) {
-                        for(let im of data.images_fields) {
-                            let pos = data.form_info.positions.map(p => JSON.parse(p))
-                            console.log(pos)
-                            pos = pos.map(p => p.find(pi => pi.field_name == im ) )
-                            console.log(pos)
-                            pos = pos[0]
-                            //im = JSON.parse(im)
-                            console.log(pos)
-                            //if(im.type == 'image') {
-                                $('.img-container').append(`<div class="mt-5">
-                                                <img id="image-${im}" src="${data[im]}" alt="Picture" class="img-fluid">
-                                                <input type="hidden" id="field-image-${im}" name="${im}" value="">
-                                              </div>`)
-                                $('#cropper-wrapper #image-'+im).attr('src', data[im])
-                                var tmpImg = new Image() ;
-                                tmpImg.src = data[im];
-                                tmpImg.onload = function() {
-                                    let $image = $('#image-'+im);
-                                    let options = {
-                                        aspectRatio: pos.width/pos.height,
-                                        crop: function (e) {
-                                            console.log(e);
-                                        },
-                                        cropend: function (e) {
-                                            $('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL());
-                                        },
-                                        ready: function (e) {
-                                            $('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL());
-                                        },
-                                    };
-                                    $image.cropper(options);
-                                }
-                            //}
-                        }
-                    } else {
-                        document.location.href = '/form/generatepersonalization'
-                    }
-                    
-                },
-            });
-        });
-
-        // $('#image-form').on('submit', function(event){
-        //     event.preventDefault();
-        //     $("#pageloader").fadeIn();
-        //     $.ajax({
-        //         type: "POST",
-        //         url: '/form/submitpersonalizedimages',
-        //         data: new FormData($('#image-form')[0]),
-        //         processData: false,
-        //         contentType: false,
-        //         success: function( data ) {
-        //             console.log(data)
-        //         },
-        //     });
-        // });
-
-    });
-</script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    @include('layouts.shared/title-meta', ['title' => "Form"])
+    @include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
+    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
+    <link href="{{ URL::asset('assets/libs/cropper/cropper.min.css')}}" rel="stylesheet" type="text/css" />
+    <link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" />
+</head>
+<div id="pageloader">
+   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
+</div>
+<body class="loading">
+    <div class="account-pages">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-md-8 col-lg-6 col-xl-5 p-0">
+                    <div class="card bg-pattern">
+                        <div class="card-body p-3 row">
+
+                            @if(Session::has('error'))<div class="alert alert-danger">{{Session::get('error')}}</div>
+                            <br>@endif
+                            @if(session('success'))<div class=" alert alert-success">{{ session('success') }}
+                            </div>
+                            <br>@endif
+                            <div class="col-8">
+                                <h4 class="page-title">{{$form->title}}</h4>
+                            </div>
+                            <div id="template-wrapper" class="row">
+                                <h5>Select any one of the templates</h5>
+                                @foreach($personalizations as $pers)
+                                <div class="col-6 col-md-4 mt-3">
+                                    <img src="{{$pers->icon}}" class="img-fluid" persdata='{!! json_encode($pers) !!}'><br />
+                                    <span>{{$pers->title}}</span>
+                                </div>
+                                @endforeach
+                            </div>
+
+                            <div id="form-wrapper">
+                                <form method="POST" action="/form/submitpersonalized" id="report-form" enctype="multipart/form-data">
+                                    <input type="hidden" name="form_id" value="{{$form_id}}">
+                                    <input type="hidden" name="form_info" id="form_info" value="">
+                                    @csrf
+                                    <div class="row">
+                                        <div class="col-7">
+                                            <label for="field-template_id" class="form-label"> Selected Template </label>
+                                        </div>
+                                        <div class="col-4 mb-2" id="wrapper-template_id">
+                                            <img src="" class="img-thumbnail" style="max-height:150px">
+                                        </div>
+                                        <br class="clearfix" />
+                                        @foreach($questions as $question)
+                                            <div class="col-md-12 mb-2 question-wrapper" id="wrapper-{{$question->id}}">
+                                            <label for="field-{{$question->code}}" class="form-label">{{$question->question}} <span class="req-star text-danger" style="display:none" aria-hidden="true">*</span> </label>
+                                            @switch($question->type)
+                                                @case('hidden')
+                                                    <input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" value="{{isset($question->value)?$question->value:''}}">
+                                                    @break
+                                                @case('text')
+                                                @case('email')
+                                                @case('tel')
+                                                @case('date')
+                                                    <input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control"  value="{{isset($question->value)?$question->value:''}}" maxlength={{ isset($question->code) ? ($question->code == 'message_body' ? '220' : '') : '' }}>
+                                                    @break
+                                                @case('number')
+                                                    <input type="{{$question->type}}" min="0" max="9999999999" step="1" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control"   value="{{isset($question->value)?$question->value:0}}">
+                                                    @break
+                                                @case('textarea')
+                                                    <textarea id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" >{{isset($question->value)?$question->value:''}}</textarea>
+                                                    @break
+                                                @case('dropdown')
+                                                    <select class="form-control" id="field-{{$question->code}}" name="{{$question->code}}" >
+                                                        <option value=""> -- Select -- </option>
+                                                        @foreach($question->options as $option)
+                                                        <option value="{{$option->value}}" {{isset($question->value) && $question->value == $option->value ? 'selected':''}}>{{$option->display}}</option>
+                                                        @endforeach
+                                                    </select>
+                                                    @break
+                                                @case('checkbox')
+                                                    @foreach($question->options as $option)
+                                                    <div class="form-check mb-2 form-check-primary">
+                                                        <input class="form-check-input" type="checkbox" id="field-{{$question->code}}-{{$option->value}}" name="{{$question->code}}[]" value="{{$option->value}}" {{isset($question->value) && $question->value != '' && in_array($option->value, $question->value) ? 'checked':''}}>
+                                                        <label class="form-check-label" for="field-{{$question->code}}-{{$option->value}}">{{$option->display}}</label>
+                                                    </div>
+                                                    @endforeach
+                                                    @break
+                                                @case('file')
+                                                    <input type="file" name="{{$question->code}}" class="dropify"
+                                                    data-allowed-file-extensions="png jpg jpeg" />
+                                                    <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
+                                                    @break
+                                                @case('multitextbox')
+                                                <div class="row">
+                                                    @foreach($question->options as $option)
+                                                    <div class="col-6">{{$option->display}}</div>
+                                                    <div class="col-6 mb-1">
+                                                        <input type="text" id="field-{{$option->value}}" name="{{$option->value}}" class="form-control"  value="{{isset($option->val)?$option->val:''}}">
+                                                    </div>
+                                                    @endforeach
+                                                </div>
+                                                @break
+                                            @endswitch
+                                            </div>
+                                        @endforeach
+                                        @if(!isset($form->is_approval) || (isset($form->is_approval) && $form->is_approval != 'yes' ) )
+                                        <div class="text-center d-grid mt-3">
+                                            <button class="btn btn-primary" type="submit" id="submit-btn"> Submit </button>
+                                        </div>
+                                        @endif
+                                    </div>
+                                </form>
+                            </div>
+                            <div id="cropper-wrapper">
+                                <form method="POST" action="/form/submitpersonalizedimages" id="image-form" enctype="multipart/form-data">
+                                    <input type="hidden" name="form_id" value="{{$form_id}}">
+                                    @csrf
+                                    <div class="row">
+                                        <div class="col-12 img-container">
+                                          
+                                        </div>
+                                        <div class="col-12 mt-1">
+                                          <button class="btn btn-primary" id="cropandgo">Use Image and download</button>
+                                        </div>    
+                                    </div>
+                                </form>
+                            </div>
+
+                        </div> <!-- end card-body -->
+                    </div>
+                    <!-- end card -->
+
+                    <!-- end row -->
+
+                </div> <!-- end col -->
+            </div>
+            <!-- end row -->
+        </div>
+        <!-- end container -->
+    </div>
+    <!-- end page -->
+<style type="text/css">
+#pageloader {
+  background: rgba( 255, 255, 255, 0.8 );
+  display: none;
+  height: 100%;
+  position: fixed;
+  width: 100%;
+  z-index: 9999;
+}
+
+#pageloader img {
+  left: 50%;
+  margin-left: -32px;
+  margin-top: -32px;
+  position: absolute;
+  top: 50%;
+}
+</style>
+@include('layouts.shared/footer-script')
+<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
+<script src="{{asset('assets/libs/cropper/cropper.min.js')}}"></script>
+<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
+<script type="text/javascript">
+    jQuery(document).ready(function($){
+        $('#form-wrapper').hide()
+        $('#cropper-wrapper').hide()
+        $('#template-wrapper .img-fluid').click(function(){
+            $('#form_info').val( $(this).attr('persdata') )
+            console.log($(this).attr('persdata'))
+            let personalize = JSON.parse( $(this).attr('persdata') )
+            $('.question-wrapper').hide()
+            $('#report-form .question-wrapper').each(function () {
+                $(this).find('.req-star').hide()
+                $(this).find(':input').removeAttr('required')
+            })
+            for(let que of personalize.questions) {
+                let $w = $('#wrapper-'+que)
+                $w.show()
+                $w.find('.req-star').show()
+                $w.find('input:not([type="hidden"]):not([type="checkbox"]), textarea, select').attr('required', 'required')
+            }
+            $('#report-form :input').removeAttr('readonly')
+            $('#wrapper-template_id img').attr('src', personalize.icon)
+            $('#template-wrapper').hide()
+            $('#form-wrapper').show()
+            
+            // $('.dropify').unbind()
+            // $('.dropify').dropify({
+            //     messages: {
+            //         'default': 'Drag and drop a file here or click',
+            //         'replace': 'Drag and drop or click to replace',
+            //         'remove': 'Remove',
+            //         'error': 'Ooops, something wrong appended.'
+            //     },
+            //     error: {
+            //         'fileSize': 'The file size is too big (500MB max).'
+            //     }
+            // });
+
+        })
+
+        $('.dropify').dropify({
+            messages: {
+                'default': 'Drag and drop a file here or click',
+                'replace': 'Drag and drop or click to replace',
+                'remove': 'Remove',
+                'error': 'Ooops, something wrong appended.'
+            },
+            error: {
+                'fileSize': 'The file size is too big (500MB max).'
+            }
+        });
+
+        $('#wrapper-template_id img').click(function(){
+            $('#form-wrapper').hide()
+            $('#cropper-wrapper').hide()
+            $('#template-wrapper').show()
+        })
+
+        $('#report-form').on('submit', function(event){
+            event.preventDefault();
+            $("#pageloader").fadeIn();
+            $.ajax({
+                type: "POST",
+                url: '/form/submitpersonalized',
+                data: new FormData($('#report-form')[0]),
+                processData: false,
+                contentType: false,
+                success: function( data ) {
+                    console.log(data)
+                    // Skip cropper when this template has no image overlay or no image was uploaded
+                    var hasImageOverlay = false
+                    if (data.form_info && data.form_info.positions) {
+                        try {
+                            hasImageOverlay = data.form_info.positions.some(function (p) {
+                                var positions = typeof p === 'string' ? JSON.parse(p) : p
+                                return Array.isArray(positions) && positions.some(function (pi) { return pi && pi.type === 'image' })
+                            })
+                        } catch (e) {}
+                    }
+                    if (data.skip_cropper || data.redirect || !hasImageOverlay || !(data.images_fields && data.images_fields.length > 0)) {
+                        document.location.href = data.redirect || '/form/generatepersonalization'
+                        return
+                    }
+                    $('#form-wrapper').hide()
+                    $('#cropper-wrapper').show()
+                    $("#pageloader").fadeOut();
+                    if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) {
+                        for(let im of data.images_fields) {
+                            let pos = data.form_info.positions.map(p => JSON.parse(p))
+                            console.log(pos)
+                            pos = pos.map(p => p.find(pi => pi.field_name == im ) )
+                            console.log(pos)
+                            pos = pos[0]
+                            //im = JSON.parse(im)
+                            console.log(pos)
+                            //if(im.type == 'image') {
+                                $('.img-container').append(`<div class="mt-5">
+                                                <img id="image-${im}" src="${data[im]}" alt="Picture" class="img-fluid">
+                                                <input type="hidden" id="field-image-${im}" name="${im}" value="">
+                                              </div>`)
+                                $('#cropper-wrapper #image-'+im).attr('src', data[im])
+                                var tmpImg = new Image() ;
+                                tmpImg.src = data[im];
+                                tmpImg.onload = function() {
+                                    let $image = $('#image-'+im);
+                                    let options = {
+                                        aspectRatio: pos.width/pos.height,
+                                        crop: function (e) {
+                                            console.log(e);
+                                        },
+                                        cropend: function (e) {
+                                            $('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL());
+                                        },
+                                        ready: function (e) {
+                                            $('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL());
+                                        },
+                                    };
+                                    $image.cropper(options);
+                                }
+                            //}
+                        }
+                    }
+                    
+                },
+            });
+        });
+
+        // $('#image-form').on('submit', function(event){
+        //     event.preventDefault();
+        //     $("#pageloader").fadeIn();
+        //     $.ajax({
+        //         type: "POST",
+        //         url: '/form/submitpersonalizedimages',
+        //         data: new FormData($('#image-form')[0]),
+        //         processData: false,
+        //         contentType: false,
+        //         success: function( data ) {
+        //             console.log(data)
+        //         },
+        //     });
+        // });
+
+    });
+</script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/resources/views/form/personalization.blade.php b/resources/views/form/personalization.blade.php
index f0edcf86..36cecd81 100644
--- a/resources/views/form/personalization.blade.php
+++ b/resources/views/form/personalization.blade.php
@@ -227,10 +227,24 @@
                 processData: false,
                 contentType: false,
                 success: function( data ) {
-                    $('#cropper-wrapper').show()
-                    $('#form-wrapper').hide()
-                    $("#pageloader").fadeOut();
                     console.log(data)
+                    // Skip cropper when this template has no image overlay or no image was uploaded
+                    var hasImageOverlay = false
+                    if (data.form_info && data.form_info.positions) {
+                        try {
+                            hasImageOverlay = data.form_info.positions.some(function (p) {
+                                var positions = typeof p === 'string' ? JSON.parse(p) : p
+                                return Array.isArray(positions) && positions.some(function (pi) { return pi && pi.type === 'image' })
+                            })
+                        } catch (e) {}
+                    }
+                    if (data.skip_cropper || data.redirect || !hasImageOverlay || !(data.images_fields && data.images_fields.length > 0)) {
+                        document.location.href = data.redirect || '/form/generatepersonalization'
+                        return
+                    }
+                    $('#form-wrapper').hide()
+                    $('#cropper-wrapper').show()
+                    $("#pageloader").fadeOut();
                     if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) {
                         for(let im of data.images_fields) {
                             let pos = data.form_info.positions.map(p => JSON.parse(p))
@@ -266,8 +280,6 @@
                                 }
                             //}
                         }
-                    } else {
-                        document.location.href = '/form/generatepersonalization'
                     }
                     
                 },