{{/*  Star rating adapted from https://codepen.io/chris22smith/pen/MJzLJN  */}}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
    function enableSubmit() {
        document.getElementById("submit-button").disabled = false;
    }
</script>

<form id="page-feedback" name="page-feedback" class="text-sm w-full mt-24 pt-5 border-t border-t-redis-pen-700 border-opacity-50">
  <input name="origin" value="{{ .Permalink }}" class="hidden"/>
  <div class="flex flex-row justify-between">
    <div class="grid justify-center">
      <span class="font-mono">RATE THIS PAGE</span>
      <div class="star-rating">
        {{ range $num := (seq 5 1) }}
        <input type="radio" id="{{ $num }}-stars" name="rating" value="{{ $num }}" onchange="document.querySelector('#feedback-form').classList.remove('hidden')"/>
        <label for="{{ $num }}-stars" class="star">&#9733;</label>
        {{ end }}
      </div>
    </div>  
    <a href="#" class="font-mono no-underline">
      Back to top ↑
    </a>
  </div>
  <div id="feedback-form" class="hidden">
    <div class="grid gap-2">
      <textarea
        name="comment"
        placeholder="Why did you choose this rating?"
        class=" p-2 mt-1 block w-full h-24 border border-opacity-50 border-redis-ink-900 rounded-md"
        rows="3"
      ></textarea>
      <div class="cf-turnstile" data-sitekey="0x4AAAAAABpkO-YRJzl4qTBW" data-callback="enableSubmit"></div>
      <button id="submit-button" disabled class="font-mono button text-redis-ink-900 border border-solid border-transparent bg-redis-red-500 hover:bg-redis-red-600 focus:bg-red-600 focus:ring-red-600; w-min justify-self-end" type="submit">
        Submit
      </button>
    </div>
  </div>
</form>


{{ with .Site.Params.ratingsService }}
<script>
document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector("#page-feedback");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        var xhr = new XMLHttpRequest();
        var url = "{{ . }}";
        var params = new URLSearchParams(new FormData(form));
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // Request was successful, do something with the response
                const responseData = JSON.parse(xhr.responseText);
                const responseMessage = responseData.response;
                const newText = document.createTextNode(responseMessage);
                form.parentNode.replaceChild(newText, form);
            }
        };

        xhr.send(params);
    });
});
</script>
{{ end }}