<?php
if(isset($_GET["code"])) {
    highlight_file("random.php");
    die();
}
$oDraw = ["bodini", "ferlante", "fontana", "iuculano", "storsillo", "galanti", "grancini", "erba", "pastori", "spinelli", "akhtar", "granito", "nai", "ghoneim", "mandaliti", "cali", "zhou", "cambiaghi", "reggio", "crintea", "krystal", "pumpo", 
"istina"];
shuffle($oDraw);
$fxlcude = $_GET["exclude"] ?? [];
$draw = $oDraw;
$exclude = [];

?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap" rel="stylesheet">
    <title>Random Student Draw.</title>
</head>
<body style="text-align: center; font-family: 'Kode Mono'; display: flex; justify-content: center;">
<div style="max-width: 750px;">
    <h1>Random Student Draw</h1>
    <form action="?" method="get">
    <?php
        $_GET["students"] = isset($_GET["students"]) && is_numeric($_GET["students"]) ? strval($_GET["students"]) : 1;
        if(isset($_GET["exclude"]) && !empty($_GET["exclude"])){
            $_GET["exclude"] = str_replace(" ", "", $_GET["exclude"]);
            $exclude = explode(",", $_GET["exclude"]);
        }
        if(count($exclude) == count($draw)){
            echo "<p style='color: red'>You can't exclude all students</p>";
        } elseif(count($exclude) != 0 && count($exclude) > count($draw) - $_GET["students"]){
            echo "<p style='color: red'>You can't exclude more students than the ones you want to draw</p>";
        } elseif (isset($_GET["students"]) && $_GET["students"] != 1 && $_GET["students"] <= count($draw)){
            $students = $_GET["students"];
            $multiple = "<p>Today's students are:</p>";
            $selected = [];
            for($i = 0; $i < $students; $i++){
                $currdraw = $draw[array_rand($draw)];
                while(in_array($currdraw, $exclude) || in_array($currdraw, $selected)){
                    $currdraw = $draw[array_rand($draw)];
                }$exclude[] = $currdraw;
                $multiple .= "<p><b>".$currdraw."</b></p>";
                $selected[] = $currdraw;
            }
            echo $multiple;
        } else {
            $rand = null;
            do {
                $rand =  $draw[array_rand($draw)];
            } while(in_array($rand, $exclude));
            $exclude[] = $rand;
            echo "<p>Today's student is: <b>$rand</b></p>";

        }
    ?>
    <hr>
    <p>Advanced features:</p>
        <input type="text" name="students" placeholder="Number of students" value="<?php echo isset($_GET["students"]) && $_GET["students"] != 1 ? $_GET["students"] : "" ?>" style="width: 90%"><br>
        <button onclick="generateExlusionList()" type="button">Exclude students?</button><br>
        <input type="hidden" name="exclude" id="exclude" value="<?php echo htmlspecialchars(implode(',',$exclude)); ?>">
        <input type="hidden" name="random" value="<?php echo rand() ?>"><br>
        <input type="submit" value="Draw again">
    </form>
    <a href="?code=true">Codice sorgente</a>
    <script>
        //show an alert with the list of students to exclude that they can tick
        function generateExlusionList(){
            var students = <?php echo json_encode($oDraw) ?>;
            var chosenStudents = document.getElementById("exclude").value.split(",");
            //Create an overlay showing the list of students and a checkbox for each
            var overlay = document.createElement("div");
            overlay.style.position = "fixed";
            overlay.style.top = "0";
            overlay.style.left = "0";
            overlay.style.width = "100%";
            overlay.style.height = "100%";
            overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
            overlay.style.zIndex = "100";
            overlay.style.display = "flex";
            overlay.style.justifyContent = "center";
            overlay.style.alignItems = "center";
            overlay.style.flexDirection = "column";
            overlay.style.color = "white";

            var list = document.createElement("div");
            list.style.backgroundColor = "black";
            list.style.padding = "20px";
            list.style.borderRadius = "10px";
            list.style.maxWidth = "min(750px, 90%)";

            var title = document.createElement("h2");
            title.innerText = "Select students to exclude";

            var form = document.createElement("div");
            var toggles = document.createElement("div");
            toggles.style.marginBottom = "10px";
            toggles.style.width = "100%";
            toggles.style.display = "flex";
            toggles.style.justifyContent = "center";
            toggles.style.alignItems = "center";
            //Add a "Toggle DSA" button that toggles ['bodini', 'ferlante', 'pumpo', 'mandaliti']
            var toggleDSA = document.createElement("button");
            toggleDSA.innerText = "Toggle DSA";
            toggleDSA.style.marginBottom = "10px";
            toggleDSA.style.display = "block";
            toggleDSA.style.marginRight = "5px";

            var toggleAll = document.createElement("button");
            toggleAll.innerText = "Toggle All";
            toggleAll.style.marginBottom = "10px";
            toggleAll.style.display = "block";
            toggleAll.style.marginLeft = "5px";
            
            toggles.appendChild(toggleDSA);
            toggles.appendChild(toggleAll);
            form.appendChild(toggles);

            students.forEach(student => {
                var label = document.createElement("label");
                label.innerText = student;
                label.style.display = "inline";
                var input = document.createElement("input");
                input.type = "checkbox";
                input.name = "exclude[]";
                input.value = student;
                input.style.margin = "5px";
                input.style.marginRight = "20px";
                if(chosenStudents.includes(student)) input.checked = true;
                label.appendChild(input);
                form.appendChild(label);
            });
            form.appendChild(document.createElement("br"));
            form.appendChild(document.createElement("br"));

            var submit = document.createElement("button");
            submit.type = "submit";
            submit.innerText = "Exclude selected students";
            submit.style.marginTop = "10px";
            submit.type = "button";
            submit.onclick = function(){
                var checkboxes = form.querySelectorAll("input[type=checkbox]");
                var selected = [];
                checkboxes.forEach(checkbox => {
                    if(checkbox.checked) selected.push(checkbox.value);
                });
                document.getElementById("exclude").value = selected.join(",");
                overlay.remove();
            }

            form.appendChild(submit);
            list.appendChild(title);
            list.appendChild(form);
            overlay.appendChild(list);
            document.body.appendChild(overlay);

            toggleDSA.onclick = function(){
                var checkboxes = form.querySelectorAll("input[type=checkbox]");
                for(var i = 0; i < checkboxes.length; i++){
                    if(['bodini', 'ferlante', 'pumpo', 'mandaliti'].includes(checkboxes[i].value)){
                        checkboxes[i].checked = !checkboxes[i].checked;
                    }
                }
            }
            toggleAll.onclick = function(){
                var checkboxes = form.querySelectorAll("input[type=checkbox]");
                checkboxes[0].checked = !checkboxes[0].checked;
                for(var i = 0; i < checkboxes.length; i++){
                    checkboxes[i].checked = checkboxes[0].checked;
              }
            }

        }
    </script>
</div>
</body>
</html>