<?php $cdate=strtotime($_REQUEST['date']);
$ndate=date('M d, Y',$cdate)
?>
<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" 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="<?= $_REQUEST['date']?>" /></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" 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="5" id="desc" required></textarea></div>
</div>

<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"></div>
<div class="col-md-4 input-group"><input class="form-control datepicker" type="text" name="rdate" id="rdate"  /></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><?= $_REQUEST['date']?></strong></div>')

$('#popupBox .modal-footer').html('<div class="float-left"><a id="btnSave" href="javascript:void(0)" class="btn btn-info">Save</a></div><a id="btnCancel" href="javascript:void(0)" class="btn btn-danger">Cancel</a>');

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

$("#btnSave").click(function(){
if($('#reminder').prop('checked')==true){
var r=1
var rd=$('#rdate').val();
}
var ds='<?= $_REQUEST['date']?> '+$("#date_start").val()
var de='<?= $_REQUEST['date']?> '+$("#date_end").val()
$.post('includes/master/diary_functions.php',{FUNCTION:'new',title:$("#title").val(),desc:$("#desc").val(),date_start:ds,date_end:de, reminder:r, rdate:rd},function(ret){

$('#<?= $_REQUEST['table']?>').append('<tr><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('<?= $_REQUEST['date']?> ' +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')}});

$('.ui-datepicker-trigger').prop('disabled',true);
$('.ui-datepicker-trigger').css('opacity','0.3');


$.timepicker.timeRange(

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

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