From 9250b863f727e817472a7b0e9068f4efd5caa229 Mon Sep 17 00:00:00 2001
From: abdurahman <dalersho.rm@yandex.ru>
Date: Sun, 24 Dec 2023 10:42:21 +0500
Subject: [PATCH] added a way to add an image from a smartphone camera

---
 lang/en/messages.php                          |    1 +
 lang/est/messages.php                         |    1 +
 lang/ru/messages.php                          |    1 +
 package-lock.json                             |    2 +-
 resources/js/components/FieldConfigurator.vue | 1699 ++++++++++++-----
 .../layouts/partials/javascript.blade.php     |  210 +-
 6 files changed, 1318 insertions(+), 596 deletions(-)

diff --git a/lang/en/messages.php b/lang/en/messages.php
index 514ca78..de34d4b 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -115,6 +115,7 @@ return [
     'file_size_limit_help' => 'Enter file size limit in MB',
     'allowed_file' => 'Allowed File Type',
     'specify_file_type' => 'Specify allowed types',
+    'image_file_type' => 'Camera + file',
     'all_types' => 'All types',
     'add_file_type' => 'Add file types',
     'add_file_type_help_text' => 'Comma separated string of file types.Ex: .jpg, .png, .jpeg',
diff --git a/lang/est/messages.php b/lang/est/messages.php
index 54e3535..e989a5f 100644
--- a/lang/est/messages.php
+++ b/lang/est/messages.php
@@ -115,6 +115,7 @@ return [
     'file_size_limit_help' => 'Sisestage faili suuruse piirang megabaitides',
     'allowed_file' => 'Lubatud failitüüp',
     'specify_file_type' => 'Määrake lubatud tüübid',
+    'image_file_type' => 'Camera + file',
     'all_types' => 'Kõik tüübid',
     'add_file_type' => 'Lisa failitüüpe',
     'add_file_type_help_text' => 'Failitüüpide komaga eraldatud string. Näiteks: .jpg, .png, .jpeg',
diff --git a/lang/ru/messages.php b/lang/ru/messages.php
index b9f5333..2c11995 100644
--- a/lang/ru/messages.php
+++ b/lang/ru/messages.php
@@ -115,6 +115,7 @@ return [
     'file_size_limit_help' => 'Введите ограничение размера файла в МБ',
     'allowed_file' => 'Допустимый тип файла',
     'specify_file_type' => 'Укажите разрешенные типы',
+    'image_file_type' => 'Camera + file',
     'all_types' => 'Все типы',
     'add_file_type' => 'Добавить типы файлов',
     'add_file_type_help_text' => 'Строка с разделенными запятыми типами файлов. Например, .jpg, .png, .jpeg',
diff --git a/package-lock.json b/package-lock.json
index 573b556..d813b8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "uniquesoft.es",
+    "name": "Aknaproff1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/js/components/FieldConfigurator.vue b/resources/js/components/FieldConfigurator.vue
index 6430c09..5fab629 100644
--- a/resources/js/components/FieldConfigurator.vue
+++ b/resources/js/components/FieldConfigurator.vue
@@ -1,82 +1,112 @@
 <template>
     <!-- Element Configurator -->
     <div class="card configurator_height">
-
         <div class="card-header">
-            <h5><i class="fas fa-cog"></i> {{element.label}}</h5>
+            <h5><i class="fas fa-cog"></i> {{ element.label }}</h5>
         </div>
 
         <div class="card-body">
-            <div class="form-group"
-                v-if="!_.includes(['heading', 'hr', 'html_text'], element.type)">
+            <div
+                class="form-group"
+                v-if="!_.includes(['heading', 'hr', 'html_text'], element.type)"
+            >
                 <label>
-                    {{trans('messages.field_label')}}
+                    {{ trans("messages.field_label") }}
                     <span class="error">*</span>
                 </label>
-                <input type="text" class="form-control form-control-sm" 
-                    v-model="element.label">
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.label"
+                />
             </div>
 
             <div class="form-group">
                 <label>
-                    {{trans('messages.field_name')}}
+                    {{ trans("messages.field_name") }}
                     <span class="error">*</span>
                 </label>
-                <input type="text" class="form-control form-control-sm" v-model="element.name" @change="checkDuplicateFieldName(element.name)" onkeypress="return event.charCode != 32">
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.name"
+                    @change="checkDuplicateFieldName(element.name)"
+                    onkeypress="return event.charCode != 32"
+                />
                 <div id="field_name_error"></div>
             </div>
 
-            <div class="form-group" v-if="!_.includes(['signature'], element.type)">
-                <label>{{trans('messages.column_width')}}</label>
-                <select class="form-control-sm form-control" v-model="element.col">
-                    <option v-for="(width, index) in columns_width"
-                        :value="width">
-                        {{width}}
+            <div
+                class="form-group"
+                v-if="!_.includes(['signature'], element.type)"
+            >
+                <label>{{ trans("messages.column_width") }}</label>
+                <select
+                    class="form-control-sm form-control"
+                    v-model="element.col"
+                >
+                    <option
+                        v-for="(width, index) in columns_width"
+                        :value="width"
+                    >
+                        {{ width }}
                     </option>
                 </select>
             </div>
 
             <!-- iframe -->
-            <div class="mb-1" v-if="_.includes(['iframe', 'youtube'], element.type)">
+            <div
+                class="mb-1"
+                v-if="_.includes(['iframe', 'youtube'], element.type)"
+            >
                 <div class="mb-1">
                     <label>
                         <span v-if="_.includes(['iframe'], element.type)">
-                            {{trans('messages.frame_url')}}
+                            {{ trans("messages.frame_url") }}
                         </span>
                         <span v-if="_.includes(['youtube'], element.type)">
-                            {{trans('messages.youtube_video_url')}}
+                            {{ trans("messages.youtube_video_url") }}
                         </span>
                     </label>
-                    <input type="url" class="form-control" 
-                    v-model="element.iframe_url">
-                    <div class="form-text"
-                        v-if="_.includes(['iframe'], element.type)">
-                        {{trans('messages.frame_url_help_text')}}
+                    <input
+                        type="url"
+                        class="form-control"
+                        v-model="element.iframe_url"
+                    />
+                    <div
+                        class="form-text"
+                        v-if="_.includes(['iframe'], element.type)"
+                    >
+                        {{ trans("messages.frame_url_help_text") }}
                     </div>
                 </div>
                 <div class="mb-1">
                     <label>
-                        {{trans('messages.width')}}
+                        {{ trans("messages.width") }}
                     </label>
                     <div class="input-group mb-2">
-                        <input type="number" class="form-control" v-model="element.width">
+                        <input
+                            type="number"
+                            class="form-control"
+                            v-model="element.width"
+                        />
                         <div class="input-group-append">
-                            <span class="input-group-text">
-                                %
-                            </span>
+                            <span class="input-group-text"> % </span>
                         </div>
                     </div>
                 </div>
                 <div class="mb-1">
                     <label>
-                        {{trans('messages.height')}}
+                        {{ trans("messages.height") }}
                     </label>
                     <div class="input-group mb-2">
-                        <input type="number" class="form-control" v-model="element.height">
+                        <input
+                            type="number"
+                            class="form-control"
+                            v-model="element.height"
+                        />
                         <div class="input-group-append">
-                            <span class="input-group-text">
-                                px
-                            </span>
+                            <span class="input-group-text"> px </span>
                         </div>
                     </div>
                 </div>
@@ -84,122 +114,159 @@
             <!-- /iframe -->
             <!-- pdf-uploader -->
             <div v-if="_.includes(['pdf'], element.type)">
-                <pdf-uploader
-                    :element="element">
-                </pdf-uploader>
+                <pdf-uploader :element="element"> </pdf-uploader>
             </div>
 
             <!-- countdown -->
             <div v-if="_.includes(['countdown'], element.type)">
                 <div class="mb-1">
                     <label>
-                        {{trans('messages.seconds')}}
+                        {{ trans("messages.seconds") }}
                     </label>
-                    <input type="number" class="form-control" v-model="element.seconds"
-                        @change="reinitializeElement">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="element.seconds"
+                        @change="reinitializeElement"
+                    />
                 </div>
                 <div class="mb-1">
                     <label>
-                        {{trans('messages.minutes')}}
+                        {{ trans("messages.minutes") }}
                     </label>
-                    <input type="number" class="form-control" v-model="element.minutes"
-                        @change="reinitializeElement">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="element.minutes"
+                        @change="reinitializeElement"
+                    />
                 </div>
                 <div class="mb-1">
                     <label>
-                        {{trans('messages.hours')}}
+                        {{ trans("messages.hours") }}
                     </label>
-                    <input type="number" class="form-control" v-model="element.hours"
-                        @change="reinitializeElement">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="element.hours"
+                        @change="reinitializeElement"
+                    />
                 </div>
             </div>
             <div v-if="_.includes(['countdown'], element.type)">
                 <div class="form-check mb-1">
-                    <input type="checkbox" class="form-check-input" v-model="element.labels_format"
-                        @change="reinitializeElement">
+                    <input
+                        type="checkbox"
+                        class="form-check-input"
+                        v-model="element.labels_format"
+                        @change="reinitializeElement"
+                    />
                     <label class="form-check-label">
-                        {{trans('messages.display_labels')}}
+                        {{ trans("messages.display_labels") }}
                     </label>
                 </div>
-                <div class="mb-1"
-                    v-show="!element.labels_format">
+                <div class="mb-1" v-show="!element.labels_format">
                     <label>
-                        {{trans('messages.size')}}
+                        {{ trans("messages.size") }}
                     </label>
-                    <select class="form-control" v-model="element.size"
-                        @change="reinitializeElement">
+                    <select
+                        class="form-control"
+                        v-model="element.size"
+                        @change="reinitializeElement"
+                    >
                         <option value="xs">
-                            {{trans('messages.extra_small')}}
+                            {{ trans("messages.extra_small") }}
                         </option>
                         <option value="sm">
-                            {{trans('messages.small')}}
+                            {{ trans("messages.small") }}
                         </option>
                         <option value="md">
-                            {{trans('messages.medium')}}
+                            {{ trans("messages.medium") }}
                         </option>
                         <option value="lg">
-                            {{trans('messages.large')}}
+                            {{ trans("messages.large") }}
                         </option>
                         <option value="xl">
-                            {{trans('messages.extra_large')}}
+                            {{ trans("messages.extra_large") }}
                         </option>
                     </select>
                 </div>
                 <div class="mb-1">
                     <label for="countdown_border_color">
-                        {{trans('messages.border_color')}}
+                        {{ trans("messages.border_color") }}
                     </label>
                     <div class="input-group">
-                        <input type="text" class="form-control form-control-lg" 
-                            id="countdown_border_color" 
-                            v-model="element.border_color">
+                        <input
+                            type="text"
+                            class="form-control form-control-lg"
+                            id="countdown_border_color"
+                            v-model="element.border_color"
+                        />
                         <div class="input-group-append">
                             <span class="input-group-text">
-                                <input type="color" v-model="element.border_color"
-                                    @change="reinitializeElement">
+                                <input
+                                    type="color"
+                                    v-model="element.border_color"
+                                    @change="reinitializeElement"
+                                />
                             </span>
                         </div>
                     </div>
                 </div>
                 <div class="mb-1">
                     <label for="countdown_font_color">
-                        {{trans('messages.font_color')}}
+                        {{ trans("messages.font_color") }}
                     </label>
                     <div class="input-group">
-                        <input type="text" class="form-control form-control-lg" 
-                            id="countdown_font_color" 
-                            v-model="element.font_color">
+                        <input
+                            type="text"
+                            class="form-control form-control-lg"
+                            id="countdown_font_color"
+                            v-model="element.font_color"
+                        />
                         <div class="input-group-append">
                             <span class="input-group-text">
-                                <input type="color" v-model="element.font_color"
-                                    @change="reinitializeElement">
+                                <input
+                                    type="color"
+                                    v-model="element.font_color"
+                                    @change="reinitializeElement"
+                                />
                             </span>
                         </div>
                     </div>
                 </div>
                 <div class="mb-1">
                     <label for="countdown_bg_color">
-                        {{trans('messages.background_color')}}
+                        {{ trans("messages.background_color") }}
                     </label>
                     <div class="input-group">
-                        <input type="text" class="form-control form-control-lg" 
-                            id="countdown_bg_color" 
-                            v-model="element.bg_color">
+                        <input
+                            type="text"
+                            class="form-control form-control-lg"
+                            id="countdown_bg_color"
+                            v-model="element.bg_color"
+                        />
                         <div class="input-group-append">
                             <span class="input-group-text">
-                                <input type="color" v-model="element.bg_color"
-                                    @change="reinitializeElement">
+                                <input
+                                    type="color"
+                                    v-model="element.bg_color"
+                                    @change="reinitializeElement"
+                                />
                             </span>
                         </div>
                     </div>
                 </div>
-                <div class="mb-1"
-                    v-show="!element.labels_format">
+                <div class="mb-1" v-show="!element.labels_format">
                     <label for="countdown_time_separator">
-                        {{trans('messages.time_separator')}}
+                        {{ trans("messages.time_separator") }}
                     </label>
-                    <select id="countdown_time_separator" v-model="element.time_separator"
-                        @change="reinitializeElement" class="form-control">
+                    <select
+                        id="countdown_time_separator"
+                        v-model="element.time_separator"
+                        @change="reinitializeElement"
+                        class="form-control"
+                    >
                         <option value=":">:</option>
                         <option value="/">/</option>
                         <option value="-">-</option>
@@ -207,15 +274,25 @@
                 </div>
                 <div class="mb-1">
                     <label for="countdown_display_format">
-                        {{trans('messages.display_format')}}
-                        <i class="fa fa-info-circle text-success"
+                        {{ trans("messages.display_format") }}
+                        <i
+                            class="fa fa-info-circle text-success"
                             data-html="true"
                             data-toggle="tooltip"
-                            :title="trans('messages.countdown_display_format_tooltip')">
+                            :title="
+                                trans(
+                                    'messages.countdown_display_format_tooltip'
+                                )
+                            "
+                        >
                         </i>
                     </label>
-                    <select id="countdown_display_format" v-model="element.display_format"
-                        @change="reinitializeElement" class="form-control">
+                    <select
+                        id="countdown_display_format"
+                        v-model="element.display_format"
+                        @change="reinitializeElement"
+                        class="form-control"
+                    >
                         <option value="HMS" v>HMS</option>
                         <option value="MS" v>MS</option>
                         <option value="DHMS" v>DHMS</option>
@@ -226,147 +303,294 @@
             </div>
             <!-- /countdown -->
             <div class="form-group" v-if="_.includes(['text'], element.type)">
-                <label>{{trans('messages.type')}}</label>
-                <select class="form-control form-control-sm" v-model="element.subtype">
-                    <option value="text">{{trans('messages.text')}}</option>
-                    <option value="number">{{trans('messages.number')}}</option>
-                    <option value="email">{{trans('messages.email')}}</option>
-                    <option value="password">{{trans('messages.password')}}</option>
-                    <option value="color">{{trans('messages.color')}}</option>
+                <label>{{ trans("messages.type") }}</label>
+                <select
+                    class="form-control form-control-sm"
+                    v-model="element.subtype"
+                >
+                    <option value="text">{{ trans("messages.text") }}</option>
+                    <option value="number">
+                        {{ trans("messages.number") }}
+                    </option>
+                    <option value="email">{{ trans("messages.email") }}</option>
+                    <option value="password">
+                        {{ trans("messages.password") }}
+                    </option>
+                    <option value="color">{{ trans("messages.color") }}</option>
                 </select>
             </div>
 
             <div class="form-group" v-if="_.includes(['range'], element.type)">
                 <label>
-                    {{trans('messages.min_value')}}
+                    {{ trans("messages.min_value") }}
                 </label>
-                <input type="number" class="form-control form-control-sm" min="0" v-model="element.min" @change="updateAttribute('range')">
+                <input
+                    type="number"
+                    class="form-control form-control-sm"
+                    min="0"
+                    v-model="element.min"
+                    @change="updateAttribute('range')"
+                />
 
-                <label>{{trans('messages.max_value')}}</label>
-                <input type="number" class="form-control form-control-sm" min="0" v-model="element.max" @change="updateAttribute('range')">
+                <label>{{ trans("messages.max_value") }}</label>
+                <input
+                    type="number"
+                    class="form-control form-control-sm"
+                    min="0"
+                    v-model="element.max"
+                    @change="updateAttribute('range')"
+                />
 
-                <label>{{trans('messages.step')}}</label>
-                <input type="number" class="form-control form-control-sm" min="0" v-model="element.step" @change="updateAttribute('range')">
+                <label>{{ trans("messages.step") }}</label>
+                <input
+                    type="number"
+                    class="form-control form-control-sm"
+                    min="0"
+                    v-model="element.step"
+                    @change="updateAttribute('range')"
+                />
 
-                <label>{{trans('messages.data_orientation')}}</label>
-                <select class="form-control form-control-sm" v-model="element.data_orientation"@change="updateAttribute('range')">
+                <label>{{ trans("messages.data_orientation") }}</label>
+                <select
+                    class="form-control form-control-sm"
+                    v-model="element.data_orientation"
+                    @change="updateAttribute('range')"
+                >
                     <option value="horizontal">
-                        {{trans('messages.horizontal')}}
+                        {{ trans("messages.horizontal") }}
                     </option>
                     <option value="vertical">
-                        {{trans('messages.vertical')}}
+                        {{ trans("messages.vertical") }}
                     </option>
                 </select>
             </div>
 
-            <div class="form-group"
-                v-if="_.includes(['dropdown'], element.type)">
+            <div
+                class="form-group"
+                v-if="_.includes(['dropdown'], element.type)"
+            >
                 <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="multiselect" v-model="element.multiselect">
+                    <input
+                        type="checkbox"
+                        class="form-check-input"
+                        id="multiselect"
+                        v-model="element.multiselect"
+                    />
                     <label class="form-check-label" for="multiselect">
-                        {{trans('messages.allow_select_multi_value')}}
+                        {{ trans("messages.allow_select_multi_value") }}
                     </label>
                 </div>
             </div>
-            
-            <div class="form-group" 
-                v-if="_.includes(['text', 'textarea', 'text_editor'], element.type)">
-                <label>{{trans('messages.placeholder')}}</label>
-                <input type="text" class="form-control form-control-sm" 
-                    v-model="element.placeholder">
+
+            <div
+                class="form-group"
+                v-if="
+                    _.includes(
+                        ['text', 'textarea', 'text_editor'],
+                        element.type
+                    )
+                "
+            >
+                <label>{{ trans("messages.placeholder") }}</label>
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.placeholder"
+                />
             </div>
-            
-            <div class="form-group"
-                v-if="!_.includes(['heading', 'terms_and_condition', 'hr', 'html_text', 'rating', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
-                <label>{{trans('messages.help_text')}}</label>
-                <input type="text" class="form-control form-control-sm" 
-                    v-model="element.help_text">
+
+            <div
+                class="form-group"
+                v-if="
+                    !_.includes(
+                        [
+                            'heading',
+                            'terms_and_condition',
+                            'hr',
+                            'html_text',
+                            'rating',
+                            'youtube',
+                            'iframe',
+                            'pdf',
+                            'countdown',
+                        ],
+                        element.type
+                    )
+                "
+            >
+                <label>{{ trans("messages.help_text") }}</label>
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.help_text"
+                />
             </div>
 
             <div class="form-group" v-if="element.type == 'text_editor'">
-                <label>{{trans('messages.editior_height')}}</label>
-                <input type="number" class="form-control form-control-sm" v-model="element.editor_height" min="1">
+                <label>{{ trans("messages.editior_height") }}</label>
+                <input
+                    type="number"
+                    class="form-control form-control-sm"
+                    v-model="element.editor_height"
+                    min="1"
+                />
                 <small class="form-text">
-                    {{trans('messages.editior_height_help_text')}}
+                    {{ trans("messages.editior_height_help_text") }}
                 </small>
             </div>
 
             <div v-if="element.type == 'file_upload'">
                 <div class="form-group">
-                    <label>{{trans('messages.upload_text')}}</label>
-                    <input type="text" v-model="element.upload_text" class="form-control form-control-sm">
+                    <label>{{ trans("messages.upload_text") }}</label>
+                    <input
+                        type="text"
+                        v-model="element.upload_text"
+                        class="form-control form-control-sm"
+                    />
                 </div>
 
                 <div class="form-group">
-                    <label>{{trans('messages.no_files_can_be_uploaded')}}</label>
-                    <input type="number" v-model="element.no_of_files" class="form-control form-control-sm" min="1">
+                    <label>{{
+                        trans("messages.no_files_can_be_uploaded")
+                    }}</label>
+                    <input
+                        type="number"
+                        v-model="element.no_of_files"
+                        class="form-control form-control-sm"
+                        min="1"
+                    />
                     <small class="form-text">
-                        {{trans('messages.upload_file_limit_help_text')}}
+                        {{ trans("messages.upload_file_limit_help_text") }}
                     </small>
                 </div>
 
                 <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" id="send_as_attachment" v-model="element.send_as_email_attachment">
+                    <input
+                        class="form-check-input"
+                        type="checkbox"
+                        id="send_as_attachment"
+                        v-model="element.send_as_email_attachment"
+                    />
                     <label class="form-check-label" for="send_as_attachment">
-                        {{trans('messages.send_as_email_attachment')}}
+                        {{ trans("messages.send_as_email_attachment") }}
                     </label>
-                </div><br><br>
+                </div>
+                <br /><br />
 
                 <div class="form-group">
                     <label>
-                        {{trans('messages.file_size_limit')}}
+                        {{ trans("messages.file_size_limit") }}
                     </label>
-                    <input type="text" class="form-control form-control-sm" v-model="element.file_size_limit" :placeholder="trans('messages.file_size_limit_help')">
+                    <input
+                        type="text"
+                        class="form-control form-control-sm"
+                        v-model="element.file_size_limit"
+                        :placeholder="trans('messages.file_size_limit_help')"
+                    />
                     <small class="form-text">
-                        {{trans('messages.file_size_limit_help')}}
+                        {{ trans("messages.file_size_limit_help") }}
                     </small>
                 </div>
-                
+
                 <div class="form-group">
                     <label>
-                        {{trans('messages.allowed_file')}}
-                    </label> <br>
+                        {{ trans("messages.allowed_file") }}
+                    </label>
+                    <br />
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="radio" id="all_types" name="file_type" :value="'all'" v-model="element.file_type" checked>
-                        <label class="form-check-label" for="all_types">
-                            {{trans('messages.all_types')}}
+                        <input
+                            class="form-check-input"
+                            type="radio"
+                            id="all_types"
+                            name="file_type"
+                            :value="'all'"
+                            v-model="element.file_type"
+                            checked
+                        />
+                        <label
+                            class="form-check-label"
+                            for="all_types"
+                            @click="element.allowed_file_type = ''"
+                        >
+                            {{ trans("messages.all_types") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" name="file_type"
-                            type="radio" id="allowed_types"
-                            :value="'Specify_type'" v-model="element.file_type">
-                        <label class="form-check-label" for="allowed_types">
-                            {{trans('messages.specify_file_type')}}
+                        <input
+                            class="form-check-input"
+                            name="file_type"
+                            type="radio"
+                            id="allowed_types"
+                            :value="'Specify_type'"
+                            v-model="element.file_type"
+                        />
+                        <label
+                            class="form-check-label"
+                            for="allowed_types"
+                            @click="element.allowed_file_type = ''"
+                        >
+                            {{ trans("messages.specify_file_type") }}
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input
+                            class="form-check-input"
+                            name="file_type"
+                            type="radio"
+                            id="image_types"
+                            :value="'Image_type'"
+                            v-model="element.file_type"
+                        />
+                        <label
+                            class="form-check-label"
+                            for="image_types"
+                            @click="element.allowed_file_type = 'image/*'"
+                        >
+                            {{ trans("messages.image_file_type") }}
                         </label>
                     </div>
                 </div>
 
-                <div class="form-group" v-show="element.file_type === 'Specify_type'">
+                <div
+                    class="form-group"
+                    v-show="element.file_type === 'Specify_type'"
+                >
                     <label>
-                        {{trans('messages.add_file_type')}}
+                        {{ trans("messages.add_file_type") }}
                     </label>
-                    <input type="text" class="form-control form-control-sm" v-model="element.allowed_file_type" :placeholder="trans('messages.enter_file_type')">
+                    <input
+                        type="text"
+                        class="form-control form-control-sm"
+                        v-model="element.allowed_file_type"
+                        :placeholder="trans('messages.enter_file_type')"
+                    />
                     <small class="form-text">
-                        {{trans('messages.add_file_type_help_text')}}
+                        {{ trans("messages.add_file_type_help_text") }}
                     </small>
                 </div>
             </div>
 
-            <div class="form-group" 
-                v-if="_.includes(['text', 'calendar', 'dropdown'], element.type)">
+            <div
+                class="form-group"
+                v-if="
+                    _.includes(['text', 'calendar', 'dropdown'], element.type)
+                "
+            >
                 <label>
-                    {{trans('messages.sizing')}}
+                    {{ trans("messages.sizing") }}
                 </label>
-                <select class="form-control form-control-sm" v-model="element.size">
+                <select
+                    class="form-control form-control-sm"
+                    v-model="element.size"
+                >
                     <option value="">
-                        {{trans('messages.default')}}
+                        {{ trans("messages.default") }}
                     </option>
                     <option value="custom-select-sm">
-                        {{trans('messages.small')}}
+                        {{ trans("messages.small") }}
                     </option>
                     <option value="custom-select-lg">
-                        {{trans('messages.large')}}
+                        {{ trans("messages.large") }}
                     </option>
                 </select>
             </div>
@@ -374,17 +598,20 @@
             <!-- switch size -->
             <div class="form-group" v-if="element.type == 'switch'">
                 <label>
-                    {{trans('messages.sizing')}}
+                    {{ trans("messages.sizing") }}
                 </label>
-                <select class="form-control form-control-sm" v-model="element.size">
+                <select
+                    class="form-control form-control-sm"
+                    v-model="element.size"
+                >
                     <option value="switch">
-                        {{trans('messages.default')}}
+                        {{ trans("messages.default") }}
                     </option>
                     <option value="switch-sm">
-                        {{trans('messages.small')}}
+                        {{ trans("messages.small") }}
                     </option>
                     <option value="switch-lg">
-                        {{trans('messages.large')}}
+                        {{ trans("messages.large") }}
                     </option>
                 </select>
             </div>
@@ -392,49 +619,59 @@
             <div v-if="_.includes(['calendar'], element.type)">
                 <div class="form-group">
                     <label>
-                        {{trans('messages.start_date')}}
+                        {{ trans("messages.start_date") }}
                     </label>
-                    <select class="form-control form-control-sm" v-model="element.start_date">
+                    <select
+                        class="form-control form-control-sm"
+                        v-model="element.start_date"
+                    >
                         <option value="none">
-                            {{trans('messages.none')}}
+                            {{ trans("messages.none") }}
                         </option>
                         <option value="today">
-                            {{trans('messages.today')}}
+                            {{ trans("messages.today") }}
                         </option>
                         <option value="current_month">
-                            {{trans('messages.current_month')}}
+                            {{ trans("messages.current_month") }}
                         </option>
                         <option value="current_year">
-                            {{trans('messages.current_year')}}
+                            {{ trans("messages.current_year") }}
                         </option>
                     </select>
                 </div>
 
                 <div class="form-group">
                     <label>
-                        {{trans('messages.end_date')}}
+                        {{ trans("messages.end_date") }}
                     </label>
-                    <select class="form-control form-control-sm" v-model="element.end_date">
+                    <select
+                        class="form-control form-control-sm"
+                        v-model="element.end_date"
+                    >
                         <option value="none">
-                            {{trans('messages.none')}}
+                            {{ trans("messages.none") }}
                         </option>
                         <option value="today">
-                            {{trans('messages.today')}}
+                            {{ trans("messages.today") }}
                         </option>
                         <option value="current_month">
-                            {{trans('messages.current_month')}}
+                            {{ trans("messages.current_month") }}
                         </option>
                         <option value="current_year">
-                            {{trans('messages.current_year')}}
+                            {{ trans("messages.current_year") }}
                         </option>
                     </select>
                 </div>
 
                 <div class="form-group">
                     <label>
-                        {{trans('messages.date_format')}}
+                        {{ trans("messages.date_format") }}
                     </label>
-                    <input type="text" v-model="element.format" class="form-control form-control-sm">
+                    <input
+                        type="text"
+                        v-model="element.format"
+                        class="form-control form-control-sm"
+                    />
                     <small class="form-text">
                         <span v-html="trans('messages.date_format_help_text')">
                         </span>
@@ -443,320 +680,633 @@
 
                 <div class="form-group">
                     <label>
-                        {{trans('messages.disabled_days')}}
-                    </label> <br>
+                        {{ trans("messages.disabled_days") }}
+                    </label>
+                    <br />
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="sunday" value="0" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="sunday"
+                            value="0"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="sunday">
-                            {{trans('messages.sunday')}}
+                            {{ trans("messages.sunday") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="monday" value="1" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="monday"
+                            value="1"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="monday">
-                            {{trans('messages.monday')}}
+                            {{ trans("messages.monday") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="tuesday" value="2" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="tuesday"
+                            value="2"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="tuesday">
-                            {{trans('messages.tuesday')}}
+                            {{ trans("messages.tuesday") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="wednesday" value="3" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="wednesday"
+                            value="3"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="wednesday">
-                            {{trans('messages.wednesday')}}
+                            {{ trans("messages.wednesday") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="thursday" value="4" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="thursday"
+                            value="4"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="thursday">
-                            {{trans('messages.thursday')}}
+                            {{ trans("messages.thursday") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="friday" value="5" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="friday"
+                            value="5"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="friday">
-                            {{trans('messages.friday')}}
+                            {{ trans("messages.friday") }}
                         </label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="saturday" value="6" v-model="element.disabled_days">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="saturday"
+                            value="6"
+                            v-model="element.disabled_days"
+                        />
                         <label class="form-check-label" for="saturday">
-                            {{trans('messages.saturday')}}
+                            {{ trans("messages.saturday") }}
                         </label>
                     </div>
                 </div>
 
                 <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" id="enable_time_picker" v-model="element.enable_time_picker">
+                    <input
+                        class="form-check-input"
+                        type="checkbox"
+                        id="enable_time_picker"
+                        v-model="element.enable_time_picker"
+                    />
                     <label class="form-check-label" for="enable_time_picker">
-                        {{trans('messages.enable_time_picker')}}
+                        {{ trans("messages.enable_time_picker") }}
                     </label>
                 </div>
 
                 <div class="form-group" v-if="element.enable_time_picker">
-                    <label>{{trans('messages.time_format')}}</label>
-                    <select class="form-control form-control-sm" v-model="element.time_format">
+                    <label>{{ trans("messages.time_format") }}</label>
+                    <select
+                        class="form-control form-control-sm"
+                        v-model="element.time_format"
+                    >
                         <option value="12">
-                            {{trans('messages.12_hour')}}
+                            {{ trans("messages.12_hour") }}
                         </option>
                         <option value="24">
-                            {{trans('messages.24_hour')}}
+                            {{ trans("messages.24_hour") }}
                         </option>
                     </select>
                 </div>
 
-                <div class="form-check form-check-inline" v-if="element.enable_time_picker">
-                    <input class="form-check-input" type="checkbox" id="time_picker_inline" v-model="element.time_picker_inline">
+                <div
+                    class="form-check form-check-inline"
+                    v-if="element.enable_time_picker"
+                >
+                    <input
+                        class="form-check-input"
+                        type="checkbox"
+                        id="time_picker_inline"
+                        v-model="element.time_picker_inline"
+                    />
                     <label class="form-check-label" for="time_picker_inline">
-                        {{trans('messages.show_calendar_sidebyside')}}
+                        {{ trans("messages.show_calendar_sidebyside") }}
                     </label>
                 </div>
             </div>
 
-            <div class="form-group" 
-                v-if="!_.includes(['heading', 'hr', 'html_text', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
+            <div
+                class="form-group"
+                v-if="
+                    !_.includes(
+                        [
+                            'heading',
+                            'hr',
+                            'html_text',
+                            'youtube',
+                            'iframe',
+                            'pdf',
+                            'countdown',
+                        ],
+                        element.type
+                    )
+                "
+            >
                 <div class="form-check">
-                    <input class="form-check-input" 
-                        type="checkbox" 
-                        v-model="element.required" id="requiredCheck">
+                    <input
+                        class="form-check-input"
+                        type="checkbox"
+                        v-model="element.required"
+                        id="requiredCheck"
+                    />
                     <label class="form-check-label" for="requiredCheck">
-                        {{trans('messages.is_required')}}
+                        {{ trans("messages.is_required") }}
                     </label>
                 </div>
             </div>
 
             <div class="form-group" v-if="element.required">
                 <label>
-                    {{trans('messages.error_msg_for_required')}}
+                    {{ trans("messages.error_msg_for_required") }}
                 </label>
-                <input type="text" class="form-control form-control-sm" 
-                v-model="element.required_error_msg">
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.required_error_msg"
+                />
             </div>
 
-            <div class="form-group"
-                v-if="!_.includes(['heading', 'range', 'calendar', 'file_upload', 'radio', 'text_editor', 'terms_and_condition', 'hr', 'html_text', 'rating', 'switch', 'signature', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
+            <div
+                class="form-group"
+                v-if="
+                    !_.includes(
+                        [
+                            'heading',
+                            'range',
+                            'calendar',
+                            'file_upload',
+                            'radio',
+                            'text_editor',
+                            'terms_and_condition',
+                            'hr',
+                            'html_text',
+                            'rating',
+                            'switch',
+                            'signature',
+                            'youtube',
+                            'iframe',
+                            'pdf',
+                            'countdown',
+                        ],
+                        element.type
+                    )
+                "
+            >
                 <label>
-                    {{trans('messages.validation')}}
+                    {{ trans("messages.validation") }}
                 </label>
-                <select class="form-control form-control-sm"
-                    multiple v-model="element.validations"
-                    :id="'validations_' + element.name">
-                    <option v-for="validation in validations" 
-                        :value="{'rule': validation.rule, 'error_msg': ''}" 
-                        v-if="_.includes(validation.applies_to, element.type)">
-                        {{validation.display}}
+                <select
+                    class="form-control form-control-sm"
+                    multiple
+                    v-model="element.validations"
+                    :id="'validations_' + element.name"
+                >
+                    <option
+                        v-for="validation in validations"
+                        :value="{ rule: validation.rule, error_msg: '' }"
+                        v-if="_.includes(validation.applies_to, element.type)"
+                    >
+                        {{ validation.display }}
                     </option>
                 </select>
             </div>
 
             <div class="form-group" v-for="validation in element.validations">
-
                 <div class="form-group" v-if="validation.rule === 'minlength'">
                     <label>
-                        {{trans('messages.min_length_value')}}
+                        {{ trans("messages.min_length_value") }}
                     </label>
-                    <input type="number" class="form-control form-control-sm" :placeholder="trans('messages.enter_min_value')" min="0" v-model="validation['value']">
+                    <input
+                        type="number"
+                        class="form-control form-control-sm"
+                        :placeholder="trans('messages.enter_min_value')"
+                        min="0"
+                        v-model="validation['value']"
+                    />
                 </div>
 
                 <div class="form-group" v-if="validation.rule === 'maxlength'">
                     <label>
-                        {{trans('messages.max_length_value')}}
+                        {{ trans("messages.max_length_value") }}
                     </label>
-                    <input type="number" class="form-control form-control-sm" :placeholder="trans('messages.enter_max_value')" min="0" v-model="validation['value']">
+                    <input
+                        type="number"
+                        class="form-control form-control-sm"
+                        :placeholder="trans('messages.enter_max_value')"
+                        min="0"
+                        v-model="validation['value']"
+                    />
                 </div>
 
                 <label>
-                    {{trans('messages.error_msg_for')}} {{validation.rule}}
+                    {{ trans("messages.error_msg_for") }} {{ validation.rule }}
                 </label>
-                <input type="text" class="form-control form-control-sm"  v-model="validation['error_msg']">
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="validation['error_msg']"
+                />
             </div>
 
-            <div class="form-group" 
-                v-if="element.type == 'textarea'">
-                <label>{{trans('messages.no_of_rows')}}</label>
-                <input type="number" class="form-control form-control-sm" 
-                    v-model="element.rows" min="0">
-            </div>
-            
-            <div class="form-group"
-                v-if="element.type == 'textarea'">
-                <label>{{trans('messages.no_of_cols')}}</label>
-                <input type="number" class="form-control form-control-sm" 
-                    v-model="element.columns" min="0">
+            <div class="form-group" v-if="element.type == 'textarea'">
+                <label>{{ trans("messages.no_of_rows") }}</label>
+                <input
+                    type="number"
+                    class="form-control form-control-sm"
+                    v-model="element.rows"
+                    min="0"
+                />
             </div>
 
-            <div class="form-group" v-if="!_.includes(['radio', 'checkbox', 'heading', 'range', 'file_upload', 'text_editor', 'terms_and_condition', 'hr', 'html_text', 'rating', 'switch', 'signature', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
+            <div class="form-group" v-if="element.type == 'textarea'">
+                <label>{{ trans("messages.no_of_cols") }}</label>
+                <input
+                    type="number"
+                    class="form-control form-control-sm"
+                    v-model="element.columns"
+                    min="0"
+                />
+            </div>
+
+            <div
+                class="form-group"
+                v-if="
+                    !_.includes(
+                        [
+                            'radio',
+                            'checkbox',
+                            'heading',
+                            'range',
+                            'file_upload',
+                            'text_editor',
+                            'terms_and_condition',
+                            'hr',
+                            'html_text',
+                            'rating',
+                            'switch',
+                            'signature',
+                            'youtube',
+                            'iframe',
+                            'pdf',
+                            'countdown',
+                        ],
+                        element.type
+                    )
+                "
+            >
                 <label for="icon_prefix">
-                    {{trans('messages.icon_prefix')}}
+                    {{ trans("messages.icon_prefix") }}
                 </label>
-                <select id="icon_prefix" class="form-control form-control-sm" v-model="element.prefix_icon">
+                <select
+                    id="icon_prefix"
+                    class="form-control form-control-sm"
+                    v-model="element.prefix_icon"
+                >
                     <option value="none">None</option>
-                    <option v-for="(icon, index) in getIcons()" :value="icon.c" :key="index">
-                        {{icon.l}}
+                    <option
+                        v-for="(icon, index) in getIcons()"
+                        :value="icon.c"
+                        :key="index"
+                    >
+                        {{ icon.l }}
                     </option>
                 </select>
             </div>
 
-            <div class="form-group" v-if="!_.includes(['radio', 'checkbox', 'heading', 'range', 'file_upload', 'text_editor', 'terms_and_condition', 'hr', 'html_text', 'rating', 'switch', 'signature', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
+            <div
+                class="form-group"
+                v-if="
+                    !_.includes(
+                        [
+                            'radio',
+                            'checkbox',
+                            'heading',
+                            'range',
+                            'file_upload',
+                            'text_editor',
+                            'terms_and_condition',
+                            'hr',
+                            'html_text',
+                            'rating',
+                            'switch',
+                            'signature',
+                            'youtube',
+                            'iframe',
+                            'pdf',
+                            'countdown',
+                        ],
+                        element.type
+                    )
+                "
+            >
                 <label for="icon_suffix">
-                    {{trans('messages.icon_suffix')}}
+                    {{ trans("messages.icon_suffix") }}
                 </label>
-                <select id="icon_suffix" class="form-control form-control-sm" v-model="element.suffix_icon">
+                <select
+                    id="icon_suffix"
+                    class="form-control form-control-sm"
+                    v-model="element.suffix_icon"
+                >
                     <option :value="'none'">None</option>
-                    <option v-for="(icon, index) in getIcons()" :value="icon.c" :key="index">
-                        {{icon.l}}
+                    <option
+                        v-for="(icon, index) in getIcons()"
+                        :value="icon.c"
+                        :key="index"
+                    >
+                        {{ icon.l }}
                     </option>
                 </select>
             </div>
 
-            <div class="form-group" 
-                v-if="_.includes(['radio', 'checkbox', 'dropdown'], element.type)">
-                <label>{{trans('messages.options')}}</label>
-                <textarea class="form-control form-control-sm" 
-                    v-model="element.options"></textarea>
+            <div
+                class="form-group"
+                v-if="
+                    _.includes(['radio', 'checkbox', 'dropdown'], element.type)
+                "
+            >
+                <label>{{ trans("messages.options") }}</label>
+                <textarea
+                    class="form-control form-control-sm"
+                    v-model="element.options"
+                ></textarea>
                 <small class="form-text">
-                    {{trans('messages.enter_one_option_per_line')}}
+                    {{ trans("messages.enter_one_option_per_line") }}
                 </small>
             </div>
 
-            <div class="row mb-1"
-                v-if="_.includes(['radio', 'checkbox'], element.type)">
+            <div
+                class="row mb-1"
+                v-if="_.includes(['radio', 'checkbox'], element.type)"
+            >
                 <div class="col-md-12">
                     <div class="form-group">
                         <div class="custom-control custom-switch">
-                            <input type="checkbox" class="custom-control-input" id="spread_to_col" v-model="element.spread_to_col.enable">
-                            <label class="custom-control-label" for="spread_to_col">
-                                {{trans('messages.spread_to_col')}}
+                            <input
+                                type="checkbox"
+                                class="custom-control-input"
+                                id="spread_to_col"
+                                v-model="element.spread_to_col.enable"
+                            />
+                            <label
+                                class="custom-control-label"
+                                for="spread_to_col"
+                            >
+                                {{ trans("messages.spread_to_col") }}
                             </label>
                         </div>
-                      </div>
+                    </div>
                 </div>
-                <div class="col-md-12"
-                    v-if="element.spread_to_col.enable">
+                <div class="col-md-12" v-if="element.spread_to_col.enable">
                     <div class="input-group">
-                        <input type="number" name="spread_to_column" class="form-control" min="1" max="4" v-model="element.spread_to_col.column"
-                        required>
+                        <input
+                            type="number"
+                            name="spread_to_column"
+                            class="form-control"
+                            min="1"
+                            max="4"
+                            v-model="element.spread_to_col.column"
+                            required
+                        />
                         <div class="input-group-append">
                             <span class="input-group-text">
-                                {{trans('messages.cols')}}
+                                {{ trans("messages.cols") }}
                             </span>
                         </div>
                     </div>
                 </div>
                 <small class="form-text text-muted">
-                    {{trans('messages.spread_to_col_help_text')}}
+                    {{ trans("messages.spread_to_col_help_text") }}
                 </small>
             </div>
-            
-            <div class="form-group" 
-                v-if="_.includes(['heading'], element.type)">
-                <label>{{trans('messages.type')}}</label>
-                <select class="form-control form-control-sm" v-model="element.tag">
-                    <option value="h1">
-                        H1
-                    </option>
-                    <option value="h2">
-                        H2
-                    </option>
-                    <option value="h3">
-                        H3
-                    </option>
-                    <option value="h4">
-                        H4
-                    </option>
-                    <option value="h5">
-                        H5
-                    </option>
-                    <option value="h6">
-                        H6
-                    </option>
+
+            <div
+                class="form-group"
+                v-if="_.includes(['heading'], element.type)"
+            >
+                <label>{{ trans("messages.type") }}</label>
+                <select
+                    class="form-control form-control-sm"
+                    v-model="element.tag"
+                >
+                    <option value="h1">H1</option>
+                    <option value="h2">H2</option>
+                    <option value="h3">H3</option>
+                    <option value="h4">H4</option>
+                    <option value="h5">H5</option>
+                    <option value="h6">H6</option>
                     <option value="p">
-                        {{trans('messages.paragraphp')}}
+                        {{ trans("messages.paragraphp") }}
                     </option>
                 </select>
             </div>
 
-            <div class="form-group" 
-                v-if="_.includes(['heading'], element.type)">
-                <label>{{trans('messages.content')}}</label>
-                <textarea class="form-control form-control-sm" 
-                    v-model="element.content"></textarea>
+            <div
+                class="form-group"
+                v-if="_.includes(['heading'], element.type)"
+            >
+                <label>{{ trans("messages.content") }}</label>
+                <textarea
+                    class="form-control form-control-sm"
+                    v-model="element.content"
+                ></textarea>
             </div>
 
-            <div class="form-group"
-                v-if="_.includes(['heading'], element.type)">
+            <div
+                class="form-group"
+                v-if="_.includes(['heading'], element.type)"
+            >
                 <label for="heading_text_color">
-                    {{trans('messages.text_color')}}
+                    {{ trans("messages.text_color") }}
                 </label>
 
                 <div class="input-group">
-                    <input type="text" class="form-control" 
-                        id="heading_text_color" 
-                        v-model="element.text_color">
+                    <input
+                        type="text"
+                        class="form-control"
+                        id="heading_text_color"
+                        v-model="element.text_color"
+                    />
                     <div class="input-group-append">
                         <span class="input-group-text">
-                            <input type="color" v-model="element.text_color">
+                            <input type="color" v-model="element.text_color" />
                         </span>
                     </div>
                 </div>
             </div>
 
-            <div class="form-group" v-if="_.includes(['terms_and_condition'], element.type)">
-                <label>{{trans('messages.link')}}</label>
-                <input type="text" class="form-control form-control-sm" v-model="element.link" :placeholder="trans('messages.enter_link_for_label')">
+            <div
+                class="form-group"
+                v-if="_.includes(['terms_and_condition'], element.type)"
+            >
+                <label>{{ trans("messages.link") }}</label>
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.link"
+                    :placeholder="trans('messages.enter_link_for_label')"
+                />
             </div>
-            
-            <div class="form-group" v-if="!_.includes(['range', 'text_editor', 'hr', 'rating', 'switch'], element.type)">
-                <label>{{trans('messages.add_custom_class')}}</label>
-                <i class="fa fa-info-circle text-success" data-placement="top" data-toggle="tooltip" data-html="true" :title="trans('messages.custom_class_tooltip')">
+
+            <div
+                class="form-group"
+                v-if="
+                    !_.includes(
+                        ['range', 'text_editor', 'hr', 'rating', 'switch'],
+                        element.type
+                    )
+                "
+            >
+                <label>{{ trans("messages.add_custom_class") }}</label>
+                <i
+                    class="fa fa-info-circle text-success"
+                    data-placement="top"
+                    data-toggle="tooltip"
+                    data-html="true"
+                    :title="trans('messages.custom_class_tooltip')"
+                >
                 </i>
-                <input type="text" class="form-control form-control-sm" 
-                v-model="element.custom_class" aria-describedby="customClass">
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    v-model="element.custom_class"
+                    aria-describedby="customClass"
+                />
             </div>
             <!-- allowed input values -->
-            <template v-if="_.includes(['text'], element.type) && _.includes(['text', 'email', 'number'], element.subtype)">
+            <template
+                v-if="
+                    _.includes(['text'], element.type) &&
+                    _.includes(['text', 'email', 'number'], element.subtype)
+                "
+            >
                 <div class="mb-2">
                     <label class="allowed_values">
-                        {{trans('messages.allowed_values')}}
-                        <i class="fa fa-info-circle"
+                        {{ trans("messages.allowed_values") }}
+                        <i
+                            class="fa fa-info-circle"
                             :title="trans('messages.values_allowed_tooltip')"
-                            data-toggle="tooltip"></i>
+                            data-toggle="tooltip"
+                        ></i>
                     </label>
-                    <textarea id="allowed_values" class="form-control" 
-                        v-model="element.allowed_input.values">
+                    <textarea
+                        id="allowed_values"
+                        class="form-control"
+                        v-model="element.allowed_input.values"
+                    >
                     </textarea>
-                    <small class="text-muted">{{ trans('messages.enter_allowed_value_per_line') }}</small>
+                    <small class="text-muted">{{
+                        trans("messages.enter_allowed_value_per_line")
+                    }}</small>
                 </div>
                 <div class="mb-2">
                     <label>
-                        {{trans('messages.error_msg_for_not_allowed_value')}}
+                        {{ trans("messages.error_msg_for_not_allowed_value") }}
                     </label>
-                    <input type="text" class="form-control form-control-sm" v-model="element.allowed_input.error_msg">
+                    <input
+                        type="text"
+                        class="form-control form-control-sm"
+                        v-model="element.allowed_input.error_msg"
+                    />
                 </div>
             </template>
             <!-- /allowed input values -->
             <!-- popover help text -->
-            <div class="form-group mt-3" 
-                v-if="!_.includes(['countdown', 'pdf', 'iframe', 'youtube', 'page_break', 'html_text', 'hr', 'heading'], element.type)">
+            <div
+                class="form-group mt-3"
+                v-if="
+                    !_.includes(
+                        [
+                            'countdown',
+                            'pdf',
+                            'iframe',
+                            'youtube',
+                            'page_break',
+                            'html_text',
+                            'hr',
+                            'heading',
+                        ],
+                        element.type
+                    )
+                "
+            >
                 <div class="custom-control custom-switch">
-                    <input type="checkbox" class="custom-control-input" id="enable_popover_help_text" v-model="element.popover_help_text.enable" @change="initializePopoverEditor">
-                    <label class="custom-control-label" for="enable_popover_help_text">
-                        {{trans('messages.enable_popover_help_text')}}
+                    <input
+                        type="checkbox"
+                        class="custom-control-input"
+                        id="enable_popover_help_text"
+                        v-model="element.popover_help_text.enable"
+                        @change="initializePopoverEditor"
+                    />
+                    <label
+                        class="custom-control-label"
+                        for="enable_popover_help_text"
+                    >
+                        {{ trans("messages.enable_popover_help_text") }}
                     </label>
                 </div>
             </div>
-            <div class="form-group" v-show="!_.includes(['countdown', 'pdf', 'iframe', 'youtube', 'page_break', 'html_text', 'hr', 'heading'], element.type) && element.popover_help_text.enable">
-                <label>{{trans('messages.popover_help_text')}}</label>
-                <textarea id="popover_help_text" class="form-control summer_note" v-model="element.popover_help_text.content"></textarea>
+            <div
+                class="form-group"
+                v-show="
+                    !_.includes(
+                        [
+                            'countdown',
+                            'pdf',
+                            'iframe',
+                            'youtube',
+                            'page_break',
+                            'html_text',
+                            'hr',
+                            'heading',
+                        ],
+                        element.type
+                    ) && element.popover_help_text.enable
+                "
+            >
+                <label>{{ trans("messages.popover_help_text") }}</label>
+                <textarea
+                    id="popover_help_text"
+                    class="form-control summer_note"
+                    v-model="element.popover_help_text.content"
+                ></textarea>
             </div>
             <!-- /popover help text -->
             <div class="form-group" v-if="element.type == 'hr'">
-                <label>{{trans('messages.padding_top')}}</label>
+                <label>{{ trans("messages.padding_top") }}</label>
                 <div class="input-group mb-2">
-                    <input type="number" class="form-control" v-model="element.padding_top" aria-describedby="padding_top">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="element.padding_top"
+                        aria-describedby="padding_top"
+                    />
                     <div class="input-group-append">
                         <span class="input-group-text" id="padding_top">
                             px
@@ -764,9 +1314,14 @@
                     </div>
                 </div>
 
-                <label>{{trans('messages.padding_bottom')}}</label>
+                <label>{{ trans("messages.padding_bottom") }}</label>
                 <div class="input-group mb-2">
-                    <input type="number" class="form-control" v-model="element.padding_bottom" aria-describedby="padding_bottom">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="element.padding_bottom"
+                        aria-describedby="padding_bottom"
+                    />
                     <div class="input-group-append">
                         <span class="input-group-text" id="padding_bottom">
                             px
@@ -774,9 +1329,14 @@
                     </div>
                 </div>
 
-                <label>{{trans('messages.border_size')}}</label>
+                <label>{{ trans("messages.border_size") }}</label>
                 <div class="input-group mb-2">
-                    <input type="number" class="form-control" v-model="element.border_size" aria-describedby="border_size">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="element.border_size"
+                        aria-describedby="border_size"
+                    />
                     <div class="input-group-append">
                         <span class="input-group-text" id="border_size">
                             px
@@ -786,142 +1346,238 @@
 
                 <div class="row">
                     <div class="col">
-                        <label>{{trans('messages.border_type')}}</label>
-                        <select class="form-control" v-model="element.border_type">
+                        <label>{{ trans("messages.border_type") }}</label>
+                        <select
+                            class="form-control"
+                            v-model="element.border_type"
+                        >
                             <option value="solid">
-                                {{trans('messages.solid')}}
+                                {{ trans("messages.solid") }}
                             </option>
                             <option value="dashed">
-                                {{trans('messages.dashed')}}
+                                {{ trans("messages.dashed") }}
                             </option>
                             <option value="dotted">
-                                {{trans('messages.dotted')}}
+                                {{ trans("messages.dotted") }}
                             </option>
                             <option value="double">
-                                {{trans('messages.double')}}
+                                {{ trans("messages.double") }}
                             </option>
                         </select>
                     </div>
 
                     <div class="col">
                         <label for="border_color">
-                            {{trans('messages.border_color')}}
+                            {{ trans("messages.border_color") }}
                         </label>
-                        <input type="color" class="form-control" id="border_color" v-model="element.border_color">
+                        <input
+                            type="color"
+                            class="form-control"
+                            id="border_color"
+                            v-model="element.border_color"
+                        />
                     </div>
                 </div>
                 <div class="row mt-1">
                     <div class="col-sm-12">
-                        <label>{{trans('messages.horizontal_space')}}</label>
+                        <label>{{ trans("messages.horizontal_space") }}</label>
                         <div class="input-group">
-                            <input type="number" class="form-control" v-model="element.horizontal_space">
+                            <input
+                                type="number"
+                                class="form-control"
+                                v-model="element.horizontal_space"
+                            />
                             <div class="input-group-append">
-                                <span class="input-group-text">
-                                    px
-                                </span>
+                                <span class="input-group-text"> px </span>
                             </div>
                         </div>
                         <small class="form-text text-muted">
-                            {{trans('messages.horizontal_space_help_text')}}
+                            {{ trans("messages.horizontal_space_help_text") }}
                         </small>
                     </div>
                 </div>
             </div>
 
             <div class="form-group" v-if="element.type == 'html_text'">
-                <label>{{trans('messages.html_text')}}</label>
-                <textarea id="html_text" class="form-control summer_note" v-model="element.html_text">
-            </textarea>
+                <label>{{ trans("messages.html_text") }}</label>
+                <textarea
+                    id="html_text"
+                    class="form-control summer_note"
+                    v-model="element.html_text"
+                >
+                </textarea>
             </div>
 
             <div v-if="element.type == 'rating'">
                 <div class="form-group">
-                    <label>{{trans('messages.stars')}}</label>
-                    <tool-tip :tooltip="trans('messages.max_star_help_text')"></tool-tip>
-                    <input type="number" v-model="element.stars_to_display" class="form-control form-control-sm">
+                    <label>{{ trans("messages.stars") }}</label>
+                    <tool-tip
+                        :tooltip="trans('messages.max_star_help_text')"
+                    ></tool-tip>
+                    <input
+                        type="number"
+                        v-model="element.stars_to_display"
+                        class="form-control form-control-sm"
+                    />
                 </div>
                 <div class="form-group">
-                    <label>{{trans('messages.min_value')}}</label>
-                    <tool-tip :tooltip="trans('messages.min_rating_value_help_text')"></tool-tip>
-                    <input type="number" v-model="element.min_rating" class="form-control form-control-sm">
+                    <label>{{ trans("messages.min_value") }}</label>
+                    <tool-tip
+                        :tooltip="trans('messages.min_rating_value_help_text')"
+                    ></tool-tip>
+                    <input
+                        type="number"
+                        v-model="element.min_rating"
+                        class="form-control form-control-sm"
+                    />
                 </div>
                 <div class="form-group">
-                    <label>{{trans('messages.max_value')}}</label>
-                    <tool-tip :tooltip="trans('messages.max_rating_value_help_text')"></tool-tip>
-                    <input type="number" v-model="element.max_rating" class="form-control form-control-sm">
+                    <label>{{ trans("messages.max_value") }}</label>
+                    <tool-tip
+                        :tooltip="trans('messages.max_rating_value_help_text')"
+                    ></tool-tip>
+                    <input
+                        type="number"
+                        v-model="element.max_rating"
+                        class="form-control form-control-sm"
+                    />
                 </div>
                 <div class="form-group">
-                    <label>{{trans('messages.step')}}</label>
-                    <tool-tip :tooltip="trans('messages.step_value_help_text')"></tool-tip>
-                    <input type="number" v-model="element.increment" class="form-control form-control-sm">
+                    <label>{{ trans("messages.step") }}</label>
+                    <tool-tip
+                        :tooltip="trans('messages.step_value_help_text')"
+                    ></tool-tip>
+                    <input
+                        type="number"
+                        v-model="element.increment"
+                        class="form-control form-control-sm"
+                    />
                 </div>
 
                 <div class="form-group">
-                    <label>{{trans('messages.display_type')}}</label>
-                    <select v-model="element.direction" class="form-control form-control-sm">
+                    <label>{{ trans("messages.display_type") }}</label>
+                    <select
+                        v-model="element.direction"
+                        class="form-control form-control-sm"
+                    >
                         <option value="rtl">
-                            {{trans('messages.rtl')}}
+                            {{ trans("messages.rtl") }}
                         </option>
                         <option value="ltr">
-                            {{trans('messages.ltr')}}
+                            {{ trans("messages.ltr") }}
                         </option>
                     </select>
                 </div>
                 <div class="form-group">
-                    <label>{{trans('messages.size')}}</label>
-                    <select v-model="element.size" class="form-control form-control-sm">
+                    <label>{{ trans("messages.size") }}</label>
+                    <select
+                        v-model="element.size"
+                        class="form-control form-control-sm"
+                    >
                         <option value="xs">
-                            {{trans('messages.extra_small')}}
+                            {{ trans("messages.extra_small") }}
                         </option>
                         <option value="sm">
-                            {{trans('messages.small')}}
+                            {{ trans("messages.small") }}
                         </option>
                         <option value="md">
-                            {{trans('messages.medium')}}
+                            {{ trans("messages.medium") }}
                         </option>
                         <option value="lg">
-                            {{trans('messages.large')}}
+                            {{ trans("messages.large") }}
                         </option>
                         <option value="xl">
-                            {{trans('messages.extra_large')}}
+                            {{ trans("messages.extra_large") }}
                         </option>
                     </select>
                 </div>
             </div>
-            
-            <div v-if="!_.includes(['heading', 'hr', 'html_text', 'rating', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
+
+            <div
+                v-if="
+                    !_.includes(
+                        [
+                            'heading',
+                            'hr',
+                            'html_text',
+                            'rating',
+                            'youtube',
+                            'iframe',
+                            'pdf',
+                            'countdown',
+                        ],
+                        element.type
+                    )
+                "
+            >
                 <div class="form-group" v-if="element.custom_attributes.length">
-                    <hr>
-                    <label>{{trans('messages.custom_attributes')}}</label>
+                    <hr />
+                    <label>{{ trans("messages.custom_attributes") }}</label>
                 </div>
-                <div class="row mb-10" v-for="(custom_attribute, index) in element.custom_attributes">
+                <div
+                    class="row mb-10"
+                    v-for="(
+                        custom_attribute, index
+                    ) in element.custom_attributes"
+                >
                     <div class="col-md-10">
                         <div class="input-group">
-                            <input type="text" class="form-control" v-model="custom_attribute.key" :placeholder="trans('messages.key')">
-                            <input type="text" class="form-control" v-model="custom_attribute.value" :placeholder="trans('messages.value')">
+                            <input
+                                type="text"
+                                class="form-control"
+                                v-model="custom_attribute.key"
+                                :placeholder="trans('messages.key')"
+                            />
+                            <input
+                                type="text"
+                                class="form-control"
+                                v-model="custom_attribute.value"
+                                :placeholder="trans('messages.value')"
+                            />
                         </div>
                     </div>
                     <div class="col-md-2">
-                        <button type="button" class="btn btn-danger btn-sm" @click="removeAttribute(index)">
+                        <button
+                            type="button"
+                            class="btn btn-danger btn-sm"
+                            @click="removeAttribute(index)"
+                        >
                             <i class="fas fa-trash-alt"></i>
                         </button>
                     </div>
                 </div>
-                <button type="button" class="btn btn-sm btn-info" style="margin: 28px;" @click="addAttribute()">
+                <button
+                    type="button"
+                    class="btn btn-sm btn-info"
+                    style="margin: 28px"
+                    @click="addAttribute()"
+                >
                     <i class="fas fa-plus-circle"></i>
-                    {{trans('messages.add_custom_attribute')}}
+                    {{ trans("messages.add_custom_attribute") }}
                 </button>
             </div>
             <!-- Edit/Delete btn -->
             <div class="row text-center">
                 <div class="col-md-12">
-                    <button type="button" class="btn btn-primary m-1" 
-                        @click="$emit('toggleConfigurator', {index: index, show: false})">
-                        {{trans('messages.close')}}
+                    <button
+                        type="button"
+                        class="btn btn-primary m-1"
+                        @click="
+                            $emit('toggleConfigurator', {
+                                index: index,
+                                show: false,
+                            })
+                        "
+                    >
+                        {{ trans("messages.close") }}
                     </button>
-                    <button type="button" class="btn btn-danger m-1" @click="$emit('deleteElement', index)">
+                    <button
+                        type="button"
+                        class="btn btn-danger m-1"
+                        @click="$emit('deleteElement', index)"
+                    >
                         <span class="fas fa-trash" aria-hidden="true"></span>
-                        {{trans('messages.remove')}}
+                        {{ trans("messages.remove") }}
                     </button>
                 </div>
             </div>
@@ -929,124 +1585,165 @@
     </div>
 </template>
 <script>
-    import PdfUploader from "./Shared/PdfUploader";
-	export default {
-		props: {
-			element: Object,
-			index: Number,
-            selected_elements: Array
-		},
-        components: {
-            PdfUploader
-        },
-        mounted(){
-            const self = this;
-            $(function() {
-                if (self.element.type == 'html_text') {
-                    $('#html_text').summernote({
-                        placeholder: self.trans('messages.jot_down_here'),
-                        height: 200,
-                        dialogsInBody: true,
-                        callbacks: {
-                            onChange: function(contents, editable) {
-                              self.element.html_text = contents;
-                            }
-                        }
-                    });
-                }
-
-                if (!_.includes(['countdown', 'pdf', 'iframe', 'youtube', 'page_break', 'html_text', 'hr', 'heading'], self.element.type) && self.element.popover_help_text.enable) {
-                    self.initializePopoverEditor();
-                }
-            });
-        },
-		data: function () {
-	  		return {
-                validations:[],
-                columns_width:[
-                    'col-md-1',
-                    'col-md-2',
-                    'col-md-3',
-                    'col-md-4',
-                    'col-md-5',
-                    'col-md-6',
-                    'col-md-7',
-                    'col-md-8',
-                    'col-md-9',
-                    'col-md-10',
-                    'col-md-11',
-                    'col-md-12'
-                ]
-	  		}
-		},
-        created() {
-            this.validations = validationRules;
-            //chck if custom attr is undefined for element, if so add it to element
-            if (_.isUndefined(this.element.custom_attributes)) {
-                Vue.set(this.element, 'custom_attributes', []);
-            }
-        },
-        methods:{
-            addAttribute() {
-                const self = this;
-                self.element.custom_attributes.push({'key':null, 'value':null});
-            },
-            removeAttribute(index) {
-                this.element.custom_attributes.splice(index, 1);
-            },
-            checkDuplicateFieldName(field_name) {
-                const self = this;
-                var curent_element_index = self.index;
-                for (let index = 0; index < self.selected_elements.length; index++) {
-                    if(_.isEmpty(field_name)) {
-                        $("#field_name_error").html('<p id="error" class="error">'+self.trans('messages.this_field_is_required')+'</p>');
-                        return false;
-                    } else if (index == curent_element_index && (/\s/.test(field_name))) {
-                        $("#field_name_error").html('<p id="error" class="error">'+self.trans('messages.field_name_should_nt_have_space')+'</p>');
-                        return false;
-                    } else if (index !== curent_element_index && (self.selected_elements[index].name == field_name)) {
-                        $("#field_name_error").html('<p id="error" class="error">'+self.trans('messages.duplicate_field_name_choose_unique')+'</p>');
-                        return false;
-                    } else {
-                        $("#field_name_error").html("");
-                    }
-                }
-            },
-            updateAttribute(type) {
-                if (type == 'range') {
-                    $('input[type="range"]').rangeslider('update', true);
-                }
-            },
-            getIcons() {
-                var icons = this.getFontAwesomeIcons();
-                return icons;
-            },
-            reinitializeElement(){
-                const self = this;
-                self.reInitializePlugins(self.element);  
-            },
-            initializePopoverEditor() {
-                const self = this;
-                $('#popover_help_text').summernote({
-                    placeholder: self.trans('messages.write_popover_help_text'),
+import PdfUploader from "./Shared/PdfUploader";
+export default {
+    props: {
+        element: Object,
+        index: Number,
+        selected_elements: Array,
+    },
+    components: {
+        PdfUploader,
+    },
+    mounted() {
+        const self = this;
+        $(function () {
+            if (self.element.type == "html_text") {
+                $("#html_text").summernote({
+                    placeholder: self.trans("messages.jot_down_here"),
                     height: 200,
                     dialogsInBody: true,
                     callbacks: {
-                        onChange: function(contents, editable) {
-                            self.element.popover_help_text.content = contents;
-                        }
-                    }
+                        onChange: function (contents, editable) {
+                            self.element.html_text = contents;
+                        },
+                    },
                 });
             }
+
+            if (
+                !_.includes(
+                    [
+                        "countdown",
+                        "pdf",
+                        "iframe",
+                        "youtube",
+                        "page_break",
+                        "html_text",
+                        "hr",
+                        "heading",
+                    ],
+                    self.element.type
+                ) &&
+                self.element.popover_help_text.enable
+            ) {
+                self.initializePopoverEditor();
+            }
+        });
+    },
+    data: function () {
+        return {
+            validations: [],
+            columns_width: [
+                "col-md-1",
+                "col-md-2",
+                "col-md-3",
+                "col-md-4",
+                "col-md-5",
+                "col-md-6",
+                "col-md-7",
+                "col-md-8",
+                "col-md-9",
+                "col-md-10",
+                "col-md-11",
+                "col-md-12",
+            ],
+        };
+    },
+    created() {
+        this.validations = validationRules;
+        //chck if custom attr is undefined for element, if so add it to element
+        if (_.isUndefined(this.element.custom_attributes)) {
+            Vue.set(this.element, "custom_attributes", []);
         }
-	}
+    },
+    methods: {
+        addAttribute() {
+            const self = this;
+            self.element.custom_attributes.push({ key: null, value: null });
+        },
+        removeAttribute(index) {
+            this.element.custom_attributes.splice(index, 1);
+        },
+        checkDuplicateFieldName(field_name) {
+            const self = this;
+            var curent_element_index = self.index;
+            for (
+                let index = 0;
+                index < self.selected_elements.length;
+                index++
+            ) {
+                if (_.isEmpty(field_name)) {
+                    $("#field_name_error").html(
+                        '<p id="error" class="error">' +
+                            self.trans("messages.this_field_is_required") +
+                            "</p>"
+                    );
+                    return false;
+                } else if (
+                    index == curent_element_index &&
+                    /\s/.test(field_name)
+                ) {
+                    $("#field_name_error").html(
+                        '<p id="error" class="error">' +
+                            self.trans(
+                                "messages.field_name_should_nt_have_space"
+                            ) +
+                            "</p>"
+                    );
+                    return false;
+                } else if (
+                    index !== curent_element_index &&
+                    self.selected_elements[index].name == field_name
+                ) {
+                    $("#field_name_error").html(
+                        '<p id="error" class="error">' +
+                            self.trans(
+                                "messages.duplicate_field_name_choose_unique"
+                            ) +
+                            "</p>"
+                    );
+                    return false;
+                } else {
+                    $("#field_name_error").html("");
+                }
+            }
+        },
+        updateAttribute(type) {
+            if (type == "range") {
+                $('input[type="range"]').rangeslider("update", true);
+            }
+        },
+        getIcons() {
+            var icons = this.getFontAwesomeIcons();
+            return icons;
+        },
+        reinitializeElement() {
+            const self = this;
+            self.reInitializePlugins(self.element);
+        },
+        initializePopoverEditor() {
+            const self = this;
+            $("#popover_help_text").summernote({
+                placeholder: self.trans("messages.write_popover_help_text"),
+                height: 200,
+                dialogsInBody: true,
+                callbacks: {
+                    onChange: function (contents, editable) {
+                        self.element.popover_help_text.content = contents;
+                    },
+                },
+            });
+        },
+    },
+};
 </script>
 <style scoped>
-    label {
-        margin-bottom: 0px !important;
-    }
-    .configurator_height {
-        overflow-y: auto;
-        max-height: 58vh;
-    }
-</style>
\ No newline at end of file
+label {
+    margin-bottom: 0px !important;
+}
+.configurator_height {
+    overflow-y: auto;
+    max-height: 58vh;
+}
+</style>
diff --git a/resources/views/layouts/partials/javascript.blade.php b/resources/views/layouts/partials/javascript.blade.php
index 7206ea0..a6563cb 100644
--- a/resources/views/layouts/partials/javascript.blade.php
+++ b/resources/views/layouts/partials/javascript.blade.php
@@ -3,52 +3,56 @@
     $form = !empty($form) ? $form : '';
 @endphp
 
-    <!-- reCaptcha -->
-<script src="//www.google.com/recaptcha/api.js?v={{$asset_version}}" async defer></script>
+<!-- reCaptcha -->
+<script src="//www.google.com/recaptcha/api.js?v={{ $asset_version }}" async defer></script>
 
 <script type="text/javascript">
     if (typeof jQuery == 'undefined') {
-        document.write('<script src="//code.jquery.com/jquery-3.4.1.min.js?v={{$asset_version}}"></' + 'script>');
+        document.write('<script src="//code.jquery.com/jquery-3.4.1.min.js?v={{ $asset_version }}"></' + 'script>');
     }
 </script>
 
 <!-- Bootstrap Js -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js?v={{$asset_version}}"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js?v={{ $asset_version }}"></script>
 
-<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js?v={{$asset_version}}"></script>
+<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js?v={{ $asset_version }}"></script>
 
-<script type="text/javascript" src="//cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js?v={{$asset_version}}"></script>
-<script src="//cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js?v={{$asset_version}}"></script>
-<script src="//cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js?v={{$asset_version}}"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js?v={{ $asset_version }}"></script>
+<script src="//cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js?v={{ $asset_version }}"></script>
+<script src="//cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js?v={{ $asset_version }}">
+</script>
 <script type="text/javascript"
-        src="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js?v={{$asset_version}}"></script>
+    src="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js?v={{ $asset_version }}"></script>
 <script type="text/javascript"
-        src="//cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js?v={{$asset_version}}"></script>
+    src="//cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js?v={{ $asset_version }}">
+</script>
 
 <script type="text/javascript"
-        src="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js?v={{$asset_version}}"></script>
+    src="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js?v={{ $asset_version }}"></script>
 
 <script type="text/javascript"
-        src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js?v={{$asset_version}}"></script>
+    src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js?v={{ $asset_version }}">
+</script>
 <script type="text/javascript"
-        src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.min.js?v={{$asset_version}}"></script>
+    src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.min.js?v={{ $asset_version }}"></script>
 
 <!-- Boostrap star rating -->
 <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/star-rating.min.js?v={{$asset_version}}"
+    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/star-rating.min.js?v={{ $asset_version }}"
     type="text/javascript"></script>
 <!-- if you need to use a theme, then include the theme Js file -->
 <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/themes/krajee-svg/theme.js?v={{$asset_version}}"></script>
+    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/themes/krajee-svg/theme.js?v={{ $asset_version }}">
+</script>
 <!-- optionally if you need translation for your language then include locale file as mentioned below -->
 <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/locales/<lang>.js"></script> -->
 <!-- signature pad (https://github.com/szimek/signature_pad)-->
-<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js?v={{$asset_version}}"></script>
+<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js?v={{ $asset_version }}">
+</script>
 
-<script src="{{asset('/plugins/countdowntimer/countdowntimer.min.js').'?v='.$asset_version}}"></script>
-
-@if(!$is_download)
+<script src="{{ asset('/plugins/countdowntimer/countdowntimer.min.js') . '?v=' . $asset_version }}"></script>
 
+@if (!$is_download)
     <!-- app js values -->
     <script type="application/javascript">
         var APP = {};
@@ -91,33 +95,35 @@
     </script>
 
     <script
-        src="//cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@3.2.10/dist/jquery.validate.unobtrusive.min.js?v={{$asset_version}}"></script>
-    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11?v={{$asset_version}}"></script>
+        src="//cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@3.2.10/dist/jquery.validate.unobtrusive.min.js?v={{ $asset_version }}">
+    </script>
+    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11?v={{ $asset_version }}"></script>
+    {{-- <script src="/js/sweetalert2.all.js"></script> --}}
     <script type="text/javascript"
-            src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js?v={{$asset_version}}"></script>
+        src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js?v={{ $asset_version }}"></script>
     <script type="text/javascript"
-            src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js?v={{$asset_version}}"></script>
+        src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js?v={{ $asset_version }}"></script>
     <script type="text/javascript"
-            src="//cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fc-3.3.1/fh-3.1.4/datatables.min.js?v={{$asset_version}}"></script>
+        src="//cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fc-3.3.1/fh-3.1.4/datatables.min.js?v={{ $asset_version }}">
+    </script>
 
     <!-- ladda.js -->
-    <script type="text/javascript"
-            src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.6/spin.min.js?v={{$asset_version}}"></script>
-    <script type="text/javascript"
-            src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.6/ladda.min.js?v={{$asset_version}}"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.6/spin.min.js?v={{ $asset_version }}">
+    </script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.6/ladda.min.js?v={{ $asset_version }}">
+    </script>
     <!-- localization -->
     <script src="{{ url('/js/lang.js') . '?v=' . $asset_version }}"></script>
     <script src="{{ asset(mix('js/app.js')) }}" defer></script>
     <!-- intro.js -->
     <script type="text/javascript"
-            src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js?v={{$asset_version}}"></script>
+        src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js?v={{ $asset_version }}"></script>
     <script src="{{ asset('js/iframeResizercontentWindow.js') }}"></script>
 @endif
 
 <script type="text/javascript">
-
     jQuery.validator.setDefaults({
-        errorPlacement: function (error, element) {
+        errorPlacement: function(error, element) {
             if (element.hasClass('select2') && element.parent().hasClass('input-group')) {
                 error.insertAfter(element.parent());
             } else if (element.hasClass('select2')) {
@@ -140,57 +146,61 @@
                 error.insertAfter(element);
             }
         },
-        invalidHandler: function () {
+        invalidHandler: function() {
             toastr.error("{{ __('messages.some_error_in_input_field') }}");
         }
     });
 
-    $(document).ready(function () {
-        @if(!$is_download)
-        jQuery.extend($.fn.dataTable.defaults, {
-            fixedHeader: false,
-            aLengthMenu: [
-                [25, 50, 100, 200, 500, 1000, -1], [25, 50, 100, 200, 500, 1000, "{{__('messages.all')}}"]
-            ],
-            iDisplayLength: 25,
-            dom: 'lfrtip',
-            "language": {
-                "emptyTable": "{{__('messages.emptyTable')}}",
-                "info": "{{__('messages.dt_info')}}",
-                "infoEmpty": "{{__('messages.infoEmpty')}}",
-                "infoFiltered": "{{__('messages.infoFiltered')}}",
-                "lengthMenu": "{{__('messages.lengthMenu')}}",
-                "loadingRecords": "{{__('messages.loadingRecords')}}",
-                "processing": "{{__('messages.processing')}}",
-                "search": "{{__('messages.search')}}",
-                "zeroRecords": "{{__('messages.zeroRecords')}}",
-                "paginate": {
-                    "first": "{{__('messages.first')}}",
-                    "last": "{{__('messages.last')}}",
-                    "next": "{{__('messages.next')}}",
-                    "previous": "{{__('messages.previous')}}"
-                },
-                buttons: {
-                    copyTitle: "{{__('messages.copy_to_clipboard')}}",
-                    copySuccess: {
-                        _: "{{__('messages.copied_n_rows_to_clipboard')}}"
+    $(document).ready(function() {
+        @if (!$is_download)
+            jQuery.extend($.fn.dataTable.defaults, {
+                fixedHeader: false,
+                aLengthMenu: [
+                    [25, 50, 100, 200, 500, 1000, -1],
+                    [25, 50, 100, 200, 500, 1000, "{{ __('messages.all') }}"]
+                ],
+                iDisplayLength: 25,
+                dom: 'lfrtip',
+                "language": {
+                    "emptyTable": "{{ __('messages.emptyTable') }}",
+                    "info": "{{ __('messages.dt_info') }}",
+                    "infoEmpty": "{{ __('messages.infoEmpty') }}",
+                    "infoFiltered": "{{ __('messages.infoFiltered') }}",
+                    "lengthMenu": "{{ __('messages.lengthMenu') }}",
+                    "loadingRecords": "{{ __('messages.loadingRecords') }}",
+                    "processing": "{{ __('messages.processing') }}",
+                    "search": "{{ __('messages.search') }}",
+                    "zeroRecords": "{{ __('messages.zeroRecords') }}",
+                    "paginate": {
+                        "first": "{{ __('messages.first') }}",
+                        "last": "{{ __('messages.last') }}",
+                        "next": "{{ __('messages.next') }}",
+                        "previous": "{{ __('messages.previous') }}"
+                    },
+                    buttons: {
+                        copyTitle: "{{ __('messages.copy_to_clipboard') }}",
+                        copySuccess: {
+                            _: "{{ __('messages.copied_n_rows_to_clipboard') }}"
+                        }
                     }
                 }
-            }
-        });
+            });
 
-        $.ajaxSetup({
-            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
-        });
+            $.ajaxSetup({
+                headers: {
+                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                }
+            });
         @endif
 
-        $('button[type=reset]').on('click', function () {
+        $('button[type=reset]').on('click', function() {
             $(this).parents('form').find('input').val('');
             window.location.href = $(this).parents('form').attr('action');
         });
     });
 
-    function initialize_datetimepicker(element_name, element_date, start_date, end_date, date_format, time_format, disabled_days, enable_time_picker, time_picker_inline) {
+    function initialize_datetimepicker(element_name, element_date, start_date, end_date, date_format, time_format,
+        disabled_days, enable_time_picker, time_picker_inline) {
         var start = null;
         var end = null;
         var format = '';
@@ -254,10 +264,9 @@
         $('#' + element_name).rangeslider({
             polyfill: false,
             //Callback function
-            onInit: function () {
-            },
+            onInit: function() {},
             // Callback function
-            onSlide: function (position, value) {
+            onSlide: function(position, value) {
                 $('.' + element_name).text(value);
             },
         });
@@ -265,12 +274,13 @@
 
     Dropzone.autoDiscover = false;
 
-    function initialize_dropzone(element_name, file_upload_msg, no_of_files_can_be_uploaded, max_file_size, allowed_file_type, url = null) {
+    function initialize_dropzone(element_name, file_upload_msg, no_of_files_can_be_uploaded, max_file_size,
+        allowed_file_type, url = null) {
 
         var file_remove_url = "library/delete_file.php";
         if (url == null) {
-            url = "{{ url('/file-upload')}}";
-            file_remove_url = "{{ url('/file-delete')}}";
+            url = "{{ url('/file-upload') }}";
+            file_remove_url = "{{ url('/file-delete') }}";
         }
 
         var file_names = [];
@@ -286,27 +296,37 @@
             maxFilesize: max_file_size,
             dictDefaultMessage: file_upload_msg,
             maxFiles: no_of_files_can_be_uploaded,
+            capture: allowed_file_type == 'image/*' ? 'image/*' : null,
             headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             },
             acceptedFiles: allowed_file_type,
-            init: function () {
+            init: function() {
                 //function to be use on editing a form, to display existing files
                 if ($('input#' + element_name).val().length > 0) {
                     window[`${element_name}_myDropzone`] = this;
-                    var file_obj = {files: $('input#' + element_name).val()};
+                    var file_obj = {
+                        files: $('input#' + element_name).val()
+                    };
                     $.ajax({
                         method: "GET",
                         url: '/existing-file-display',
                         dataType: "json",
                         data: file_obj,
-                        success: function (result) {
+                        success: function(result) {
                             if (result.success) {
-                                $.each(result.files, function (key, file) {
-                                    var mockFile = {name: file.name, uploaded_as: file.uploaded_as, size: file.size};
-                                    window[`${element_name}_myDropzone`].emit("addedfile", mockFile);
-                                    window[`${element_name}_myDropzone`].emit("thumbnail", mockFile, file.path);
-                                    window[`${element_name}_myDropzone`].emit("complete", mockFile);
+                                $.each(result.files, function(key, file) {
+                                    var mockFile = {
+                                        name: file.name,
+                                        uploaded_as: file.uploaded_as,
+                                        size: file.size
+                                    };
+                                    window[`${element_name}_myDropzone`].emit(
+                                        "addedfile", mockFile);
+                                    window[`${element_name}_myDropzone`].emit(
+                                        "thumbnail", mockFile, file.path);
+                                    window[`${element_name}_myDropzone`].emit(
+                                        "complete", mockFile);
                                 });
                             }
                         }
@@ -314,13 +334,15 @@
                 }
 
                 //function to be use on removeing a file
-                this.on("removedfile", function (file) {
+                this.on("removedfile", function(file) {
                     $.ajax({
                         url: file_remove_url,
-                        data: {"file_name": file.uploaded_as},
+                        data: {
+                            "file_name": file.uploaded_as
+                        },
                         type: "POST",
-                        success: function (result) {
-                            if (typeof (result) == 'string') {
+                        success: function(result) {
+                            if (typeof(result) == 'string') {
                                 var result = JSON.parse(result);
                             }
 
@@ -350,8 +372,8 @@
                     });
                 });
             },
-            success: function (file, response) {
-                if (typeof (response) == 'string') {
+            success: function(file, response) {
+                if (typeof(response) == 'string') {
                     var response = JSON.parse(response);
                 }
                 if (response.success == true) {
@@ -409,7 +431,7 @@
         var signaturePad = element;
         var canvas = document.getElementById(element);
         signaturePad = new SignaturePad(canvas, {
-            onEnd: function (event) {
+            onEnd: function(event) {
                 var element = $(this)[0]._canvas.id
                 var signature = $(this)[0].toDataURL();
                 $('#output_' + element).val(signature);
@@ -421,12 +443,12 @@
             signaturePad.fromDataURL($('#output_' + element).val());
         }
 
-        $(document).on('click', '#clear_' + element, function () {
+        $(document).on('click', '#clear_' + element, function() {
             signaturePad.clear();
             $('#output_' + $(this).data('name')).val('');
         });
 
-        $(document).on('click', '#undo_' + element, function () {
+        $(document).on('click', '#undo_' + element, function() {
             var data = signaturePad.toData();
             if (data) {
                 data.pop(); // remove the last dot or line
@@ -467,8 +489,8 @@
     }
 </script>
 <!-- Application additional js -->
-@if(!$is_download && !isset($nav))
-    @if(!empty($__additional_js))
-        {!!$__additional_js!!}
+@if (!$is_download && !isset($nav))
+    @if (!empty($__additional_js))
+        {!! $__additional_js !!}
     @endif
 @endif