{{/*
  Copyright 2014 Team 254. All Rights Reserved.
  Author: pat@patfairbank.com (Patrick Fairbank)

  UI for generating a match schedule.
*/}}
{{define "title"}}Match Scheduling{{end}}
{{define "body"}}
<div class="row">
  {{if .ErrorMessage}}
    <div class="alert alert-dismissable alert-danger">
      <button type="button" class="close" data-dismiss="alert">×</button>
      {{.ErrorMessage}}
    </div>
  {{end}}
  <div class="col-lg-5">
    <div class="well">
      <form id="scheduleForm" class="form-horizontal" action="/setup/schedule/save?matchType={{.MatchType}}"
          method="POST">
        <fieldset>
          <legend>Schedule Parameters</legend>
          <div class="form-group">
            <label class="col-lg-5 control-label">Match Type</label>
            <div class="col-lg-7">
              <div class="radio">
                <label>
                  <input type="radio" name="matchType" value="practice"
                      onchange="window.location = '/setup/schedule?matchType=practice';"
                      {{if eq .MatchType "practice"}}checked{{end}}>
                  Practice
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="matchType" value="qualification"
                      onchange="window.location = '/setup/schedule?matchType=qualification';"
                      {{if eq .MatchType "qualification"}}checked{{end}}>
                  Qualification
                </label>
              </div>
            </div>
          </div>
          <div id="blockContainer"></div>
          <p>
            <b>Total match count: <span id="totalNumMatches">0</span></b><br />
            <b>Matches per team: <span id="matchesPerTeam">0</span></b><br />
            <b>Excess matches: <span id="numExcessMatches">0</span></b><br />
            <b>Matches needed for +1 per team: <span id="nextLevelMatches">0</span></b>
          </p>
          <div class="form-group">
            <div class="col-lg-12">
              <p><button type="button" class="btn btn-default" onclick="addBlock();">Add Block</button>
              <button type="button" class="btn btn-info" onclick="generateSchedule();">
                Generate Schedule/Save Blocks
              </button></p>
              <p><button type="submit" class="btn btn-primary">Save Schedule</button></p>
            </div>
          </div>
          {{if .EventSettings.TbaPublishingEnabled}}
          <div class="form-group">
            <div class="col-lg-12">
                  <button type="button" class="btn btn-info" onclick="$('#confirmPublishSchedule').modal('show');">
                    Publish Schedule to TBA
                  </button>
            </div>
          </div>
          {{end}}
        </fieldset>
      </form>
    </div>
  </div>
  <div class="col-lg-5">
    <table class="table table-striped table-hover ">
      <thead>
        <tr>
          <th>Match</th>
          <th>Type</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
        {{range $match := .Matches}}
          <tr>
            <td>{{$match.DisplayName}}</td>
            <td>{{$match.Type}}</td>
            <td>{{$match.Time}}</td>
          </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  <div class="col-lg-2">
    <table class="table table-striped table-hover ">
      <thead>
        <tr>
          <th>Team</th>
          <th>First Match</th>
        </tr>
      </thead>
      <tbody>
        {{range $team, $firstMatch := .TeamFirstMatches}}
          <tr>
            <td>{{$team}}</td>
            <td>{{$firstMatch}}</td>
          </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>
<div id="blockTemplate" style="display: none;">
  <div class="well well-sm" id="block{{"{{blockNumber}}"}}">
    <b>Block {{"{{blockNumber}}"}}</b>
    <button type="button" class="close" onclick="deleteBlock({{"{{blockNumber}}"}});">×</button><br /><br />
    <div class="form-group">
      <label class="col-lg-4 control-label">Start Time</label>
      <div class="col-lg-8">
        <div class="input-group date" id="startTimePicker{{"{{blockNumber}}"}}"
            data-date-format="YYYY-MM-DD hh:mm:ss A" onchange="updateBlock({{"{{blockNumber}}"}});">
          <input type="text" class="form-control input-sm" id="startTime{{"{{blockNumber}}"}}"
              onchange="updateBlock({{"{{blockNumber}}"}});">
          <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-4 control-label">End Time</label>
      <div class="col-lg-8">
        <div class="input-group date" id="endTimePicker{{"{{blockNumber}}"}}"
            data-date-format="YYYY-MM-DD hh:mm:ss A" onchange="updateBlock({{"{{blockNumber}}"}});">
          <input type="text" class="form-control input-sm" id="endTime{{"{{blockNumber}}"}}"
              onchange="updateBlock({{"{{blockNumber}}"}});">
          <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-4 control-label">Cycle Time (m:s)</label>
      <div class="col-lg-8">
        <input type="text" class="form-control input-sm" id="matchSpacingMinSec{{"{{blockNumber}}"}}"
            value="{{"{{matchSpacingMinSec}}"}}" placeholder="6:00" onchange="updateBlock({{"{{blockNumber}}"}});">
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-5">Match count: <span id="numMatches{{"{{blockNumber}}"}}"></span></div>
      <div class="col-lg-7">Actual end time: <span id="actualEndTime{{"{{blockNumber}}"}}"></span></div>
    </div>
  </div>
</div>
<div id="confirmPublishSchedule" class="modal" style="top: 20%;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Confirm</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to publish the schedule to The Blue Alliance? This will overwrite any
          existing matches and their data.</p>
      </div>
      <div class="modal-footer">
        <form class="form-horizontal" action="/setup/schedule/republish?matchType={{.MatchType}}" method="POST">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Publish Schedule</button>
        </form>
      </div>
    </div>
  </div>
</div>

{{end}}
{{define "script"}}
<script>var numTeams = {{.NumTeams}};</script>
<script src="/static/js/setup_schedule.js"></script>
<script>
  {{range $block := .ScheduleBlocks}}
    addBlock(moment({{$block.StartTime.Unix}} * 1000), {{$block.NumMatches}}, {{$block.MatchSpacingSec}});
  {{end}}
  {{if not .ScheduleBlocks}}
    addBlock();
  {{end}}
</script>
{{end}}