<!DOCTYPE html>
<html lang="en">

<head>
  <?php require_once "../../../base/meta.php" ?>

  <title>Colour Selector</title>

  <script src="./js/formValidation.js"></script>

  <?php
  // PHP
  require_once "../../../base/settings.php";
  require_once "../../../base/headers.php";
  Headers::html();

  if (!isset($_COOKIE["validation"])) {
    setcookie("validation", "false");
  }

  if (isset($_POST["colour"])) {
    $colour = $_POST["colour"];

    if (!preg_match("/^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/", $colour)) {
      $error = "Invalid hex colour";
      unset($colour);
    }
  }
  ?>
</head>

<body style="background-color: <?= $colour ?>">

  <div class="p-3">
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate" <?= ($_COOKIE["validation"] ?? false) === "true" ? "checked" : "" ?>>
      <label class=" form-check-label" for="clientSideValidate">Use Client Side Validation</label>
    </div>
    <form method="post" class="needs-validation" novalidate>
      <div class="mb-3">
        <label class="form-label" for="colour">Colour Code</label>
        <input class="form-control" id="colour" name="colour" required pattern="^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$" />
        <div class="invalid-feedback">
          Please enter valid hex colour code
        </div>
      </div>
      <button type="submit" class="btn btn-primary mb-3 w-100">Send</button>
    </form>
    <?php if (isset($error)) { ?>
      <h2 class="text-danger"><?= $error ?></h2>
    <?php } ?>
  </div>
</body>

</html>