<?php require('../../connection.php');
$stmt = $GLOBALS['con']->prepare("SELECT * FROM `diary` WHERE `id`='".$_REQUEST['id']."'")or die(mysqli_error());
$stmt->execute();$q=$stmt->get_result();$stmt->close();	
$d=mysqli_fetch_array($q);
$theDate=date('d-F-Y',$d['date_start']);
 
$cdate=date('d-m-Y',$d['date_start']);
$ndate=date('M d, Y',$cdate)
?>

<h4 class="sf_green"> Viewing: <?= $d['title']?> on <?php $theDate?></h4>
<p>&nbsp;&nbsp;</p>
<form id="newEvent">
<div class="col-12 col-md-12">

<div class="form-group row">
<div class="col-md-2">Title</div>
<div class="col-md-9"><input class="form-control" type="text" name="title" id="title" value="<?= $d['title']?>" required /></div>
</div>

<div class="form-group row">
<div class="col-md-2">Time Start</div>
<div class="col-md-4 input-group"><input class="form-control datepicker" type="text" name="date_start" id="date_start" value="<?php if($d['date_start']!=""){echo date('H:i',$d['date_start']);}?>" /></div>
</div>

<div class="form-group row">
<div class="col-md-2">Time End</div>
<div class="col-md-4 input-group"><input class="form-control datepicker" type="text" name="date_end" id="date_end" value="<?php if($d['date_end']!=""){echo date('H:i',$d['date_end']);}?>" required /></div>
</div>

<div class="form-group row">
<div class="col-md-2">Description</div>
<div class="col-md-9"><textarea class="form-control" name="desc" rows="10" id="desc" required><?= $d['desc']?></textarea></div>
</div>
<?php if($d['reminder']==1){$c="checked";$dt=date('d-m-Y h:m',$d['rdate']);}?>
<div class="form-group row">
<div class="col-md-2">Set reminder</div>
<div class="col-md-2"><input type="checkbox" class="js-switch" name="reminder" id="reminder" <?= $c?>></div>
<div class="col-md-4 input-group"><input class="form-control datepicker" type="text" name="rdate" id="rdate" value="<?= $dt?>"  /></div>
</div>


</form>
<link href="packages/datetime/jquery.datetimepicker.min.css" rel="stylesheet">
<script src="packages/datetime/jquery.datetimepicker.min.js"></script>
<script>
$('#popupBox .modal-header').html('<a href="javascript:void(0)" class="sa">Diary Entry</a><div class="col-md-7 text-end">Date: <strong><?= $theDate?></strong></div>')

$('#popupBox .modal-footer').html('<div style="width:100%"><div class="col-md-4"><a id="btnUpdate" href="javascript:void(0)" class="btn btn-info">Update</a></div><div class="col-md-4 text-center"><a id="btnCancel" href="javascript:void(0)" class="btn btn-secondary">Cancel</a></div><div class="col-md-4"><a id="btnDel" href="javascript:void(0)" class="btn btn-danger float-end">Delete</a></div></div>');

$("#btnCancel").click(function(){$('#popupBox').modal('hide');})

$("#btnUpdate").click(function(){
if($('#reminder').prop('checked')==true){
var r=1
var rd=$('#rdate').val();
}
var ds='<?= $theDate?> '+$("#date_start").val()
var de='<?= $theDate?> '+$("#date_end").val()
$.post('includes/master/diary_functions.php',{FUNCTION:'update',title:$("#title").val(),desc:$("#desc").val(),date_start:ds,date_end:de,id:'<?= $d['id']?>', reminder:r, rdate:rd},function(ret){
showResponse('success','Diary entry updated successfully')
$('#<?= $_REQUEST['row']?>').remove()
$('#<?= $_REQUEST['table']?>').append('<tr id="<?= $_REQUEST['row']?>" style="cursor:pointer" onclick="viewEntry(\'<?= $_REQUEST['id']?>\',\'<?= $_REQUEST['table']?>\',\'<?= $_REQUEST['row']?>\')"><td width="70%">'+$("#title").val()+'</td><td>'+$("#date_start").val()+' - '+$("#date_end").val()+'</td></tr>')
$('#popupBox').modal('hide');
})

})


$('#reminder').change(function(){
if($(this).prop('checked')==true){

var d = new Date('<?= $ndate?> '+$("#date_start").val());
d.setHours(d.getHours() - 1);
var n=d.getHours();

$('#rdate').val('<?= $cdate?> ' +n+':00')
$('.ui-datepicker-trigger').prop('disabled',false);
$('.ui-datepicker-trigger').css('opacity','1');
}
if($(this).prop('checked')==false){
$('#rdate').val('')
$('.ui-datepicker-trigger').prop('disabled',true);
$('.ui-datepicker-trigger').css('opacity','0.3');
}

})
var startTimeTextBox = $('#date_start');
var endTimeTextBox = $('#date_end');

$( "#rdate" ).datepicker({changeMonth: true,showOn: 'button',buttonText: '<i class="fad fa-calendar-alt"></i>',yearRange: "1920:+10", dateFormat: "dd-mm-yy", changeYear:true,beforeShow: function(){$(".ui-datepicker").css({'font-size':35}),setBox()},onClose: function(){$('#overlay').css('display','none')}});


$.timepicker.timeRange(
	startTimeTextBox,
	endTimeTextBox,
	{
		minInterval: (1000*60*60), // 1hr
		timeFormat: 'HH:mm',
		start: {}, // start picker options
		end: {} // end picker options
	}
);

$("#btnCancel").click(function(){$('#popupBox').modal('hide');})

$("#btnDel").click(function(){
$.post('includes/master/diary_functions.php',{FUNCTION:'remove',id:'<?= $d['id']?>'},function(ret){
$('#popupBox').modal('hide');
$('#<?= $_REQUEST['row']?>').remove()
showResponse('success','Diary entry removed successfully')
})
})

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
  var switchery = new Switchery(html,{color:'#2a3f54',size: 'small'});
});
</script>
