form.html

{% extends "templates/base.html" %}
{% block headscripts %}
<link href="static/eternicode-bootstrap-datepicker/css/datepicker.css" rel="stylesheet">
<link href="static/eternicode-bootstrap-datepicker/css/datepicker3.css" rel="stylesheet">
{% endblock %}


{% block content %}

	<ol class="breadcrumb">
		<li><a href="/">Home</a></li>
		<li><a href="/near">Listings</a></li>
		<li><a href="/menu">Cleaner</a></li>
		<li class="active">Booking</li>
	</ol>

	<h1 style="text-align: center;">Your Booking</h1>
	<p style="text-align: center; font-size: 80%"><a href="" onclick="help_me(); return false;">Click here for help</a></p>
	<div id="collectioninfo">
		<form action="review" method="post" onsubmit="return validateForm()">
			<fieldset>
				<legend>Collect & Deliver Here</legend>
				<input class="collectionform input-lg" name="Address_line_1" type="text" name="searchquery"
				placeholder="Address Line 1" required><br>
				<input class="collectionform input-lg" name="Address_line_2" type="text" name="searchquery"
				placeholder="Address Line 2"><br>
				<input class="collectionform input-lg" name="Address_line_3" type="text" name="searchquery"
				placeholder="Address Line 3"><br>
				<input class="collectionform input-lg" name="Postcode" type="text" name="searchquery" value = "{{ postcode }}"
				placeholder="Postcode" required>
				<textarea class="collectionform input-lg" style="border-color: grey;" name="Collect_instructions" type="text" name="searchquery"
				placeholder="Collection Instructions?"></textarea>
			</fieldset>
			<br><br>
			<fieldset>
				<legend>If Your Cleaner Needs To Contact You</legend>
				<input class="collectionform input-lg" name="first_name" type="text" name="searchquery"
				placeholder="First Name" required>
				<br>
				<input class="collectionform input-lg" name="last_name" type="text" name="searchquery"
				placeholder="Last Name" required>
				<br>
				<input class="collectionform input-lg" name="Phone_number" type="text" name="searchquery"
				placeholder="Phone Number" required><br>
				<input class="collectionform input-lg" name="Email" type="email" name="searchquery"
				placeholder="Email" required><br>
			</fieldset>
			<br>
			<P><span class="glyphicon glyphicon-lock"></span> Your details are stored securely and will not be used for marketing.</P>
			<br><br>

			<fieldset>
			<legend>Collection: <br><strong><span id="collection_string_day"></span><span id="c_comma"></span> <span id="collection_string_time"></span></strong></legend>
			<div style="display: none" id="c_warning_div" class="alert alert-info">
				<strong>Note:</strong> If your cleaner feels that they can't collect at short notice, they'll give you a call to re-arrange.
			</div>
			<div style="display: none" id="c_empty_div" class="alert alert-info">
				No slots available
			</div>

			

<!-- 			<div class="btn-group btn-group-justified" data-toggle="buttons">
				{% set i = 0 %}
				{% for day_label in next_three_days %}
				<label class="btn btn-default">
					<input type='radio' name="collection_day" id="c_day_{{ i }}" value="{{ day_label }}">{{ day_label|nicedates }}
				</label>
				{% set i = i+ 1 %}
				{% endfor %}
				<label class="btn btn-default">
					<input type="radio" name="collection_day" id="collection_date_other"  value="">Other <span class="caret"></span>
				</label>
            </div> -->

            <div id="c_date_div" style="display: block; font-size:130%; text-indent: 20px;">
			</div>
			<br>

<!-- 		<div style="width: 400; height 80; display: none;" id="c_guide_1">
				<img src="/static/img/guides/guide1-4.png">
			</div>
			<div style="width: 400; height 80; display: none;" id="c_guide_2">
				<img src="/static/img/guides/guide2-4.png">
			</div>
			<div style="width: 400; height 80; display: none;" id="c_guide_3">
				<img src="/static/img/guides/guide3-4.png">
			</div>
			<div style="width: 400; height 80; display: none;" id="c_guide_4">
				<img src="/static/img/guides/guide4-4.png">
			</div> -->
            <div class="btn-group" data-toggle="buttons">
            	{% set i = 0 %}
				{% for slot in partner.delivery_slots %}
				<label class="btn btn-default" style="width: 100px;">
					<input type='radio' id="c_time_{{ i }}" name="collection_time" class="collection_time " value="{{ slot }}"
					>{{ slot }}

				</label>
				{% set i = i+ 1 %}
				{% endfor %}
            </div>
        	</fieldset>
        	<br>
        	<p>The times available for collection depend on the day you choose and the delivery preferences of {{ partner_name }}</p>
            <br><br>
     
            <fieldset>
			<legend>Deliver: <br><strong><span id="delivery_string_day"></span><span id="d_comma"></span> <span id="delivery_string_time"></span></strong></legend>

			<div style="display: none" id="d_empty_div" class="alert alert-info">
				No slots available
			</div>

			<!-- <div class="btn-group btn-group-justified" data-toggle="buttons">
				{% set i = 0 %}
				{% for day_label in next_three_days %}
				<label class="btn btn-default">
					<input type='radio' name="delivery_day" id="d_day_{{ i }}" value="{{ day_label }}">{{ day_label|nicedates }}
				</label>
				{% set i = i+ 1 %}
				{% endfor %}
				<label class="btn btn-default">
					<input type='radio' id="delivery_date_other" name="delivery_day" value="">Other <span class="caret"></span>
				</label>
            </div>
             -->
			<div id="d_date_div" style="display: block; font-size:130%; text-indent: 20px;">
			</div>

            <div style="width: 400; height 80;" id="d_guide_1" hidden>
				<img src="/static/img/guides/guide1-4.png">
			</div>
			<div style="width: 400; height 80;" id="d_guide_2" hidden>
				<img src="/static/img/guides/guide2-4.png">
			</div>
			<div style="width: 400; height 80;" id="d_guide_3" hidden>
				<img src="/static/img/guides/guide3-4.png">
			</div>
			<div style="width: 400; height 80;" id="d_guide_4" hidden>
				<img src="/static/img/guides/guide4-4.png">
			</div>
            <div class="btn-group" data-toggle="buttons">
				{% set i = 0 %}
				{% for slot in partner.delivery_slots %}
				<label class="btn btn-default" name="delivery_time_label" style="width: 100px;">
					<input type='radio' id="d_time_{{ i }}" name="delivery_time" value="{{ slot }}">{{ slot }}
				</label>
				{% set i = i+ 1 %}
				{% endfor %}
            </div>
        	</fieldset>
        	<br>
        	<fieldset>
        		<legend>Payment Method</legend>
        		<!-- <div>
        			<img src="/static/img/paypal.png" style='margin-left: 25px;'>
        			<p style="color:grey; width: 299px; float: right">You pay when your clothes are returned to you. Coming soon, PayPal for safe online transactions. <button style="color:grey; float:right;" class="btn btn-default btn-sm" onclick="how_does_payment_work(); return false;">Tell me more</button></p>
        		</div>
 -->
        		<p>You pay in cash when your clothes are returned</p>
        		<div class="btn-group btn-group-justified" data-toggle="buttons" style="display:none">
        		<!-- 	<label class="btn btn-default" disabled>
						<input type='radio' name="payment_method" id="paypal" value="paypal">Pay Online With PayPal
					</label> -->
					<label class="btn btn-default">
						<input type='radio' name="payment_method" id="cash" value="cash" checked>Cash
					</label>
				</label>
        		</div>
        	</fieldset>
		
				<input value="{{ partner_name }}" type="hidden" name="partner_name">
				<input value="" type="hidden" name="collection_day_output">
				<input value="" type="hidden" name="collection_time_output">
				<input value="" type="hidden" name="delivery_day_output">
				<input value="" type="hidden" name="delivery_time_output">
				<input value="" type="hidden" name="payment_method_output">
				<!-- For back button -->
				<input value="" type="hidden" id="storedCDate">
				<input value="" type="hidden" id="storedDDate"> 

	</div>
	<br/>
			<div style="display: none" id="invalid_options_div" class="alert alert-info">
				<span id="invalid_time_message"></span>
				<span id="invalid_payment_message"></span>
			</div><br>
	<div id="review">
		<input id="reviewbtn" class="btn btn-success btn-lg" type="submit" value="Review Booking"><br><br><br></form>
	</div>

	<div class="input-group">
	<input type="hidden" id="meta" value="Sent from the 'form' page">
	<input type="text" class="form-control" id="feedback" name="searchquery" placeholder="“What do you think of this?”">
	<span class="input-group-btn">
		<button id="feedback_button" class="btn btn-default" style="color:#999999;">Send</button>
	</span>
	</div>
{% endblock %}

{% block endscripts %}

<script src="/static/js/bootbox/bootbox.min.js"></script>

<script type="text/javascript">

function help_me(){
	var question_string = "You don't add socks to a cart.<br><br> Just read about the cleaner, then book collection.<br><br>You pay after your clothes are returned.<br><br>Have fun!"
		bootbox.alert({
			title: "What next?",
			message: question_string,
		})
	}
</script>

<script type="text/javascript">

function how_does_payment_work(){
	var question_string = "Cash: pay on delivery. Paying with PayPal: you sign up now. You agree on the price when the dry cleaner picks up the clothes. He bills you the agreed amount when the clothes have been cleaned."
		bootbox.alert(question_string)
	}
</script>

<!-- feedback -->
<script src="static/js/feedbackbar.js"></script>

<!-- timepicker -->
<script src="static/eternicode-bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script type="text/javascript">

fastest_cleaning_time_hrs = 6

$(document).ready(function() {
	// Back button logic. Restores state if someone uses back button to come back to form
	$("input[name='collection_day']:checked").click()
	$("input[name='collection_time']:checked").click()
	$("input[name='delivery_day']:checked").click()
	$("input[name='delivery_time']:checked").click()
	$("input[name='payment_method']:checked").click()

	initialise_datepickers()

	// more Back Button
	$('#c_date_div').datepicker('setDate', $("#storedCDate").attr("value"))
	$('#d_date_div').datepicker('setDate', $("#storedDDate").attr("value"))

	hide_all_times()
});

function initialise_datepickers(){
	array = []
	allowed_days = [{% for day in partner.days %}{{ day }},{% endfor %} 99] // 99 won't ever be called upon in logic below
	for(i = 0; i<= 6; i += 1){
		if (allowed_days.indexOf(i) >= 0 ){
		}else{
			array.push(i)
		}
	}
	
	$('#c_date_div').datepicker({
	    daysOfWeekDisabled: array,
	    startDate: "now",
	    todayHighlight: false
	}).on('changeDate', function(e){
	    // get date
	    var selectedDate = $('#c_date_div').datepicker('getDate')
	    
		c_date_change(selectedDate)
	});

	$('#d_date_div').datepicker({
		daysOfWeekDisabled: array,
	    startDate: "now",
	    todayHighlight: false
	}).on('changeDate', function(e){
	    // get date
	    var selected_date = $('#d_date_div').datepicker('getDate')
	    
	    d_date_change(selected_date)
	});

}

function getOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}

</script>



<!-- Collect widget -->
<script>

$('.btn').button() // activates buttons, required by bootstrap




var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]



// Collection day logic.
$( "[name='collection_day']" ).change(function () {

    // get selected value
	var selected_c_date_button = $("input[type='radio'][name='collection_day']:checked");

	// if "Other", show calendar, otherwise, change date to selected one.
	if (selected_c_date_button.attr('id') == "collection_date_other"){
		document.getElementById("c_date_div").style.display = "block";
	}
	else{
		document.getElementById("c_date_div").style.display = "none";
		var selectedDate = new Date(selected_c_date_button.attr('value'))
		c_date_change(selectedDate)
	}

	// show guides
	// if (selected_c_date_button.attr('id') == "c_day_0"){
	// 	console.log("here")
	// 	console.log($("#c_guide_1"))
	// 	$("#c_guide_1").style.display = "block" ;
	// 	$("#c_guide_2").addClass("hidden") ;
	// 	$("#c_guide_3").addClass("hidden") ;
	// 	$("#c_guide_4").addClass("hidden") ;
	// }
	// if (selected_c_date_button.attr('id') == "c_day_1"){
	// 	document.getElementById("c_guide_1").hide() ;
	// 	document.getElementById("c_guide_2").show() ;
	// 	document.getElementById("c_guide_3").hide() ;
	// 	document.getElementById("c_guide_4").hide() ;
	// }
	// if (selected_c_date_button.attr('id') == "c_day_2"){
	// 	document.getElementById("c_guide_1").hide() ;
	// 	document.getElementById("c_guide_2").hide() ;
	// 	document.getElementById("c_guide_3").show() ;
	// 	document.getElementById("c_guide_4").hide() ;
	// }
	// if (selected_c_date_button.attr('id') == "collection_date_other"){
	// 	document.getElementById("c_guide_1").hide() ;
	// 	document.getElementById("c_guide_2").hide() ;
	// 	document.getElementById("c_guide_3").hide() ;
	// 	document.getElementById("c_guide_4").show() ;
	// }
	
})


$( "[name='delivery_day']" ).change(function () {
	
	// get selected button
	var selected_d_date_button = $("input[type='radio'][name='delivery_day']:checked");

	// if "Other", show calendar, otherwise, change date to selected one.
	if (selected_d_date_button.attr('id') == "delivery_date_other"){
		document.getElementById("d_date_div").style.display = "block";
	}
	else{
		document.getElementById("d_date_div").style.display = "none";
		var selected_d_date = get_current_delivery_date()
		d_date_change(selected_d_date)
	}
});

function get_current_collection_date(){
	var selectedVal = "";
	var selected = $("input[type='radio'][name='collection_day']:checked");
	
	if (selected.attr('id') == "collection_date_other"){
		return $('#c_date_div').datepicker('getDate')
	}
	else{
		return new Date(selected.attr('value'))
	}
}

function get_current_collection_time(){
	var selectedVal = "";
	var selected = $("input[type='radio'][name='collection_time']:checked");
	return selected.attr('value')
}

function get_current_delivery_date(){ // n.b. can fail because calendar dates are not in the same timezone as button dates
	
	var selected_d_button = $("input[type='radio'][name='delivery_day']:checked");
	if (selected_d_button.attr('id') == "delivery_date_other"){
		return $('#d_date_div').datepicker('getDate')
	}
	else{
		return new Date(selected_d_button.attr('value'))
	}
}

function get_current_delivery_time(){
	var selectedVal = "";
	var selected = $("input[type='radio'][name='delivery_time']:checked");
	return selected.attr('value')
}

function c_date_change(collection_date){
	if(isNaN(Date.parse(collection_date))==false){

		// get string for output & save
		var string = get_outstring_from_date(collection_date)
		$("#collection_string_day").text(string) //display
		$("[name='collection_day_output']").val(string) // save for submission
		$("#storedCDate").val(collection_date)

		// Short-notice warning
		// -> first, check date is today
		var today = new Date()
		today.setHours(collection_date.getHours(),collection_date.getMinutes(),0,0)


		if (collection_date - today == 0){
			document.getElementById("c_warning_div").style.display = "block";
			hide_earlier_collection_times()
		}
		else{
			document.getElementById("c_warning_div").style.display = "none";
			document.getElementById("c_empty_div").style.display = "none";
			show_earlier_collection_times()
		}


		// --- interactions ---



		// INTERACTION 1: NO DELIVERIES LEFT TODAY
		// disable today button and calendar option if no deliveries possible today
		
		// first, check that today is available
		
		if (today_available()){
			// second, find out if it's empty.
			// do this by comparing earliest collection time to last delivery time

			// earliest collection time:
			var now = new Date()
			var now_time = now.getHours()*60 + now.getMinutes()
			var earliest_d_from_now = now_time + 60 + (60 * fastest_cleaning_time_hrs)

			var last_d_available = 0
			$("input[name='delivery_time']").each(function(){
				last_d_available = this.value
			})
			last_d_available = get_time(last_d_available)

			if (earliest_d_from_now > last_d_available){
				// d_date = today would be empty
				$("#d_day_0").parent().attr("disabled", true)
			} else{
				$("#d_day_0").parent().attr("disabled", false) // enable d_date
			}
		}

		// INTERACTION 2: INVALIDATION OF D_TIMES
		// if d_date or d_time now invalid
		// then reset the d_day and d_time

		// first check the date to see if that's invalidated. If it's not, then check if dates match and check time.

		// in either case, both need to reset.

		// check if d_date set:
		if(isOneChecked("delivery_day")){
			hide_earlier_delivery_times()

			// check if d_date now invalid
			var current_d_date = get_current_delivery_date()
			if (collection_date > current_d_date){
				// so c_date has invalidated the c_date and c_time. time to reset!
				// reset delivery_day
				var d_date_selected = $("input[type='radio'][name='delivery_day']:checked");
				d_date_selected.parent().removeClass("active")
				reset_d_date()
				
				// reset delvery_time
				var d_time_selected = $("input[type='radio'][name='delivery_time']:checked");
				d_time_selected.parent().removeClass("active")
				reset_d_time() // clears strings and saves
			} else {
				// could be that same day is selected and d_time is now invalid

				if (collection_date - current_d_date == 0){

					// now get times
					if (isOneChecked("collection_time")){
						if (isOneChecked("delivery_time")){
							var current_c_time = get_time(get_current_collection_time())
							var current_d_time = get_time(get_current_delivery_time())
							if (current_c_time + 60 + fastest_cleaning_time_hrs * 60 > current_d_time){

								// so c_date & c_time have invalidated the d_date and d_time. time to reset!

								// reset delivery_day
								var d_date_selected = $("input[type='radio'][name='delivery_day']:checked");
								d_date_selected.parent().removeClass("active")
								reset_d_date()

								// reset delvery_time
								var d_time_selected = $("input[type='radio'][name='delivery_time']:checked");
								d_time_selected.parent().removeClass("active")
								reset_d_time() // clears strings and saves
							}
						}
					}
				}
			}
		}


		// INTERACTION 3: LAST ORDERS SAME DAY LOGIC
		// if time > last_orders_same_day, and c_date = today, hide all times
		if (collection_date - today == 0){
			var now = new Date()
			var now_time = now.getHours()*60 + now.getMinutes()
			var None = 24
			var last_orders_same_day_hr = {{ partner.last_orders_same_day_hr }}
			var last_orders_same_day_min = {{ partner.last_orders_same_day_min }}
			var last_orders = last_orders_same_day_hr*60 + last_orders_same_day_min
			if(now_time>last_orders){
				$("input[name='collection_time']").each(function(){
					$(this).parent().addClass('hidden')
				})
				document.getElementById("c_warning_div").style.display = "none";
				document.getElementById("c_empty_div").style.display = "block";
			}
		}

		// INTERACTION 4: LAST ORDERS NEXT DAY LOGIC
		// if time > last_orders, and c_date = tomorrow, hide time<morning_end
		if (collection_date - today == 86400000){
			var now = new Date()
			var now_time = now.getHours()*60 + now.getMinutes()
			var last_orders_hr = {{ partner.last_orders_hr }}
			var last_orders_min = {{ partner.last_orders_min }}
			var last_orders = last_orders_hr*60 + last_orders_min
			if (now_time > last_orders){

				var this_time = 0
				var end_of_morning_hr = {{ partner.end_of_morning_hr }}
				var end_of_morning_min = {{ partner.end_of_morning_min }}
				var end_of_morning = end_of_morning_min + end_of_morning_hr*60

				$("input[name='collection_time']").each(function(){
					this_time = get_time(this.value)


					if(this_time < end_of_morning){
						$(this).parent().addClass('hidden') // disable d_date
					}else{
						$(this).parent().removeClass('hidden') // enable d_date
					}
				})

			}
		}

		// INTERACTION 5: HIDE EARLIER D DATES
		// disable d_date buttons/calendar before c_date

		// - set earliest calandar d_date to selected c_date
		$('#d_date_div').datepicker('setStartDate', collection_date)

		// compare button dates to c_date -> disable if earlier
		$("input[name='delivery_day']").each(function(){
			d_date = new Date($(this).val())
			if(d_date < collection_date){
				$(this).parent().attr("disabled", true) // disable d_date
			}else{
				$(this).parent().attr("disabled", false) // enable d_date
			}
		})
	}
};

function today_available(){
	var first_date = new Date($("#d_day_0").val())
	var today = new Date()
	today.setHours(first_date.getHours(),first_date.getMinutes(),0,0)
	if (today - first_date == 0){
		return true
	}
	return false
}

function is_sameday(){
	var d_date_selected = $("input[type='radio'][name='delivery_day']:checked");
	var c_date_selected = $("input[type='radio'][name='collection_day']:checked");
	return c_date_selected == d_date_selected
}

function d_date_change(selectedDate){
	if(isNaN(Date.parse(selectedDate))==false){
		// get string for output & save
		var string = get_outstring_from_date(selectedDate)
		$("#delivery_string_day").text(string) //display
		$("[name='delivery_day_output']").val(string) // save for submission
		$("#storedDDate").val(selectedDate)

		// Short-notice warning
		// -> first, check date is today
		var today = new Date()
		today.setHours(selectedDate.getHours(),selectedDate.getMinutes(),0,0)
		

		if (selectedDate - today == 0){
			document.getElementById("d_empty_div").style.display = "block";
			hide_earlier_delivery_times()
		}
		else{
			document.getElementById("d_empty_div").style.display = "none";
			show_earlier_delivery_times()
		}

		// same-day warning/hiding if d_date now same as c_day
		if(isOneChecked("collection_day")){
			hide_earlier_delivery_times()
		}
	}
}

function hide_earlier_collection_times(){
	// get earliest collection time
	var this_hour = 0
	var this_min = 0
	var this_time = 0
	var now = new Date()
	var now_time = now.getHours()*60 + now.getMinutes()
	var earliest_collection_time = now_time + 60

	// hide unavailable times
	var total_count = 0
	var hide_count = 0
	$("input[name='collection_time']").each(function(){
		this_time = get_time(this.value)

		total_count += 1
		if (this_time < earliest_collection_time){
			$(this).parent().addClass('hidden')
			hide_count += 1
		}
		else{
			$(this).parent().removeClass('hidden')
		}
	})
	if (hide_count == total_count){
		document.getElementById("c_warning_div").style.display = "none";
		document.getElementById("c_empty_div").style.display = "block";
	}
	else{
		document.getElementById("c_empty_div").style.display = "none";
		document.getElementById("c_warning_div").style.display = "block";
	}

	// erase any 'saved' info if they had just been removed
	if(isOneChecked("collection_time")){
		var selected = $("input[type='radio'][name='collection_time']:checked");
		var sel_val = selected.attr('value')
		var sel_time = get_time(sel_val)
		if (sel_time < earliest_collection_time){
			selected.parent().removeClass("active") // deselect button
			reset_c_time()
		}
	}

}

function reset_c_time(){
	$("#collection_string_time").text("") // remove string
	$("#c_comma").text("") // remove comma from string
	$("[name='collection_time_output']").val("") // remove save to hidden field for submission
}

function reset_d_time(){
	$("#delivery_string_time").text("") // remove string
	$("#d_comma").text("") // remove comma from string
	$("[name='delivery_time_output']").val("") // remove save to hidden field for submission
	document.getElementById("d_empty_div").style.display = "none";
}

function reset_d_date(){
	$("#delivery_string_day").text("") // remove string
	$("#d_comma").text("") // remove comma from string
	$("[name='delivery_date_output']").val("") // remove save to hidden field for submission
	$("#storedDDate").val("") // save for back button
	document.getElementById("d_date_div").style.display = "none";
	document.getElementById("d_empty_div").style.display = "none";
}

function show_earlier_collection_times(){
	$("input[name='collection_time']").each(function(){
			$(this).parent().removeClass('hidden')
	})
	document.getElementById("c_empty_div").style.display = "none";
}

function hide_earlier_delivery_times(){
	// deploys if:
	// a.) if delivery_day = coll_day (coll or deliver day selected)
	// -> ai.) if c_time selected, earliest_coll = c_time_selected + 1
	// -> aii.) if c_time not selected, earliest_coll = start_of_day + 1
	// b.) delivery_day = today selected -> earliest_coll = now + 1
	// choose latest option of a and b


	// action: gets current collection time (if selected), or sets current collection time to earliest possible
	// then, gets earliest delivery time
	// then, removes delivery times before the earliest delivery time
	if(isOneChecked("delivery_day")){
		// >get earliest collection time:
		var earliest_c_time = 0
		// check if delivery_day = collection_day. get c_day and d_day
		var current_delivery_date = get_current_delivery_date()
		if(isOneChecked("collection_day")){ // d_day & c_day  selected
			var current_collection_date = get_current_collection_date()
			current_delivery_date.setHours(current_collection_date.getHours(),current_collection_date.getMinutes(),0,0)

			if(current_collection_date - current_delivery_date == 0){
				// then check if c_time selected
				if(isOneChecked("collection_time")){
					// ai.)
					var current_collection_time = get_time(get_current_collection_time())
					earliest_c_time = current_collection_time + 60
				} else {
					// a.ii)
					var i = 0
					$("input[name='collection_time']").each(function(){
						if(i == 0){
							earliest_c_time = get_time(this.value) + 60
						}
						i += 1
					})
				}
			}
		}    // d_day selected, c_day not selected

		// b. check if d_date = today
		var today = new Date()
		today.setHours(current_delivery_date.getHours(),current_delivery_date.getMinutes(),0,0)
		if (current_delivery_date - today == 0){
			var now = new Date()
			var now_time = now.getHours()*60 + now.getMinutes()
			var earliest_c_time_today = now_time + 60
			earliest_c_time = Math.max(earliest_c_time, earliest_c_time_today)
		}
		
		// we now have an earliest_c_time. check if != 0, get earliest_d_time, then hide previos d times.
		if (earliest_c_time == 0){
			$("input[name='delivery_time']").each(function(){
				$(this).parent().removeClass('hidden')
				document.getElementById("d_empty_div").style.display = "none";
			})
		} else {
			// get earliest delivery time
			var earliest_d_time = earliest_c_time + 60 * fastest_cleaning_time_hrs

			// initialise values for triggering "empty" warning
			// and for checking deliv time values
			var total_count = 0
			var hidden_count = 0
			var this_time = 0

			// hide
			$("input[name='delivery_time']").each(function(){
				total_count += 1
				if (get_time(this.value) < earliest_d_time){
					$(this).parent().addClass('hidden')
					hidden_count += 1
				} else {
					$(this).parent().removeClass('hidden')
				}
			})

			// deploy warning
			if (hidden_count == total_count){
				document.getElementById("d_empty_div").style.display = "block";
			}
			else{
				document.getElementById("d_empty_div").style.display = "none";
			}

			// erase any 'saved' info if selected d_val had just been removed
			if(isOneChecked("delivery_time")){
				var selected = $("input[type='radio'][name='delivery_time']:checked");
				var selected_val = selected.attr('value')
				var selected_time = get_time(selected_val)

				if (selected_time < earliest_d_time){
					selected.parent().removeClass("active") // deselect button
					reset_d_time() // clears strings and saves
				}
			}
		}
	}
}

function hide_all_times(){
	$("input[name='collection_time']").each(function(){
		$(this).parent().addClass('hidden')
	})

	$("input[name='delivery_time']").each(function(){
		$(this).parent().addClass('hidden')
	})
}

function show_earlier_delivery_times(){
	$("input[name='delivery_time']").each(function(){
		$(this).parent().removeClass('hidden')
	})
	document.getElementById("d_empty_div").style.display = "none";
}

function get_outstring_from_date(selected_date){
	return weekdays[selected_date.getDay()]
	+ " "
	+ getOrdinal(selected_date.getDate())
	+ " "
	+ months[selected_date.getUTCMonth()]
}

function clear_delivery_day(clear_this_id){
	selected = $("input[type='radio'][name='delivery_day']:checked");

	if(selected.attr("id") == clear_this_id){
		selected.parent().removeClass("active") // deselect button
		$("#delivery_string_day").text("") // remove string
		$("#c_comma").text("") // remove comma from string
		$("[name='delivery_day_output']").val("") // remove save to hidden field for submission
	}
}

function isOneChecked(name_shared_by_radios){
	var chx = document.getElementsByName(name_shared_by_radios)
	for (var i = 0; i<chx.length; i++){
		if (chx[i].checked){
			return true
		}
	}
	return false
}

function get_time(string){
	this_hour = parseInt(string.substr(0,2))
	this_min = parseInt(string.substr(3,5))
	return this_hour*60 + this_min
}

function get_time_string(mins){
	var hour = Math.floor(mins/60)
	var min = mins%60
	if (hour < 10) {
		hour = '0' + hour
	}
	if (min < 10) {
		min = '0' + min
	}
	return hour + ":" + min
}

$( "[name='collection_time']" ).change(function () {
    var selectedVal = "";
	var selected = $("input[type='radio'][name='collection_time']:checked");
	if (selected.length > 0) {
	    selectedVal = selected.val();
	}

	// get interval string from button value
	var slot = {{ partner.window_size }}
	
	var endtime = get_time(selectedVal) + slot
	var string = selectedVal + " - " + get_time_string(endtime)
	
	// display and save interval string	
	$("#collection_string_time").text(string)
	$("#c_comma").text(",")
	$("[name='collection_time_output']").val(string)

	// --- interractions:
	// hide unavailable deliveries, reset deliveries if neccessary
	hide_earlier_delivery_times()
});

$( "[name='delivery_time']" ).change(function () {
    var selectedVal = "";
	var selected = $("input[type='radio'][name='delivery_time']:checked");
	if (selected.length > 0) {
	    selectedVal = selected.val();
	}

	var slot = {{ partner.window_size }}
	var end_time = get_time(selectedVal) + slot
	var end_hour = Math.floor(end_time/60)
	var end_min = end_time%60
	if (end_hour < 10) {
		end_hour = '0' + end_hour
	}
	if (end_min < 10) {
		end_min = '0' + end_min
	}

	var string = ''
	string = selectedVal + " - " + end_hour + ":" + end_min
	
	$("#delivery_string_time").text(string)
	$("#d_comma").text(",")
	$("[name='delivery_time_output']").val(string)

});

</script>

<!-- form validation -->
<script type="text/javascript">
function validateForm(){
	var timefailflag = 0
	var failflag = 0
	$("#invalid_c_time").text("")

	var x= $("[name='collection_time_output']").val()
	if (x==null || x=="")
	  {
	  $("#invalid_time_message").text("Add a collection time")
	  timefailflag += 1
	  failflag = 1
	  }
	x= $("[name='collection_day_output']").val()
	if (x==null || x=="")
	  {
	  $("#invalid_time_message").text("Add a collection day")
	  timefailflag += 1
	  failflag += 1
	  }
	x= $("[name='delivery_time_output']").val()
	if (x==null || x=="")
	  {
	  $("#invalid_time_message").text("Add a delivery time")
	  timefailflag += 1
	  failflag = 1
	  }
	x= $("[name='delivery_day_output']").val()
	if (x==null || x=="")
	  {
	  $("#invalid_time_message").text("Add a delivery day")
	  timefailflag += 1
	  failflag = 1
	  }
	x= $("[name='payment_method_output']").val()
	if (x==null || x=="")
	  {
	  $("#invalid_payment_message").text("Pick a payment method")
	  failflag = 1
	  }
	if(timefailflag>1){
		$("#invalid_time_message").text("Add delivery & collection times")
	}
	if (failflag==1){
		show_invalid_options_warning()
	} else {
		hide_invalid_options_warning()
	}
	if(failflag > 0){
		return false;
	}
	return true;
}

$( "[name='payment_method']" ).change(function () {
	var payment_method = $("input[type='radio'][name='payment_method']:checked").attr('value')
	$("[name='payment_method_output']").val(payment_method)

})

function show_invalid_options_warning(){
	document.getElementById("invalid_options_div").style.display = "block";
}

function hide_invalid_options_warning(){
	document.getElementById("invalid_options_div").style.display = "none";
}

</script>
{% endblock %}