<?php
error_reporting(0);
include('db_connection.php');
$companyName = "SELECT * FROM ea_settings WHERE name  = 'company_name' LIMIT 1";
$result      = mysqli_query($dbcon, $companyName);
$res         = mysqli_fetch_assoc($result);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#35A768">

    <title><?php echo $res['value']; ?></title>
<link rel="stylesheet" type="text/css" href="../assets/ext/jquery-fullcalendar/fullcalendar.min.css?ZV947">

<script src="../assets/ext/jquery-fullcalendar/fullcalendar.min.js?ZV947"></script>
<script src="../assets/ext/jquery-jeditable/jquery.jeditable.min.js?ZV947"></script>
<script src="../assets/ext/jquery-ui/jquery-ui-timepicker-addon.min.js?ZV947"></script>

    <link rel="stylesheet" type="text/css" href="../assets/ext/bootstrap/css/bootstrap.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/ext/jquery-ui/jquery-ui.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/ext/cookieconsent/cookieconsent.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/css/frontend.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/css/general.min.css?ZV947">
	<link rel="stylesheet" href="../assets/css/intlTelInput.css">

    <!--link rel="icon" type="image/x-icon" href="../assets/img/favicon.ico?ZV947"-->
    <!--link rel="icon" sizes="192x192" href="../assets/img/logo.png?ZV947"-->

    <script src="../assets/ext/fontawesome/js/fontawesome.min.js?ZV947"></script>
    <script src="../assets/ext/fontawesome/js/solid.min.js?ZV947"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <link rel="stylesheet" type="text/css" href="../assets/ext/jquery-ui/jquery-ui.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/ext/bootstrap/css/bootstrap.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/css/login.min.css?ZV947">
    <link rel="stylesheet" type="text/css" href="../assets/css/general.min.css?ZV947">

    <link rel="icon" type="image/x-icon" href="../assets/img/favicon.ico?ZV947">
    <link rel="icon" sizes="192x192" href="../assets/img/logo.png?ZV947">

    <script src="../assets/ext/jquery/jquery.min.js?ZV947"></script>
    <script src="../assets/ext/jquery-ui/jquery-ui.min.js?ZV947"></script>
    <script src="../assets/ext/bootstrap/js/bootstrap.bundle.min.js?ZV947"></script>
    <script src="../assets/ext/datejs/date.min.js?ZV947"></script>

<style>
.iti--allow-dropdown { width:100%; }
</style>
</head>
<body>
<div id="main" class="container">
    <div class="row wrapper">
        <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8">

            <!-- FRAME TOP BAR -->
            <div id="header">
			<div class="col-md-6">
                <span id="company-name"><?php echo $res['value']; ?></span>
				 </div>
</div>
	<div id="app-now" class="col-xs-12">
                                <div class="col-xs-12 selappall" style="padding: 20px 10px 10px 10px; background-color: #f4f4f4; font-size: 16px; text-align:center;" id="myForm">
                                    <label class="selappcla" style="font-size:20px;">
                                    <strong>&nbsp;Are you at the practice now: </strong>
                                </label>
                                <input type="radio" name="appoin" class="sleapp" value="Yes" style="margin-left:10px; margin-top: 7px; padding-left:5px;"> Yes
                                <input type="radio" name="appoin" class="sleapp" value="No" style="margin-left:10px; margin-top: 7px; padding-left:5px;"> No
                                </div>
                            </div>
							
							
<div id="login-frame" class="frame-container" style="padding-top:30px; border:0px;">
  
		<div id="alertno" style="display:none;">
		<div class="alert alert-success text-center" role="alert">
			Please choose this option once you come to the practice.
		</div>
		
		<div class="form-group">
			<div class="text-center">
				<button onclick="javascript:window.location='index.php';"  type="submit" id="login" class="btn btn-primary">
					<i class="fas fa-sign-in-alt mr-2"></i>Ok</button>
			</div>
        </div>
	</div>
	
<div id="error-frame" class="frame-container" style="padding-top:30px; border:0px; display:none;">
	<div class="alert alert-success text-center" role="alert">
			The system is not able to check you in. Please contact the reception. Thank you.
	</div>
</div>

<div id="success-frame" class="frame-container" style="padding-top:30px; border:0px; display:none;">
	<div class="alert alert-success text-center" role="alert">
			<span id="checkinstatsmsg"></span>
	</div>
</div>


  <form id="login-form" style="display:none;">
        <div class="form-group">
            <label for="surname"><b>Surname</b></label>
            <input type="text" id="surname"  name="surname"  placeholder="Enter your Surname here ..."  class="form-control"/>
        </div>
		
		<div class="form-group">
            <label for="mobile-number" style="clear: both; float: left; width: 100%;"><b>Mobile Number</b></label>
            <input type="text" id="phone" name="phone" type="tel" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;" maxlength="10" placeholder="Enter your Mobile Number here ..."  class="form-control" />
        </div>

        <div class="form-group">
			<div class="text-center">
				<button type="submit" id="myButton" class="btn btn-primary">
                <i class="fas fa-sign-in-alt mr-2"></i>Submit</button>
			</div>	
        </div>
    </form>
	
	
	
	
	<div id="the_Element_ID" style="display:none;" class="text-center">
		<img src="loading.gif">
		<!--div id="countdown" style="font-size:24px;"></div-->
	</div>
	
<div id="step2" style="display:none;">	
        <div class="form-group">
            <label for="fullname"><b>Fullname</b></label>
            <input type="text" id="fullname" name="fullname" value="" disabled class="form-control"/>
        </div>
		
		<div class="form-group">
            <label for="suburb" style="clear: both; float: left; width: 100%;"><b>Suburb</b></label>
            <input type="text" id="suburb" name="suburb" value="" disabled class="form-control" />
        </div>
		
		<div class="form-group">
            <label for="email"><b>Email</b></label>
            <input type="email" id="email"  name="email" value=""  disabled  class="form-control"/>
        </div>
		
		<div class="form-group">
			<div class="text-center">
                                    <label class="selappcla">
                                    <strong>&nbsp;Please confirm: </strong>
                                </label>
                                <input type="radio" id="checkin_confirm" name="checkin_confirm" class="sleapp" value="1"> Yes
                                <input type="radio" id="checkin_confirm" name="checkin_confirm" class="sleapp" value="0"> No
                                </div>
							</div>

        <div class="form-group">
			<div class="text-center">
				<button type="submit" id="myButton1" class="btn btn-primary">
                <i class="fas fa-sign-in-alt mr-2"></i>Submit</button>
			</div>	
        </div>
</div>	
	
	<input type="hidden" name="checkin_id" id="checkin_id" value="">
	<input type="hidden" name="counter1" id="counter1" value="1">
	<input type="hidden" name="counter2" id="counter2" value="1">
	
	<div class="mt-4 text-center">
            <!--small>Copyright &COPY; <?php echo date('Y'); ?> Designed and Developed by <a href='#' target='_blank'>Five Minutes</a></small-->
        </div>
</div>

<script src="../assets/ext/fontawesome/js/fontawesome.min.js?ZV947"></script>
<script src="../assets/ext/fontawesome/js/solid.min.js?ZV947"></script>
<script src="../assets/js/polyfill.min.js?ZV947"></script>
<script src="../assets/js/general_functions.min.js?ZV947"></script>
<script src="../assets/js/login.min.js?ZV947"></script>
<script>
var interval1;
var interval2;
var timer;
var timeleft = 60;

$('input[name=appoin]').change(function(){
var value = $( 'input[name=appoin]:checked' ).val();

if(value=="No"){
	$("#alertno").show();
	$("#app-now").hide();
	$("#login-form").hide();
    return false; 
	}else{
	$("#login-form").show();
	$("#app-now").hide();
	$("#alertno").hide();
    return false;
	}

});

window.onload = function () {
    var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
    console.log('Page load time is '+ loadTime);
}

document.getElementById("myButton").onclick = function () {
	var surname = $('#surname').val();
	var phone   = $('#phone').val();
	
	if(surname == '') {
		$('#surname').focus()
		alert('Please Enter Surname');
		return false
	} 
	if(phone == '') {
		$('#phone').focus()
		alert('Please Enter Phone Number');
		return false
	} 
	
    var countryCode = $('.iti__selected-flag').attr('title');
    countryCode = countryCode.replace(/[^0-9]/g,'');
	
	$("#alertno").hide();
	$('#surname').val('');
	$('#phone').val('');
	$("#login-form").hide();
	$("#app-now").hide();
	$("#the_Element_ID").show();
	
	$.ajax({
		url: "insert_checkin.php?surname="+surname+"&mobile=+"+countryCode+phone,
		success: function(result){
		if(result.status == 'success') {
			$('#checkin_id').val(result.checkin_id);
			interval1 = setInterval(doStep2, 5000);
			setTimer();
			timer     = setInterval(setTimer, 1000);
		} else {
			alert('The system is not able to check you in. Please contact the reception. Thank you.');
			$("#alertno").hide();
			$("#login-form").show();
			$("#app-now").hide();
			$("#the_Element_ID").hide();
		}
    }});	
};

function doStep2() {
	var checkin_id = $('#checkin_id').val();
	var setcount1  = parseInt($('#counter1').val());
	$('#counter1').val((setcount1 + 1));
	
	$.ajax({
		url: "check_checkin.php?checkin_id="+checkin_id,
		success: function(res){
		if(res.status == 'success') {
			if(res.result.bp_appointment_available == '1') {
				$("#the_Element_ID").hide();
				$("#step2").show();				
				$('#fullname').val(res.result.fullname);
				$('#suburb').val(res.result.suburb);
				$('#email').val(res.result.email);
				clearInterval(interval1);
				clearInterval(timer);
			} else if (res.result.bp_appointment_available == '2') {
				clearInterval(interval1);
				$("#the_Element_ID").hide();
				$("#error-frame").show();				
			}	
		} else {
			alert('The system is not able to check you in. Please contact the reception. Thank you.');
			$("#alertno").hide();
			$("#login-form").show();
			$("#app-now").hide();
			$("#the_Element_ID").hide();
		}
    }});	
	
	if(setcount1 > 11) {
		clearInterval(interval1);
		clearInterval(timer);
		alert('The system is not able to check you in. Please contact the reception. Thank you.');
		$("#alertno").hide();
		$("#login-form").show();
		$("#app-now").hide();
		$("#the_Element_ID").hide();
		$("#step2").hide();	
		
		$.ajax({
			url: "update_checkin.php?checkin_id="+checkin_id+'&checkin_status=0',
		});
		
	}	
}
	
document.getElementById("myButton1").onclick = function () {
	var checkin_id = $('#checkin_id').val();
	var checkinStatus = $('input[name="checkin_confirm"]:checked').val();
	if(checkinStatus != '0' && checkinStatus != '1') {
		alert('Please confirm your checkin status.');
		return false;
	}	
	
	$("#step2").hide();	
	
	if(checkinStatus == 0) {		
		$("#error-frame").show();
	$.ajax({
		url: "update_checkin.php?checkin_id="+checkin_id+'&checkin_status='+checkinStatus,
		success: function(res){
			if(res.status == 'success') {
				clearInterval(interval1);
				clearInterval(interval2);
				clearInterval(timer);
			}
		}});
		return false;	
	}	
	
	$("#the_Element_ID").show();
	
	$.ajax({
		url: "update_checkin.php?checkin_id="+checkin_id+'&checkin_status='+checkinStatus,
		success: function(res){
			if(res.status == 'success') {
				interval2 = setInterval(doStep3, 5000);
				timeleft = 60;
				setTimer();
				timer     = setInterval(setTimer, 1000);
			} else {
				alert('The system is not able to check you in. Please contact the reception. Thank you.');
				$("#alertno").hide();
				$("#login-form").show();
				$("#app-now").hide();
				$("#the_Element_ID").hide();
			}
		}});
};

function doStep3() {
	var checkin_id = $('#checkin_id').val();
	var setcount2  = parseInt($('#counter2').val());
	$('#counter2').val((setcount2 + 1));
	
	$.ajax({
		url: "check_checkin.php?checkin_id="+checkin_id,
		success: function(res){
		if(res.status == 'success') {
			if(res.result.checkin_status == '2') {
				$("#the_Element_ID").hide();
				$("#step2").hide();				
				clearInterval(interval2);
				clearInterval(timer);
				$("#success-frame").show();
				$("#checkinstatsmsg").html('The system is not able to check you in. Please contact the reception. Thank you.');
			} else if(res.result.bp_checkin_status == '1') {
				$("#the_Element_ID").hide();
				$("#step2").hide();				
				clearInterval(interval2);
				clearInterval(timer);
				$("#success-frame").show();
				$("#checkinstatsmsg").html('You have successfully checkedin into the practice.');
			} else if (res.result.bp_checkin_status == '2') {
				clearInterval(interval2);
				clearInterval(timer);
				$("#step2").hide();	
				$("#the_Element_ID").hide();
				$("#error-frame").hide();	
				$("#success-frame").show();
				$("#checkinstatsmsg").html('The system is not able to check you in. Please contact the reception. Thank you.');
			}	
		} else {
			alert('The system is not able to check you in. Please contact the reception. Thank you.');
			$("#alertno").hide();
			$("#login-form").show();
			$("#app-now").hide();
			$("#the_Element_ID").hide();
		}
    }});	
	if(setcount2 > 11) {
		clearInterval(interval2);
		clearInterval(timer);
		alert('The system is not able to check you in. Please contact the reception. Thank you.');
		$("#alertno").hide();
		$("#login-form").show();
		$("#app-now").hide();
		$("#the_Element_ID").hide();
		$("#step2").hide();	
		
		$.ajax({
			url: "update_checkin.php?checkin_id="+checkin_id+'&checkin_status=0',
		});
		
	}	
}


</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="../assets/js/intlTelInput.js"></script>
<script>
var input = document.querySelector("#phone");
	window.intlTelInput(input,({
    separateDialCode: true,
    hiddenInput: "full",
    initialCountry: "AU",
    placeholderNumberType: 'MOBILE',
}));


function setTimer(){
  if(timeleft <= 0){
    clearInterval(timer);
  } /*else {
    document.getElementById("countdown").innerHTML = timeleft + "";
  }*/
  timeleft -= 1;
}
	
  </script>
</body>
</html>
