<?php
if( empty( $runningFileName ) ) die("Cannot access this page directly");
?>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TTT2 Role Adder</title>
    <meta name="description" content="Add a new TTT2 Role">
    <meta name="author" content="James">
    <meta property="og:title" content="TTT2 Role Adder">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ttt.james-things.com">
    <meta property="og:description" content="All TTT2 Roles documented halfheartedly">
    <meta property="og:image" content="https://e7.pngegg.com/pngimages/710/403/png-clipart-the-embodiment-of-scarlet-devil-team-shanghai-alice-video-game-banjo-tooie-mario-luigi-partners-in-time-marisa-logo-computer-wallpaper.png">
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!--MATERIALIZE-->
    <!--Import jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
    <!--My Custom Stylesheet-->
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="row">
      <div class="col s6">
        <div class="card-panel white">
          <form method="post" action="/confirm.php">
            <div class="row">
              <div class="input-field col s3">
                <input id="name" type="text" name="rolename" onkeyup="updateCard()">
                <label for="name">Rolename</label>
              </div>
                <div class="input-field col s9">
                  <input id="description" type="text" name="roledesc" onkeyup="updateCard()">
                  <label for="description">Roledescription</label>
                </div>
            </div>
            <div class="row">
              <div class="input-field col s3">
                <select id="rolecolor" name="rolecolor" onchange="updateCard()">
                  <option value="" disabled selected>Color</option>
                  <option value="red">Red</option>
                  <option value="pink">Pink</option>
                  <option value="purple">Purple</option>
                  <option value="deep-purple">Deep-purple</option>
                  <option value="indigo">Indigo</option>
                  <option value="blue">Blue</option>
                  <option value="light-blue">Light-blue</option>
                  <option value="cyan">Cyan</option>
                  <option value="teal">Teal</option>
                  <option value="green">Green</option>
                  <option value="light-green">Light-green</option>
                  <option value="lime">Lime</option>
                  <option value="yellow">Yellow</option>
                  <option value="amber">Amber</option>
                  <option value="orange">Orange</option>
                  <option value="deep-orange">Deep-orange</option>
                  <option value="brown">Brown</option>
                  <option value="grey">Grey</option>
                  <option value="blue-grey">Blue-grey</option>
                  <option value="black">Black</option>
                  <option value="white">White</option>
                  <option value="transparent">Transparent</option>
                </select>
                <label>Select color</label>
              </div>
              <div class="input-field col s3">
                <select id="modifier" name="rolemod" onchange="updateCard()">
                  <option value="" selected>None</option>
                  <option value="lighten">Lighten</option>
                  <option value="darken">Darken</option>
                  <option value="accent">Accent</option>
                </select>
                <label>Select Modifier</label>
              </div>
              <div class="input-field col s3">
                <select id="strength" name="rolestrength" onchange="updateCard()">
                  <option value="" selected>No Strength</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select>
                <label>Select Strength</label>
              </div>
              <div class="input-field col s3">
                <select id="tcolor" name="tcolor" onchange="updateCard()">
                  <option value="" disabled selected>Textcolor</option>
                  <option value="black-text">Black</option>
                  <option value="white-text">White</option>
                </select>
                <label>Select Textcolor</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <textarea id="howtoplay" name="howtoplay" onkeyup="updateCard()" class="materialize-textarea"></textarea>
                <label for="howtoplay">Text to describe how to play</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <select id="goodRoles" name="goodRoles[]" onchange="updateCard()" multiple="multiple">
                  <option value="" disabled> Choose your option </option>
                   <?php
                   $files = glob("roles/en/*.php");

                   foreach ($files as $filename) {
                       include $filename;

                       $shortname = substr($filename,  9);
                       $shortname = substr($shortname,  0, -4);
                       echo "<option value=".ucfirst($shortname).">".ucfirst($shortname)."</option>";
                   }
                   ?>
                </select>
                <label>Select good Roles that go with this role</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <textarea id="gconvars" name="gconvars" onkeyup="updateCard()" class="materialize-textarea"></textarea>
                <label for="convars">Paste your general convars</label>
              </div>
              <div class="input-field col s6">
                <textarea id="cconvars" name="cconvars" onkeyup="updateCard()" class="materialize-textarea"></textarea>
                <label for="convars">Paste your role specific convars</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <input name="creator" id="creator" type="text" onkeyup="updateCard()">
                <label for="creator">Steam Creator</label>
              </div>
                <div class="input-field col s6">
                  <input name="creatorurl" id="creatorurl" type="text" onkeyup="updateCard()">
                  <label for="creatorurl">Steeam Creator Link</label>
                </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <textarea id="credits" name="credits" onkeyup="updateCard()" class="materialize-textarea"></textarea>
                <label for="credits">Drop your credits here!</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <input name="steam" id="steam" type="text" onkeyup="updateCard()">
                <label for="steam">Steamlink</label>
              </div>
                <div class="input-field col s6">
                  <input name="source" id="source" type="text" onkeyup="updateCard()">
                  <label for="source">Sourcelink</label>
                </div>
            </div>
            <div class="row">
            <div class="input-field col s9">
              <select id="language" name="language">
                <option value="en" selected>English</option>
                <option value="ch">Schwiizerdütsch</option>
                <option value="de">Deutsch</option>
              </select>
            </div>
              <button class="btn waves-effect waves-light col s3" type="submit" value="Submit" name="action">Submit <i class="material-icons right">send</i>
              </button>
          </div>
          </form>
      </div>
    </div>
    <!-- Cardpreview -->
    <div class="col s6">
      <div class="blurry">
        <div id="rolecard" class="card">
          <div class="card-content">
            <span class="card-title" id="cardname"></span>
            <p id="carddescription"></p>
          </div>
          <ul class="collapsible black-text white">
            <li class="active">
              <div class="collapsible-header">
                <i class="material-icons">help_outline</i>How to Play
              </div>
              <div class="collapsible-body">
                <pre id="thowtoplay">Soup</pre>
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">check</i>Plays best with
              </div>
              <div class="collapsible-body">
                <span>
                  <ul id="tplaysbestwith">
                  </ul>
                </span>
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">code</i>Convars
              </div>
              <div class="collapsible-body">
                <pre>Normal Role Convars (also found in ULX):
                <code id="cvars"></code></pre>
                <pre>Rolespecific Convars:
                <code id="rcvars"></code></pre>
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">whatshot</i>Credits
              </div>
              <div class="collapsible-body">
                <span>Main Creator: <a id="authorurl" href="{AUTHORURL}">{AUTHORNAME}</a>
                  <br>
                  <pre id="tcredits"></pre>
                </span>
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">link</i>Links
              </div>
              <div class="center collapsible-body">
                <span>
                  <a id="steamurl">Steam Workshop</a>
                  <br>
                  <a id="githuburl">Github Source</a>
              </div>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Updatescript -->
    <script>
    function updateCard() {
    	updateName();
    	updateColor();
    	updateDescription();
      updateGoodRoles();
    	updateHowToPlay();
    	updateCredits();
    	updateGCvars();
    	updateCCvars();
    	updateSteam();
    	updateSource();
    }


    function updateName() {
    	document.getElementById("cardname").innerHTML = document.getElementById("name").value;
    }
    function updateColor() {

    	let color = document.getElementById('rolecolor');
    	let strength = document.getElementById("strength");
    	let modifier = document.getElementById("modifier");
    	let textcolor = document.getElementById("tcolor");


    	strength.removeAttribute('disabled');
    	modifier.removeAttribute('disabled');

    	if (color.value === "transparent" || color.value === "black" || color.value === "white") {
    		modifier.value = "";
    		strength.value = "";

    	} else if (color.value === "brown" || color.value === "grey" || color.value === "blue-grey") {

    		if (modifier.value === "accent") {
    			modifier.value = "";
    			strength.value = "";
    		}
    	}
    	document.getElementById("rolecard").className = "card " + color.value + " " + modifier.value + "-" + strength.value + " " + textcolor.value;
    }
    function updateDescription() {
    	document.getElementById("carddescription").innerHTML = document.getElementById("description").value;
    }
    function updateGoodRoles() {
      document.getElementById("tplaysbestwith").innerHTML = "";

      var values = $('#goodRoles').val();
      for (let index = 0; index < values.length; ++index) {
          const element = values[index];
          var ul = document.getElementById("tplaysbestwith");
          var li = document.createElement("li");
          li.appendChild(document.createTextNode(element));
          ul.appendChild(li);
      }
    }
    function updateHowToPlay() {
      document.getElementById("thowtoplay").innerHTML = document.getElementById("howtoplay").value;
    }
    function updateCredits() {
      document.getElementById("tcredits").innerHTML = document.getElementById("credits").value;
    }
    function updateGCvars() {
      document.getElementById("cvars").innerHTML = document.getElementById("gconvars").value;
    }
    function updateCCvars() {
      document.getElementById("rcvars").innerHTML = document.getElementById("cconvars").value;
    }
    function updateSteam() {
      document.getElementById("steamurl").setAttribute("href", document.getElementById("steam").value);
    }
    function updateSource() {
      document.getElementById("githuburl").setAttribute("href", document.getElementById("source").value);
    }
    </script>

    <script>
      $(document).ready(function() {
        $('select').formSelect();
        $('.collapsible').collapsible();
        M.updateTextFields();
      });
    </script>

    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
  </body>
</html>