<?php
	/* Secures connection with http(s) and redirects to the same webpage */
	include 'connection.php';
?>

<!DOCTYPE html>
<html>
    <script>
		function loadVarieties() {
			let xhr = new XMLHttpRequest();
			xhr.open("GET", "table", true);
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					document.getElementById("table-container").innerHTML = xhr.responseText;
				}
			}
			xhr.send();
		}
		setInterval(loadVarieties, 1000);
	</script>
<head>
	<link rel="stylesheet" type="text/css" href="/style.css">
    <link rel="stylesheet" type="text/css" href="/fonts.css">
	<title>Vriend sneeuwklokjes &#124; Soorten</title>
	<meta name="description" content="Vriend sneeuwklokjes -- Keuze uit ruim 30 verschillende soorten sneeuwklokjes! Bent u behept met sneeuwklokjes en wilt u deze kopen? Sneeuwklokjes kopen kan hier!">
	<meta name="keywords" content="Sneeuwklokjes, Sneeuwklokjes kopen, Sneeuwklokjes bollen kopen, biologische bollen, biologisch, Hauwert, Nederland, Noord-Holland">
	<link rel="shortcut icon" href="/images/logo.png" type="image/x-icon">
	<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<meta name="msapplication-TileColor" content="black">
	<meta name="theme-color" content="black">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
	<div>
		<ul class="nav">
  					<li class="inactive"><a href="/">Home</a></li>
  					<li class="inactive"><a href="/weetjes">Weetjes</a></li>
  					<li class="active"><a href="/soorten">Soorten</a></li>
            		<li class="inactive"><a href="/contact">Contact</a></li>

						<li><a href="https://www.facebook.com/sjors.vriend.9" target="_blank" class="facebooklogo"><img src="/images/facebook.png" alt="Facebook" title="Volg ons op Facebook" class="facebooklogoa"> </a>
						</li>

            <li id="logo"><a href="/"><img src="/images/logo.png" height="42" id="logoa"></a></li>
				</ul>
	</div>
	<div class="container">
		<div class="head">
			<h1>Soorten</h1>
		</div>
		<div class="koptekst">
			<p>Bij prijzen boven de &euro; 1,- tweede bol halve prijs.<br>Boven de &euro; 80,- is zonder verzendkosten.<br>Onder de &euro; 80,- verzendkosten &euro; 8,-.</p>
			<p>Voor het buitenland geldt: boven de &euro; 150,- gratis verzending, anders &euro; 15,- verzendkosten.
			<?php
				$stmt = $db->query('SELECT count(snowdrop_name) FROM varieties WHERE available = 1');
				$stmt->execute();
				$row = $stmt->fetch();
			?>
			<p>Wij bieden op dit moment <?php echo $row["count(snowdrop_name)"]; ?> verschillende soorten</p>
		</div>
		<?php
			$stmt = $db->query('SELECT snowdrop_name, snowdrop_price FROM varieties WHERE available = 1');
			$stmt->execute();
		?>
        <div id="loading-spinner" style="text-align:center; margin-top:20px;">
            <img src="/images/spinner.gif" alt="Sneewklokjes Laden..." width="50">
        </div>
		<div id="table-container"></div>
		<div class="koptekst">
			<p>Door grote vraag zijn grote aantallen niet altijd leverbaar</p>
			<p>Download de bestellijst <a href="generate_bestellijst" target="_blank" id="bestellijstdownload">hier</a></p>
			<p>Download de verkooplijst <a href="generate_verkooplijst" download target="_blank" id="bestellijstdownload">hier</a></p>
		</div>
		<br>
	</div>
	<div>
		<p class="footer">&copy;Vriend sneeuwklokjes&nbsp;&nbsp;2018-<?php echo date("Y"); ?></p>
	</div>
    <script>
    function loadVarieties() {
        const spinner = document.getElementById("loading-spinner");
        const tableContainer = document.getElementById("table-container");

        // Show spinner
        spinner.style.display = "block";

        let xhr = new XMLHttpRequest();
        xhr.open("GET", "table", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                // Hide spinner regardless of status
                spinner.style.display = "none";

                if (xhr.status === 200) {
                    tableContainer.innerHTML = xhr.responseText;
                } else {
                    tableContainer.innerHTML = "<p>Kon de gegevens niet laden.</p>";
                }
            }
        };
        xhr.send();
    }

    // Load once at start
    window.onload = loadVarieties;
</script>
</body>
</html>