<template>
<div class="mt-3">
	<!-- reCAPTCHA settings -->
	<h5 class="text-primary">
		{{trans('messages.google_recaptcha_settings')}}:
	</h5>
	<div class="form-group">
		<div class="col-sm offset-3 col-sm-9">
			<div class="custom-control custom-checkbox">
				<input class="custom-control-input" type="checkbox" value="1" id="enable_recaptcha" name="enable_recaptcha" v-model="settings.recaptcha.is_enable">
				<label class="custom-control-label" for="enable_recaptcha">
					{{trans('messages.add_google_recaptcha')}}
				</label>
			</div>
		</div> <br>

		<div class="form-group row" v-if="settings.recaptcha.is_enable">
			<label for="site_key" class="col-sm-3 col-form-label">
				{{trans('messages.site_key')}}
			<span class="error">*</span></label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="site_key" :placeholder="trans('messages.enter_site_key')" 
					name="settings.recaptcha.site_key" 
					:required="settings.recaptcha.is_enable"
					v-model="settings.recaptcha.site_key">
			</div>
		</div>

		<div class="form-group row" v-if="settings.recaptcha.is_enable">
			<label for="secret_key" class="col-sm-3 col-form-label">
			{{trans('messages.secret_key')}}<span class="error">*</span></label>
			<div class="col-sm-9">
				<input type="text" name="settings.recaptcha.secret_key" class="form-control" id="secret_key" :placeholder="trans('messages.enter_secret_key')" v-model="settings.recaptcha.secret_key" 
				:required="settings.recaptcha.is_enable">
				<small id="help_text" class="form-text text-muted">
				  {{trans('messages.secret_key_help_text')}}
	      			<a href="https://www.google.com/recaptcha/admin" target="_blank">{{trans('messages.click_here')}}</a> {{trans('messages.to_create')}}
				</small>
			</div>
		</div>
	</div>
	<!-- Design settings -->
	<h5 class="text-primary">{{trans('messages.design_settings')}}:</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.theme')}}
		</label>
		<div class="col-sm-9">
			<select class="custom-select" aria-describedby="theme" v-model="settings.theme">
		      <option v-for="(theme, index) in themes" :value="theme.key" :key="index">
		      		{{theme.value}}
		      </option>
		    </select>
		    <small id="theme" class="form-text text-muted">
				{{trans('messages.to_see_effect_preview_form')}}
			</small>
		</div>
	</div>
	<div class="form-group row">
		<label for="label_color" class="col-sm-3 col-form-label">
			{{trans('messages.label_color')}}
		</label>
		<div class="input-group col-sm-9">
			<input type="text" class="form-control form-control-lg" name="label_color" id="label_color" v-model="settings.color.label">
			<div class="input-group-append">
				<span class="input-group-text">
					<input type="color" v-model="settings.color.label">
				</span>
			</div>
		</div>
	</div>

	<div class="form-group row">
		<label class="col-sm-3 col-form-label" for="error_msg_color">
			{{trans('messages.error_msg_color')}}
		</label>
		<div class="input-group col-sm-9">
			<input type="text" class="form-control form-control-lg" name="error_msg_color" id="error_msg_color" v-model="settings.color.error_msg">
			<div class="input-group-append">
				<span class="input-group-text">
					<input type="color" v-model="settings.color.error_msg">
				</span>
			</div>
		</div>
	</div>

	<div class="form-group row">
		<label class="col-sm-3 col-form-label" for="required_asterisk_color">
			{{trans('messages.required_asterisk_color')}}
		</label>
		<div class="input-group col-sm-9">
			<input type="text" class="form-control form-control-lg" name="required_asterisk_color" id="required_asterisk_color" v-model="settings.color.required_asterisk_color">
			<div class="input-group-append">
				<span class="input-group-text">
					<input type="color" v-model="settings.color.required_asterisk_color">
				</span>
			</div>
		</div>
	</div>

	<div class="form-group row">
		<label class="col-sm-3 col-form-label" for="page_color">
			{{trans('messages.page_color')}}
		</label>
		<div class="input-group col-sm-9">
			<input type="text" class="form-control form-control-lg" name="page_color" id="page_color" v-model="settings.color.page_color">
			<div class="input-group-append">
				<span class="input-group-text">
					<input type="color" v-model="settings.color.page_color">
				</span>
			</div>
		</div>
	</div>
	
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.form_background_setting')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" name="settings.bg_settings" type="radio" id="bg_color" :value="'bg_color'" v-model="settings.background.bg_type">
				<label class="custom-control-label" for="bg_color">
					{{trans('messages.form_background_color')}}
				</label>
			</div>
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" name="settings.bg_settings" type="radio" id="bg_image" :value="'bg_image'" v-model="settings.background.bg_type">
				<label class="custom-control-label" for="bg_image">
					{{trans('messages.form_background_image')}}
				</label>
			</div>
		</div>
	</div>

	<div class="form-group row" v-show="settings.background.bg_type === 'bg_color'">	
		<label class="col-sm-3 col col-form-label" for="background_color">
			{{trans('messages.form_background_color')}}
		</label>
		<div class="input-group col-sm-9">
			<input type="text" name="background_color" id="background_color" class="form-control form-control-lg" v-model="settings.color.background">
			<div class="input-group-append">
				<span class="input-group-text">
					<input type="color" v-model="settings.color.background">
				</span>
			</div>
		</div>
	</div>

	<div class="form-group row" v-show="settings.background.bg_type === 'bg_image'">	
		<label class="col-sm-3 col col-form-label" for="background_color">
			{{trans('messages.form_background_image')}}
		</label>
		<div class="col-sm-9 dropzone" id="fileUpload"></div>
	</div>
	<!-- notification settings -->
	<h5 class="text-primary">
		{{trans('messages.notification_setting')}}:
	</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.action_after_submit')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" type="radio" id="notification_same_page" :value="same_page" name="post_submit_action" v-model="settings.notification.post_submit_action" checked>
				<label class="custom-control-label" for="notification_same_page">
					{{trans('messages.show_notification_in_same_page')}}
				</label>
			</div>
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" name="post_submit_action" type="radio" id="notification_redirect" :value="redirect" v-model="settings.notification.post_submit_action">
				<label class="custom-control-label" for="notification_redirect">
					{{trans('messages.redirect_to_thank_you_page')}}
				</label>
			</div>
		</div>
	</div>

	<div class="form-group row" v-show="settings.notification.post_submit_action === same_page">
		<label for="success_msg" class="col-sm-3 col-form-label">
			{{trans('messages.email_success_notification')}}
		</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" id="success_msg" :placeholder="trans('messages.enter_msg')" name="success_msg" v-model="settings.notification.success_msg">
		</div>
	</div>

	<div class="form-group row" v-show="settings.notification.post_submit_action === same_page">
		<label for="failed_msg" class="col-sm-3 col-form-label">
			{{trans('messages.email_failed_notification')}}
		</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" 
				id="failed_msg" :placeholder="trans('messages.enter_msg')"
				name="failed_msg" v-model="settings.notification.failed_msg">
		</div>
	</div>

	<div class="form-group row" v-show="settings.notification.post_submit_action === same_page">
		<label for="position" class="col-sm-3 col-form-label">
			{{trans('messages.display_position')}}
		</label>
		<div class="col-sm-9">
			<select name="position" class="form-control" v-model="settings.notification.position">
				<option value="toast-top-right">
					{{trans('messages.top_right')}}
				</option>
				<option value="toast-bottom-right">
					{{trans('messages.bottom_right')}}
				</option>
				<option value="toast-bottom-left">
					{{trans('messages.bottom_left')}}
				</option>
				<option value="toast-top-left">
					{{trans('messages.top_left')}}
				</option>
				<option value="toast-top-center">
					{{trans('messages.top_center')}}
				</option>
				<option value="toast-bottom-center">
					{{trans('messages.bottom_center')}}
				</option>
			</select>
		</div>
	</div>
	<div class="form-group row" v-show="settings.notification.post_submit_action === same_page">
		<label for="enable_qr_code" class="col-sm-3 col-form-label">
			{{trans('messages.qr_code_for_submitted_data')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-switch">
				<input type="checkbox" class="custom-control-input"
					id="enable_qr_code"
					v-model="settings.is_qr_code_enabled">
				<label class="custom-control-label" for="enable_qr_code">
					{{trans('messages.enable')}}
					<i class="fas fa-info-circle"
  						data-toggle="tooltip"
  						:title="trans('messages.qr_code_tooltip')"></i>
				</label>
			</div>
			<small class="form-text text-muted"
				v-html="trans('messages.qr_code_limit_help_text')">
			</small>
		</div>
	</div>

	<div class="form-group row"
		v-if="_.includes(['same_page'], settings.notification.post_submit_action) && settings.is_qr_code_enabled">
		<label for="data_format" class="col-sm-3 col-form-label">
			{{trans('messages.qr_code_for_submitted_data')}} ({{trans('messages.data_format')}})
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" type="radio" id="key_value_format" value="string" name="data_format" v-model="settings.qr_code_data_format">
				<label class="custom-control-label" for="key_value_format">
					{{trans('messages.key_value_format')}}
				</label>
			</div>
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" name="data_format" type="radio" id="json_format" value="json" v-model="settings.qr_code_data_format">
				<label class="custom-control-label" for="json_format">
					{{trans('messages.json_format')}}
				</label>
			</div>
		</div>
	</div>
	<!-- ref num qr code -->
	<div class="form-group row" v-show="settings.notification.post_submit_action === same_page">
		<label for="enable_qr_code_for_ref_num" class="col-sm-3 col-form-label">
			{{trans('messages.qr_code_for_ref_num')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-switch">
				<input type="checkbox" class="custom-control-input"
					id="enable_qr_code_for_ref_num"
					v-model="settings.is_ref_num_qr_code_enabled">
				<label class="custom-control-label" for="enable_qr_code_for_ref_num">
					{{trans('messages.enable')}}
					<i class="fas fa-info-circle"
						data-toggle="tooltip"
						:title="trans('messages.submission_ref_qr_code_tooltip')"></i>
				</label>
			</div>
			<small class="form-text text-muted"
				v-html="trans('messages.bar_code_help_text')">
			</small>
		</div>
	</div>
	<!-- ref num bar code -->
	<div class="form-group row" v-show="settings.notification.post_submit_action === same_page">
		<label for="enable_bar_code_for_ref_num" class="col-sm-3 col-form-label">
			{{trans('messages.bar_code_for_ref_num')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-switch">
				<input type="checkbox" class="custom-control-input"
					id="enable_bar_code_for_ref_num"
					v-model="settings.is_ref_num_bar_code_enabled">
				<label class="custom-control-label" for="enable_bar_code_for_ref_num">
					{{trans('messages.enable')}}
					<i class="fas fa-info-circle"
						data-toggle="tooltip"
						:title="trans('messages.submission_ref_qr_code_tooltip')"></i>
				</label>
			</div>
			<small class="form-text text-muted"
				v-html="trans('messages.bar_code_help_text')">
			</small>
		</div>
	</div>

	<div class="form-group row" v-show="settings.notification.post_submit_action === redirect">
		<label for="redirect_url" class="col-sm-3 col-form-label">
			{{trans('messages.redirect_url')}}<span class="error">*</span>
		</label>
		<div class="col-sm-9">
			<input type="text" 
				class="form-control" 
				id="redirect_url" 
				:placeholder="trans('messages.enter_redirect_url')"
				name="settings.notification.redirect_url" 
				:required="settings.notification.post_submit_action === redirect"
				data-rule-url="true"
				v-model="settings.notification.redirect_url">
		</div>
	</div>

	<!-- submit button settings -->
	<h5 class="text-primary">
		{{trans('messages.submit_btn_setting')}}
	</h5>
	<div class="form-group row">
		<label for="btn_style"  class="col-sm-3 col-form-label">
	        {{trans('messages.submit_btn_style')}}
	    </label>
	    <div class="col-sm-9">
		    <label class="btn btn-primary">
				<input type="radio" name="btn_style" :value="'default'" v-model="settings.submit.btn_style"> {{trans('messages.default')}}
			</label>
			<label class="btn btn-outline-primary">
				<input type="radio" name="btn_style" :value="'outline'" v-model="settings.submit.btn_style"> {{trans('messages.outline')}}
			</label>
		</div>
	</div>

	<div class="form-group row">
		<label for="sb_btn_size" class="col-sm-3 col-form-label">
			{{trans('messages.submit_btn_size')}}
		</label>
		<div class="col-sm-6">
			<label class="btn btn-lg btn-primary">
				<input type="radio" name="btn_size" :value="btn_large" v-model="settings.submit.btn_size"> {{trans('messages.large')}}
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="btn_size" :value="btn_default" v-model="settings.submit.btn_size"> {{trans('messages.medium')}}
			</label>
			<label class="btn btn-primary btn-sm" aria-describedby="sb_btn_size">
				<input type="radio" name="btn_size" :value="btn_sm" v-model="settings.submit.btn_size"> {{trans('messages.small')}}
			</label>
			<small id="sb_btn_size" class="form-text text-muted">
			  {{trans('messages.submit_btn_size_help_text')}}
			</small>
		</div>
	</div>

	<div class="form-group row">
		<label for="sb_btn_color" class="col-sm-3 col-form-label">
			{{trans('messages.submit_btn_color')}}
		</label>
		<div class="col-sm-6" v-show="settings.submit.btn_style == 'default'">
			<label class="btn">
				<input type="radio" name="sb_btn_color" :value="default_value" v-model="settings.submit.btn_color"> {{trans('messages.default')}}
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="sb_btn_color" :value="primary" v-model="settings.submit.btn_color"> {{trans('messages.primary')}}
			</label>
			<label class="btn btn-success">
				<input type="radio" name="sb_btn_color" :value="success" v-model="settings.submit.btn_color"> {{trans('messages.success')}}
			</label>
			<label class="btn btn-warning">
				<input type="radio" name="sb_btn_color" :value="warning" v-model="settings.submit.btn_color"> {{trans('messages.warning')}}
			</label>
			<label class="btn btn-danger">
				<input type="radio" name="sb_btn_color" :value="danger" v-model="settings.submit.btn_color" aria-describedby="sb_btn_color"> {{trans('messages.danger')}}
			</label>
			<small id="sb_btn_color" class="form-text text-muted">
			  {{trans('messages.submit_btn_color_help_text')}}
			</small>
		</div>
		<div class="col-sm-6" v-show="settings.submit.btn_style == 'outline'">
			<label class="btn">
				<input type="radio" name="sb_btn_color" :value="default_value" v-model="settings.submit.btn_color"> {{trans('messages.default')}}
			</label>
			<label class="btn btn-outline-primary">
				<input type="radio" name="sb_btn_color" :value="'btn-outline-primary'" v-model="settings.submit.btn_color"> {{trans('messages.primary')}}
			</label>
			<label class="btn btn-outline-success">
				<input type="radio" name="sb_btn_color" :value="'btn-outline-success'" v-model="settings.submit.btn_color"> {{trans('messages.success')}}
			</label>
			<label class="btn btn-outline-warning">
				<input type="radio" name="sb_btn_color" :value="'btn-outline-warning'" v-model="settings.submit.btn_color"> {{trans('messages.warning')}}
			</label>
			<label class="btn btn-outline-danger">
				<input type="radio" name="sb_btn_color" :value="'btn-outline-danger'" v-model="settings.submit.btn_color" aria-describedby="sb_btn_color"> {{trans('messages.danger')}}
			</label>
			<small id="sb_btn_color" class="form-text text-muted">
			  {{trans('messages.submit_btn_color_help_text')}}
			</small>
		</div>
	</div>

	<div class="form-group row">
		<label for="sb_btn_alignment" class="col-sm-3 col-form-label">
			{{trans('messages.submit_btn_alignment')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-radio custom-control-inline">
				<input class="custom-control-input" type="radio" id="btn_align_left" value="float-left" name="sb_btn_alignment" v-model="settings.submit.btn_alignment">
				<label class="custom-control-label" for="btn_align_left">
					{{trans('messages.left')}}
				</label>
			</div>
			<div class="custom-control custom-radio custom-control-inline" aria-describedby="btn_align">
				<input class="custom-control-input" name="sb_btn_alignment" type="radio" id="btn_align_right" value="float-right" v-model="settings.submit.btn_alignment">
				<label class="custom-control-label" for="btn_align_right">
					{{trans('messages.right')}}
				</label>
			</div>
			<small id="btn_align" class="form-text text-muted">
				{{trans('messages.submit_btn_alignment_help_text')}}
			</small>
		</div>
	</div>

	<div class="form-group row">
		<label for="sb_text" class="col-sm-3 col-form-label">
			{{trans('messages.submit_btn_text')}}
		</label>
		<div class="col-sm-9">
			<input type="text" name="sb_text" class="form-control" :placeholder="trans('messages.enter_submit_btn_txt')" v-model="settings.submit.text">
		</div>
	</div>

	<div class="form-group row">
		<label for="sb_loading_text" class="col-sm-3 col-form-label">
			{{trans('messages.submit_btn_loading_text')}}
		</label>
		<div class="col-sm-9">
			<input type="text" name="sb_loading_text" class="form-control" :placeholder="trans('messages.enter_submit_btn_load_txt')" v-model="settings.submit.loading_text">
		</div>
	</div>

	<div class="form-group row">
		<label for="btn_icon"  class="col-sm-3 col-form-label">
	        {{trans('messages.submit_btn_icon')}}
	    </label>
	    <div class="col-sm-9">
	    	<div class="input-group">
			    <select id="btn_icon" class="form-control" v-model="settings.submit.btn_icon">
			        <option :value="'none'">None</option>
			        <option v-for="(icon, index) in getIcons()" :value="icon.c" :key="index">
			            {{icon.l}}
			        </option>
			    </select>
			    <select id="icon_position" class="form-control" v-model="settings.submit.icon_position">
			        <option :value="'left'">{{trans('messages.left')}}</option>
			        <option :value="'right'">{{trans('messages.right')}}</option>
			    </select>
			</div>
		</div>
	</div>
	<!-- form data settings -->
	<h5 class="text-primary">
		{{trans('messages.form_data_setting')}}
	</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.column_visibility')}}
		</label>
		<div class="col-sm-9">
			<select multiple class="custom-select" aria-describedby="col_visibility" v-model="settings.form_data.col_visible">
		      <option v-for="element in selected_elements" :value="element.name" v-if="!_.includes(['terms_and_condition', 'heading', 'hr', 'html_text', 'page_break', 'youtube', 'iframe', 'pdf', 'countdown'], element.type)">
		      		{{element.label}}
		      </option>
		    </select>
		    <small id="col_visibility" class="form-text text-muted">
				{{trans('messages.column_visibility_help_text')}}
			</small>
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.enable_button')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-checkbox custom-control-inline">
				<input class="custom-control-input" type="checkbox" id="view" value="view" v-model="settings.form_data.btn_enabled">
  				<label class="custom-control-label" for="view">
  					{{trans('messages.view')}}
  				</label>
			</div>
			<div class="custom-control custom-checkbox custom-control-inline">
			  <input class="custom-control-input" type="checkbox" id="delete" value="delete" v-model="settings.form_data.btn_enabled">
			  <label class="custom-control-label" for="delete">
			  	{{trans('messages.delete')}}
			  </label>
			</div>
		</div>
	</div>
	<!-- submit as draft -->
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.form_submit_as_draft')}}
			<tooltip-component :tooltip="trans('messages.form_submit_as_draft_tooltip')">
			</tooltip-component>
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-checkbox custom-control-inline">
				<input class="custom-control-input" type="checkbox" id="is_enabled_draft_submit" value="1" v-model="settings.is_enabled_draft_submit">
  				<label class="custom-control-label" for="is_enabled_draft_submit">
  					{{trans('messages.enable')}}
  				</label>
			</div>
		</div>
	</div>
	<!-- /submit as draft -->
	<!-- form scheduling settings -->
	<h5 class="text-primary">
		{{trans('messages.form_scheduling_setting')}}
	</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.scheduling')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-checkbox custom-control-inline">
				<input class="custom-control-input" type="checkbox" id="scheduling" value="1" v-model="settings.form_scheduling.is_enabled">
  				<label class="custom-control-label" for="scheduling">
  					{{trans('messages.enable')}}
  				</label>
			</div>
		</div>
	</div>
	<div class="text-left text-muted offset-sm-3 mb-2" v-if="settings.form_scheduling.is_enabled">
		<small>{{trans('messages.not_in_downloaded_code')}}</small><br/>
	</div>
	<div class="form-group row" v-show="settings.form_scheduling.is_enabled">
		<div class="col-sm-9 offset-sm-3">
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
					    <label for="start_date_time">
					    	{{trans('messages.start_date_time')}}
					    	<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" data-html="true" :title="trans('messages.form_closed_start_date_time_tooltip')"></i>
					    </label>
					    <div class="input-group date" id="start_date_time" data-target-input="nearest">
						    <input type="text"
			                    class="form-control datetimepicker-input" 
			                    data-target="#start_date_time"
			                    data-toggle="datetimepicker"
			                    name="start_date_time"
			                    id="start_date_time"
			                    readonly
			                />
			            </div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
					    <label for="end_date_time">
					    	{{trans('messages.end_date_time')}} *
					    	<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" data-html="true" :title="trans('messages.form_closed_end_date_time_tooltip')"></i>
					    </label>
					    <div class="input-group date" id="end_date_time" data-target-input="nearest">
						    <input type="text"
			                    class="form-control datetimepicker-input" 
			                    data-target="#end_date_time"
			                    data-toggle="datetimepicker"
			                    name="end_date_time"
			                    id="end_date_time"
			                    :required="settings.form_scheduling.is_enabled"
			                    readonly
			                />
			            </div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="form-group">
					    <label for="closed_msg">
					    	{{trans('messages.closed_msg')}} *
					    	<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" data-html="true" :title="trans('messages.form_closed_msg_tooltip')"></i>
					    </label>
					    <textarea
					    	class="form-control summer_note" id="closed_msg"
					    	rows="3"
					    	v-model="settings.form_scheduling.closed_msg"
					    	:required="settings.form_scheduling.is_enabled">	
					    </textarea>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--  form submission reference-->
	<h5 class="text-primary">
		{{trans('messages.form_submission_numbering')}}
	</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.submission_numbering')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-checkbox custom-control-inline">
				<input class="custom-control-input" type="checkbox" id="submission_numbering" value="1" v-model="settings.form_submision_ref.is_enabled">
  				<label class="custom-control-label" for="submission_numbering">
  					{{trans('messages.enable')}}
  				</label>
			</div>
		</div>
	</div>

	<div class="text-left text-muted offset-sm-3 mb-2" v-if="settings.form_submision_ref.is_enabled">
		<small>{{trans('messages.not_in_downloaded_code')}}</small><br/>
	</div>
	
	<div class="form-group row" v-if="settings.form_submision_ref.is_enabled">
		<div class="col-sm-9 offset-sm-3">
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
					    <label for="prefix">
					    	{{trans('messages.prefix')}}
					    </label>
					    <input type="text" class="form-control" id="prefix"
					    :placeholder="trans('messages.prefix')" name="settings.form_submision_ref.prefix" v-model="settings.form_submision_ref.prefix">
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
					    <label for="suffix">
					    	{{trans('messages.suffix')}}
					    </label>
					    <input type="text" class="form-control" id="suffix"
					    :placeholder="trans('messages.suffix')" name="settings.form_submision_ref.suffix" v-model="settings.form_submision_ref.suffix">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
					    <label for="start_no">
					    	{{trans('messages.start_no')}} *
					    </label>
					    <input type="text" class="form-control" id="start_no"
					    :placeholder="trans('messages.start_no')" name="settings.form_submision_ref.start_no" required v-model="settings.form_submision_ref.start_no">
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
					    <label for="min_digit">
					    	{{trans('messages.min_digit')}} *
					    </label>
					    <select class="form-control" required
							name="settings.form_submision_ref.min_digit"
							v-model="settings.form_submision_ref.min_digit" id="min_digit">
							<option v-for="i in 9" :key="i">
								{{i}}
							</option>
						</select>

					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- / form subission reference -->
	<!--  Password protection-->
	<h5 class="text-primary">
		{{trans('messages.password_protection')}}
	</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.enable_password_protection')}}
		</label>
		<div class="col-sm-9">
			<div class="custom-control custom-checkbox custom-control-inline">
				<input class="custom-control-input" type="checkbox" id="enable_password_protection" value="1" v-model="settings.password_protection.is_enabled">
  				<label class="custom-control-label" for="enable_password_protection">
  					{{trans('messages.enable')}}
  					<i class="fas fa-info-circle"
  						data-toggle="tooltip"
  						:title="trans('messages.password_protection_help_text')"></i>
  				</label>
			</div>
		</div>
	</div>
	<div class="form-group row" v-if="settings.password_protection.is_enabled">
		<div class="col-sm-9 offset-sm-3">
			<div class="row">
				<div class="col-sm-12">
					<div class="form-group">
					    <label for="password">
					    	{{trans('messages.password')}} *
					    </label>
					    <input type="text" class="form-control" id="password"
					    :placeholder="trans('messages.password')" name="settings.password_protection.password" v-model="settings.password_protection.password" required>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- / Password protection -->
	<!--  Pdf Design-->
	<h5 class="text-primary">
		{{trans('messages.pdf_design')}}
		<i class="fas fa-info-circle"
			data-toggle="tooltip"
			:title="trans('messages.pdf_design_help_text')"></i>
	</h5>
	<div class="form-group row">
		<label class="col-sm-3 col-form-label">
			{{trans('messages.header')}}
		</label>
		<div class="col-sm-9">
            <textarea id="pdf_design"
            	class="form-control pdf_design_summer_note"
            	v-model="settings.pdf_design.header"></textarea>
            <small class="form-text">
				{{trans('messages.tags')}} : {form_name}, {submission_date}
			</small>
		</div>
	</div>
	<!-- /Pdf Design -->
</div>
</template>
<script>
	import tooltipComponent from './TooltipComponent';
	export default {
		components: {
			tooltipComponent
		},
		props:{
    		settings: Object,
    		selected_elements: Array
    	},
		data() {
			const self = this;
			return {
				default_value:'',
				primary:'btn-primary',
				success:'btn-success',
				warning:'btn-warning',
				danger:'btn-danger',
				btn_large:'btn-lg',
				btn_sm:'btn-sm',
				btn_default:'',
				same_page:'same_page',
				redirect:'redirect',
				dropzone: null,
				themes: [
					{
						'key' : 'default',
						'value' : self.trans('messages.default')
					},
					{
						'key' : 'sketchy',
						'value' : 'Sketchy'
					},
					{
						'key' : 'materia',
						'value' : 'Material'
					},
					{
						'key' : 'cerulean',
						'value' : 'Cerulean'
					},
					{
						'key' : 'lux',
						'value' : 'Lux'
					},
					{
						'key' : 'cosmo',
						'value' : 'Cosmo'
					},
					{
						'key' : 'lumen',
						'value' : 'Lumen'
					},
					{
						'key' : 'simplex',
						'value' : 'Simplex'
					},
					{
						'key' : 'flatly',
						'value' : 'Flatly'
					},
					{
						'key' : 'journal',
						'value' : 'Journal'
					},
					{
						'key' : 'litera',
						'value' : 'Litera'
					},
					{
						'key' : 'minty',
						'value' : 'Minty'
					},
					{
						'key' : 'pulse',
						'value' : 'Pulse'
					},
					{
						'key' : 'sandstone',
						'value' : 'Sandstone'
					},
					{
						'key' : 'spacelab',
						'value' : 'Spacelab'
					},
					{
						'key' : 'yeti',
						'value' : 'Yeti'
					},
				]
			}
		},
		mounted() {
			this.initDropzone();
		},
		created() {
			const self = this;
			$(function() {
				
				initialize_datetimepicker_for_form_scheduling();

				//set values
				$('input#start_date_time').val(self.settings.form_scheduling.start_date_time);
				$('input#end_date_time').val(self.settings.form_scheduling.end_date_time);

                //on change of dateTimePicker get values
                $('div#start_date_time').on('change.datetimepicker', function() {
                	self.settings.form_scheduling.start_date_time = $('input#start_date_time').val();
                });

                $('div#end_date_time').on('change.datetimepicker', function() {
                	self.settings.form_scheduling.end_date_time = $('input#end_date_time').val();
                });

                $('#closed_msg').summernote({
                    placeholder: self.trans('messages.jot_down_here'),
                    height: 200,
                    callbacks: {
                        onChange: function(contents, editable) {
                          self.settings.form_scheduling.closed_msg = contents;
                        }
                    }
                });

                $('#pdf_design').summernote({
                    placeholder: self.trans('messages.design_pdf_header'),
                    height: 250,
                    tabsize: 2,
                    toolbar: [
					    ['style', ['style']],
					    ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
					    ['fontsize', ['fontsize']],
					    ['color', ['color']],
					    ['para', ['ul', 'ol', 'paragraph']],
					    ['height', ['height']],
					    ['insert', ['link', 'picture']]
					],
                    callbacks: {
                        onChange: function(contents, editable) {
                          self.settings.pdf_design.header = contents;
                        }
                    }
                });
              
			});
		},
		methods:{
			initDropzone() {
	            const self = this;
	            if (self.dropzone) {
	                self.dropzone.destroy();
	            }
	            self.dropzone = new Dropzone('div#fileUpload', {
	                url: `${APP.APP_URL}/file-upload`,
	                uploadMultiple: false,
	                maxFiles: 1,
	                acceptedFiles: '.jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF',
	                autoProcessQueue: true,
	                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
	                init: function() {
	                    var prevFile;
	                    this.on('addedfile', function() {
	                        if (typeof prevFile !== 'undefined') {
	                            this.removeFile(prevFile);
	                        }
	                    });
	                    this.on('success', function(file, response) {
	                        prevFile = file;
	                    });
	                },
	                success: function(file, response) {
	                    if (response.success == true) {
	                    	self.settings.color.image_path = response.path;
							toastr.success(response.msg);
	                    } else {
							toastr.error(response.msg);
						}
	                },
	            });
	        },
	        getIcons() {
	        	var icons = this.getFontAwesomeIcons();
                return icons;
	        }
		}
	}
</script>