{% extends "layouts/election_layout.html" %}

{% block header %}
<title>{{ election.name | title }} | Tally</title>
{% endblock %}

{% block content %}
<section class="portfolio-block contact">
    <div class="container">
        <div class="heading">
          <h1>Tally Results</h1>
          <h4>Click below to close the election and calculate the results.</h4>
        </div>
        <form id="tally">
            <div class="form-group text-center">
              <div id="progress" class="progress" style="display:none;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
              </div>
            </div>
            <div class="form-group" style="margin-top: 50px;">
              <button id="submit" type="submit" class="btn btn-danger btn-block btn-lg">Tally Results</button>
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
  $(document).ready(function() {
    $('#tally').submit(function(e) {
      e.preventDefault();
      $('#progress').show();
      $('#submit').prop('disabled', true)
      $.post({
        url: '{{ url_for('election.compute_election', election=election.name) }}',
        success: function(data) {
          if (data['success']) {
            window.location.replace('{{ url_for('election.results', election=election.name) }}');
          } else {
            alert("An error occured in calculating the results.")
            window.location.replace('{{ url_for('election.election_home', election=election.name) }}');
          }
        }
      });
      return false;
    });
  });
</script>
{% endblock %}