<!-- new crud.html for Foundry BS- 5-->
<body>
	<?php
	require "%relativeSiteAssetPath%/sc_assets/api.php";
	require '%relativeSiteAssetPath%/sc_assets/Database.php';
	require '%relativeSiteAssetPath%/sc_assets/Post.php';
    require '%relativeSiteAssetPath%/sc_assets/logging.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>
%[if %(%id=picker% == 1)% ]%
	
		<script src='%relativeSiteAssetPath%/sc_assets/iro.js'></script>
%[endif]%

%%[[if publish]]%%
%[if %(%id=picker% == 1)% ]%

<!-- Modal for color picker -->
<div class="modal-cp fade hide" id="colorpicker-modal">
  <div class="modal-cp-dialog">
    <div class="modal-cp-content">
      <div class="modal-cp-header">
        <h5 class="modal-cp-title">Select a color - Click Ok</h5>
      </div>
      <div class="modal-cp-body">
        <div id="colorpicker"></div>
      </div>
      <div class="modal-cp-footer">
        <button type="button" class="btn button danger tiny cp-btn-default" data-dismiss="modal" id="colorpicker-cancel">Cancel</button>
        <button type="button" class="btn button success tiny cp-btn-primary" id="colorpicker-submit">OK</button>
      </div>
    </div>
  </div>
</div>
%[endif]%


%%[[endif]]%%

<div class="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="sc-modal" data-target="#form_sc-modal"><span class="glyphicon glyphicon-plus"></span> Add Event</button>
		<br /><br/ >
		<!-- <table class="table table-bordered"> -->
	<table class="table sc-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>
					 <!-- ADD FILTER HEADER HERE -->
					 <!--
						<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>
					<!-- // add filter field here -->
					%%[[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="sc-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="sc-modal fade" id="update_event<?php echo $fetch['id']?>">
					<div class="sc-modal-dialog">
						<div class="sc-modal-content sc-modal-center">
							<form action="%relativeSiteAssetPath%/sc_assets/update_event.php" method="POST">
								<div class="sc-modal-header">
									<h3 class="sc-modal-title">Update Event</h3>
								</div>
								<div class="sc-modal-body">
										<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">
											%[if %id=shoDetUrl%]%
											<label>%id=idevurl%</label>
											%[endif]%
											<input %[if %id=shoDetUrl%]%type="text"%[else]% type="hidden"%[endif]% 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">
											%[if %id=shoDetails%]%
												<label for = "details">%id=iddetail%</label>
											%[endif]%	
												<textarea id ="details" %[if %id=shoDetails%]%type="text"%[else]% style="display:none"%[endif]% rows="8" cols="50" wrap="soft" class="form-control" name="details"/><?php echo strip_tags($fetch['details'])?></textarea>
											</div>
										<div class="form-group">
											%[if %id=shoVenue%]%
											<label>%id=idvenue%</label>
											%[endif]%
											<input %[if %id=shoVenue%]%type="text"%[else]% type="hidden"%[endif]% class="form-control" value="<?php echo $fetch['venue']?>" name="venue" size="50"/>
										</div>
										<div class="form-group">
											%[if %id=shoAddress%]%
												<label for = "add">%id=idadd%</label>
											%[endif]%	
												<textarea id ="add" %[if %id=shoAddress%]% type="text"%[else]% style="display:none"%[endif]% 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">
											%[if %id=shoSocialUrl%]%
											<label>%id=idsocial%</label>
											%[endif]%
											<input %[if %id=shoSocialUrl%]%type="text"%[else]% type="hidden"%[endif]% class="form-control" value="<?php echo $fetch['social_url']?>" name="social_url" size="50"/>
										</div>
										<div class="form-group">
											%[if %id=shoSponsors%]%
											<label>%id=idsponsors%</label>
											%[endif]%
											<input %[if %id=shoSponsors%]%type="text"%[else]% type="hidden"%[endif]% class="form-control" value="<?php echo strip_tags($fetch['sponsors'])?>" name="sponsors" size="50"/>
										</div>
										<div class="form-group">
											%[if %id=shoTxtCol%]%
											<label>%id=idtext%</label>
											%[endif]%
											<input id="txtpickerEdit" %[if %id=shoTxtCol%]%type="text"%[else]% type="hidden"%[endif]%  class="form-control colorpicker-field" value="<?php echo $fetch['textColor']?>" name="textColor" size="50"/>
										</div>
										<div class="form-group">
											%[if %id=shoBrdCol%]%
											<label>%id=idborder%</label>
											%[endif]%
											<input id="bordpickerEdit" %[if %id=shoBrdCol%]%type="text"%[else]% type="hidden"%[endif]% class="form-control colorpicker-field" value="<?php echo $fetch['borderColor']?>" name="borderColor" size="50"/>
										</div>
										<div class="form-group">
											%[if %id=shoBckCol%]%
											<label>%id=idback%</label>
											%[endif]%
											<input id="backpickerEdit" %[if %id=shoBckCol%]%type="text"%[else]% type="hidden"%[endif]%  class="form-control colorpicker-field" value="<?php echo $fetch['backgroundColor']?>" name="backgroundColor" size="50"/>
										</div>
								</div>
								<div style="clear:both;"></div>
								<div class="sc-modal-footer">
									<button class="button warning" name="update"><span class="glyphicon glyphicon-update"></span> Update</button>
									<button type="button" class="button danger" data-dismiss="sc-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="add-cnt">
	<div class="sc-modal fade" id="form_sc-modal" aria-hidden="true">
		<div class="sc-modal-dialog">
			<div class="sc-modal-content sc-modal-center">
				<form method="POST" action="%relativeSiteAssetPath%/sc_assets/save_event.php">
					<div class="sc-modal-header">
						<h3 class="sc-modal-title">Add Event</h3>
				
					<div class="sc-modal-body">
						
					
						<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">
											%[if %id=shoDetUrl%]%
											<label>%id=idevurl%</label>
											%[endif]%
											<input %[if %id=shoDetUrl%]%type="text"%[else]% type="hidden"%[endif]% class="form-control" name="event_url" size="50" placeholder="Url to Details page on or off this site" value="%id=defurl%"/>
										</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">
											%[if %id=shoDetails%]%
											<label>%id=iddetail%</label>
											%[endif]%
											<textarea id ="details" %[if %id=shoDetails%]%type="text"%[else]% style="display:none"%[endif]% rows="8" cols="50" wrap="hard" class="form-control" name="details" placeholder="Details about your event"/></textarea>

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

										<div class="form-group">
											%[if %id=shoAddress%]%
												<label for = "add">%id=idadd%</label>
												%[endif]%
												<textarea id ="add" %[if %id=shoAddress%]%type="text"%[else]% style="display:none"%[endif]% rows="3" cols="50" wrap="hard" class="form-control" name="venue_add" placeholder="The address, phone no. etc."/></textarea>
											</div>

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

%[if %(%id=picker% == 1)% ]%

<script> 
// tested in Add & Edit Modes
// Wait for the DOM to load
document.addEventListener('DOMContentLoaded', function() {
  const colorPicker = new iro.ColorPicker('#colorpicker', {
    width: 200,
    color: '#ffffff',
    borderWidth: 1,
    borderColor: '#fff',
  });

  function onColorInputClick() {
    const colorInput = this;

    // Show the color picker modal
    const colorPickerModal = document.querySelector('#colorpicker-modal');
    //colorPickerModal.classList.remove('hide');
	colorPickerModal.classList.add('show');

    // When the color picker modal is opened, set the selected color to the default color
    colorPicker.color.hexString = colorInput.value || '#ffffff';

    // When a color is picked, update the color input field value
    function onColorChange(color) {
      colorInput.value = color.hexString;
    }
    colorPicker.on('color:change', onColorChange);

    // When the modal is closed, remove the color picker event listener
    const okButton = document.querySelector('#colorpicker-submit');
    okButton.addEventListener('click', function() {
      colorPicker.off('color:change', onColorChange);
      const colorPickerModal = document.querySelector('#colorpicker-modal');
     // colorPickerModal.classList.add('hide');
	  colorPickerModal.classList.remove('show');
    });

    // When the cancel button is clicked, remove the color picker event listener and hide the modal
    const cancelButton = document.querySelector('#colorpicker-cancel');
    cancelButton.addEventListener('click', function() {
      colorPicker.off('color:change', onColorChange);
      const colorPickerModal = document.querySelector('#colorpicker-modal');
      //colorPickerModal.classList.add('hide');
	  	  colorPickerModal.classList.remove('show');

    });
  }

  // Wait for the add form to be in the DOM
  const addRecordButton = document.querySelector('.button.success[data-target="#form_sc-modal"]');
  addRecordButton.addEventListener('click', function() {
    const colorInputs = document.querySelectorAll('.form-control.colorpicker-field');

    colorInputs.forEach(function(colorInput) {
      // Remove the existing event listener before adding a new one
      colorInput.removeEventListener('click', onColorInputClick);
      colorInput.addEventListener('click', onColorInputClick);
    });
  });

  // Wait for the edit forms to be in the DOM
  const editRecordButtons = document.querySelectorAll('.button.edit');
  editRecordButtons.forEach(function(editRecordButton) {
    editRecordButton.addEventListener('click', function() {
      const scModalId = editRecordButton.getAttribute('data-target');
      const colorInputs = document.querySelectorAll(`${scModalId} .form-control.colorpicker-field`);

      colorInputs.forEach(function(colorInput) {
        // Remove the existing event listener before adding a new one
        colorInput.removeEventListener('click', onColorInputClick);
        colorInput.addEventListener('click', onColorInputClick);
      });
    });
  });

  // Close the color picker modal when the OK button is clicked
  const okButton = document.querySelector('#colorpicker-submit');
  okButton.addEventListener('click', function() {
    const colorPickerModal = document.querySelector('#colorpicker-modal');
    //colorPickerModal.classList.add('hide');
	colorPickerModal.classList.remove('show');
  });

  // Close the color picker modal when the Cancel button is clicked
  const cancelButton = document.querySelector('#colorpicker-cancel');
  cancelButton.addEventListener('click', function() {
    const colorPickerModal = document.querySelector('#colorpicker-modal');
    //colorPickerModal.classList.add('hide');
	colorPickerModal.classList.remove('show');
  });

});


</script>
%[endif]%




	<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>