<template>
	<div class="row mt-3">
		<div class="col-md-12">
			<div class="accordion" id="accordionEmail">
				<div class="card">
					<div class="card-header bg-success" id="headingEmailSettings">
						<h2 class="mb-0">
							<button class="btn btn-link text-white" type="button" data-toggle="collapse" 
							data-target="#collapseEmail" 
							aria-expanded="true" 
							aria-controls="collapseEmail">
							{{trans('messages.new_submission_email')}}:
							</button>
						</h2>
					</div>

					<div id="collapseEmail" 
						class="collapse show"
						aria-labelledby="headingEmailSettings" 
						data-parent="#accordionEmail">

						<div class="card-body">

							<div class="custom-control custom-checkbox">
								<input type="checkbox" 
									class="custom-control-input"
									id="enable_submission_email"
									v-model="emailConfig.email.enable"
									@change="emailToggle()"
									value="1">
								<label class="custom-control-label" for="enable_submission_email">
									{{trans('messages.enable')}}
								</label>
							</div>

						<div v-if="emailConfig.email.enable">
							
				        	<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.from')}}<span class="error">*</span>
								</label>

								<div class="col-sm-10">
							  		<input type="email" 
							  			class="form-control"
							  			:required="emailConfig.email.enable"
							  			:placeholder="trans('messages.from_email')"
							  			name="emailConfig.email.from"
							  			v-model="emailConfig.email.from">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.to')}}<span class="error">*</span></label>

								<div class="col-sm-10">
							  		<input type="text" 
							  			class="form-control"
							  			:required="emailConfig.email.enable"
							  			name="emailConfig.email.to"
							  			:placeholder="trans('messages.multiple_email_help_text')"
							  			v-model="emailConfig.email.to">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.reply_to_email')}}
								</label>
								<div class="col-sm-10">
							  		<select class="form-control"
										name="reply_to_email"
										v-model="emailConfig.email.reply_to_email">
										<option value="" v-text="trans('messages.please_select')"></option>
										<template
											v-for="element in selected_elements">
											<option
												:value="element.name" 
												v-if="_.includes(['email'], element.subtype)"
												v-text="element.label">
											</option>
										</template>
									</select>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.cc')}}
								</label>

								<div class="col-sm-10">
							  		<input type="text" 
							  			class="form-control"
							  			:placeholder="trans('messages.multiple_email_help_text')"
							  			v-model="emailConfig.email.cc">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.bcc')}}
								</label>

								<div class="col-sm-10">
							  		<input type="text" 
							  			class="form-control"
							  			:placeholder="trans('messages.multiple_email_help_text')"
							  			v-model="emailConfig.email.bcc">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.subject')}}
									<span class="error">*</span>
								</label>

								<div class="col-sm-10">
							  		<input type="text" 
							  			class="form-control"
							  			:required="emailConfig.email.enable"
							  			name="emailConfig.email.subject"
							  			:placeholder="trans('messages.email_subject')"
							  			v-model="emailConfig.email.subject">

							  		<small class="form-text text-muted">
							  			{{trans('messages.click_to_add_tags')}}: 
							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				v-for="(element, index) in selected_elements"
							  				v-if="!_.includes(['heading','hr', 'html_text', 'signature', 'file_upload', 'page_break', 'iframe', 'youtube', 'pdf', 'countdown'], element.type)"
							  				@click="appendTag(index, 'email_subject')">{{element.label}}</button>

							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'submission_ref_for_email_subject')">
							  					{{trans('messages.submission_numbering')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
							  		</small>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.body')}}: 
								<span class="error">*</span></label>

								<div class="col-sm-10">
									<textarea class="submission_email_body" 
									rows="5" 
									:required="emailConfig.email.enable"
									name="emailConfig.email.body"
									:placeholder="trans('messages.email_body')"
									v-model="emailConfig.email.body"></textarea>

									<small class="form-text text-muted">
							  			{{trans('messages.click_to_add_tags')}}:
							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				v-for="(element, index) in selected_elements"
							  				v-if="!_.includes(['heading','hr', 'html_text', 'signature', 'file_upload', 'page_break', 'iframe', 'youtube', 'pdf', 'countdown'], element.type)"
							  				@click="appendTag(index, 'email_body')">{{element.label}}</button>

							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'submission_ref_for_email_body')">
							  					{{trans('messages.submission_numbering')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
										<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'ref_num_qr_code_for_email_body')">
							  					{{trans('messages.qr_code_for_ref_num')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
										<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'ref_num_bar_code_for_email_body')">
							  					{{trans('messages.bar_code_for_ref_num')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
							  		</small>
								</div>
							</div>
							<div class="form-group row">
							    <label class="col-sm-2 col-form-label">
							    	{{trans('messages.pdf')}}
							    </label>
							    <div class="col-sm-10">
							      	<div class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="email_attach_pdf" value="1" name="attach_pdf" v-model="emailConfig.email.attach_pdf">
									  	<label class="custom-control-label" for="email_attach_pdf">
									  		{{trans('messages.attach_pdf')}}
									  	</label>
									  	<i class="fas fa-info-circle text-info"  data-toggle="tooltip" data-html="true" :title="trans('messages.pdf_of_submitted_data_will_be_attached_to_mail')"></i>
									</div>
							    </div>
							</div>
						</div>
				        </div>
    				</div>
  				</div>

  				<div class="card">
					<div class="card-header bg-success" id="headingEmailResponse">
						<h2 class="mb-0">
							<button class="btn btn-link text-white" type="button" data-toggle="collapse" data-target="#collapseEmailResponse" aria-expanded="true" aria-controls="collapseEmailResponse">
							{{trans('messages.auto_response_settings')}}: 
							</button>
						</h2>
					</div>

					<div id="collapseEmailResponse" class="collapse" aria-labelledby="headingEmailResponse" data-parent="#accordionEmail">
						<div class="card-body">

							<div class="custom-control custom-checkbox">
								<input type="checkbox" 
									class="custom-control-input"
									id="enable_auto_response"
									@change="replyToggle()"
									v-model="emailConfig.auto_response.is_enable"
									value="1">
								<label class="custom-control-label" for="enable_auto_response">
									{{trans('messages.enable_auto_response')}}
								</label>
							</div>

							<div v-show="emailConfig.auto_response.is_enable">
				        	<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.from')}}
									<span class="error">*</span>
								</label>
								<div class="col-sm-10">
							  		<input type="email" 
							  			:required="emailConfig.auto_response.is_enable"
							  			class="form-control"
							  			:placeholder="trans('messages.from_email')"
							  			name="emailConfig.auto_response.from"
							  			v-model="emailConfig.auto_response.from">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.to')}}
									<span class="error">*</span>
								</label>

								<div class="col-sm-10">
									<select class="form-control"
										:required="emailConfig.auto_response.is_enable"
										name="emailConfig.auto_response.to"
										v-model="emailConfig.auto_response.to">
										<option :value="element.name" 
											v-if="_.includes(['text', 'email'], element.type)"
											v-for="element in selected_elements">{{element.label}}</option>
									</select>

								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.subject')}}
									 <span class="error">*</span>
								</label>

								<div class="col-sm-10">
							  		<input type="text" 
							  			:required="emailConfig.auto_response.is_enable"
							  			name="emailConfig.auto_response.is_enable"
							  			class="form-control"
							  			:placeholder="trans('messages.email_subject')"
							  			v-model="emailConfig.auto_response.subject">

							  		<small class="form-text text-muted">
							  			{{trans('messages.click_to_add_tags')}}: 
							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				v-for="(element, index) in selected_elements"
							  				v-if="!_.includes(['heading','hr', 'html_text', 'signature', 'file_upload', 'page_break', 'iframe', 'youtube', 'pdf', 'countdown'], element.type)"
							  				@click="appendTag(index, 'response_subject')">{{element.label}}</button>

							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'submission_ref_for_response_subject')">
							  					{{trans('messages.submission_numbering')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
							  		</small>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-2 col-form-label">
									{{trans('messages.body')}}
									<span class="error">*</span>
								</label>

								<div class="col-sm-10">
									<textarea 
									class="autoresponse_email_body" 
									rows="5" 
									name="emailConfig.auto_response.body"
									:required="emailConfig.auto_response.is_enable"
									v-model="emailConfig.auto_response.body"></textarea>

									<small class="form-text text-muted">
							  			{{trans('messages.click_to_add_tags')}}: 
							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				v-for="(element, index) in selected_elements"
							  				v-if="!_.includes(['heading','hr', 'html_text', 'signature', 'file_upload', 'page_break', 'iframe', 'youtube', 'pdf', 'countdown'], element.type)"
							  				@click="appendTag(index, 'response_body')">{{element.label}}</button>

							  			<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'submission_ref_for_response_body')">
							  					{{trans('messages.submission_numbering')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
										<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'ref_num_qr_code_for_response_body')">
							  					{{trans('messages.qr_code_for_ref_num')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
										<button type="button" 
							  				class="btn btn-primary btn-sm xs mr-2 mt-2"
							  				@click="appendTag(1, 'ref_num_bar_code_for_response_body')">
							  					{{trans('messages.bar_code_for_ref_num')}}
							  				<i class="fas fa-info-circle"  data-toggle="tooltip" data-html="true" :title="trans('messages.works_if_enabled_in_settings')"></i>
							  			</button>
							  		</small>
								</div>
							</div>

							<div class="form-group row">
							    <label class="col-sm-2 col-form-label">
							    	{{trans('messages.pdf')}}
							    </label>
							    <div class="col-sm-10">
							      	<div class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="auto_response_attach_pdf" value="1" name="auto_response_attach_pdf" v-model="emailConfig.auto_response.attach_pdf">
									  	<label class="custom-control-label" for="auto_response_attach_pdf">
									  		{{trans('messages.attach_pdf')}}
									  	</label>
									  	<i class="fas fa-info-circle text-info"  data-toggle="tooltip" data-html="true" :title="trans('messages.pdf_of_submitted_data_will_be_attached_to_mail')"></i>
									</div>
							    </div>
							</div>

							</div>
				        </div>
    				</div>
  				</div>

  				<div class="card">
					<div class="card-header bg-success" id="headingSMTP">
						<h2 class="mb-0">
							<button class="btn btn-link text-white" type="button" data-toggle="collapse" data-target="#collapseSMTP" aria-expanded="true" aria-controls="collapseSMTP">
							{{trans('messages.smtp_settings')}}: 
							</button>
						</h2>
					</div>

					<div id="collapseSMTP" class="collapse" aria-labelledby="headingSMTP" data-parent="#accordionEmail">
						<div class="card-body">
							<div class="custom-control custom-checkbox">
								<input type="checkbox" 
									class="custom-control-input" 
									id="use_system_smtp"
									v-model="emailConfig.smtp.use_system_smtp"
									value="1">
								<label class="custom-control-label" for="use_system_smtp">
									{{trans('messages.use_settings_smtp')}}
								</label>
							</div>

							<div v-show="!emailConfig.smtp.use_system_smtp">
					        	<div class="form-group row">
									<label class="col-sm-2 col-form-label">
									{{trans('messages.host')}}<span class="error">*</span>
									</label>
									<div class="col-sm-10">
								  		<input type="text" 
								  			name="emailConfig.smtp.host"
								  			:required="!emailConfig.smtp.use_system_smtp"
								  			class="form-control"
								  			v-model="emailConfig.smtp.host">
									</div>
								</div>

								<div class="form-group row">
									<label class="col-sm-2 col-form-label">
										{{trans('messages.port')}}
										 <span class="error">*</span>
									</label>
									<div class="col-sm-10">
								  		<input type="text" 
								  			:required="!emailConfig.smtp.use_system_smtp"
								  			class="form-control"
								  			name="emailConfig.smtp.port"
								  			v-model="emailConfig.smtp.port">
									</div>
								</div>

								<div class="form-group row">
									<label class="col-sm-2 col-form-label">
										{{trans('messages.from_address')}}<span class="error">*</span>
									</label>

									<div class="col-sm-10">
								  		<input type="email" 
								  			:required="!emailConfig.smtp.use_system_smtp"
								  			class="form-control"
								  			name="emailConfig.smtp.from_address"
								  			v-model="emailConfig.smtp.from_address">
									</div>
								</div>

								<div class="form-group row">
									<label class="col-sm-2 col-form-label">
										{{trans('messages.from_name')}}
										 <span class="error">*</span>
									</label>
									<div class="col-sm-10">
								  		<input type="text"
								  			:required="!emailConfig.smtp.use_system_smtp" 
								  			class="form-control"
								  			name="emailConfig.smtp.from_name"
								  			v-model="emailConfig.smtp.from_name">
									</div>
								</div>

								<div class="form-group row">
									<label class="col-sm-2 col-form-label">
										{{trans('messages.encryption')}}
									</label>
									<div class="col-sm-10">
								  		<input type="text" 
								  			class="form-control"
								  			v-model="emailConfig.smtp.encryption">
									</div>
								</div>

								<div class="form-group row">
									<label class="col-sm-2 col-form-label">
										{{trans('messages.username')}}<span class="error">*</span>
									</label>
									<div class="col-sm-10">
								  		<input type="text"
								  			:required="!emailConfig.smtp.use_system_smtp" 
								  			class="form-control"
								  			name="emailConfig.smtp.username"
								  			v-model="emailConfig.smtp.username">
									</div>
								</div>

								<div class="form-group row">
									<label class="col-sm-2 col-form-label">{{trans('messages.password')}}<span class="error">*</span>
									</label>
									<div class="col-sm-10">
								  		<input type="text" 
								  			class="form-control"
								  			:required="!emailConfig.smtp.use_system_smtp"
								  			name="emailConfig.smtp.password"
								  			v-model="emailConfig.smtp.password">
									</div>
								</div>

								<testSmtpDetails :details="emailConfig.smtp"></testSmtpDetails>
							</div>

				        </div>
    				</div>
  				</div>

			</div>
		</div>
	</div>
</template>
<script>
	import testSmtpDetails from "./TestSmtpDetails";

	export default {
    	props:{
    		emailConfig: Object,
    		selected_elements: Array,
    		settings: Object,
    	},
    	components: {
            testSmtpDetails
        },
    	created(){
    		this.emailToggle();
    		this.replyToggle();

    		if (_.isUndefined(this.emailConfig.email.reply_to_email)) {
    			this.emailConfig.email['reply_to_email'] = '';
            }
    	},
    	computed: {
    		tags: function () {
      			return this.selected_elements;
    		}
    	},
    	methods: {
    		appendTag: function(index, to){
    			if(to == 'email_subject'){
    				this.emailConfig.email.subject += ' __' + this.selected_elements[index].name + '__';
    			} else if(to == 'email_body'){
    				var content = ' __' + this.selected_elements[index].name + '__';

    				this.emailConfig.email.body += content;
    				$('.submission_email_body').summernote('pasteHTML', content);
    			} else if(to == 'response_subject'){
    				this.emailConfig.auto_response.subject += ' __' + this.selected_elements[index].name + '__';
    			}  else if(to == 'response_body'){
    				var content = ' __' + this.selected_elements[index].name + '__';

    				this.emailConfig.auto_response.body += content;
    				$('.autoresponse_email_body').summernote('pasteHTML', content);
    			} else if (to == 'submission_ref_for_email_body') {
    				var content = ' __' + 'submission_ref' + '__';

    				this.emailConfig.email.body += content;
    				$('.submission_email_body').summernote('pasteHTML', content);
    			} else if(to == 'submission_ref_for_response_body'){
    				var content = ' __' + 'submission_ref' + '__';
    				this.emailConfig.auto_response.body += content;
    				$('.autoresponse_email_body').summernote('pasteHTML', content)
    			} else if(to == 'submission_ref_for_email_subject'){
    				this.emailConfig.email.subject += ' __' + 'submission_ref' + '__';
    			} else if(to == 'submission_ref_for_response_subject'){
    				this.emailConfig.auto_response.subject += ' __' + 'submission_ref' + '__';
    			} else if(to == 'ref_num_bar_code_for_response_body'){
					let content = ' __' + 'submission_ref_bar_code' + '__';
    				this.emailConfig.auto_response.body += content;
    				$('.autoresponse_email_body').summernote('pasteHTML', content);
    			} else if(to == 'ref_num_qr_code_for_response_body'){
					let content = ' __' + 'submission_ref_qr_code' + '__';
    				this.emailConfig.auto_response.body += content;
    				$('.autoresponse_email_body').summernote('pasteHTML', content);
    			} else if(to == 'ref_num_bar_code_for_email_body'){
					let content = ' __' + 'submission_ref_bar_code' + '__';
    				this.emailConfig.email.body += content;
    				$('.submission_email_body').summernote('pasteHTML', content);
    			} else if(to == 'ref_num_qr_code_for_email_body'){
    				let content = ' __' + 'submission_ref_qr_code' + '__';
    				this.emailConfig.email.body += content;
    				$('.submission_email_body').summernote('pasteHTML', content);
    			}
    		},
    		emailToggle(){
    			const self = this;
    			if(this.emailConfig.email.enable){
    				setTimeout(function(){
	    				$('.submission_email_body').summernote({
	                    	height: 200,
	                    	placeholder: self.trans('messages.email_body'),
	                    	callbacks: {
		                        onChange: function(contents, editable) {
		                          self.emailConfig.email.body = contents;
		                        }
	                    	}
	                	});
    				}, 200);
    			}
    		},

    		replyToggle(){
    			const self = this;
    			if(this.emailConfig.auto_response.is_enable){
    				setTimeout(function(){
	    				$('.autoresponse_email_body').summernote({
	    					placeholder: self.trans('messages.email_body'),
                    		height: 200,
                    		callbacks: {
                        		onChange: function(contents, editable) {
                          			self.emailConfig.auto_response.body = contents;
                        		}
                    		}
                		});
    				}, 200);
    			}
    		}
    	}
    }
</script>