<body>
	<?php
	require "%relativeSiteAssetPath%/sc_assets/api.php";
	require '%relativeSiteAssetPath%/sc_assets/Database.php';
	require '%relativeSiteAssetPath%/sc_assets/Post.php';
if (%id=logging%){
$_SESSION['logging'] = true;
}else{
	$_SESSION['logging'] = false;
}
$_SESSION['format'] = '%id=dformat%';
$_SESSION['separator'] = '%id=dseparate%';
$_SESSION['hours'] = %id=hours%;
$_SESSION['relcrudpath'] = dirname(__FILE__);
	?>
	<script src='%relativeSiteAssetPath%/sc_assets/flatpickr/flatpickr.js'></script>

	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Add/Edit/Delete Events</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<button type="button" class="button success" data-toggle="modal" data-target="#form_modal"><span class="glyphicon glyphicon-plus"></span> Add Event</button>
		<br /><br/ >
		<!-- <table class="table table-bordered"> -->
<table class="table">

			<thead class="alert-info">
				<tr>
					<!--
						<th>Id</th>
					-->

					<th>%id=idtitle%</th>

					<!--
						<th>%id=idevurl%</th>
					-->

					<th>%id=idstart%</th>

					<!--
						<th>%id=idend%</th>
						<th>%id=iddetail%</th>
 					-->

					 <th>%id=idvenue%</th>

					 <!--
						<th>%id=idadd%</th>
						<th>%id=idsocial%</th>
						<th>%id=idsponsors%</th>
						<th>%id=idtext%</th>
						<th>%id=idborder%</th>
						<th>%id=idback%</th>
					-->
					<th class='no-controls'></th>
				</tr>
			</thead>
			<tbody>
				%%[[if publish]]%%
				<?php
				// Instantiate DB & connect
               $database = new Database();
               $db = $database->connect();

					// Instantiate object
					$post = new Post($db);


					$result = $post ->read();


					while($fetch = $result->fetch()){
				?>
				<tr>
					<td><?php echo $fetch['title']?></td>
					<td><?php echo $fetch['ev_start']?></td>
					<td><?php echo $fetch['venue']?></td>
					%%[[endif]]%%


%%[[if !publish]]%%
<td>The actual data</td>
<td>can only be rendered</td>
<td>on the published page. %id=dformat% %id=dseparate% %id=hours%</td>
%%[[endif]]%%
<td><button class="button edit" type="button" data-toggle="modal" data-target="#update_event<?php echo $fetch['id']?>"><span class="glyphicon glyphicon-edit"></span> </button>
 <a href="%relativeSiteAssetPath%/sc_assets/delete.php?id=<?php echo $fetch['id']?>"><button class="button trash"><span class="glyphicon glyphicon-trash"></span> </a></button></td>


				</tr>

				<div class="modal fade" id="update_event<?php echo $fetch['id']?>">
					<div class="modal-dialog">
						<div class="modal-content modal-center">
							<form action="%relativeSiteAssetPath%/sc_assets/update_event.php" method="POST">
								<div class="modal-header">
									<h3 class="modal-title">Update Event</h3>
								</div>
								<div class="modal-body">
									<div class="col-md-2"></div>
									<div class="col-md-6">
										<div class="form-group">
											<label>%id=idtitle%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['title']?>" name="title" size="50"/>

											<input type="hidden" class="form-control" value="<?php echo $fetch['id']?>" name="id" size="50" />
										</div>
										<div class="form-group">
											<label>%id=idevurl%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['event_url']?>" name="event_url" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idstart%</label>
											<input type="text" class="form-control" id="start" value="<?php echo $fetch['ev_start']?>" name="ev_start" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idend%</label>
											<input type="text" class="form-control" id="end" value="<?php echo $fetch['ev_end']?>" name="ev_end" size="50"/>
										</div>

										<div class="form-group">
												<label for = "details">%id=iddetail%</label>
												<textarea id ="details" type="text" rows="8" cols="50" wrap="soft" class="form-control" name="details"/><?php echo strip_tags($fetch['details'])?></textarea>
											</div>
										<div class="form-group">
											<label>%id=idvenue%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['venue']?>" name="venue" size="50"/>
										</div>

										<div class="form-group">
												<label for = "add">%id=idadd%</label>
												<textarea id ="add" type="text" rows="3" cols="50" wrap="soft" class="form-control" name="venue_add"/><?php echo strip_tags($fetch['venue_add'])?></textarea>
											</div>

										<div class="form-group">
											<label>%id=idsocial%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['social_url']?>" name="social_url" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idsponsors%</label>
											<input type="text" class="form-control" value="<?php echo strip_tags($fetch['sponsors'])?>" name="sponsors" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idtext%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['textColor']?>" name="textColor" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idborder%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['borderColor']?>" name="borderColor" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idback%</label>
											<input type="text" class="form-control" value="<?php echo $fetch['backgroundColor']?>" name="backgroundColor" size="50"/>
										</div>


									</div>
								</div>
								<div style="clear:both;"></div>
								<div class="modal-footer">
									<button class="button warning" name="update"><span class="glyphicon glyphicon-update"></span> Update</button>
									<button type="button" class="button danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
								</div>
							</form>
							<?php writeFile(); // in api.php ?>
						</div>
					</div>
				</div>
%%[[if publish]]%%
				<?php
					}
				?>
%%[[endif]]%%
			</tbody>
		</table>
	</div>
	<div class="modal fade" id="form_modal" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content modal-center">
				<form method="POST" action="%relativeSiteAssetPath%/sc_assets/save_event.php">
					<div class="modal-header">
						<h3 class="modal-title">Add Event</h3>
					</div>
					<div class="modal-body">
						<div class="col-md-2"></div>
						<div class="col-md-6">
						<div class="form-group">
											<label>%id=idtitle%</label>
											<input type="text" class="form-control" name="title" size="50" placeholder="Your event title/name"required/>

											<input type="hidden" class="form-control" name="id" size="50"/>
										</div>
										<div class="form-group">
											<label>%id=idevurl%</label>
											<input type="text" class="form-control" name="event_url" size="50" placeholder="Url to Details page on or off this site"/>
										</div>
										<div class="form-group">
											<label>%id=idstart%</label>
											<input type="text" class="form-control" id ="start" name="ev_start" size="50" placeholder="YYYY-MM-DD -or- DD/MM/YYYY -time- 00:00AM" required/>
										</div>
										<div class="form-group">
											<label>%id=idend%</label>
											<input type="text" class="form-control" id="end" name="ev_end" size="50" placeholder="YYYY-MM-DD -or- DD/MM/YYYY -time- 00:00AM" required/>
										</div>
										<div class="form-group">
											<label>%id=iddetail%</label>
											<textarea id ="details" type="text" rows="8" cols="50" wrap="hard" class="form-control" name="details" placeholder="Details about your event"/></textarea>

										</div>
										<div class="form-group">
											<label>%id=idvenue%</label>
											<input type="text" class="form-control" name="venue" size="50" placeholder="Where is the event?"/>
										</div>

										<div class="form-group">
												<label for = "add">%id=idadd%</label>
												<textarea id ="add" type="text" rows="3" cols="50" wrap="hard" class="form-control" name="venue_add" placeholder="The address, phone no. etc."/></textarea>
											</div>

										<div class="form-group">
											<label>%id=idsocial%</label>
											<input type="text" class="form-control" name="social_url" size="50"placeholder="A second url for more information"/>
										</div>
										<div class="form-group">
											<label>%id=idsponsors%</label>
											<input type="text" class="form-control" name="sponsors" size="50" placeholder="Sponsor name(s) or url of logo image"/>
										</div>
											<div class="form-group">
											<label>%id=idtext%</label>
											<input type="text" class="form-control" name="textColor" size="50" placeholder="set the text color - black, red, blue etc."/>
										</div>
										<div class="form-group">
											<label>%id=idborder%</label>
											<input type="text" class="form-control" name="borderColor" size="50" placeholder="set the border color - black, red, blue etc."/>
										</div>
										<div class="form-group">
											<label>%id=idback%</label>
											<input type="text" class="form-control" name="backgroundColor" size="50" placeholder="set the background color - black, red, blue etc."/>
										</div>
						</div>
					</div>
					<div style="clear:both;"></div>
					<div class="modal-footer">
						<button class="button small success" name="save">Save</button>
						<button type="button" class="button small danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
					</div>
				</form>
				<?php writeFile(); //in api.php?>
			</div>
		</div>
	</div>



	<script>
		var format = <?php echo "'".$_SESSION['format']."'"; ?>;
		var separate = <?php echo "'".$_SESSION['separator']."'"; ?>;
		var hours = <?php echo "'".$_SESSION['hours']."'"; ?>;
        let one = format.substr(0, 1);
        let two = format.substr(1,1);
		let three = format.substr(2,1); 
		let time;
		let use24;
		console.log(<?php echo "'".$_SESSION['hours']."'"; ?>);
		if (!(hours==1)) {
			time = 'h:i K';
			use24 = false;
		} else {
			time = 'H:i'
			use24 = true;
		}
  
  let finalFormat = one+separate+two+separate+three+' '+time;
  console.log(finalFormat);
	config ={
	   //dateFormat: "m/d/Y h:iK", // default
	   enableTime: true,
	   dateFormat: finalFormat,
	   time_24hr: use24,   //default
	  
	   //dateFormat: "d/m/Y H:i",  set from stacks UI
	   //time_24hr: true, // set from stacks UI
	}
	const fpstart = flatpickr("#start", config);
	const fpend = flatpickr("#end", config);

	</script>
</body>
</html>
