#!/usr/bin/perl

use common::sense;
use List::Util qw(shuffle first);
use CGI;
my $cgi = CGI->new();

my $scriptname = $cgi->url(-relative=>1);

my $step = 1;
if($cgi->param('step')){
	use CGI::Carp qw(fatalsToBrowser);
	die "step is not a number" unless $cgi->param('step') =~ m/^\d+$/;
	if($cgi->param('step') =~ m/^\d+$/){
		$step = $cgi->param('step');
	}	
}

my $range = 19;
          
my @possiblePayouts = qw(1.5 2 5 6 8 11 17 35);
my @payouts = ();

if($cgi->param('payouts')){
	@payouts = $cgi->param('payouts');
	}else{
	@payouts = (11,17,35);
}

my @shuffledPayouts = shuffle @payouts;
my $payout = $shuffledPayouts[0];
my $rand = int(rand($range)) * $step;
   $rand++;
my $guess = $rand * $payout;

print qq(Content-type: text/html\n\n);
print qq|<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<link rel="stylesheet" href="/css/mvp.css">
  	<meta name="description" content="Oakbox.com - Croupier training">
	<title>Croupier training</title>
</head>
<body>
	<header>
	Step = $step, Payouts = |;
	
	print join (', ', @payouts);
	print qq|
	</header>
	<main>

		<section>
  		<form method="POST" id="myForm" action="">
			<header>|;
			my $coin = rand(2);
			if($coin < 1){
				print qq|<h2>$rand x $payout = ?</h2>|;
			}else{
				print qq|<h2>$payout x $rand = ?</h2>|;
			}
			print qq|
			</header>
        	<label for="guess">Payout is: </label>
			<input id="guess" type="text" name="guess" placeholder="?" autofocus>
			<span id="status"></span>
			<input type="hidden" id="answer" name="answer" value="$guess">
        	<button type="submit">check</button>
			<div id="result"></div>
  		</form>

		</section>

	 	<section>
            <form method='GET' action="$scriptname">
                <header>
                    <h2>Settings</h2>
                </header>
                <label for="step">Step size:</label>
                <select id="step" name="step">
					<option value="$step">$step</option>
                    <option value="10">10</option>
                    <option value="5">5</option>
					<option value="1">1</option>
                </select>

				<label for="payout">Payouts:</label>|;

				my %hash = map {$_ => 1} @payouts;

				foreach my $pp (@possiblePayouts){
					print qq|<input type="checkbox" id="checkbox$pp" name="payouts" value="$pp" |;
					print "checked" if (exists $hash{$pp});
					print qq| ><label for="checkbox$pp"> $pp </label> </br>\n|;	
				}

                print qq|
                
                <button type="submit">Save Changes</button>
            </form>
        </section>
	</main>
	<footer>
	<hr>
	<p><a href="https://www.oakbox.com">Oakbox.com</a></p>
	</footer>
<script>
document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault();

  const guess = document.getElementById("guess").value.trim();
  const answer = document.getElementById("answer").value.trim();
  const status = document.getElementById("status");

  if (guess === answer) {
    window.location.href = "/$scriptname?step=$step|;
	foreach my $po (@payouts){
		print qq|&payouts=$po|;
	}
	print qq|";
  } else {
    status.innerHTML = "❌";
    status.style.color = "red";
	toblank = document.getElementById("guess");
	toblank.value = '';
  }
});
</script>
<footer>
        <p>&copy; <a href="/">Oakbox.com</a></p>
</footer>
</body>
</html>|;


exit;
