<!DOCTYPE html>
<html>
<head>
	<title>OMSL - Enviar</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Darker+Grotesque:wght@500;800&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../css/main.css">
	<link rel="stylesheet" type="text/css" href="../css/submit.css">
	<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />

	<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
	<?php
		include '../header.php';

		$path = "../js/questions.json";

		$string = file_get_contents($path);
		$json_a = json_decode($string, true);

		$n = date('d') % count($json_a);

		if (isset($_GET["q"])) {
			$q = $_GET["q"];
		} else {
			$q = $n;
		}
	?>

	<div id="form" class="sep">
		<?php
			echo '<h1 id="question_title" title_id="'.$q.'"></h1>';
		?>
		<textarea name="comment" placeholder="A sua perspetiva..."></textarea>
		<div>
		<input type="text" name="name" placeholder="Nome">
		<input type="text" name="local" placeholder="Cidade">
		<input type="num" name="age" placeholder="Idade">
		<button class="button" onclick="saveData()">Enviar</button>
		</div>
	</div>

	<div id="thanks" class="sep">
		<h1 style="margin-bottom: 10px; color:red;">Obrigado por partilhar!</h1>
		<h1 style="font-size: 30px">Procure posters interativos perto de si:</h1>
		<div id='map' style='width: calc(100% + 20vw); height: 600px; margin-left: -10vw; margin-top: 70px;'></div>
		<script>
		mapboxgl.accessToken = 'pk.eyJ1Ijoicm9kc24iLCJhIjoiY2tpOHVxdmxjMDlseDJ6dGdnbTB0NmZobSJ9.CpKt1nOi2bZ72cuLRUUj5g';
		var map = new mapboxgl.Map({
		container: 'map',
		center: [-8.425388, 40.210049],
		zoom: 14,
		style: 'mapbox://styles/rodsn/cki8uwkqb36ou19ryt4rqdb3w',
		});

		var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-8.419904, 40.209499]
    },
    properties: {
      title: 'Praça da República',
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-8.429306, 40.207466]
    },
    properties: {
      title: 'Largo da Portagem',
    }
  }]
};

geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';
  	console.log("added");
  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)

  .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3>'))
    .addTo(map);
});
		</script>
	</div>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/submit.js"></script>	
</body>
</html>