<div <?= $smsReminder ?'relative':'' ?> moe>
	<a start show class="py-0 mb-3">{{ $smsReminder ? 'Edit' : 'Add' }}</a>
	<form url="/api/simpleSmsReminder/{{ $smsReminder ? 'update': 'create'}}" class="mcp-theme-1" <?= $smsReminder ? 'right':'' ?>>
		<input type="hidden" name="clientUid" value="{{$patient->uid}}">
		@if($smsReminder)
		<input type="hidden" name="uid" value="{{$smsReminder->uid}}">
		@endif
		<div id="smsReminderForm{{ $smsReminder ? $smsReminder->uid : 'Create' }}" v-cloak>
			<div class="row mb-2">
				<div class="col-5 pr-0">
					<label class="text-sm text-secondary mb-1">To Number</label>
					<input type="text" name="smsNumber" class="form-control form-control-sm" v-model="form.smsNumber" required>
				</div>
			</div>
			<div class="row mb-2">
				<div class="col-5 pr-0">
					<label class="text-sm text-secondary mb-1">Time Zone</label>
					<select name="timeZone" class="form-control form-control-sm" v-model="form.timeZone">
						<option value="EASTERN">Eastern</option>
						<option value="CENTRAL">Central</option>
						<option value="MOUNTAIN">Mountain</option>
						<option value="PACIFIC">Pacific</option>
						<option value="ALASKA">Alaska</option>
						<option value="HAWAII">Hawaii</option>
						<option value="PUERTO_RICO">Puerto Rico</option>
					</select>
				</div>
			</div>
			<div class="row mb-2">
				<div class="col-12">
					<label class="text-sm text-secondary mb-1">Message</label>
					<textarea name="message" class="form-control form-control-sm" v-model="form.message"></textarea>
				</div>
			</div>
			<div class="row">
				<div class="col-12 my-3 text-nowrap">
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="radio" name="sameTimeOrDifferentTimes" id="sameTimeOrDifferentTimes__Daily" value="SAME_TIME_DAILY" v-model="form.sameTimeOrDifferentTimes" required>
						<label class="form-check-label" for="sameTimeOrDifferentTimes__Daily">Same Time Daily</label>
					</div>
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="radio" name="sameTimeOrDifferentTimes" id="sameTimeOrDifferentTimes__SpecificDays" value="SAME_TIME_SPECIFIC_DAYS" v-model="form.sameTimeOrDifferentTimes" required>
						<label class="form-check-label" for="sameTimeOrDifferentTimes__SpecificDays">Same Time on Specific Days</label>
					</div>
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="radio" name="sameTimeOrDifferentTimes" id="sameTimeOrDifferentTimes__Custom" value="CUSTOM" v-model="form.sameTimeOrDifferentTimes" required>
						<label class="form-check-label" for="sameTimeOrDifferentTimes__Custom">Custom</label>
					</div>
				</div>
			</div>

			<div v-if="form.sameTimeOrDifferentTimes == 'SAME_TIME_DAILY' || form.sameTimeOrDifferentTimes == 'SAME_TIME_SPECIFIC_DAYS'" class="row">
				<div class="col-12">
					<div class="form-group">
						<label class="text-sm text-secondary mb-1">Time<sup class="text-danger">*</sup></label>
						<input type="time" class="form-control" name="sameTimeOfDay" v-model="form.sameTimeOfDay" required />
					</div>
				</div>
			</div>

			<div v-if="form.sameTimeOrDifferentTimes == 'SAME_TIME_SPECIFIC_DAYS' || form.sameTimeOrDifferentTimes == 'CUSTOM'" class="row">
				<div class="col-12">
					<table class="table table-sm table-bordered">
						<tbody>
							<tr>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnMonday" v-model="form.isSameTimeOnMonday" />
										<span class="font-weight-bold">Mon</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnMonday" type="time" class="form-control" name="timeOfDayMonday" v-model="form.timeOfDayMonday" :required="form.isSameTimeOnMonday" />
								</td>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnTuesday" v-model="form.isSameTimeOnTuesday" />
										<span class="font-weight-bold">Tue</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnTuesday" type="time" class="form-control" name="timeOfDayTuesday" v-model="form.timeOfDayTuesday" :required="form.isSameTimeOnTuesday" />
								</td>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnWednesday" v-model="form.isSameTimeOnWednesday" />
										<span class="font-weight-bold">Wed</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnWednesday" type="time" class="form-control" name="timeOfDayWednesday" v-model="form.timeOfDayWednesday" :required="form.isSameTimeOnWednesday" />
								</td>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnThursday" v-model="form.isSameTimeOnThursday" />
										<span class="font-weight-bold">Thu</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnThursday" type="time" class="form-control" name="timeOfDayThursday" v-model="form.timeOfDayThursday" :required="form.isSameTimeOnThursday" />
								</td>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnFriday" v-model="form.isSameTimeOnFriday" />
										<span class="font-weight-bold">Fri</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnFriday" type="time" class="form-control" name="timeOfDayFriday" v-model="form.timeOfDayFriday" :required="form.isSameTimeOnFriday" />
								</td>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnSaturday" v-model="form.isSameTimeOnSaturday" />
										<span class="font-weight-bold">Sat</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnSaturday" type="time" class="form-control" name="timeOfDaySaturday" v-model="form.timeOfDaySaturday" :required="form.isSameTimeOnSaturday" />
								</td>
								<td>
									<div class="d-flex align-items-center mb-0">
										<input type="checkbox" class="mr-1" style="margin-top:-1px;" name="isSameTimeOnSunday" v-model="form.isSameTimeOnSunday" />
										<span class="font-weight-bold">Sun</span>
									</div>
									<input v-if="form.sameTimeOrDifferentTimes == 'CUSTOM'" :disabled="!form.isSameTimeOnSunday" type="time" class="form-control" name="timeOfDaySunday" v-model="form.timeOfDaySunday" :required="form.isSameTimeOnSunday" />
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="mt-3">
			<button submit class="btn btn-sm btn-primary mr-1">Submit</button>
			<button cancel class="btn btn-sm btn-default border">Cancel</button>
		</div>
	</form>
</div>

<script>
	var smsReminderForm = new Vue({
		el: '#smsReminderForm{{ $smsReminder ? $smsReminder->uid : "Create" }}',
		data: {
			form: {
				smsNumber: "",
				timeZone: "EASTERN",
				message: "",
				sameTimeOrDifferentTimes: "",
				sameTimeOfDay: "",
				isSameTimeOnMonday: null,
				isSameTimeOnTuesday: null,
				isSameTimeOnWednesday: null,
				isSameTimeOnThursday: null,
				isSameTimeOnFriday: null,
				isSameTimeOnSaturday: null,
				isSameTimeOnSunday: null,

				timeOfDayMonday: null,
				timeOfDayTuesday: null,
				timeOfDayWednesday: null,
				timeOfDayThursday: null,
				timeOfDayFriday: null,
				timeOfDaySaturday: null,
				timeOfDaySunday: null,

			},
			smsReminder:<?= json_encode($smsReminder) ?>
		},
		methods: {
			initDefaultData: function(){
				if(!this.smsReminder) return;
				this.form.smsNumber = this.smsReminder.sms_number;
				this.form.timeZone = this.smsReminder.time_zone;
				this.form.message = this.smsReminder.message;
				this.form.sameTimeOrDifferentTimes = this.smsReminder.same_time_or_different_times;
				this.form.sameTimeOfDay = this.smsReminder.same_time_of_day ? this.smsReminder.same_time_of_day.substring(0,5) : null;
				this.form.isSameTimeOnMonday = this.smsReminder.is_same_time_on_monday;
				this.form.isSameTimeOnTuesday = this.smsReminder.is_same_time_on_tuesday;
				this.form.isSameTimeOnWednesday = this.smsReminder.is_same_time_on_wednesday;
				this.form.isSameTimeOnThursday = this.smsReminder.is_same_time_on_thursday;
				this.form.isSameTimeOnFriday = this.smsReminder.is_same_time_on_friday;
				this.form.isSameTimeOnSaturday = this.smsReminder.is_same_time_on_saturday;
				this.form.isSameTimeOnSunday = this.smsReminder.is_same_time_on_sunday;
				this.form.timeOfDayMonday = this.smsReminder.time_of_day_monday ? this.smsReminder.time_of_day_monday.substring(0,5) : null;
				this.form.timeOfDayTuesday = this.smsReminder.time_of_day_tuesday ? this.smsReminder.time_of_day_tuesday.substring(0,5) : null;
				this.form.timeOfDayWednesday = this.smsReminder.time_of_day_wednesday ? this.smsReminder.time_of_day_wednesday.substring(0,5) : null;
				this.form.timeOfDayThursday = this.smsReminder.time_of_day_thursday ? this.smsReminder.time_of_day_thursday.substring(0,5) : null;
				this.form.timeOfDayFriday = this.smsReminder.time_of_day_friday ? this.smsReminder.time_of_day_friday.substring(0,5) : null;
				this.form.timeOfDaySaturday = this.smsReminder.time_of_day_saturday ? this.smsReminder.time_of_day_saturday.substring(0,5) : null;
				this.form.timeOfDaySunday = this.smsReminder.time_of_day_sunday ? this.smsReminder.time_of_day_sunday.substring(0,5) : null;

				console.log(this.smsReminder);
			},
			init: function() {
				this.initDefaultData();
			}
		},
		mounted: function() {
			this.init();
		}
	});
</script>