<!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, maximum-scale=1, initial-scale=1, user-scalable=0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>myoptician</title>
    <!--Favicon -->
    <link rel="shortcut icon" type="image/png" href="images/favicon-icon.png" />
   
    <!--Main Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>

<body>
<?php include_once(__DIR__ . '/../header.php'); ?>
	<div class="firstp">
		<div class="sitecontainer">
		 	<div class="flocation">
		 	  <h5>Select your location</h5>
		 	  <div class="listofshop">
		 	  	<ul id="shopList">
				   <?php foreach($shops as $key=>$shop): ?>
						<li><a href="optician-panel-calendar.php?OpticianId=<?= $optician_id ?>&Shop=<?= $shop->getName() ?>"><?= $shop->getName() ?></a></li>
					<?php endforeach; ?>
		 	  	</ul>
		 	  </div>
		 	</div>
		</div>
	</div>

	<script src="js/jquery-3.6.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!-- Add this to the head section of your HTML -->
	<script src="js/spin.min.js"></script>
	<script src="js/helper.js"></script>

    <script>
		// Initialize Spin.js with options
		var opts = {
			lines: 13, // The number of lines to draw
			length: 20, // The length of each line
			width: 10, // The line thickness
			radius: 30, // The radius of the inner circle
			scale: 1, // Scales overall size of the spinner
			corners: 1, // Corner roundness (0..1)
			color: '#000', // CSS color or array of colors
			fadeColor: 'transparent', // CSS color or array of colors
			speed: 1, // Rounds per second
			rotate: 0, // The rotation offset
			animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
			direction: 1, // 1: clockwise, -1: counterclockwise
			zIndex: 2e9, // The z-index (defaults to 2000000000)
			className: 'spinner', // The CSS class to assign to the spinner
			top: '50%', // Top position relative to parent
			left: '50%', // Left position relative to parent
			shadow: '0 0 1px transparent', // Box-shadow for the lines
			position: 'absolute' // Element positioning
		};

		// Initialize the spinner
		var spinner;

		// Show the loader
		function showLoader() {
			spinner = new Spinner(opts).spin();
			document.body.appendChild(spinner.el);
		}

		// Hide the loader
		function hideLoader() {
			spinner.stop();
		}
	</script>	
<?php include_once(__DIR__ . '/../footer.php'); ?>
</body>
</html>



