{ % extends "pages/calendar/layouts/_layout.html" %
}

{ % set pageTitle = "Month" %
} { % set page = "month" %
}

{ % block content %
}

{#Acquire URL segments#
} { % set seg1 = craft.request.segment(3) %
} { % set seg2 = craft.request.segment(4) %
} { % set seg3 = craft.request.segment(5) %
} { % set seg4 = craft.request.segment(6) %
} { % set seg5 = craft.request.segment(7) %
}

{ % set targetDate = "today" %
} { % set calendarHandle = null %
} { %
    if seg2 == "calendar" %
} { % set calendarHandle = seg3 %
} { %
    if seg4 %
} { % set targetDate = seg4~"-"~seg5~"-01" %
} { % endif %
} { % elseif seg2 is not empty %
} { % set targetDate = seg2~"-"~seg3~"-01" %
} { % endif %
}

{ %
    if seg2 == "calendar" %
} { % set calendar = craft.calendar.calendar({
        handle: seg3
    }) %
} { % endif %
}

< div id = "month_calendar" > { % set month = craft.calendar.month({
        date: targetDate,
        calendar: calendarHandle
    }) %
}

< table id = "month_calendar_outer" > < thead > < tr id = "month_year" > < th class = "left" > < ul class = "pager" > < li > < a href = "{{ siteUrl }}pages/calendar/month/{{ seg2 == "
calendar " ? "
calendar / "~seg3~" / " }}{{ month.previousDate.format('Y/m') }}" > & larr; {
    {
        month.previousDate.format('F')
    }
} < /a>
																</li > < /ul>
												</th > < th class = "center"
colspan = "3" > < h3 > { % include "pages/calendar/layouts/_month_heading.html"
    with {
        month: month
    }
    only %
} & nbsp; {# < span class = "label {{ month.eventCount ? "
    label - warning " : "
    label -
    default " }}" > {
        {
            month.eventCount
        }
    }
    event {
        {
            month.eventCount > 1 or month.eventCount == 0 ? "s"
        }
    } < /span> #}
														</h3 > < /th>
												<th class="right">
														<ul class="pager">
																<li>
																		<a href="{{ siteUrl }}pages/calendar / month / {
        {
            seg2 == "calendar" ? "calendar/"~seg3~"/"
        }
    } {
        {
            month.nextDate.format('Y/m')
        }
    }
    ">
																				{{ month.nextDate.format('F') }} &rarr;
																		</a>
																</li>
														</ul>
												</th>
										</tr>
										<tr>
												<td colspan="
    5 ">
														<table id="
    month_calendar_inner " class="
    table table - bordered ">
																<thead>
																<tr id="
    days_of_week " class="
    active ">
																		{% for day in month|first %}
																				<th class="
    day_of_week ">
																						{{ day.date.format('l') }}
																				</th>
																		{% endfor %}
																</tr>
																</thead>
																<tbody>
																{% for week in month %}
																		<tr>
																				{% for day in week %}
																						{% if month.containsDate(day.date) %}
																						<td class="
    day_cell {
        {
            day.date.isToday ? " today"
        }
    }
    ">
																								<div class="
    date {
        {
            day.eventCount ? " has_events"
        }
    }
    ">
																										{% if day.date.format('c') > now|date('c') %}
																												<a class="
    book - today " id="#bookit {
        {
            day.date.format('Y-m-d')
        }
    }
    " href="#bookitmodal " role="
    button " class="
    btn btn - large btn - primary " data-toggle="
    modal " data-title=" {
        {
            day.date.format('Y-m-d')
        }
    }
    ">
																														Reserve
																												</a>
																										{% endif %}
																										<a class="
    num " href=" {
        {
            siteUrl
        }
    }
    pages / calendar / day / {
        {
            seg2 == 'calendar' ? "calendar/"~seg3~"/"
        }
    } {
        {
            day.date.format('Y/m/d')
        }
    }
    ">
																												{{ day.date.format('j') }}
																										</a>
																								</div>
																						{% else %}
																								<td class="
    day_cell out_of_range ">
																								<div class="
    date ">
																												<span class="
    num ">
																														{{ day.date.format('j') }}
																												</span>
																								</div>
																						{% endif %}

																						{% for event in day.events %}
																								{% include "
    pages / calendar / layouts / _event.html " %}
																						{% endfor %}
																						</td>
																				{% endfor %}
																		</tr>
																{% endfor %}
																</tbody>
														</table>
												</td>
										</tr>
										</tbody>
								</table>
						</div>
						{% import 'charge/_includes/macros/forms' as forms %}
						{% import 'charge/_includes/macros/stripe' as stripe %}
						{% set dateFormat = craft.i18n.localeData.dateFormatter.datepickerPhpFormat %}
						{% set timeFormat = craft.i18n.localeData.dateFormatter.timepickerPhpFormat %}
						{% set dateFormat = dateFormat|replace('n', 'm')|replace('j', 'd') %}
						{% set timeFormat = timeFormat|replace('g', 'h')|replace('i', 'mm')|replace('A', 'tt') %}
						{% set eventId = "
    new " %}
						{% set event = craft.calendar.event("
    new ", {
								loadOccurrences: false
						}) %}
						{% set groups = [
								'floatingDesks','permanentDesk1','permanentDesk10','permanentDesk11','permanentDesk12','permanentDesk13','permanentDesk14','permanentDesk15','permanentDesk16','permanentDesk2','permanentDesk3','permanentDesk4','permanentDesk5','permanentDesk6','permanentDesk7','permanentDesk8','permanentDesk9','privateOffice220','privateOffice221','privateOffice230','privateOffice231','privateOffice232','privateOffice233','privateOffice234', 'tenants'
						] %}
						{% set show = false %}
						{% for group in groups %}
								{% if currentUser.isInGroup(group) %}
										{% set show = true %}
								{% endif %}
						{% endfor %}

										<div id="
    bookitmodal " class="
    modal fade ">
												<div class="
    modal - dialog ">
														<div class="
    modal - content ">
																<div class="
    modal - header ">
																		<button type="
    button " class="
    close " data-dismiss="
    modal " aria-hidden="
    true ">&times;</button>
																		<h4 class="
    modal - title ">New Booking On {{ day.date.format('Y/m/d') }}</h4>
																</div>
																<div class="
    modal - body ">
																		{% if show == true %}
																				<form class="
    form - horizontal " method="
    post ">
																						<input type="
    hidden " name="
    action " value="
    calendar / events / saveEvent " />
																						<input type="
    hidden " name="
    redirect " value=" {
        {
            siteUrl
        }
    }
    conference - booked / event / {
        id
    }
    " />
																						<input type="
    hidden " name=" {
        {
            craft.config.csrfTokenName
        }
    }
    " value=" {
        {
            craft.request.csrfToken
        }
    }
    " />
																						<input type="
    hidden " name="
    eventId " value=" {
        {
            event.id
        }
    }
    " />
																						<input type="
    hidden " name="
    slug " value=" {
        {
            event.slug
        }
    }
    " />
																						<input type="
    hidden " name="
    fields[location]" id="
    location " value="
    Backyard On Blake Conference Room " />
																						{{ getCsrfInput() }}
																								<div class="
    columns small - 8 small - offset - 2 end ">
																								<h4>Booking Details</h4>
																								{% if errors is defined %}
																										<div class="
    form - group ">
																												<div class="
    col - sm - 5 col - sm - offset - 2 ">
																														{% for fieldErrors in errors %}
																																{% for error in fieldErrors %}
																																		<div style="
    color: darkred;
    ">&middot; {{ error }}</div>
																																{% endfor %}
																														{% endfor %}
																												</div>
																										</div>
																								{% endif %}
																								<div class="
    form - group hidden ">
																										<label class="
    control - label ">Name</label>
																										<div class="
    ">
																												<input type="
    text "
																														name="
    title "
																														value=" {
        {
            currentUser.fullName
        }
    }
    "
																														placeholder="
    Name "
																														class="
    form - control " 
																												/>
																										</div>
																								</div>
																								{# SELECT THE CALENDAR #}
																								<input type="
    hidden " name="
    calendarEvent[calendarId]" class="
    form - control " value="
    2 "/>
																								{# SELECT START DATE/TIME #}
																								<div class="
    form - group ">
																										<div class="
    col - sm - 10 ">
																												<div class="
    row ">
																														{# SELECT START DATE #}
																														<div class="
    col - sm - 6 columns hidden ">
																																<label class="
    control - label ">Booking Start Date</label>
																																<input type="
    text "
																																		name="
    calendarEvent[startDate][date]"
																																		value=" {
        {
            event.startDate.format(dateFormat) |
            default
        }
    }
    "
																																		placeholder=" {
        {
            dateFormat
        }
    }
    "
																																		class="
    form - control date - picker "
																																		id="
    startdate "
																																/>
																														</div>
																														{# SELECT START TIME #}
																														<div class="
    col - sm - 6 columns end " data-not-all-day>
																																<label class="
    control - label ">Booking Start Time</label>
																																<input type="
    text "
																																		value=" {
        {
            event.startDate.format('H:i') |
            default
        }
    }
    "
																																		name="
    calendarEvent[startDate][time]"
																																		placeholder=" {
        {
            timeFormat
        }
    }
    "
																																		id="
    starttime "
																																		class="
    form - control time - picker " 
																																/>
																														</div>
																														<div class="
    col - sm - 6 columns end " data-not-all-day>
																																<label class="
    control - label ">Booking End Time</label>
																																{# SELECT END TIME #}
																																<input type="
    text "
																																		value=" {
        {
            event.endTime.format('H:i') |
            default
        }
    }
    "
																																		name="
    calendarEvent[endDate][time]"
																																		id="
    endtime "
																																		class="
    form - control time - picker " 
																																/>
																														</div>
																												</div>
																										</div>
																								</div>
																								{# =============== #}
												{# Repeating rules #}
												{# =============== #}

												<div class="
    form - group ">
													<label class="
    col - sm - 2 col - xs - 3 ">
														{{ "
    Repeating "|t }}
													</label>


													<div class="
    col - sm - 1 col - xs - 2 " id="
    repeats -
    switch -wrapper ">
														<input type="
    hidden " id="
    repeatsInput " name="
    calendarEvent[repeats]" value=" {
        {
            event.repeating
        }
    }
    " />
														<input type="
    checkbox "
																 id="
    repeats "
																 {{ event.repeating ? "
    checked " : "
    " }}
																 data-onstyle="
    success "
																 data-toggle="
    toggle " />
													</div>

													<div class="
    col - sm - 5 col - xs - 7 col - sm - offset - 0 " data-repeats>
														<select name="
    calendarEvent[frequency]"
																id="
    freq - selector "
																class="
    form - control "
																style="
    display: none;
    ">
																<option value="
    SELECT_DATES " selected>
																	Select dates
																</option>
														</select>
													</div>
												</div>

												{# ======================== #}
												{# Frequency-specific rules #}
												{# ======================== #}

												<div class="
    form - group " data-repeats data-show-for="
    select_dates ">
													<label class="
    col - sm - 2 control - label ">
														On select dates
													</label>
													<div class="
    col - sm - 2 ">
														<input type="
    text "
																 name="
    calendarEvent[selectDate]"
																 id="
    select - date - picker "
																 class="
    form - control date - picker select - date - picker "
																 placeholder=" {
        {
            dateFormat
        }
    }
    " />
													</div>
												</div>

												<div class="
    form - group select - dates - list " id="
    select - dates - list " data-repeats data-show-for="
    select_dates ">
													{% for selectDate in event.selectDates %}
														<div class="
    col - sm - 10 col - sm - offset - 2 col - xs - 12 ">
															<input type="
    hidden " name="
    calendarEvent[selectDates][]" value=" {
        {
            selectDate
        }
    }
    " />
															<a href="
    javascript: ;
    "
																 class="
    remove - select - date "
																 style="
    color: darkred;
    text - decoration: none;
    position: relative;
    top: 1px;
    ">
																<span class="
    glyphicon glyphicon - remove "></span>
															</a>
															{{ selectDate|date('l, F j, Y') }}
														</div>
													{% endfor %}
												</div>
																								{# SELECT END DATE/TIME #}
																								{# SELECT END DATE #}
																								<input type="
    hidden "
																										name="
    calendarEvent[endDate][date]" 
																										id="
    enddate "
																								/>
																										<div class="
    form - group ">
																												<div class="
    col - sm - 10 col - sm - offset - 2 col - xs - 12 ">
																														<button type="
    submit " class="
    btn btn - success button ">
																																Submit
																														</button>
																												</div>
																										</div>
																						</div>
																				</form>
																		{% else %}
																				<form class="
    form - horizontal "
																						id="
    charge - form "
																						method="
    post "
																						action="
    "
																						accept-charset="
    UTF - 8 "
																						data-publicKey=" {
        {
            craft.charge.getPublicKey
        }
    }
    "
																				>
																						<input type="
    hidden " name="
    action " value="
    eventPay / createBooking / " />
																						<input type="
    hidden " name="
    redirect " value=" {
        {
            siteUrl
        }
    }
    conference - booked / event / {
        id
    }
    " />
																						<input type="
    hidden " name=" {
        {
            craft.config.csrfTokenName
        }
    }
    " value=" {
        {
            craft.request.csrfToken
        }
    }
    " />
																						<input type="
    hidden " name="
    eventId " value=" {
        {
            event.id
        }
    }
    " />
																						<input type="
    hidden " name="
    slug " value=" {
        {
            event.slug
        }
    }
    " />
																						<input type="
    hidden " name="
    yoda " id="
    yoda " value=" {
        {
            conferenceRoom.conferencePrice
        }
    }
    " />
																						<input type="
    hidden " name="
    fields[location]" id="
    location " value="
    Backyard On Blake Conference Room " />
																						<input type="
    hidden " name="
    meta[type]" value="
    Conference Room "/>
																						{{ getCsrfInput() }}
																								<div class="
    columns small - 8 small - offset - 2 end ">
																								<h4>Booking Details</h4>
																								{% if errors is defined %}
																										<div class="
    form - group ">
																												<div class="
    col - sm - 5 col - sm - offset - 2 ">
																														{% for fieldErrors in errors %}
																																{% for error in fieldErrors %}
																																		<div style="
    color: darkred;
    ">&middot; {{ error }}</div>
																																{% endfor %}
																														{% endfor %}
																												</div>
																										</div>
																								{% endif %}
																								<div class="
    form - group hidden ">
																										<label class="
    control - label ">Name</label>
																										<div class="
    ">
																												<input type="
    text "
																														name="
    title "
																														value=" {
        {
            currentUser.fullName
        }
    }
    "
																														placeholder="
    Name "
																														class="
    form - control " 
																												/>
																										</div>
																								</div>
																								{# SELECT THE CALENDAR #}
																								<input type="
    hidden " name="
    calendarEvent[calendarId]" class="
    form - control " value="
    2 "/>
																								{# SELECT START DATE/TIME #}
																								<div class="
    form - group ">
																										<div class="
    col - sm - 10 ">
																												<div class="
    row ">
																														{# SELECT START DATE #}
																														<div class="
    col - sm - 6 columns hidden ">
																																<label class="
    control - label ">Booking Start Date</label>
																																<input type="
    text "
																																		name="
    calendarEvent[startDate][date]"
																																		value=" {
        {
            event.startDate.format(dateFormat) |
            default
        }
    }
    "
																																		placeholder=" {
        {
            dateFormat
        }
    }
    "
																																		class="
    form - control date - picker "
																																		id="
    startdate "
																																/>
																														</div>
																														{# SELECT START TIME #}
																														<div class="
    col - sm - 6 columns end " data-not-all-day>
																																<label class="
    control - label ">Booking Start Time</label>
																																<input type="
    text "
																																		value=" {
        {
            event.startDate.format('H:i') |
            default
        }
    }
    "
																																		name="
    calendarEvent[startDate][time]"
																																		placeholder=" {
        {
            timeFormat
        }
    }
    "
																																		id="
    starttime "
																																		class="
    form - control time - picker " 
																																/>
																														</div>
																														<div class="
    col - sm - 6 columns end " data-not-all-day>
																																<label class="
    control - label ">Booking End Time</label>
																																{# SELECT END TIME #}
																																<input type="
    text "
																																		value=" {
        {
            event.endTime.format('H:i') |
            default
        }
    }
    "
																																		name="
    calendarEvent[endDate][time]"
																																		id="
    endtime "
																																		class="
    form - control time - picker " 
																																/>
																														</div>
																												</div>
																										</div>
																								</div>
																								{# =============== #}
												{# Repeating rules #}
												{# =============== #}

												<div class="
    form - group ">
													<label class="
    col - sm - 2 col - xs - 3 ">
														{{ "
    Repeating "|t }}
													</label>


													<div class="
    col - sm - 1 col - xs - 2 " id="
    repeats -
    switch -wrapper ">
														<input type="
    hidden " id="
    repeatsInput " name="
    calendarEvent[repeats]" value=" {
        {
            event.repeating
        }
    }
    " />
														<input type="
    checkbox "
																 id="
    repeats "
																 {{ event.repeating ? "
    checked " : "
    " }}
																 data-onstyle="
    success "
																 data-toggle="
    toggle " />
													</div>

													<div class="
    col - sm - 5 col - xs - 7 col - sm - offset - 0 " data-repeats>
														<select name="
    calendarEvent[frequency]"
																id="
    freq - selector "
																class="
    form - control "
																style="
    display: none;
    ">
																<option value="
    SELECT_DATES " selected>
																	Select dates
																</option>
														</select>
													</div>
												</div>

												{# ======================== #}
												{# Frequency-specific rules #}
												{# ======================== #}

												<div class="
    form - group " data-repeats data-show-for="
    select_dates ">
													<label class="
    col - sm - 2 control - label ">
														On select dates
													</label>
													<div class="
    col - sm - 2 ">
														<input type="
    text "
																 name="
    calendarEvent[selectDate]"
																 id="
    select - date - picker "
																 class="
    form - control date - picker select - date - picker "
																 placeholder=" {
        {
            dateFormat
        }
    }
    " />
													</div>
												</div>

												<div class="
    form - group select - dates - list " id="
    select - dates - list " data-repeats data-show-for="
    select_dates ">
													{% for selectDate in event.selectDates %}
														<div class="
    col - sm - 10 col - sm - offset - 2 col - xs - 12 ">
															<input type="
    hidden " name="
    calendarEvent[selectDates][]" value=" {
        {
            selectDate
        }
    }
    " />
															<a href="
    javascript: ;
    "
																 class="
    remove - select - date "
																 style="
    color: darkred;
    text - decoration: none;
    position: relative;
    top: 1px;
    ">
																<span class="
    glyphicon glyphicon - remove "></span>
															</a>
															{{ selectDate|date('l, F j, Y') }}
														</div>
													{% endfor %}
												</div>
																								{# SELECT END DATE/TIME #}
																								{# SELECT END DATE #}
																								<input type="
    hidden "
																										name="
    calendarEvent[endDate][date]" 
																										id="
    enddate "
																								/>
																								<br>
																								<hr>
																										<h4>Customer Details</h4>
																										{% include 'charge/_includes/inputs/customerDetails' %}
																						</div>
																								<div class="
    small - 6 columns ">
																									<br>
																									<hr>
																										<h4>Card Details</h4>
																										{% include 'charge/_includes/inputs/cardDetails' %}
																										{% include 'charge/_includes/inputs/paymentButton' %}
																								</div>
																				</form>
																		{% endif %}
																</div>
																<div class="
    modal - footer ">
																		<button type="
    button " class="
    btn btn -
    default " data-dismiss="
    modal ">Close</button>
																		<button type="
    button " class="
    btn btn - primary ">Save changes</button>
																</div>
														</div>
												</div>
										</div>

{% endblock %}
{% block footerJs %}
<link rel="
    stylesheet " href=" //cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css">
    <
    link rel = "stylesheet"
    href = "//cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" > < link rel = "stylesheet"
    href = "//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" > < link rel = "stylesheet"
    href = "{{ siteUrl }}assets/calendar/css/full-calendar.css" > < script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" > < /script>
<script src="/ / cdnjs.cloudflare.com / ajax / libs / fullcalendar / 2.7.3 / fullcalendar.min.js "></script>
<script src=" //code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
    <
    script src = "//cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js" > < /script>
<script src="/ / cdn.jsdelivr.net / qtip2 / 3.0.3 / jquery.qtip.min.js "></script>
		{% set dateFormat = craft.i18n.localeData.dateFormatter.datepickerPhpFormat %}
		{% set dateFormat = dateFormat|replace('n', 'm')|replace('j', 'd') %}

				{# Acquire URL segments #}
		{% set seg1 = craft.request.segment(3) %}
		{% set seg2 = craft.request.segment(4) %}
		{% set seg3 = craft.request.segment(5) %}
		{% set seg4 = craft.request.segment(6) %}
		{% set seg5 = craft.request.segment(7) %}

		{% set targetDate = "
    today " %}
		{% set calendarHandle = null %}
		{% if seg2 == "
    calendar " %}
				{% set calendarHandle = seg3 %}
				{% if seg4 %}
						{% set targetDate = seg4~" - "~seg5~" - 01 " %}
				{% endif %}
		{% elseif seg2 is not empty %}
				{% set targetDate = seg2~" - "~seg3~" - 01 " %}
		{% endif %}

		{% if seg2 == "
    calendar " %}
				{% set calendar = craft.calendar.calendar({handle: seg3}) %}
		{% endif %}

		{% set month = craft.calendar.month({
				date: targetDate,
				calendar: calendarHandle
		}) %}
		<script>
				$(document).ready(function(){
										$("#bookit ").click(function(){
												$("#bookitmodal ").modal('show');
										});

				});
		</script>

<script type="
    text / javascript ">
$(document).ready(function(){
		$("#bookitmodal ").on('show.bs.modal', function(event){
				// Get button that triggered the modal
				var button = $(event.relatedTarget);
				// Extract value from data-* attributes
				var titleData = button.data('title');
				$(this).find('.modal-title').text('New Booking On ' + titleData);
		});
});
</script>
<script>

	window.csrfTokenName = " {
        {
            craft.config.csrfTokenName | e('js')
        }
    }
    ";
	window.csrfTokenValue = " {
        {
            craft.request.csrfToken | e('js')
        }
    }
    ";
	var calendarTimeFormat = " {
        {
            craft.i18n.timepickerJsFormat
        }
    }
    ";
	// THIS IS WHERE THE AFTER MODAL IS SHOWN CODE STARTS
	$("#bookitmodal ").on('shown.bs.modal', function (e) {
		var $allDay = $(". in #allDay ");
		var $repeats = $(". in #repeats ");
		var $freq = $(". in select#freq - selector ");
		var $toggleSwitch = $(" * [data - toggle -
    switch]");
		var $finalTime = " {
        {
            conferenceRoom.availableEnd | date_modify('-1 hour') | date('g:ia')
        }
    }
    ";
		$(". in #startdate ").datepicker({ 
			minDate: -0,
			altField: ". in #enddate ", 
			altFormat: "
    mm / dd / yy ", 
			beforeShowDay: $.datepicker.noWeekends
		});
		$(". in #starttime ").timepicker({ 
			maxTime: $finalTime, 
			minTime: " {
        {
            conferenceRoom.availableStart | date('g:ia')
        }
    }
    ", 
			step: "
    30 "
		});
		$(". in #endtime ").timepicker({ 
			maxTime: " {
        {
            conferenceRoom.availableEnd | date('g:ia')
        }
    }
    ", 
			minTime: " {
        {
            conferenceRoom.availableStart | date('g:ia')
        }
    }
    ", 
			step: "
    30 "
		});

		// Get button that triggered the modal
		var button = $(e.relatedTarget);
		// Extract value from data-* attributes
		var titleData = button.data('title');

		$(". in #startdate ").val(titleData);
		var joinRequest = $.ajax({
			url: 'https://backyardonblake.com/pages/unavailable.json',
			data: {
				date: $(". in #startdate ").val(),
			},
		});
		joinRequest.success(function(data, status) {
			console.log(data);
			// set $('#starttime') with times returned
			$(". in #starttime ").timepicker('option', { 
				disableTimeRanges: data 
			});
		});
		$(". in #starttime ").on('change', function() { 
			var joinRequest = $.ajax({
				url: 'https://backyardonblake.com/pages/unavailable-end.json',
				data: {
					time: $(this).val(),
					date: $(". in #startdate ").val(),
				},
			});
			joinRequest.success(function(data, status) {
				console.log(data);
				// set $('#endtime') with times returned
				$(". in #endtime ").timepicker('option', { 
					disableTimeRanges: data 
				});
			});
		});
		$(".select - dates - list ").on({
			click: function() {
				$(this).parent().remove();
			}
		}, "
    a.remove - select - date ");
		$toggleSwitch.on({
			click: function() {
				$(this).trigger("
    change ");
			},
			change: function() {
				var value = $(this).val();
				var isSelected = $(this).prop("
    checked ");
				var targetId = $(this).data("
    toggle - target ");
				if ($(this).is(": radio ")) {
					isSelected = true;
					var input = $("
    input: radio[name = '" + $(this).attr("name") + "']: checked ");
					value = input.val();
					targetId = input.data("
    toggle - target ");
				}
				var $target = $(" * [data - " + targetId + "][data - toggled - by = " + value + "]");
				var $hideTarget = $(" * [data - " + targetId + "][data - not - toggled - by = " + value + "]");
				var $siblings = $(" * [data - " + targetId + "][data - toggled - by]");
				if ($(this).is("
    select ")) {
					isSelected = true;
				}
				$siblings.addClass("
    hidden ");
				if (isSelected) {
					$target.removeClass("
    hidden ");
					$hideTarget.addClass("
    hidden ");
				}
			}
		});
		$repeats.on({
			change: function () {
				var isChecked = $(this).prop("
    checked ");
				if (isChecked) {
					$(" * [data - repeats]: not(.freq - list)").removeClass("
    hidden ");
					$(" * [data - repeats].freq - list[data - weekly]").removeClass("
    hidden ");
					$(". in #repeatsInput ").val(1);
					$(". in #repeats -
    switch -wrapper ")
					.removeClass("
    col - sm - offset - 1 col - xs - 12 ")
					.addClass("
    col - xs - 2 ");
				} else {
					$(" * [data - repeats]").addClass("
    hidden ");
					$(". in #repeatsInput ").val(0);
					$(". in #repeats -
    switch -wrapper ")
					.addClass("
    col - sm - offset - 1 col - xs - 12 ")
					.removeClass("
    col - xs - 2 ");
				}
			}
		});
		$freq.on({
			change: function () {
				var val = $(this).val().toLowerCase();
				$(".freq - items ").hide();
				$(".freq - items[data - " + val + "]").show();
				if (val == "
    select_dates ") {
					$(" * [data - show -
    for = select_dates]").show();
				} else {
					$(" * [data - show -
    for = select_dates]").hide();
				}
			}
		});
		$allDay.trigger("
    change ");
		$repeats.trigger("
    change ");
		$freq.trigger("
    change ");
		$toggleSwitch.trigger("
    change ");
		$(". in #starttime,
    . in #endtime ").on('change', function() { 
			var joinRequest = $.ajax({
				url: 'https://backyardonblake.com/pages/unavailable-dates.json',
				data: {
					starttime: $(". in #starttime ").val(),
					endtime: $(". in #endtime ").val(),
					date: $(". in #startdate ").val()
				}
			});
			joinRequest.success(function(data, status) {
				console.log(data);
				var unavailableDates = data;
				var $selectDate = $(". in #select - date - picker ");
				$selectDate.datepicker("
    destroy ");
				$selectDate.datepicker({
					beforeShowDay: function(date){
						var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
						return unavailableDates.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
					},
					onSelect: function (dateText) {
						var date = new moment(dateText, convertDateFormatToMomentFormat(" {
        {
            dateFormat
        }
    }
    "));
						var $div = $('<div class="
    col - sm - 10 col - sm - offset - 2 col - xs - 12 " />');
						var $input = $('<input />');
						$input
							.attr('type', 'hidden')
							.attr('name', 'calendarEvent[selectDates][]')
							.val(date.format('YYYY-MM-DD'));
						$div
							.append('<a href="
    javascript: ;
    " class="
    remove - select - date " style="
    color: darkred;
    text - decoration: none;
    position: relative;
    top: 1px;
    "><span class="
    glyphicon glyphicon - remove "></span></a>')
							.append(' ' + date.format('dddd, MMMM D, YYYY'))
							.append($input);
						$(". in #select - dates - list ").append($div);
						$selectDate.val('');
					}
				});
				$selectDate.datepicker("
    refresh ");
			});
		});
		function convertDateFormatToMomentFormat(format)
		{
			format = format
				.replace(/m/g, 'M')
				.replace(/d/g, 'D')
				.replace(/yy/g, 'YYYY');
				return format;
		}
		function getTime(selector) {
			return moment($(selector).val() , "
    h: mma ").format("
    HH: mm ");
		}

		$(". in #starttime,
    . in #endtime ").on('change', function() { 
			var gtimeend = getTime(". in #endtime ");
			var gtimestart = getTime(". in #starttime ");
			var mtimestart = moment.utc(gtimestart, "
    HH: mm ");
			var mtimeend = moment.utc(gtimeend, "
    HH: mm ");
			var gmtimediff = moment.duration(mtimeend.diff(mtimestart));
			var imgmtimediff = gmtimediff.as('minutes');
			var conferencePrice = parseInt(" {
        {
            conferenceRoom.conferencePrice
        }
    }
    ");
			var confpriceinm = conferencePrice / 60;
			var priceperbookingdate = imgmtimediff * confpriceinm;
			$(". in #yoda ").val(priceperbookingdate);
		});
	});
	// THIS IS WHERE THE AFTER MODAL IS SHOWN CODE ENDS
	$("#bookitmodal ").on('hide.bs.modal', function (e) {
		var $selectDate = $("#select - date - picker ");
		var $starttime = $("#starttime ");
		var $endtime = $("#endtime ");
		var $startdate = $("#startdate ");

	});
</script>
{% endblock %}
Setting Validate Copy Format