<!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="pre-select-slots.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 the spinner
		var spinner = new Spinner(opts).spin();
		document.body.appendChild(spinner.el);
		hideLoader();

		// Show the loader
		function showLoader() {
			spinner.spin();
		}

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



