<?php

	// Description: EXTRACT EXPERIENCE ID, AND IF VALID, DISPLAY ITS INFO

	require_once 'processes/config.php';
	require_once 'processes/dbh.inc.php';
	require_once 'processes/checkLogin.php';

	// IF VIEW VARIABLE NOT GIVEN, EXIT
	if(!isset($_GET['view'])) {
		exit();
	}

	// FETCH EXPERIENCE
	$experienceID = mysqli_real_escape_string($connection, trim($_GET['view'])); 
	$query1 = "SELECT * FROM `experience` WHERE `id` = '$experienceID';";
	$result1 = mysqli_query($connection, $query1) or die("Error: ".mysqli_error($connection));
	$row1 = mysqli_fetch_array($result1);
	
	// IF EXPERIENCE NOT IN DATABASE, EXIT
	if($result1->num_rows !== 1) {
		echo "Requested experience does not exist.";
		exit();
	}
	
	// IF EXPERIENCE DOESN'T BELONG TO USER (WHO IS NOT AN ADMIN), EXIT
	if($_SESSION['dbUserData']['admin'] !== '1') {
	
		$queryCheckUser = "SELECT id FROM experience WHERE id = '$experienceID' AND id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
		if(mysqli_query($connection, $queryCheckUser)->num_rows === 0) {
			echo "You are not authorized to view this experience.";
			exit();
		}
		
	}


	include_once 'header.php';
	
?>
	<!--START OF viewExperience.php -->
	<body>
	
    	<header id="main-header">
        	<a id="logo" href=".">
				TANIA
            	<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
        	</a>
        	<div id="account">
            	<a class="sign-out" href="./processes/logout.php">Sign Out</a>
        	</div>
    	</header>
		
		<div class="container-fluid" id="view-experience-showcase">
			<div class="row">
				<div class="col-sm-12">
        	
        			<h2><?php echo $row1['title']; ?></h2>
        			<div class="row">
        			
        				<div class="col-sm-7 col-md-8 col-lg-9">
        		
        		    		<blockquote style="color:rgb(216,216,216); margin: 0;">
								<h4><b style="color:#fff;">Description:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['description']; ?></span></h4>
								<h4><b style="color:#fff;">Type:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['type']; ?></span></h4>
								<h4><b style="color:#fff;">Duration:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['duration_weeks']; ?> week<?php if((int)$row1['duration_weeks'] > 1) echo "s"; ?></span></h4>
							</blockquote>
            	
						</div><!--col-->
            	
            	
						<div class="col-sm-5 col-md-4 col-lg-3">
            		
							<div id="view-experience-buttons">
								<div data-toggle="tooltip" data-placement="top" title="View Results" id="experience-pen" onclick="window.location='respuestas.php?exp=<?php echo $experienceID; ?>'">
									<span class="fas fa-poll-h"></span>
								</div>
								<div data-toggle="tooltip" data-placement="top" title="Edit Experience" id="experience-pen" onclick="nextModal('#Edit')">
									<span class="fas fa-pen"></span>
								</div>
								<div data-toggle="tooltip" data-placement="top" title="Share Experience" id="experience-pen" onclick="prompt('Press Ctrl + C to copy to clipboard!','https://tania.uprrp.edu/enrollInExp.php?id=<?php echo $row1['hash_id']; ?>')">
									<span class="fas fa-link"></span>
								</div>
							</div>
            	
          			  	</div><!--col-->
          			  	
        			</div><!--row-->
        	
		        	<br>
        	
        			<div class="row hidden-xs" id="view-experience-tabs">
						<a class="active" href="#calendar">Calendar</a>
						<a href="#questionnaires">Questionnaires</a>
						<a href="#moments">Moments</a>
						<a href="#milestones">Milestones</a>
					</div><!--row-->
        	
        		</div><!--col-->
        	</div><!--row-->
    	</div><!--container-->
	
		<br>
			
		<!-- CALENDAR-->
		<div id="calendar" class="main-content-box show hidden-xs">
			<div class="container">
		
				<div class="row">
					<h3 class="col-sm-12">Schedule Your Experience</h3>
				</div><!--row-->
			
				<br>
			
				<div class="row">
					<div class="col-sm-12">
						<div id="actualCalendar"></div>
					</div>
				</div>
			
				<br><br><br><br>
			
			</div><!--container-->
		</div>
			
			
			
		<!--QUESTIONNAIRES-->
		<div id="questionnaires" class="main-content-box">
			<div class="container">
		
				<div class="row">
					<h3 class="col-xs-7 col-sm-9 col-md-9">Active Questionnaires</h3>
					<div class="col-xs-5 col-sm-3 col-md-3">
						<!-- 
<span data-toggle="modal" data-target="#Import" style="margin-right: 1em;">
							<button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Import Questionnaire">
								<span class="glyphicon glyphicon-open-file"></span>
							</button>
						</span>
						<span data-toggle="modal" data-target="#Duplicate">
							<button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire">
								<span class="glyphicon glyphicon-paste"></span>
							</button>
						</span>
 -->
							<div id="view-experience-buttons">
								<div data-toggle="tooltip" data-placement="top" title="Import Questionnaire" id="experience-pen" onclick="nextModal('#Import')" style="padding: 0.5em; margin: 0 auto; width: 60px;">
									<span class="fas fa-file-import"></span>
								</div>
								<div data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire" id="experience-pen" onclick="nextModal('#Duplicate')" style="padding: 0.5em; margin: 0 auto; width: 60px;">
									<span class="fas fa-copy"></span>
								</div>
							</div>
					</div>
				</div><!--row-->
				
				<br>
								
				<div class="row">
				
					<div class="col-sm-12">
						<?php
						
  							$query2 = "SELECT * FROM questionnair WHERE `id` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID');";
							$result2 = mysqli_query($connection, $query2);
							
							// IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT
							// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
							if(mysqli_num_rows($result2) > 0):
							
						?>
						<table class="table table-hover table-striped table-responsive">
  							<thead>
  								<tr>
  									<th style="text-align: center;"><h4>Questionnaire</h4></th>
  									<th style="text-align: center;"><h4>Questions</h4></th>
  								</tr>
  							</thead>
  							<tbody>
  								<?php while($row2 = mysqli_fetch_assoc($result2)): ?>
  								<tr style="cursor: pointer;" onclick="location='viewQuestionnaire.php?view=<?php echo $row2['id']?>'">
  									<td style="text-align: center;"><h5><?php echo $row2['q_title']; ?></h5></td>
  									<?php
  										$query3 = "SELECT * FROM questionnair_question WHERE id_questionnair = ".$row2['id'];
  										$result3 = mysqli_query($connection, $query3);
  									?>
  									<td style="text-align: center;"><h5><?php echo mysqli_num_rows($result3); ?></h5></td>
  								</tr>
  								<?php endwhile; ?>
							</tbody>
  						</table>

    					<?php else: ?>
  							<h3 class="text-center"><small>It seems you still haven't added a questionnaire to this experience...</small></h3>
  						<?php endif; ?>
  						 
  						<br>
  						<div class="row">
  							<div class="col-sm-2 col-sm-offset-5">
  								<div data-toggle="tooltip" data-placement="top" title="Create Questionnaire" onclick="nextModal('#NewQuestionnaire')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">
  									<span class="fas fa-plus"></span>
  								</div>
  							</div>
  						</div>
  						
  					</div><!--col-sm-12-->
  					
  				</div><!--row-->
 
				<br><br>
			
				<div class="row">	
					<div class="col-sm-offset-2 col-sm-8">	
						<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4>Tips on Questionnaires</h4>
							<hr>
							<ul>
								<li>These are the questionnaires that are associated to this experience.</li>
								<br>
								<li>Once you have your questionnaire, you can create your moments.</li>
								<br>
								<li>You can create new questionnaires with the plus button...
									<ul>
										<li>or import questionnaires from an Excel file!</li>
										<li>or copy a questionnaire from one experience to another!</li>
									</ul>
								</li>
								<br>
							</ul>
						</div><!--alert-->
					</div><!--col-sm-8-->
				</div><!--row-->
  			
  				<br>
  			
  			</div><!--container-->
  		
		</div>
			
			
			
		<!--MOMENTS-->
		<div id="moments" class="main-content-box">
			<div class="container">
			
				<div class="row">
					<h3 class="col-sm-12">Active Moments</h3>
				</div>
				
				
				<div class="row">
				
				
					<div class="col-sm-12">
						<?php
						
  							$query4 = "SELECT * FROM subquestionnair WHERE `id_questionnair` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID') ORDER BY date_to_administer ASC;";
							$result4 = mysqli_query($connection, $query4);
							
							// IF THE EXPERIENCE HAS AT LEAST ONE MOMENT ASSOCIATED TO IT, SHOW IT
							// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
							if(mysqli_num_rows($result4) > 0):
							
						?>
						<table class="table table-hover table-striped table-responsive">
  							<thead>
  								<tr>
  									<th style="text-align: center;"><h4>Moment</h4></th>
  									<th style="text-align: center;"><h4>Questions</h4></th>
  									<th style="text-align: center;"><h4>Date</h4></th>
  								</tr>
  							</thead>
  							<tbody>
  								<?php while($row4 = mysqli_fetch_assoc($result4)): ?>
  								<tr style="cursor: pointer;" onclick="location='viewMoment.php?view=<?php echo $row4['id']?>'">
  									<td style="text-align: center;"><h5><?php echo $row4['title']; ?></h5></td>
  									<?php
  										$query5 = "SELECT * FROM subquestionnair_question WHERE `id_subquestionnair` = ".$row4['id'];
  										$result5 = mysqli_query($connection, $query5);
  									?>
  									<td style="text-align: center;"><h5><?php echo mysqli_num_rows($result5); ?></h5></td>
									<td style="text-align: center;"><h5><?php echo date("M j, Y (g:i A)", strtotime($row4['date_to_administer'])); ?></h5></td>
  								</tr>
  								<?php endwhile; ?>
  							</tbody>
  						</table>
  					
    					<?php else: ?>
 							<h3 class="text-center"><small>It seems you still haven't added any moments to this experience...</small></h3>
  						<?php endif; ?>
  							 
  						<br>
  					
  						<div class="row">
  							<div class="col-sm-2 col-sm-offset-5">
  								<div data-toggle="tooltip" data-placement="top" title="Create Moment" onclick="nextModal('#NewMoment')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">
  									<span class="fas fa-plus"></span>
  								</div>
  							</div>
  						</div>
  						
  						
  					</div><!--col-sm-12-->
  				
  				</div><!--row-->

  			
				<br><br>
				
				<div class="row">
					<div class="col-sm-offset-2 col-sm-8">
						<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4>Tips on Moments</h4>
							<hr>
							<ul>
								<li>These are the moments that are associated to this experience.</li>
								<br>
								<li>Once they're answered, you can track the results with the results button above.</li>
								<br>
								<li>You can create new moments with the plus button.</li>
								<br>
							</ul>
						</div><!--alert-->
					</div><!--col-sm-8-->
				</div><!--row-->
  				
  				<br>
  			
			</div><!--container-->
			
		</div>
			
			
			
		<!--MILESTONES-->
		<div id="milestones" class="main-content-box">
			<div class="container">
		
				<div class="row">
					<h3 class="col-sm-12">Active Milestones</h3>
				</div>
				
				<div class="row">
					
					
					<div class="col-sm-12">
						<?php
						
  							$query6 = "SELECT * FROM `milestone` WHERE `id_experience` = '$experienceID' ORDER BY date ASC;";
							$result6 = mysqli_query($connection, $query6);
							
							// IF THE EXPERIENCE HAS AT LEAST ONE MILESTONE ASSOCIATED TO IT, SHOW IT
							// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
							if(mysqli_num_rows($result6) > 0):
							
						?>
						<table class="table table-hover table-striped table-responsive">
  							<thead>
  								<tr>
  									<th style="text-align: center;"><h4>Milestone</h4></th>
  									<th style="text-align: center;"><h4>Date</h4></th>
  								</tr>
  							</thead>
  							<tbody>
								<?php while($row6 = mysqli_fetch_assoc($result6)): ?>
  								<tr style="cursor: pointer;">
  									<td style="text-align: center;"><h5><?php echo $row6['title']; ?></h5></td>
  									<td style="text-align: center;"><h5><?php echo date("M j, Y", strtotime($row6['date'])); ?></h5></td>
  								</tr>
   								<?php endwhile; ?>
  							</tbody>
  						</table>
  					
    					<?php else: ?>
 							<h3 class="text-center"><small>It seems you still haven't added any milestones to this experience...</small></h3>
  						<?php endif; ?>
  					
  						<br>
  						
  						<div class="row">
  							<div class="col-sm-2 col-sm-offset-5">
  								<div data-toggle="tooltip" data-placement="top" title="Create Milestone" onclick="nextModal('#NewMilestone')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">
  									<span class="fas fa-plus"></span>
  								</div>
  							</div>
  						</div>
  						
  						
  					</div><!--col-sm-12-->
  				</div><!--row-->

				<br><br>
			
				<div class="row">
					<div class="col-sm-offset-2 col-sm-8">	
						<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4>Tips on Milestones</h4>
							<hr>
							<ul>
								<li>These are the milestones of the students involved in this experience.</li>
								<br>
								<li>Once your moments are answered you can track the impact the milestones had on the answers, if any.</li>
								<br>
								<li>You can create new milestones with the plus button.</li>
								<br>
							</ul>
						</div><!--alert-->
					</div><!--col-sm-8-->
				</div><!--row-->

	  			<br>

			</div><!--container-->
		
		</div>



		<br><br><br><br><br>


		
		<!-- POPUP FOR EDIT EXPERIENCE -->
<form id="editForm"><!--method='POST' action='processes/updateExperience.php'-->
		<div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="EditLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
 				<div class="modal-content">
 				
 					<div class="modal-body">
 						
 						<!-- CLOSE BUTTON -->
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden="true">&times;</span>
 						</button>
						
						<div class="row">
							<div class="col-sm-10">
								<h2>Edit Experience <small>(Basic Info)</small></h2>
							</div>
						</div><!--row--> 						

						<hr><br>

						<div class="form-horizontal">
	
							<!-- ID -->
							<input type="hidden" name="id" value="<?php echo $row1['id']; ?>"> 
				
							<!-- NEW TITLE -->
							<div class="form-group">
								<label class="control-label col-sm-2 col-sm-offset-1">Title:</label>
								<div class="col-sm-7">
									<input type="text" class="form-control text-center" name="newTitle" maxlength="60" value="<?php echo $row1['title']; ?>" required>
								</div>
							</div>
				
							<!-- NEW DESCRIPTION -->
							<div class="form-group">
								<label class="control-label col-sm-2 col-sm-offset-1">Description:</label>
								<div class="col-sm-7">
									<textarea class="form-control text-center" name="newDescription" rows="4" style="resize: vertical;" maxlength="100" required><?php echo $row1['description']; ?></textarea>
								</div>
							</div>
							
<!--
							<!~~ NEW TYPE ~~>
							<div class='form-group'>
								<label class='control-label col-sm-2 col-sm-offset-1'>Type:</label>
								<div class='col-sm-7'>
									<input type='text' class='form-control text-center' name='newType' required value="<?php echo $row1['type']; ?>">
								</div>
							</div>

							<!~~ NEW DURATION ~~>
							<div class='form-group'>
								<label class='control-label col-sm-2 col-sm-offset-1'>Duration:</label>
								<div class='col-sm-7'>
									<input type='number' class='form-control text-center' name='newDuration' required value="<?php echo $row1['duration_weeks']; ?>" readonly>
								</div>
							</div>
				
							<!~~ NEW START DATE ~~>
							<div class='form-group'>
								<label class='control-label col-sm-2 col-sm-offset-1'>Start Date:</label>
								<div class='col-sm-7'>
									<input type='date' class='form-control text-center' name='newStart' required value="<?php echo $row1['start_date']; ?>">
								</div>
							</div>

							<!~~ NEW END DATE ~~>
							<div class='form-group'>
								<label class='control-label col-sm-2 col-sm-offset-1'>End Date:</label>
								<div class='col-sm-7'>
									<input type='date' class='form-control text-center' name='newEnd' required value="<?php echo $row1['end_date']; ?>">
								</div>
							</div>
-->

						</div><!--form-horizontal-->



						<!-- ERROR ALERT FOR USER -->			
						<div id="error-editForm" class="row" style="display: none;">
							<div class="col-sm-12">
								<div class="alert alert-danger mb-1" role="alert">
									<h4 class="error-lead">Error!</h4>
									<p class="error-description"></p>
								</div>
							</div>
						</div>


      				</div><!--modal-body-->
      				
      				<!-- SUBMIT OR CANCEL -->
     				<div class="modal-footer">
       					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        				<button type="submit" class="btn btn-primary" name="updateExperience" disabled>Save Changes</button>
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->
</form><!--form-->
		
		
		<!--FORM VALIDATION FOR EDIT EXPERIENCE-->
		<script>
		
		let newTitle = document.querySelector('[name=newTitle]');
		let newDescription = document.querySelector('[name=newDescription]');
// 		let newType = document.querySelector('[name=newType]');
		
		newTitle.addEventListener('keyup', validateEditExperience);
		newTitle.addEventListener('change', validateEditExperience);
		newDescription.addEventListener('keyup', validateEditExperience);
		newDescription.addEventListener('change', validateEditExperience);
// 		newType.addEventListener('keyup', validateEditExperience);
// 		newType.addEventListener('change', validateEditExperience);
		
		// Only enable submit button when:
		// 1) changes are detected,
		// 2) and both strings (title and description) are not empty
		function validateEditExperience() {
			let updateExperience = document.querySelector('[name=updateExperience]');
			updateExperience.disabled = !newTitle.checkValidity() || !newDescription.checkValidity();
		}
		
		</script>
		
		
		
		<!-- POPUP FOR NEW QUESTIONNAIRE 1 -->
		<div class="modal fade" id="NewQuestionnaire" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
 				<div class="modal-content">
 				
 					<div class="modal-body">
 						
 						<!-- CLOSE BUTTON -->
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden='true'>&times;</span>
 						</button>
						
						<div class="row">
							<div class="col-sm-10">
								<h2>New Questionnaire <small>(Basic Info – <em>Part 1</em>)</small></h2>
							</div>
						</div><!--row--> 						

						<hr><br>

						<div class="form-horizontal">
				
				
							<!-- TITLE -->
							<div class="form-group">
								<label class="control-label col-sm-2">Title:</label>
								<div class="col-sm-9">
									<input type="text" class="form-control text-center" name="q_title_tentative" placeholder="Title" maxlength="100" required>
								</div>
							</div>
				
							<!-- DESCRIPTION -->
							<div class="form-group">
								<label class="control-label col-sm-2">Description:</label>
								<div class="col-sm-9">
									<textarea class="form-control text-center" name="description_tentative" rows="1" placeholder="Description" maxlength="200" required></textarea>
								</div>
							</div>

							<!-- REFERENCE -->
							<div class="form-group">
								<label class="control-label col-sm-2">Reference:</label>
								<div class="col-sm-9">
									<input type="text" class="form-control text-center" name="referencia_tentative" placeholder="Reference" maxlength="60" required>
								</div>
							</div>
							
							<br>
							
							<!-- CATEGORIES -->
							<div class="form-group">
								<label class="control-label col-sm-2">Categories:</label>
								<div class="col-sm-9">
									<textarea id="q_categories_tentative" class="form-control text-center" name="q_categories_tentative" rows="1" placeholder="Categories (comma separated)" required></textarea>
								</div>
							</div>
				
							<!-- SUBCATEGORIES -->
							<div class="form-group">
								<label class="control-label col-sm-2">Subcategories:</label>
								<div class="col-sm-9">
									<textarea id="q_subcategories_tentative" class="form-control text-center" name="q_subcategories_tentative" rows="1" placeholder="Subcategories (comma separated)" required></textarea>
								</div>
							</div>
							
						</div>
			
						<div class="row">
							<div class="col col-sm-offset-2 col-sm-9">
								<p class="alert alert-warning text-justify">
									<strong>Note:</strong> You should at least have the same number of subcategories as categories.
								</p>
							</div>
						</div>
						
			
      				</div><!--modal-body-->
      				
      				<!-- NEXT OR CANCEL -->
     				<div class="modal-footer">
       					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        				<button id="nextQuestionnaire" type="button" class='btn btn-primary' data-dismiss="modal" onclick="nextModal('#NewQuestionnaire_2')" disabled>Next</button>
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->


		<!-- FORM VALIDATION FOR NEW QUESTIONNAIRE (BASIC INFO) -->
		<script>
		
		
		// Fetch the inputs in the first modal
		let questionnaireTitle = document.querySelector('[name=q_title_tentative]');
		let questionnaireDescription = document.querySelector('[name=description_tentative]');
		let questionnaireReference = document.querySelector('[name=referencia_tentative]');
		let categories = document.querySelector('[name=q_categories_tentative]');
		let subcategories = document.querySelector('[name=q_subcategories_tentative]');
		
		
		// Add onchange and onkeyup event listeners to each input in the first modal
		questionnaireTitle.addEventListener('keyup', validateNewQuestionnaire);
		questionnaireTitle.addEventListener('change', validateNewQuestionnaire);
		questionnaireDescription.addEventListener('keyup', validateNewQuestionnaire);
		questionnaireDescription.addEventListener('change', validateNewQuestionnaire);
		questionnaireReference.addEventListener('keyup', validateNewQuestionnaire);
		questionnaireReference.addEventListener('change', validateNewQuestionnaire);
		categories.addEventListener('keyup', validateNewQuestionnaire);
		categories.addEventListener('change', validateNewQuestionnaire);
		subcategories.addEventListener('keyup', validateNewQuestionnaire);
		subcategories.addEventListener('change', validateNewQuestionnaire);
		
		
		// Pass the values from the first modal to the second, where the actual (hidden) inputs reside
		questionnaireTitle.addEventListener('keyup', function() {
			document.querySelector('[name=q_title]').value = questionnaireTitle.value;
		});
		questionnaireDescription.addEventListener('keyup', function() {
			document.querySelector('[name=description]').value = questionnaireDescription.value;
		});
		questionnaireReference.addEventListener('keyup', function() {
			document.querySelector('[name=referencia]').value = questionnaireReference.value;
		});
		categories.addEventListener('keyup', function() {
			document.querySelector('[name=q_categories]').value = categories.value;
		});
		subcategories.addEventListener('keyup', function() {
			document.querySelector('[name=q_subcategories]').value = subcategories.value;
		});
		
		
		// First modal's validation function
		// This basically enables the "Next" button if certain conditions are met
		function validateNewQuestionnaire() {
		
		
			// Fetch "Next" button in modal
			let nextButton = document.querySelector('#nextQuestionnaire');
			
			
			// Check validity of each input (valid if not empty strings)
			let validity = questionnaireTitle.checkValidity();
			validity &= questionnaireDescription.checkValidity();
			validity &= questionnaireReference.checkValidity();
			validity &= categories.checkValidity();
			validity &= subcategories.checkValidity();
			
			
			// Questionnaire should have at least the same number of subcategories as categories
			let rawCategories = categories.value.split(',');
			let rawSubcategories = subcategories.value.split(',');
			let categoriesArray = new Array();
			let subcategoriesArray = new Array();
			
			
			// IF clause is necessary to avoid array WARNINGS and ERRORS
			if(categories.value != '' && subcategories.value != '') {
			
				// Store the "trimmed" categories in categoriesArray
				for(let i = 0; i < rawCategories.length; i++) {
			
					rawCategories[i] = rawCategories[i].trim();
				
					// if string not empty and not whitespace, insert as category option
					if(/\S/.test(rawCategories[i])) {
						categoriesArray.push(rawCategories[i]);
					}
				
				}
			
				// Store the "trimmed" subcategories in subcategoriesArray
				for(let i = 0; i < rawSubcategories.length; i++) {
			
					rawSubcategories[i] = rawSubcategories[i].trim();
				
					// if string not empty and not whitespace, insert as subcategory option
					if(/\S/.test(rawSubcategories[i])) {
						subcategoriesArray.push(rawSubcategories[i]);
					}
				
				}
			
				// Only valid if there are less or equal number of categories to subcategories
				validity &= categoriesArray.length <= subcategoriesArray.length;
				
			}
			
			
			// Disabled if not valid, enabled otherwise
			nextButton.disabled = !validity;
			
		}
		</script>


<form id="newQuestionnaire"><!--method="POST" action="processes/insertQuestionnaire.php"-->
		<!-- POPUP FOR NEW QUESTIONNAIRE 2 -->
		<div class="modal fade" id="NewQuestionnaire_2" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel_2" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
 				<div class="modal-content">
 				
 					<div class="modal-body">
 						
 						<!-- CLOSE BUTTON -->
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden="true">&times;</span>
 						</button>
						
						<div class="row">
							<div class="col-sm-10">
								<h2>New Questionnaire <small>(Questions – <em>Part 2</em>)</small></h2>
							</div>
						</div><!--row--> 						

						<hr>

					
						<!-- EXPERIENCE ID -->
						<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
						
						<!-- QUESTIONNAIRE TITLE -->
						<input type="hidden" name="q_title" maxlength="100" required>

						<!-- QUESTIONNAIRE DESCRIPTION --->
						<input type="hidden" name="description" maxlength="200" required>

						<!-- QUESTIONNAIRE REFERENCE -->
						<input type="hidden" name="referencia" maxlength="60" required>
						
						<!-- QUESTIONNAIRE CATEGORIES -->
						<input id="q_categories" type="hidden" name="q_categories" required>

						<!-- QUESTIONNAIRE SUBCATEGORIES -->
						<input id="q_subcategories" type="hidden" name="q_subcategories" required>


						<!-- QUESTION -->
 						<div id="q1">
						
							<div class="row">
								<div class="col col-sm-offset-1">
									<h4>Question 1</h4>
								</div>
							</div>
							
							<div class="form-horizontal">
							
								<!-- PREMISE -->
								<div class="form-group">
									<label class="col-sm-offset-1 control-label col-sm-2">Premise:</label>
									<div class="col-sm-8">
										<input id="q_premise1" type="text" class="form-control text-center" name="q_premise1" placeholder="Premise" maxlength="600" required>
									</div>
								</div>
						
								<!-- TYPE -->
								<div class="form-group">
									<label class="col-sm-offset-1 control-label col-sm-2">Question Type:</label>
									<div class="col-sm-8">
										<select class="form-control text-center" id="q_type1" name="q_type1" style="width:100%; text-align-last:center;" onchange="newThing(event)" required>
<!-- 											<option disabled selected value="">Type</option> -->
											<option value="1">Scaled</option>
											<option value="2">Open Answer</option>
										</select>
									</div>
								</div>
							
							</div>
							
							<!-- MIN/MAX VALUES/TEXT (OPTIONAL) -->
							<div id="range1">
								<div class="form-inline col col-sm-offset-2">
									<div class="form-group">
										<label class="control-label col-sm-2">Min. Value:</label>
										<div class="col-sm-8">
											<input type="number" class="form-control text-center" id="min_val1" name="min_val1" value="1" readonly>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-sm-2">Min. Text:</label>
										<div class="col-sm-8">
											<input type="text" class="form-control text-center" id="min_text1" name="min_text1" maxlength="40" placeholder="Very Dissatisfied">
										</div>
									</div>
								</div>
							
								<div class="form-inline col col-sm-offset-2">
									<div class="form-group">
										<label class="control-label col-sm-2">Max. Value:</label>
										<div class="col-sm-1">
											<input type="number" class="form-control text-center" id="max_val1" name="max_val1" value="5" min="2">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-sm-2">Max. Text:</label>
										<div class="col-sm-1">
											<input type="text" class="form-control text-center" id="max_text1" name="max_text1" maxlength="40" placeholder="Very Satisfied">
										</div>
									</div>
								</div>
								
								<br>
								
							</div>
							
							<div class="form-horizontal">
							
								<!-- CORRESPONDING CATEGORY -->
								<div class="form-group">
									<label class="col-sm-offset-1 control-label col-sm-2">Category:</label>
									<div class="col-sm-8">
										<select class="form-control text-center" id="q_category1" name="q_category1" style="width: 100%; text-align-last:center;" required>
<!-- 											<option disabled selected value="">Category</option> -->
										</select>
									</div>
								</div>
								
								<!-- CORRESPONDING SUBCATEGORY -->
								<div class="form-group">
									<label class="col-sm-offset-1 control-label col-sm-2">Subcategory:</label>
									<div class="col-sm-8">
										<select class="form-control text-center" id="q_subcategory1" name="q_subcategory1" style="width: 100%; text-align-last:center;" required>
<!-- 											<option disabled selected value="">Subcategory</option> -->
										</select>
									</div>
								</div>
							
							</div>
							
 						</div>


						<br>

 						<div class="row">
 							<div class="col-sm-offset-9 col-sm-2">
								<button type="button" class="btn btn-xs btn-default" onclick="addQuestion()">Add Question</button>
							</div>
						</div>
						
						
						
						
						<!-- ERROR ALERT FOR USER -->			
						<div id="error-newQuestionnaire" class="row" style="display: none;">
							<div class="col-sm-12">
								<div class="alert alert-danger mb-1" role="alert">
									<h4 class="error-lead">Error!</h4>
									<p class="error-description"></p>
								</div>
							</div>
						</div>
			
			
      				</div><!--modal-body-->
      				
      				<!-- SUBMIT OR PREVIOUS -->
     				<div class="modal-footer">
       					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewQuestionnaire')">Previous</button>
        				<button type="submit" class="btn btn-primary" name="createQuestionnaire">Create</button>
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->
</form>





		<!-- POPUP FOR IMPORT QUESTIONNAIRE -->
		<form class='form-horizontal' action='processes/importQuestionnaire.php' method='POST' enctype="multipart/form-data">
			<div class='modal fade' id='Import' tabindex='-1' role='dialog' aria-labelledby='ImportLabel' aria-hidden='true'>
				<div class='modal-dialog modal-dialog-centered modal-md' role='document'>
 					<div class='modal-content'>
						
						<div class='modal-header'>
			  	 	  		<h3 class='modal-title' id='ImportLabel'>Import Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>
   						</div>
 						
 						<div class='modal-body'>

							<div class="form-horizontal">
							
								<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
							
								<div class="row">
									<div class="col-sm-12">
										<h4>Download Template</h4>
										<p>Use this template to fill out your questionnaire and we'll do the heavy lifting for you! Once you're done, <strong>submit</strong> it using the "<em>import</em>" button below.</p>
										<a class="btn btn-primary btn-sm btn-block" href="nameOfTheQuestionnair.xlsx">Download Template</a>
									</div>
								</div><!--row-->
							
								<br>
								<br>
							
								<div class="form-group">
									<div class="col-sm-10 col-sm-offset-2">
   										<label for="exampleInputFile">Questionnaire in xlsx format</label>
										<input type="file" name='import'>
										<p class="help-block">Choose your .xlsx file (remember it has to have the correct format).</p>
									</div>
								</div><!--form-group-->
								
							</div>


      					</div><!--modal-body-->
     					
     					<div class='modal-footer'>
       						<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
        					<button type='submit' class='btn btn-primary' name='insertQuestionnaire'>Import</button>
      					</div>  					
    			
    				</div><!--modal-content-->
  				</div><!--modal-dialog-->
			</div><!--modal-->
			
			
			
			
			
		<!-- POPUP FOR DUPLICATE QUESTIONNAIRE -->
		<form class='form-horizontal' action='processes/duplicateQuestionnaire.php' method='POST'>
			<div class='modal fade' id='Duplicate' tabindex='-1' role='dialog' aria-labelledby='DuplicateLabel' aria-hidden='true'>
				<div class='modal-dialog modal-dialog-centered' role='document'>
 					<div class='modal-content'>

						<div class='modal-header'>
			  	 	  		<h3 class='modal-title' id='DuplicateLabel'>Duplicate Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>
   						</div>

 						<div class='modal-body'>
 							
							<span class='text-center'>
								<h4>Copy a questionnaire from one experience to another</h4>
							</span>
							
							<br>
							
							<!-- FROM QUESTIONNAIRE -->
							<label for="fromQuestionnaireID">Which Questionnaire:</label>
							<?php
								// FIRST ASSUME FALSE
								$errorDuplicate = false;
								
								$queryQuestionnaires = "SELECT * FROM `questionnair` WHERE id IN (SELECT id_questionnair FROM experience_questionnair WHERE id_experience = '$experienceID');";
								$resultQuestionnaires = mysqli_query($connection, $queryQuestionnaires);
								
								if($resultQuestionnaires->num_rows > 0):
							?>
							<select class="form-control text-center" id="fromQuestionnaireID" name="fromQuestionnaireID" style="text-align-last:center;" required>
								<?php while($rowQuestionnaires = mysqli_fetch_assoc($resultQuestionnaires)): ?>
									<option value="<?php echo $rowQuestionnaires['id']; ?>"><?php echo $rowQuestionnaires['q_title']; ?></option>
								<?php endwhile; ?>
							</select>
							<?php
								else:							
									$errorDuplicate = true;
							?>
							<h3 class="text-center"><small>It seems you still haven't added any questionnaires to this experience...</small></h3>
							<?php endif; ?>
							
							<br>
							
							<!-- TO EXPERIENCE -->
							<label for="toExperienceID">To What Experience:</label>
							<?php

								// CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
								if($_SESSION['dbUserData']['admin'] === '1') {
									$queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID';";
								} else {
									$queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID' AND id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
								}							
							
								$resultExperience2 = mysqli_query($connection, $queryExperience2);
								
								if($resultExperience2->num_rows > 0):
							?>
							<select class="form-control text-center" id="toExperienceID" name="toExperienceID" style="text-align-last:center;" required>
								<?php while($rowExperience2 = mysqli_fetch_assoc($resultExperience2)): ?>
								<option value="<?php echo $rowExperience2['id']; ?>"><?php echo $rowExperience2['title']; ?></option>
								<?php endwhile; ?>
							</select>							
							<?php
								else:
									$errorDuplicate = true;	
							?>
							<h3 class="text-center"><small>You don't have another experience to duplicate to...</small></h3>
							<?php endif; ?>
							
							
      					</div><!--modal-body-->
      					
      					<!-- SUBMIT OR CANCEL -->
     					<div class='modal-footer'>
       						<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
        					<button type='submit' class='btn btn-primary' name='duplicateQuestionnaire' <?php if($errorDuplicate === true) echo "disabled"; ?>>Confirm</button>
      					</div>
      					
    				</div><!--modal-content-->
  				</div><!--modal-dialog-->
			</div><!--modal-->
		</form>
			




<!-- POPUP FOR NEW MOMENT 1 -->
<form id="newMoment"><!--method='POST' action='processes/insertMoment.php'-->
		<div class="modal fade" id="NewMoment" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
 				<div class="modal-content">
 				
 					<div class="modal-body">
 						
 						<!-- CLOSE BUTTON -->
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden='true'>&times;</span>
 						</button>
						
						<div class="row">
							<div class="col-sm-10">
								<h2>New Moment <small>(Basic Info – <em>Part 1</em>)</small></h2>
							</div>
						</div><!--row--> 						

						<hr><br>

						
						<div class="form-horizontal">
				
							<!--EXPERIENCE ID-->
							<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
						
							<!-- TITLE -->
							<div class="form-group">
								<label class="control-label col-sm-2">Title:</label>
								<div class="col-sm-9">
									<input type="text" class="form-control text-center" name="m_title" maxlength="60" placeholder="Title" required>
								</div>
							</div>
				
							<!-- DESCRIPTION -->
							<div class="form-group">
								<label class="control-label col-sm-2">Description:</label>
								<div class="col-sm-9">
									<textarea class="form-control text-center" name="m_description" rows="1" style="resize:vertical;" maxlength="100" placeholder="Description" required></textarea>
								</div>
							</div>

							<!-- DATE TO ADMINISTER -->
							<div class="form-group">
								<label class="control-label col-sm-2">Date to Administer:</label>
								<div class="col-sm-9">
									<input type="datetime-local" class="form-control text-center" name="m_date" maxlength="16" placeholder="YYYY-MM-DDThh:mm" required>
								</div>
							</div>
							
							<!-- CORRESPONDING QUESTIONNAIRE -->
							<?php 
							
								$query7 = "SELECT * FROM `questionnair` WHERE `id` IN (SELECT `id_questionnair` FROM `experience_questionnair` WHERE `id_experience` = '$experienceID');";
								$result7 = mysqli_query($connection, $query7);
								
								// IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT
								// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
								if(mysqli_num_rows($result7) > 0):
								
							?>
							<div class="form-group">
								<label class="control-label col-sm-2">Questionnaire:</label>
								<div class="col-sm-9">
									<select class="form-control" id="m_questionnaire" name="m_questionnaire" style="width:100%; text-align-last:center;" required>
										<option disabled selected value>Corresponding Questionnaire</option>
										<?php while($row7 = mysqli_fetch_assoc($result7)): ?>
										<option value="<?php echo $row7['id']; ?>"><?php echo $row7['q_title']; ?></option>
										<?php endwhile; ?>
									</select>
								</div>
							</div>
							<?php else: ?>
							<div class="text-center">
								<h3><small>First add a questionnaire!</small></h3>
							</div>
							<?php endif; ?>
				

						</div><!--form-horizontal-->
			
      				</div><!--modal-body-->
      				
      				<!-- NEXT OR CANCEL -->
     				<div class="modal-footer">
       					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        				<button id="nextMoment" type="button" class="btn btn-primary" data-dismiss="modal" onclick="nextModal('#NewMoment_2')" disabled>Next</button>
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->
		
		
		
		<!-- FORM VALIDATION FOR NEW MOMENT (BASIC INFO) -->
		<script>
		
		
		// Fetch the inputs in the first modal
		let momentTitle = document.querySelector('[name=m_title]');
		let momentDescription = document.querySelector('[name=m_description]');
		let momentDate = document.querySelector('[name=m_date]');
		let momentQuestionnaire = document.querySelector('[name=m_questionnaire]');
		
		
		// Add onchange and onkeyup event listeners to each input in the first modal
		momentTitle.addEventListener('keyup', validateNewMoment);
		momentTitle.addEventListener('change', validateNewMoment);
		momentDescription.addEventListener('keyup', validateNewMoment);
		momentDescription.addEventListener('change', validateNewMoment);
		momentDate.addEventListener('keyup', validateNewMoment);
		momentDate.addEventListener('change', validateNewMoment);
		momentQuestionnaire.addEventListener('keyup', validateNewMoment);
		momentQuestionnaire.addEventListener('change', validateNewMoment);
		

		
		// First modal's validation function
		// This basically enables the "Next" button if certain conditions are met
		function validateNewMoment() {
		
			// Fetch "Next" button in modal
			let nextButton = document.querySelector('#nextMoment');
			
			// Check validity of each input (valid if not empty strings & "maxlength" is set)
			let validity = momentTitle.checkValidity();
			validity &= momentDescription.checkValidity();
			validity &= momentDate.checkValidity();
			validity &= momentQuestionnaire.checkValidity();
			
			// Disabled if not valid, enabled otherwise
			nextButton.disabled = !validity;
			
		}
		
		
		</script>
		
		
		
		<!-- POPUP FOR NEW MOMENT 2 -->
		<div class="modal fade" id="NewMoment_2" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel_2" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
 				<div class="modal-content">
 				
 					<div class="modal-body">
 						
 						<!-- CLOSE BUTTON -->
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden='true'>&times;</span>
 						</button>
						
						<div class="row">
							<div class="col-sm-10">
								<h2>New Moment <small>(Questions – <em>Part 2</em>)</small></h2>
							</div>
						</div><!--row--> 						

						<hr><br>
						
						<!-- QUESTION -->
						<div id="qq1" >
						
							<div class="row">
								<div class="col col-sm-offset-1">
									<h4>Question 1</h4>
								</div>
							</div>

						
							<!-- CHOOSE QUESTION FROM CORRESPONDING QUESTIONNAIRE -->
							<div class="form-horizontal">
								<div class="form-group">
									<div class='col-sm-offset-2 col-sm-9'>
										<select class="form-control" id="m_question_1" name="m_question_1" style="width:100%; text-align-last:center;" required>
											<option disabled selected value>Select Question</option>
										</select>
									</div>
								</div>
							</div>
							
						</div>
						
						
						<br>
						
						 <div class="row">
 							<div class="col-sm-offset-9 col-sm-2">
								<button type='button' class='btn btn-xs btn-default' onclick='addSelectableQuestion()'>Add Question</button>
							</div>
						</div>
						


						<!-- ERROR ALERT FOR USER -->			
						<div id="error-newMoment" class="row" style="display: none;">
							<div class="col-sm-12">
								<div class="alert alert-danger mb-1" role="alert">
									<h4 class="error-lead">Error!</h4>
									<p class="error-description"></p>
								</div>
							</div>
						</div>



      				</div><!--modal-body-->
      				
      				<!-- NEXT OR CANCEL -->
     				<div class="modal-footer">
       					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewMoment')">Previous</button>
        				<button type="submit" class="btn btn-primary" name="newMoment" <?php if(mysqli_num_rows($result7) == 0) { echo 'disabled'; } ?>>Create</button>
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->
</form>



<!-- POPUP FOR NEW MILESTONE -->
<form id="newMilestone">
		<div class="modal fade" id="NewMilestone" tabindex="-1" role="dialog" aria-labelledby="NewMilestoneLabel" aria-hidden="true">
			<div class="modal-dialog" role="document"">
 				<div class="modal-content">
 				
 					<div class="modal-body">
 						
 						<!-- CLOSE BUTTON -->
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden="true">&times;</span>
 						</button>
						
						<div class="row">
							<div class="col-sm-10">
								<h2>New Milestone</h2>
							</div>
						</div><!--row--> 						

						<hr><br>

						
						<div class="form-horizontal">
				
							<!-- EXPERIENCE ID -->
							<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
							
							<!-- TITLE -->
							<div class="form-group">
								<label class="control-label col-sm-2">Title:</label>
								<div class="col-sm-9">
									<input type="text" class="form-control text-center" name="mil_title" maxlength="256" placeholder="Title" required>
								</div>
							</div>
				
							<!-- DATE -->
							<div class="form-group">
								<label class="control-label col-sm-2">Date:</label>
								<div class="col-sm-9">
									<input type="date" class="form-control text-center" name="mil_date" placeholder="YYYY-MM-DD" required>
								</div>
							</div>
						
						</div>
						

						<!-- ERROR ALERT FOR USER -->			
						<div id="error-newMilestone" class="row" style="display: none;">
							<div class="col-sm-12">
								<div class="alert alert-danger mb-1" role="alert">
									<h4 class="error-lead">Error!</h4>
									<p class="error-description"></p>
								</div>
							</div>
						</div>
			
			
      				</div><!--modal-body-->
      				
      				<!-- NEXT OR CANCEL -->
     				<div class="modal-footer">
       					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        				<button type="submit" class="btn btn-primary" name="newMilestone">Create</button>
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->		
</form>
		



		<!-- STORE START DATE FOR CALENDAR RERENDERING LATER -->
		<input id="experience_start_date" type="hidden" value="<?php echo $row1['start_date']; ?>">



		<!-- FULL CALENDAR IMPORTS -->
    	<script src="processes/fullcalendar/packages/core/main.min.js"></script>
    	<script src="processes/fullcalendar/packages/daygrid/main.min.js"></script>
    	<script src="processes/fullcalendar/packages/timegrid/main.min.js"></script>
    	<script src="processes/fullcalendar/packages/interaction/main.min.js"></script>
<!-- 		<script src="https://unpkg.com/@fullcalendar/core/main.min.js"></script> -->
<!-- 		<script src="https://unpkg.com/@fullcalendar/daygrid/main.min.js"></script> -->
<!-- 		<script src="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js"></script> -->
<!-- 		<script src="https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js"></script> -->
	
	
		
		<script src="js/viewExperience.js"></script>
		<script src="js/handleSubmit.js"></script>
	
<script>


		["editForm", "newQuestionnaire", "newMoment", "newMilestone"].forEach(function(formName) {
			
			var form = document.getElementById(formName);
			
			if(form) {
				form.addEventListener('submit', function(e) {
					handleSubmit(e, formName);
				});
			}
			
		});
		

//window.onload = function() {

// First load an empty calendar
var calendarElement = document.getElementById('actualCalendar');
var calendar = new FullCalendar.Calendar(calendarElement, {
	plugins: [ 'dayGrid', 'timeGrid', 'interaction' ],
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'dayGridMonth,timeGridWeek,timeGridDay'
	},
	defaultDate: document.getElementById('experience_start_date').value,
	businessHours: true,
	editable: true,
	dragScroll: true,
	eventDrop: function(eventDropInfo) {
		$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special4.php", {
			id: eventDropInfo.event.id,
			experienceID: document.querySelector('input[name=id_experience]').value,
			newStartDate: Date.parse(eventDropInfo.event.start), // convert to UNIX timestamp
			newEndDate: Date.parse(eventDropInfo.event.end) // convert to UNIX timestamp
		}).fail(function() {
			alert('An error occurred! Resetting calendar...');
			eventDropInfo.revert();
		});
	}
});
calendar.render();


// After the rest of the page has loaded, fetch events from DB & re-render calendar
var calendarConfig;
					
$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special2.php", 
	{
 		experienceID: document.querySelector('input[name=id_experience]').value
	},
	function(data, status) {
		if(!isJSON(data)) {
			return;
		}
		calendarConfig = JSON.parse(data);
	}
).done(function() {
	
// 	console.log(calendarConfig);
	
	if(calendarConfig === undefined) {
		alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");
		return;
	}

	calendarConfig.events.forEach(calendarEvent => {
		calendar.addEvent(calendarEvent);
	});

	calendar.render();	

}).fail(function() { 
	alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");
});


//}//domcontentloaded//onload

</script>



<?php include_once 'footer.php'; ?>