<?php
	session_start();

	$_SESSION['sync_form'] = 'restau';
	$_SESSION['sync_page_redirect'] = $post->post_name;
	$table_name = $wpdb->prefix . "sync_options";
	$timezone_offset_minutes = 330;
	$timezone_name = timezone_name_from_abbr("", $timezone_offset_minutes*60, false);
	date_default_timezone_set($timezone_name);
	date_default_timezone_get();
	?>

	<div class="sync_form_wrapper_set sync_user_option">
		<div class="head_label">
			<h2>Restaurant Reservation</h2>
		</div>
		<div class="select_opt">
			<input type="button" value="Reserve a Table" name="reserve_table" class="reserve_table">
			<input type="button" value="Check Reservation" name="check_reservation" class="check_reservation"> 
		</div>
	</div>

	<div class="sync_form_wrapper restau_wrapper" style="display:none;">
		<div class="go_back">
			<span class="back_text"><i class="fa fa-arrow-left"></i>  Back</span>
		</div>
		<div class="sync_container pick-date">
			<div class="sync_title">
				<h2>Restaurant Reservation</h2>
				<?php
				if (!empty($_SESSION['message'])) {
					echo '<p class="message"> '.esc_html($_SESSION['message']).'</p>';
					unset($_SESSION['message']);
				}
				?>
			</div>
			<div class="sync_components">
				<form id="reserved_table" action="" method="post">
					<?php wp_nonce_field('reserve_table', 'reserve_table_nonce'); ?>
					<div class="column first">
						<div class="first-column calendar">
							<p class="label"><span>Select Date</span></p>
							<div class="input-group">
								<input type="hidden" class="docs-date" name="picked_date" placeholder="" value="">
							</div>
							<div class="docs-datepicker-container"></div>
						</div>
						<div class="first-column timeslot">
							<p><span>Pick your preferred time slot</span></p>
							<div class="timeslot-box">
								<?php
									$icon_array = array('sunrise.png', 'sun.png', 'sun.png', 'night.png', 'night.png');
									for ($i=1; $i < 6; $i++) { 
										$option_name = 'sync_timeslot'.esc_html($i);
										$entries = $wpdb->get_results( $wpdb->prepare("SELECT * FROM $table_name WHERE option_name = %s ", $option_name));
										$from = explode("-", $entries[0]->option_value, 2)[0];
										$to   = explode("-", $entries[0]->option_value, 2)[1];
										if ( $entries ) {
											?>
											<div class="<?php echo 'timeslot-item slot-'.esc_attr($i);?>">
												<p><img src="<?php echo esc_url(plugin_dir_url(dirname( __FILE__ ))) . '../images/'.esc_attr($icon_array[$i-1]); ?>" alt="<?php echo esc_attr($icon_array[$i-1]); ?>" width="auto" height="auto"></p>
												<p><?php echo esc_html($from);?></p>
												<p>--to--</p>
												<p><?php echo esc_html($to);?></p>
												<input type="hidden" value="<?php echo esc_html($from).'-'.esc_html($to);?>">
											</div>
											<?php
										}
									}
								?>
							</div>
							<input type="hidden" name="timeslot" class="preferred-timeslot">
						</div>
					</div>
					<div class="column second">
						<div class="second-column date-today">
							<span>TODAY</span>
							<h2><?php echo date('l', strtotime(date('d-m-Y')));?></h2>
							<span><?php echo date('M d, Y', strtotime(date('d-m-Y')));?></span>
						</div>
						<div class="second-column form">
							<p class="label"><span>Your Information</span></p>
							<p class="sync_restau_holder_name">
								<input required type="text" name="full_name" id="full_name" placeholder="Name" value="<?php echo isset($_POST['full_name']) ? esc_html($_POST['full_name']) : '' ?>"><i class="icon-in-field fa fa-pencil fa-1x" ></i>
							</p>
							<p class="sync_restau_holder_email">
								<input required type="email" name="email_add" id="email_add" placeholder="Email Address" value="<?php echo isset($_POST['email_add']) ? esc_html($_POST['email_add']) : '' ?>"><i class="icon-in-field fa fa-envelope fa-1x"></i>
							</p>
							<p class="sync_restau_holder_phone">
								<input required type="text" name="phone_no" id="phone_no" placeholder="Phone Number" value="<?php echo isset($_POST['phone_no']) ? esc_html($_POST['phone_no']) : '' ?>"><i class="icon-in-field fa fa-phone fa-1x"></i>
							</p>
							<p class="label"><span>Branch Location</span></p>
							<p class="sync_restau_holder_branch">
								<select name="branch" class="branch_location js-states form-control">
									<?php
										$entries = $wpdb->get_results($wpdb->prepare("SELECT * FROM $table_name WHERE option_name = %s ORDER BY id DESC", 'sync_branch_locations'));
										if ( ! $entries ) {
											$wpdb->print_error(); 
										}else {
											foreach ( $entries as $key => $value) {
												if ($value->option_value == $_POST['branch']) { ?>
													<option value="<?php echo isset($_POST['branch']) ? esc_html($_POST['branch']) : '' ?>" selected><?php echo isset($_POST['branch']) ? esc_html($_POST['branch']) : '' ?></option>
												<?php } else { ?>
													<option value="<?php echo esc_html($value->option_value);?>"><?php echo esc_html(ucfirst($value->option_value));?></option>
												<?php }
											}
										}
									?>
								</select>
							</p>
							<div class="table_guest">
								<div class="sync-guest quantity">
									<p class="label"><span>Guest(s)</span></p>
									<p><input type="number" name="guest_no" min="1" max="30" maxlength="2" value="<?php echo isset($_POST['guest_no']) ? esc_html($_POST['guest_no']) : '1' ?>" ></p>
								</div>
								<div class="sync-table quantity">
									<p class="label"><span>Table(s)</span></p>
									<p><input type="number" name="table_no" min="1" max="30" maxlength="2" value="<?php echo isset($_POST['table_no']) ? esc_html($_POST['table_no']) : '1' ?>" ></p>
								</div>
							</div>
							
							
						</div>
						<div class="third-column submit-button" >
							<!-- <input type="button" data-dismiss="modal" data-target="#restau_menu_info" data-toggle="modal" name="submit" value="Reserve a table"> -->
							<button id="reserve" type="submit" class="reserve-table" >Reserve a Table</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<?php 

	if (!empty(sanitize_text_field($_POST['full_name'])) && !empty(sanitize_text_field($_POST['email_add'])) && !empty(sanitize_text_field($_POST['phone_no'])) && 
		!empty(sanitize_text_field($_POST['branch'])) && !empty(sanitize_text_field($_POST['guest_no'])) && !empty(sanitize_text_field($_POST['table_no'])) ) {

		$branch = sanitize_text_field($_POST['branch']);
		$table_qty = intval($_POST['table_no']);
		$guest_qty = intval($_POST['guest_no']);
		$table_count = $table_qty;
		$date_pick = $_POST['picked_date'];
	
		include('food-menu.php');
		include('payment.php'); 
	}

?>

<script>
	jQuery('#show_cancel .close').click( function () {
		if (jQuery('#reservation_info_restau').hasClass('show_modal')) {
			jQuery('#reservation_info_restau').removeClass('show_modal');
			jQuery('#reservation_info_restau').addClass('hide_modal');
		} else {
			jQuery('#reservation_info_restau').addClass('show_modal');
		}
	});

	jQuery('#reservation_info_restau .close').click( function () {
		jQuery('#reservation_info_restau').removeClass('show_modal');
		jQuery('#reservation_info_restau').removeClass('hide_modal');
	});
	
	jQuery('#cancel_success .close_modal.restau').click( function () {
		location.reload();
	});

	jQuery(".select_opt .reserve_table").click( function () {
		jQuery(".sync_form_wrapper.restau_wrapper").show();
		jQuery(".sync_form_wrapper_set.sync_user_option").hide();
	});
	
	jQuery(".select_opt .check_reservation").click( function () {
		jQuery(".sync_form_wrapper_set.sync_check_reservation").show();
		jQuery(".sync_form_wrapper_set.sync_user_option").hide();
	});

	jQuery(".restau_wrapper .go_back").click( function () {
		jQuery('.sync_form_wrapper_set.sync_user_option').show();
		jQuery('.sync_form_wrapper.restau_wrapper').hide();
	});
	
	jQuery(".sync_check_reservation .go_back").click( function () {
		jQuery('.sync_form_wrapper_set.sync_user_option').show();
		jQuery('.sync_form_wrapper_set.sync_check_reservation').hide();
	});

	jQuery("#reserved_table .reserve-table").click( function (evt) {
		var pref_date = jQuery('#reserved_table .docs-date').val();
		var timeslot = jQuery('#reserved_table .preferred-timeslot').val();
		var date = new Date();
		var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
        var am_pm = date.getHours() >= 12 ? "pm" : "am";
        hours = hours < 10 ? "0" + hours : hours;
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
		var cur_time = hours + ":" + minutes + " " + am_pm; 
		
		var cur_date = String(date.getMonth() + 1).padStart(2, '0') + '/' + String(date.getDate()).padStart(2, '0') + '/' + date.getFullYear();
		var pref_timeslot = timeslot.split('-');
		var from = pref_timeslot[0];
		var to = pref_timeslot[1];

		if (pref_date == "") {
			evt.preventDefault();
			jQuery('#reserved_table .error-picked-date.active').remove();
			jQuery('#reserved_table .docs-datepicker-container').append('<div class="error error-picked-date active"> This field is required. </div>');
		} else {
			jQuery('#reserved_table .error-picked-date.active').remove();
		}

		if (timeslot == "") {
			evt.preventDefault();
			jQuery('#reserved_table .error-timeslot.active').remove();
			jQuery('#reserved_table .timeslot').append('<div class="error error-timeslot active"> This field is required. </div>');
		} else {
			jQuery('#reserved_table .error-timeslot.active').remove();
		}

		if ((cur_date == pref_date) && timeslot != "" ) {
			if ( (from <= cur_time) || (to <= cur_time) ) {
				evt.preventDefault();
				jQuery('#reserved_table .error-timeslot.active').remove();
				jQuery('#reserved_table .timeslot').append('<div class="error error-timeslot active"> Selected timeslot is already past the current time. </div>');
			} else {
				jQuery('#reserved_table .error-timeslot.active').remove();
			}
		}
	});

</script>

