{% extends "base.html" %}

{% block title %}HKFC Men's C Team - MotM and DotD Vote{% endblock %}

{% block content %}
<!-- Match Header -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <h2 class="card-title">
          <i class="fas fa-trophy text-warning me-2"></i>
          HKFC Men's C Team MotM and DotD Vote
        </h2>
        <h5 class="text-muted">{{ formatDate }}</h5>
        
        <!-- Team Logos -->
        <div class="d-flex justify-content-center align-items-center mt-3">
          <div class="text-center me-4">
            <img src="{{ hkfcLogo }}" alt="HKFC Logo" class="img-fluid" style="max-height: 120px;">
            <div class="mt-2">
              <strong>HKFC</strong>
            </div>
          </div>
          <div class="text-center mx-3">
            <h3 class="text-primary">VS</h3>
          </div>
          <div class="text-center ms-4">
            <img src="{{ oppoLogo }}" alt="Opponent Logo" class="img-fluid" style="max-height: 120px;">
            <div class="mt-2">
              <strong>{{ oppo }}</strong>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Random Comment -->
{% if comment and comment != "No comments added yet" %}
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-info text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-comment-dots me-2"></i>Random Match Comment
        </h5>
      </div>
      <div class="card-body">
        <blockquote class="blockquote text-center">
          <p class="mb-0">
            <i class="fas fa-quote-left text-muted me-2"></i>
            <em>{{ comment }}</em>
            <i class="fas fa-quote-right text-muted ms-2"></i>
          </p>
        </blockquote>
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Voting Forms -->
<div class="row">
  <div class="col-lg-8 mx-auto mb-4">
    <!-- Vote for MOTM and DotD -->
    <div class="card h-100">
      <div class="card-header bg-success text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-vote-yea me-2"></i>Vote for MOTM and DotD
        </h5>
      </div>
      <div class="card-body">
        <form method="post" action="/motm/vote-thanks" id="motmForm">
          {{ form.csrf_token }}
          <input type="hidden" id="matchNumber" name="matchNumber" value="{{ matchNumber }}">
          <input type="hidden" id="oppo" name="oppo" value="{{ oppo }}">
          
          <div class="mb-3">
            <label for="motmSelect" class="form-label">Select Player:</label>
            <select class="form-select" id="motmSelect" name="motmVote" required>
              <option value="">Choose a player...</option>
              {% for player in data %}
                <option value="{{ player.playernumber }}">{{ player.playerforenames }} {{ player.playersurname }} 
                  {% if player.playernickname %}"{{ player.playernickname }}"{% endif %}
                </option>
              {% endfor %}
            </select>
          </div>
          
          <div class="mb-3">
            <label for="dotdSelect" class="form-label">Dick of the Day:</label>
            <select class="form-select" id="dotdSelect" name="dotdVote" required>
              <option value="">Choose a player...</option>
              {% for player in data %}
                <option value="{{ player.playernumber }}">{{ player.playerforenames }} {{ player.playersurname }} 
                  {% if player.playernickname %}"{{ player.playernickname }}"{% endif %}
                </option>
              {% endfor %}
            </select>
          </div>
          
          <div class="mb-3">
            <label for="motmComment" class="form-label">Optional Comment:</label>
            <textarea class="form-control" id="motmComment" name="motmComment" rows="3" placeholder="Share your thoughts about the match..."></textarea>
          </div>
          
          <div class="d-grid">
            <button type="submit" class="btn btn-success btn-lg">
              <i class="fas fa-vote-yea me-2"></i>Submit Votes
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Current Results (if available) -->
{% if currMotM or currDotD %}
<div class="row mt-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-secondary text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-chart-bar me-2"></i>Current Results
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
          {% if currMotM %}
          <div class="col-md-6">
            <div class="alert alert-success">
              <h6 class="alert-heading">
                <i class="fas fa-trophy me-2"></i>Current Man of the Match
              </h6>
              <p class="mb-0">{{ currMotM }}</p>
            </div>
          </div>
          {% endif %}
          
          {% if currDotD %}
          <div class="col-md-6">
            <div class="alert alert-warning">
              <h6 class="alert-heading">
                <i class="fas fa-award me-2"></i>Current Dick of the Day
              </h6>
              <p class="mb-0">{{ currDotD }}</p>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Instructions -->
<div class="row mt-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h6><i class="fas fa-info-circle me-2"></i>Voting Instructions</h6>
        <ul class="list-unstyled">
          <li><i class="fas fa-check text-success me-2"></i>Select one player for Man of the Match</li>
          <li><i class="fas fa-check text-success me-2"></i>Select one player for Dick of the Day</li>
          <li><i class="fas fa-check text-success me-2"></i>You can vote for the same player for both categories</li>
          <li><i class="fas fa-check text-success me-2"></i>Votes are submitted independently</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
$(document).ready(function() {
    // Form validation
    $('#motmForm').on('submit', function(e) {
        const motmSelect = $('#motmSelect');
        const dotdSelect = $('#dotdSelect');
        
        if (!motmSelect.val()) {
            e.preventDefault();
            alert('Please select a player for Man of the Match.');
            motmSelect.focus();
            return false;
        }
        
        if (!dotdSelect.val()) {
            e.preventDefault();
            alert('Please select a player for Dick of the Day.');
            dotdSelect.focus();
            return false;
        }
    });
    
    // Add loading state to button
    $('#motmForm').on('submit', function() {
        const button = $(this).find('button[type="submit"]');
        const originalText = button.html();
        button.html('<span class="loading-spinner"></span> Submitting...').prop('disabled', true);
    });
});
</script>
{% endblock %}