<?php

require_once "../lib.php";

$db = new SQLite3(DB_PATH);

$continents = $db->query("SELECT * FROM continents ORDER BY ContinentName");
$countries = $db->query("SELECT * FROM countries ORDER BY CountryName;");

$where = [];
$params = [];

if (!empty($_GET["continent"])) {
    $where[] = "ContinentCode=?";
    $params[] = $_GET["continent"];
}

if (!empty($_GET["country"])) {
    $where[] = "i.CountryCodeISO=?";
    $params[] = $_GET["country"];
}

if (!empty($_GET["title"])) {
    $where[] = "Title LIKE ? COLLATE NOCASE";
    $params[] = "%{$_GET["title"]}%";
}

$whereClause = empty($where) ? "" : " WHERE " . implode(" AND ", $where);
$stmt = $db->prepare($imageSelectSql . $whereClause . " ORDER BY ImageID");

foreach ($params as $i => $param) {
    $stmt->bindValue($i + 1, $param);
}

$result = $stmt->execute();
$images = [];
while ($row = $result->fetchArray()) $images[] = $row;

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Chapter 14</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/assets/css/styles.css">
</head>

<body>
<header>
	<form action="/" method="get">
		<div class="form-inline">
			<select id="filterType" onchange="toggleFilter()">
				<option value="continent">Filter by Continent</option>
				<option value="country">Filter by Country</option>
			</select>

			<select id="continentSelect" name="continent" style="display:inline-block;">
				<option disabled selected>Select Continent</option>
				<?php while ($c = $continents->fetchArray()) { ?>
					<option value="<?= $c['ContinentCode'] ?>"><?= $c['ContinentName'] ?></option>
				<?php } ?>
			</select>

			<select id="countrySelect" name="country" style="display:none;">
				<option disabled selected>Select Country</option>
				<?php while ($c = $countries->fetchArray()) { ?>
					<option value="<?= $c['ISO'] ?>"><?= $c['CountryName'] ?></option>
				<?php } ?>
			</select>

			<button type="submit" class="btn-primary">Filter</button>
		</div>
	</form>

	<form action="/" method="GET">
		<input type="text" placeholder="Search titles" name="title">
		<button type="submit" class="btn-primary">Search</button>
	</form>

	<script>
		function toggleFilter() {
			var filterType = document.getElementById('filterType').value;
			var continentSelect = document.getElementById('continentSelect');
			var countrySelect = document.getElementById('countrySelect');

			if (filterType === 'continent') {
				continentSelect.style.display = 'inline-block';
				countrySelect.style.display = 'none';
				countrySelect.name = 'country_disabled';
				continentSelect.name = 'continent';
			} else {
				continentSelect.style.display = 'none';
				countrySelect.style.display = 'inline-block';
				continentSelect.name = 'continent_disabled';
				countrySelect.name = 'country';
			}
		}
	</script>
</header>

<main>
	<?php if (empty($images)) { ?>
		<p>No images found. 😔</p>
	<?php } else { ?>
		<ul>
			<?php foreach ($images as $i) { ?>
				<li>
					<?php $url = "/assets/img/150/" . $i['Path']; ?>
					<a href="detail.php?id=<?= $i['ImageID']; ?>" class="img-responsive">
						<img src="<?= $url; ?>" alt="<?= $i['Title']; ?>">
					</a>
				</li>
			<?php } ?>
		</ul>
	<?php } ?>
</main>
</body>
</html>
