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

<head>

  <!-- 
    This is the main Handlebars template for the site 
    - When the user visits the homepage or submits a choice the app calls the endpoints in server.js
    - The server script passes data in here and the Handlebars code builds it into the HTML page
  -->

  <meta charset="utf-8" />
  <link rel="icon" href="https://glitch.com/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>{{seo.title}}</title>


  <!-- Meta tags for SEO and social sharing -->
  <link rel="canonical" href="{{seo.url}}">
  <meta name="description" content="{{seo.description}}">
  <meta property="og:title" content="{{seo.title}}">
  <meta property="og:type" content="article">
  <meta property="og:url" content="{{seo.url}}">
  <meta property="og:description" content="{{seo.description}}">
  <meta property="og:image" content="{{seo.image}}">
  <meta name="twitter:card" content="summary">

  <!-- Import the webpage's stylesheet -->
  <link rel="stylesheet" href="/style.css" />
  <style>
    .team{{game.hometeamid}} { background-color: {{game.hometeamcolor}};}
    .team{{game.awayteamid}} { background-color: {{game.awayteamcolor}};}
    </style>

  
</head>

  
<body class="game status{{gamestatus}} result{{game.resulttype}}" data-time="{{game.elapsedtime}}">
  <div class="header scorebox" style="background-image: linear-gradient(135deg, {{game.hometeamcolor}} 40%, {{game.awayteamcolor}} 60.5%);">
    <span id="teamone" class="teamone" ><span class="id" id="teamoneid">{{game.hometeamid}}</span><span class="name" onclick="showRoster()">{{game.hometeam}}</span> <span class="score">{{game.homescore}}</span></span>
    
    <span id="period" class="period"></span>
    <span id="teamtwo" class="teamtwo"><span class="id" id="teamtwoid">{{game.awayteamid}}</span><span class="name" onclick="showRoster()">{{game.awayteam}}</span> <span class="score">{{game.awayscore}}</span></span>
    
    <span id="exit"><a href="/">X</a></span>
  </div>
       
  <div class="wrapper" id="wrapper">
    
    
    <div id="gameStats">
      <div class="half" id="stats{{game.hometeamid}}">
        <div class="shots">
         <h4>
           
          SHOTS <a href="#" class="add" onclick="removeShot({{game.hometeamid}})"> - </a> <span id="shots{{game.hometeamid}}" class="shots">{{game.homeshots}}</span> <a href="#" class="add" onclick="addShot({{game.hometeamid}})">+</a> </h4>
          
        </div>
        <div class="goals">
          <h4>GOALS <a href="#" class="add" onclick="showGoal({{game.hometeamid}}, 0, 0, 0, 0, 0)">+</a></h4>
          
          <table >
            {{#each homegoals}}
              <tr>
                <td><a href="#" onclick="showGoal({{teamid}}, {{id}}, {{goalid}}, {{assist1id}}, {{assist2id}}, {{powerplay}}, {{shorthanded}}, {{emptynet}}, {{overtime}})">{{scoredby}} {{#if assist1}}({{assist1}}{{/if}}{{#if assist2}},{{assist2}}{{/if}}{{#if assist1}}){{/if}} {{#if powerplay}}(PP){{/if}} {{#if shorthanded}}(SH){{/if}} {{#if overtime}}(OT){{/if}} {{#if emptynet}}(EN){{/if}}</a></td>
               <td class="x"><a href="#" class="add" onclick="deleteGoal({{id}});">X</a></td>
              </tr>
            {{/each}}
          </table>
        </div>
        <div class="pims">
        
          <h4>
            PENALTIES <a href="#" class="add"  onclick="showPenalty({{game.hometeamid}})">+</a>
          </h4>
          
          <table >

            {{#each homepenalties}}
              <tr>
                <td>{{playername}} ({{penaltytype}}) </td>
                <td class="x"><a href="#" class="add" onclick="deletePenalty({{id}});">X</a></td>
              </tr>
            {{/each}}
          </table>
        </div>
      </div>
      <div class="half right" id="stats{{game.awayteamid}}">
        <div class="shots">
         <h4>
           
          SHOTS <a href="#" class="add" onclick="removeShot({{game.awayteamid}})"> - </a> <span id="shots{{game.awayteamid}}" class="shots">{{game.awayshots}}</span> <a href="#" class="add" onclick="addShot({{game.awayteamid}})">+</a> </h4>
          
        </div>
        <div class="goals">
          <h4>GOALS <a href="#" class="add" onclick="showGoal({{game.awayteamid}}, 0, 0, 0, 0, 0)">+</a></h4>
          
          <table >
            {{#each awaygoals}}
              <tr>
                <td><a href="#" onclick="showGoal({{teamid}}, {{id}}, {{goalid}}, {{assist1id}}, {{assist2id}}, {{powerplay}}, {{shorthanded}}, {{emptynet}}, {{overtime}})">{{scoredby}} {{#if assist1}}({{assist1}}{{/if}}{{#if assist2}},{{assist2}}{{/if}}{{#if assist1}}){{/if}} {{#if powerplay}}(PP){{/if}} {{#if shorthanded}}(SH){{/if}} {{#if emptynet}}(EN){{/if}} {{#if overtime}}(OT){{/if}}</a></td>
               <td class="x"><a href="#" class="add" onclick="deleteGoal({{id}});">X</a></td>
              </tr>
            {{/each}}
          </table>
        </div>
        <div class="pims">
        
          <h4>
            PENALTIES <a href="#" class="add"  onclick="showPenalty({{game.awayteamid}})">+</a>
          </h4>
          
          <table >

            {{#each awaypenalties}}
              <tr>
                <td>{{playername}} ({{penaltytype}}) </td>
                <td class="x"><a href="#" class="add" onclick="deletePenalty({{id}});">X</a></td>
              </tr>
            {{/each}}
          </table>
        </div>
      </div>
    </div>
    <div id="gameStart">
      
      <div class="homeTeamRoster">
        <h4>
          {{game.hometeam}}
        </h4>
        <table id="homeRoster">
          <tr>
            <td>Name</td>
            <td></td>
            
          </tr>
        {{#each homeroster}}
          <tr data-id="{{id}}">
            <td>{{fname}} {{lname}}</td>
            <td><input type="checkbox" id="chkPresent{{id}}" data-id="{{id}}" {{#if present}}checked{{/if}}  /></td>
            
          </tr>
        {{/each}}
        </table>
      </div>
      <div class="awayTeamRoster">
        <h4>
          {{game.awayteam}}
        </h4>
        <table id="awayRoster">
          <tr>
            <td>Name</td>
            <td></td>
            
          </tr>
        {{#each awayroster}}
          <tr data-id="{{id}}">
            <td>{{fname}} {{lname}}</td>
            <td><input type="checkbox" id="chkPresent{{id}}" data-id="{{id}}" {{#if present}}checked{{/if}} /></td>
            
          </tr>
        {{/each}}
        </table>
      </div>
      
      <div class="clear">
        <button id="btnSetAttendance" onclick="setAttendance()">Update Attendance</button>
        <button id="btnCancel" onclick="hideRoster();" >Cancel</button>   
      </div>
    </div>
    
   
    <div id="gameEnd" style="display: none;">
      <span id="gameResult"></span>
      <button id="btnFinalizeGame" onclick="finalizeGame();" >Finalize Game</button>  
      <button id="btnContinueGame" onclick="continueGame();" >Continue Game</button>   
    </div>
    <div id="goal" class="goalDetails modal" style="display: none;">
      <span id="goalTeamId" style="display: none;"></span>
      <span id="goalId" style="display: none;"></span>
       <table id="goalPlayers" class="players">
          <tr>
            <th>Name</th>
            <th>Goal</th>
            <th>Assist</th>
            
          </tr>
        
      </table>
      <table id="goalType">
          <tr>
            <th>PowerPlay</th>
            <th>Shorthanded</th>
            <th>Empty Net</th>
            <th>Overtime</th>
          </tr>
          <tr>
            <td><input type="checkbox" id="chkGoalPP" {{#if powerplay}}checked{{/if}} /></td>
            <td><input type="checkbox" id="chkGoalSH" {{#if shorthanded}}checked{{/if}} /></td>
            <td><input type="checkbox" id="chkGoalEN" {{#if emptynet}}checked{{/if}} /></td>
            <td><input type="checkbox" id="chkGoalOT" {{#if overtime}}checked{{/if}} /></td>
          </tr>
      </table>
      <button id="addGoal" onclick="addGoal()">Add Goal</button> <button type="button" onclick="cancelGoal()">Cancel</button>
    </div>
    <div id="penalty" class="penaltyDetails modal" style="display: none;">
      <h4>
        Add Penalty
      </h4>
      <span id="penaltyTeamId" style="display: none;"></span>
      <span id="penaltyPlayers" class="half players">
        
      </span>
      <span class="half penalty">
          <input type="radio" value="trip" id="trip" name="penalty-select"/><label for="trip">Tripping (1:30)</label><br/>
          <input type="radio" value="hold" id="hold" name="penalty-select"/><label for="hold">Holding (1:30)</label><br/>
          <input type="radio" value="rough" id="rough" name="penalty-select"/><label for="rough">Roughing (1:30)</label><br/>
          <input type="radio" value="high" id="high" name="penalty-select"/><label for="high">High Stick (1:30)</label><br/>
          <input type="radio" value="delay" id="delay" name="penalty-select"/><label for="delay">Delay of Game (1:30)</label><br/>
          <input type="radio" value="toomany" id="toomany" name="penalty-select"/><label for="toomany">Too Much Man (1:30)</label><br/>
          <input type="radio" value="dick" id="dick" name="penalty-select"/><label for="dick">Being A Dick (1:30)</label><br/>
          <input type="radio" value="major" id="major" name="penalty-select"/><label for="major">Major (5:00)</label><br/>
      </span>
       
       <span class="clear"></span>
      <button id="addPenalty" onclick="addPenalty()">Add Penalty</button> <button type="button" onclick="cancelPenalty()">Cancel</button>
    </div>
    

    <div id="gamelog">
      
       
      
    </div>
    
  </div>
  <div id="control-footer">
    <span class="scorekeeper"><a id="btnRosters" onclick="showRoster()" href="#">Edit Rosters</a> <a id="btnFinalize" onclick="finalizeGame()" href="#">Finalize Game</a></span>
    <span class="guest"><a id="btnRequest" onclick="requestControl()" href="#">Request Control</a></span>
  </div>
</body>
<script type="text/javascript">
  var startx = 0;
    var starty = 0;
    var canvas;
    var ctx;
    var role = localStorage.getItem('role');
    var controlId = localStorage.getItem('controlId');
   

  function drawLine(ctx, x1, y1, x2,y2, stroke = 'black', width = 3) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.strokeStyle = stroke;
      ctx.lineWidth = width;
      ctx.stroke();
    }
  
  window.addEventListener('load', function(){ // on page load
    if((role == 'scorekeeper' || role == 'admin') && (controlId == '{{game.id}}')) {
    document.body.classList.add(role);
      }
    }, false);
  
  function addShot(teamId) {
     var shots = Number(document.getElementById('shots' + teamId).innerHTML);
     shots += 1;
      window.location = '/setShots?gameId={{game.id}}&teamId=' + teamId + '&shots=' + shots;
  }
  function removeShot(teamId) {
     var shots = Number(document.getElementById('shots' + teamId).innerHTML);
     shots -= 1;
      window.location = '/setShots?gameId={{game.id}}&teamId=' + teamId + '&shots=' + shots;
  }
  function addGoal() {
    var teamId = document.getElementById('goalTeamId').innerHTML;
      var parent = "goalPlayers";
      var scoredby = 0;
      var assist1 = 0;
      var assist2 = 0;
    var goaltype = 1;
    var emptynet = 0;
      
      var chks = document.getElementById(parent).getElementsByClassName("goal");
      for (let i = 0; i < chks.length; i++) {
        if(chks[i].checked)
          scoredby = chks[i].getAttribute("data-id");
      }
    var chks = document.getElementById(parent).getElementsByClassName("assist");
      for (let i = 0; i < chks.length; i++) {
        if(chks[i].checked) {
          if(assist1 == 0)
            assist1 = chks[i].getAttribute("data-id");
          else
            assist2 = chks[i].getAttribute("data-id");
        }
      }
     var goalId = document.getElementById('goalId').innerHTML;
     if(document.getElementById('chkGoalPP').checked) goaltype = 2;
     if(document.getElementById('chkGoalSH').checked) goaltype = 3;
     if(document.getElementById('chkGoalOT').checked) goaltype = 4;
     if(document.getElementById('chkGoalEN').checked) emptynet = 1;
    if(goalId.length > 0 && goalId != '0') 
      window.location = '/updateGoal?gameId={{game.id}}&goalId=' + goalId + '&scoredby=' + scoredby + '&assist1=' + assist1 + '&assist2=' + assist2 + '&goaltype=' + goaltype + '&emptynet=' + emptynet;
    else
      window.location = '/addGoal?gameId={{game.id}}&teamId=' + teamId + '&scoredby=' + scoredby + '&assist1=' + assist1 + '&assist2=' + assist2 + '&goaltype=' + goaltype + '&emptynet=' + emptynet;
    
    startx = 0;
    starty = 0;
  }
  function deleteShot(id) {
     
    window.location = '/deleteShot?gameId={{game.id}}&id=' + id + '';
  }
  function deleteGoal(id) {
     if(confirm('Are you sure you want to delete this Goal?'))
        window.location = '/deleteGoal?gameId={{game.id}}&id=' + id + '';
  }
  function deletePenalty(id) {
     
     if(confirm('Are you sure you want to delete this Penalty?'))
      window.location = '/deletePenalty?gameId={{game.id}}&id=' + id + '';
  }
  function finalizeGame() {
     
     if(confirm('This will lock in the score for this game and prevent further edits.  Are you sure?'))
      window.location = '/finalizeGame?id={{game.id}}';
  }
  function cancelGoal() {
    document.getElementById('goal').style.display = 'none';
  }
  function showRoster() {
    
    if((role == 'admin' || role == 'scorekeeper') && controlId == '{{game.id}}') {
      document.getElementById('gameStart').style.display = 'block';
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
      var cnt = 0;
      for (var i = 0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked == true) cnt++;
      }
      if(cnt == 0) {
        for (var i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = true;
        }
      }
    }
  }
  function hideRoster() {
    
    document.getElementById('gameStart').style.display = 'none';
  }
  
  function showPenalty(teamId) {
    var parent = "homeRoster";
    if(teamId == {{game.awayteamid}}) {
      parent = "awayRoster";
    }
    
    document.getElementById('penalty').style.display = 'block';
    document.getElementById('penaltyTeamId').innerHTML = teamId;
    var table = document.getElementById(parent);
    var playerList = document.getElementById('penaltyPlayers');
    playerList.innerHTML = '';
    for (var i = 1, row; row = table.rows[i]; i++) {
      
      var chk = row.cells[1].querySelector("input[type='checkbox']");
      if(chk.checked) {
        var radiobox = document.createElement('input');
        radiobox.type = 'radio';
        radiobox.id = 'player' + row.getAttribute('data-id');
        radiobox.value = row.getAttribute('data-id');
        radiobox.name = 'player-select';
        var label = document.createElement('label')
        label.htmlFor = 'player' + row.getAttribute('data-id');
        var description = document.createTextNode(row.cells[0].innerHTML);
        label.appendChild(description);
        var newline = document.createElement('br');
        playerList.appendChild(radiobox);
        playerList.appendChild(label);
        playerList.appendChild(newline);
      }
    }
    
    
  }
  function showGoal(teamId, goalId, scoredby, assist1, assist2, powerplay, shorthanded, emptynet, overtime) {
    var status = '{{gamestatus}}';
    if(role == 'admin' || (role == 'scorekeeper') && controlId == '{{game.id}}') {
      var parent = "homeRoster";
      if(teamId == {{game.awayteamid}}) {
        parent = "awayRoster";
      }

      document.getElementById('goal').style.display = 'block';
      document.getElementById('goalTeamId').innerHTML = teamId;
      document.getElementById('goalId').innerHTML = goalId;
      var table = document.getElementById(parent);
      var playerList = document.getElementById('goalPlayers');
      playerList.innerHTML = '<tr><th>Name</th><th>Goal</th><th>Assist</th></tr>';
      var rowCount = playerList.rows.length;
      for (var i = 1; i < rowCount; i++) {
    //      table.deleteRow(1);
      }

      for (var i = 1, row; row = table.rows[i]; i++) {
        var chk = row.cells[1].querySelector("input[type='checkbox']");
        if(chk.checked) {
          var grow = playerList.insertRow(playerList.rows.length);

          var cell1 = grow.insertCell(0);
          var cell2 = grow.insertCell(1);
          var cell3 = grow.insertCell(2);

          cell1.innerHTML = row.cells[0].innerHTML;

           var cb = document.createElement('input');
            cb.type = 'checkbox';
            cell2.appendChild(cb);
            cb.id = 'chkScore' + row.getAttribute('data-id');
            cb.classList.add('goal');
            cb.setAttribute('data-id', row.getAttribute('data-id'));

           var cb2 = document.createElement('input');
            cb2.type = 'checkbox';
            cell3.appendChild(cb2);
            cb2.id = 'chkAssist' + row.getAttribute('data-id');
            cb2.classList.add('assist');
            cb2.setAttribute('data-id', row.getAttribute('data-id'));
          }
      }

      document.getElementById('goal').style.display = 'block';
      if(scoredby > 0) {
        document.getElementById('chkScore' + scoredby).checked = true;
        if(assist1 > 0) document.getElementById('chkAssist' + assist1).checked = true;
        if(assist2 > 0) document.getElementById('chkAssist' + assist2).checked = true;
        if(powerplay) document.getElementById('chkGoalPP').checked = true;
        if(shorthanded) document.getElementById('chkGoalSH').checked = true;
        if(emptynet == 1) document.getElementById('chkGoalEN').checked = true;
        if(overtime) document.getElementById('chkGoalOT').checked = true;
        document.getElementById('addGoal').innerHTML = 'Update Goal';
      }
    }
  }
  function addPenalty() {
    var teamId = document.getElementById('penaltyTeamId').innerHTML;
    var playerId = document.querySelector('input[name="player-select"]:checked').value;
    var penalty = document.querySelector('input[name="penalty-select"]:checked').value;
    
    window.location = '/addPenalty?gameId={{game.id}}&teamId=' + teamId + '&player=' + playerId + '&penalty=' + penalty;
  }
  function cancelPenalty() {
    document.getElementById('penalty').style.display = 'none';
  }
  function getAttendance(parent)
  {
    var playerIds = '';
    var chks = document.getElementById(parent).querySelectorAll("input[type='checkbox']");
      for (let i = 0; i < chks.length; i++) {
        if(chks[i].checked)
          playerIds = playerIds + chks[i].getAttribute("data-id") + ',';
      }
    if(playerIds.length > 1)
      playerIds = playerIds.substring(0, playerIds.length - 1);
    return playerIds;
  }
  function startGame() {
     var roster = getAttendance('gameStart');
    localStorage.setItem('controlId', '{{game.id}}');
  //  window.location = '/startGame?id={{game.id}}&roster=' + roster;
  }
  function setAttendance() {
     var roster = getAttendance('gameStart');
    
   window.location = '/setAttendance?id={{game.id}}&roster=' + roster;
  }
  
  function restartGame() {
    if(role == 'scorekeeper' && controlId == '{{game.id}}') {
   //   if(confirm('This will clear all of the stats from this game and restart it.  Are you sure?'))
     //   window.location = '/resetGame?id={{game.id}}';
    }
  }
  
  function continueGame() {
    if(confirm('This will add another 5 minutes to the clock and continue the game.  Are you sure?'))
      window.location = '/continueGame?id={{game.id}}';
  }
 
  function requestControl() {
    localStorage.setItem('controlId', '{{game.id}}');
    localStorage.setItem('role', 'scorekeeper');
    window.location = '/game?id={{game.id}}';
  }
    
  
  
</script>
</html>
