@push('pageJs')
<script type="text/javascript">
	var multiple_interviews = "{{route('admin.applicants.multipleInterviews',['id' => $job->id,'panel' => Session::get('panel') ])}}";
	var preview_interview_schedule_mail = "{{route('admin.applicants.previewInterviewSchedule',['id' => $job->id,'panel' => Session::get('panel') ])}}";

	var addInterview = {

		props: ['candidates'],

		template: '#addMultipleInterviewTemplate',

		data() {
			return {
				clientContacts: clientContacts,
				error: '',
			}
		},

		mounted: function() {

		},

		methods: {

			submitForm() {

				let vm = this;
				vm.$parent.isLoading = true;
				axios.post(multiple_interviews, {
						data: $('#frmMultipleInterviews').serialize()
					})
					.then(function(response) {
						if (response.data.errors) {
							vm.error = response.data.errors;
						} else {
							vm.$emit('close');
						}
						vm.$parent.isLoading = false;
					})
					.catch(function(error) {
						vm.$parent.isLoading = false;
						NProgress.done();
					});
			},

			previewMail() {
				$('#frmMultipleInterviews').validate({
					rules: {
						"data[*][date]": {
							"laravelValidation": [
								["Required", [], "Date is required.", true]
							]
						},
						'data[*][time]': {
							"laravelValidation": [
								["Required", [], "Time is required.", true]
							]
						},
						'data[*][type]': {
							"laravelValidation": [
								["Required", [], "Type is required.", true]
							]
						},
						'data[*][location]': {
							required: function(element) {
								return document.getElementById('data[' + $(element).data('id') + '][type]').value == "Face To Face";
							}
						},
						'data[*][skype]': {
							required: function(element) {
								return document.getElementById('data[' + $(element).data('id') + '][type]').value == "Skype";
							}
						},
						'data[*][telephone]': {
							required: function(element) {
								return document.getElementById('data[' + $(element).data('id') + '][type]').value == "Telephone";
							}
						},
						'client_contact[]': {
							required: true
						},
						need_feedback_from: {
							required: true
						}
					},
					messages: {
						'data[*][location]': {
							required: 'Location is required.'
						},
						'data[*][skype]': {
							required: 'Virtual is required.'
						},
						'data[*][telephone]': {
							required: 'Telephone is required.'
						},
						'client_contact[]': {
							required: 'Client contact is required.'
						},
						need_feedback_from: {
							required: 'Need feedback form is required.'
						}
					}
				});

				if ($('#frmMultipleInterviews').valid()) {
					vm = this;
					vm.$parent.isLoading = true;

					axios.post(preview_interview_schedule_mail, {
							data: $('#frmMultipleInterviews').serialize()
						})
						.then(function(response) {

							vm.$parent.previewInterviewScheduleClientContact = response.data.clientContact;
							vm.$parent.apreviewInterviewScheduleCandidates = response.data.candidates;
							vm.$parent.previewInterviewScheduleMailJob = response.data.recruiter;

                            setTimeout(function() {
                                $('#previewInterviewScheduleMail').modal({
                                    show: true,
                                    focus: false // Disable focus handling to prevent the infinite loop
                                });
                            }, 0);

							vm.$parent.isLoading = false;
						})
						.catch(function(error) {
							vm.$parent.isLoading = false;
							NProgress.done();
						});
				} else {

					$.each($('.candidateBlockAddInterview'), function(index, value) {
						if ($(value).find('.invalid-feedback').text().length) {
							$('#add_interview_error' + $(this).attr('data-candidate-id')).show();
						}
					});
					Snackbar.show({
						pos: 'bottom-right',
						text: 'It looks like some mandatory data is missed to fill! Check entire form once again for validation message(s).',
						actionText: 'Okay'
					});
				}
			}

		}
	};

	function initAddMultipleInterview() {
		var today = new Date();
		var $date = $('.dateselect').datepicker({
			autoHide: true,
			format: 'dd/mm/yyyy',
			zIndex: 2048,
			startDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
		});

		$('.time_picker').timepicker({
			'timeFormat': 'H:i:s',
			'scrollDefault': 'now'
		});

		$(".type").on('change', function() {

			if ($(this).val() == 'Face To Face') {
				$(this).parents('.row').find('.skype-block').hide();
				$(this).parents('.row').find('.telephone-block').hide();
				$(this).parents('.row').find('.inhouse-block').show();
			} else if ($(this).val() == 'Skype') {
				$(this).parents('.row').find('.skype-block').show();
				$(this).parents('.row').find('.telephone-block').hide();
				$(this).parents('.row').find('.inhouse-block').hide();
			} else if ($(this).val() == 'Telephone') {
				$(this).parents('.row').find('.skype-block').hide();
				$(this).parents('.row').find('.telephone-block').show();
				$(this).parents('.row').find('.inhouse-block').hide();
			}
		});

	}
</script>
<template id="addMultipleInterviewTemplate">
	<div class="modal-mask">
		<div class="modal-wrapper">

			<div class="modal right show fade-in" id="addMultipleInterviewsModal" tabindex="-1" role="dialog" aria-labelledby="add-interview">

				<div class="modal-dialog modal-lg" role="document">

					<div class="modal-content">

						<div class="modal-header">
							<h4 class="modal-title" id="add-interview">Set up Interviews</h4>
							<button type="button" class="close" @click="$emit('close')"><span aria-hidden="true">&times;</span></button>
						</div>

						<div class="modal-body px-0 pt-0">

							<div id="accordionAddInterviewCandidate">

								<form class="form" id="frmMultipleInterviews">


									<div class="card border-0 candidateBlockAddInterview" v-for="(item,index) in candidates" :data-candidate-id="item.id">

										<input type="hidden" :name="'data['+item.id+'][interviewId]'" :value="item.interviews[item.interviews.length-1].id">
										<input type="hidden" :name="'data['+item.id+'][interviewStatus]'" :value="item.interviews[item.interviews.length-1].status">
										<input type="hidden" :name="'data['+item.id+'][candidateId]'" :value="item.id">

										<div class="card-header light-bg">
											<a class="card-link small-font bold" data-toggle="collapse" :href="'#addInterviewCandidate'+index">
												<div class="media">
													<img :src="item.profile_image_formatted" alt="" class="mr-2 rounded-circle my-auto" style="width:30px;">
													<div class="media-body my-auto">
														<h4 class="modal-title small-font bold" id="send-documents">
															@{{ item.first_name}} @{{ item.last_name}}
															<span class="extrasmall-font orange normal ml-2 hidden" :id="'add_interview_error'+item.id">Some of the fields needs to be filled in this section!</span>
														</h4>
													</div>
												</div>
											</a>
										</div>

										<div :id="'addInterviewCandidate'+index" class="collapse" :class="{'show' : !index }" data-parent="#accordionAddInterviewCandidate">

											<div class="card-body py-2">

												<div class="row">

													<div class="col-md-6">
														<div class="form-group date">
															<label class="control-label">{{ @trans('job.interview_date') }}<span class="required">*</span></label>
															<div class="input-group date">
																<input type="text" class="form-control dateselect bg-white" :id="'data['+item.id+'][date]'" :name="'data['+item.id+'][date]'" :value="item.interviews[item.interviews.length-1].status == 'draft_interview' || item.interviews[item.interviews.length-1].status == 'pending' ? item.interviews[item.interviews.length-1].interview_date_formatted : ''" placeholder="Select Date" readonly>
																<div class="input-group-addon">
																	<span class="material-icons">{{ @trans('job.date_range') }}</span>
																</div>
															</div>
														</div>
													</div>

													<div class="col-md-6">
														<div class="form-group time">
															<label class="control-label">{{ @trans('job.interview_time') }}<span class="required">*</span></label>
															<div class="input-group time">
																<input placeholder="Selected time" type="text" :id="'data['+item.id+'][time]'" :name="'data['+item.id+'][time]'" class="form-control time_picker" :value="item.interviews[item.interviews.length-1].status == 'draft_interview' || item.interviews[item.interviews.length-1].status == 'pending' ? item.interviews[item.interviews.length-1].interview_time_formatted : ''">
																<div class="input-group-addon">
																	<span class="material-icons">{{ @trans('job.access_time') }}</span>
																</div>
															</div>
														</div>
													</div>

													<div class="col-md-6">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="wallet">{{ @trans('job.interview_type') }}<span class="required">*</span></label>
															<select :id="'data['+item.id+'][type]'" :name="'data['+item.id+'][type]'" class="form-control type">
																@foreach($interviewTypes as $interviewType)
																<option value="{{ $interviewType->name }}" :selected="item.interviews[item.interviews.length-1].type == '{{ $interviewType->name}}'">
																	{{ ($interviewType->name == 'Skype') ? 'Virtual' : $interviewType->name}}
																</option>
																@endforeach
															</select>
														</div>
													</div>

													<div class="col-md-12 inhouse-block" :class="{'hidden':!item.interviews[item.interviews.length-1].location}">
														<div class="form-group">
															<label class="control-label">{{ @trans('job.sreening_add') }}<span class="required">*</span>
															</label>
															<input :id="'data['+item.id+'][location]'" :name="'data['+item.id+'][location]'" :data-id="item.id" placeholder="Enter address here" type="text" class="form-control candidate_location" :value="item.interviews[item.interviews.length-1].status == 'draft_interview' ||  item.interviews[item.interviews.length-1].status == 'pending' ? item.interviews[item.interviews.length-1].location : ''" />
														</div>
													</div>
													<div class="col-md-12 skype-block" :class="{'hidden':!item.interviews[item.interviews.length-1].skype}">
														<div class="form-group">
															<label class="control-label">{{ @trans('job.virtual') }}<span class="required">*</span></label>
															<input :id="'data['+item.id+'][skype]'" :name="'data['+item.id+'][skype]'" :data-id="item.id" placeholder="Enter virtual address here" type="text" class="form-control" :value="item.interviews[item.interviews.length-1].status=='draft_interview' || item.interviews[item.interviews.length-1].status=='pending' ? item.interviews[item.interviews.length-1].skype : ''" />
														</div>
													</div>
													<div class="col-md-12 telephone-block" :class="{'hidden':!item.interviews[item.interviews.length-1].telephone}">
														<div class="form-group">
															<label class="control-label">{{ @trans('job.telephone') }}<span class="required">*</span></label>
															<input :id="'data['+item.id+'][telephone]'" :name="'data['+item.id+'][telephone]'" :data-id="item.id" placeholder="Enter telephone here" type="text" class="form-control" :value="item.interviews[item.interviews.length-1].status == 'draft_interview' || item.interviews[item.interviews.length-1].status == 'pending'  ? item.interviews[item.interviews.length-1].telephone : ''" />
														</div>
													</div>

													<div class="col-md-6">
														<div class="form-group">
															<label class="control-label">Note for Candidate</label>
															<template v-if="item.interviews[item.interviews.length-1].status == 'draft_interview' || item.interviews[item.interviews.length-1].status == 'pending'">
																<textarea class="form-control" :id="'data['+item.id+'][location_candidate]'" :name="'data['+item.id+'][location_candidate]'" placeholder="Type here">@{{ item.interviews[item.interviews.length-1].notes_for_candidate }}</textarea>
															</template>
															<template v-if="item.interviews[item.interviews.length-1].status != 'draft_interview' && item.interviews[item.interviews.length-1].status != 'pending'">
																<textarea class="form-control" :id="'data['+item.id+'][location_candidate]'" :name="'data['+item.id+'][location_candidate]'" placeholder="Type here"></textarea>
															</template>
														</div>
													</div>

													<div class="col-md-6">
														<div class="form-group">
															<label class="control-label">{{ @trans('job.note_for_client') }}</label>
															<template v-if="item.interviews[item.interviews.length-1].status == 'draft_interview' || item.interviews[item.interviews.length-1].status == 'pending'">
																<textarea class="form-control" :id="'data['+item.id+'][additional_note]'" :name="'data['+item.id+'][additional_note]'" placeholder="Type here">@{{ item.interviews[item.interviews.length-1].notes_for_client }}</textarea>
															</template>
															<template v-if="item.interviews[item.interviews.length-1].status != 'draft_interview' && item.interviews[item.interviews.length-1].status != 'pending'">
																<textarea class="form-control" :id="'data['+item.id+'][additional_note]'" :name="'data['+item.id+'][additional_note]'" placeholder="Type here"></textarea>
															</template>
														</div>
													</div>

												</div>

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

									<hr class="hr mt-0">

									<div class="card-body py-2">

										<div class="form-group">
											<label class="control-label">{{ @trans('job.send_to') }}<span class="required">*</span></label>
											<select-2 :options="clientContacts" multiple=true name="client_contact[]">
											</select-2>
											<div class="invalid-feedback mt-0" v-if="error['client_contact']">
												@{{ error['client_contact'] }}</div>
										</div>

										<div class="form-group">
											<label class="control-label">{{ @trans('job.cc') }}</label>
											<select-2 :options="clientContacts" multiple=true name="client_contact_cc[]">
											</select-2>
										</div>

										<div class="form-group mt-3 select btm-arrow">
											<label class="control-label">{{ @trans('job.need_feedback_from') }} <span class="required">*</span></label>
											<select class="form-control" name="need_feedback_from">
												<option value="" hidden>{{ @trans('job.select') }}</option>
												@foreach($companyContacts as $contact)
												<option value="{{ $contact->id }}">{{ $contact->first_name }}
													{{ $contact->last_name }}
												</option>
												@endforeach
											</select>
											<div class="invalid-feedback mt-0" v-if="error['need_feedback_from']">
												@{{ error['need_feedback_from'] }}</div>
										</div>

										<a href="javascript:void(0)" class="btn btn-em mb-5" @click="previewMail">{{ trans('job.preview_email') }} test</a>

									</div>

								</form>



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

			</div>

		</div>
	</div>
</template>
@endpush

<add-multiple-interviews v-if="showMultipleInterviewsModal" @close="closeMultipleInterviewModal" :candidates="newSelectedCandidates" ref="addInterview"></add-multiple-interviews>