{% extends "base.html" %}

{% block title %}MOTM Management - HKFC Men's C Team MOTM System{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <h1 class="card-title">
          <i class="fas fa-trophy text-warning me-2"></i>
          MOTM Management
        </h1>
        <p class="lead text-muted">Manage Man of the Match and Dick of the Day settings</p>
        <a href="/admin" class="btn btn-outline-primary">
          <i class="fas fa-arrow-left me-2"></i>Back to Admin Dashboard
        </a>
      </div>
    </div>
  </div>
</div>
<!-- Match Configuration Card -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-calendar-alt me-2"></i>Next Match Configuration
        </h5>
      </div>
      <div class="card-body">
        {{ form.csrf_token }}
        <form method="post" action="/admin/motm">
          <!-- Load Next Fixture Section -->
          <div class="row mb-4">
            <div class="col-12">
              <div class="alert alert-info">
                <div class="d-flex align-items-center justify-content-between flex-wrap">
                  <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-info me-3" id="loadFixtureBtn" onclick="loadNextFixture()">
                      <i class="fas fa-download me-2"></i>Load Next HKFC C Fixture
                    </button>
                    <a href="https://hockey.org.hk/MenFixture.asp" target="_blank" class="btn btn-outline-info">
                      <i class="fas fa-external-link-alt me-2"></i>View HK Hockey Fixtures
                    </a>
                  </div>
                  <span id="fixtureStatus" class="ms-3"></span>
                </div>
                <div id="fixtureInfo" class="mt-3" style="display: none;"></div>
              </div>
            </div>
          </div>
          
          <!-- Match Details Form -->
          <div class="row mb-4">
            <div class="col-md-6 mb-3">
              <label for="nextMatchDate" class="form-label">
                <i class="fas fa-calendar me-2"></i>Match Date
              </label>
              {{ form.nextMatchDate(class_="form-control", **{"id": "nextMatchDate"}) }}
            </div>
            <div class="col-md-6 mb-3">
              <label for="nextOppoTeam" class="form-label">
                <i class="fas fa-users me-2"></i>Opposition Team
              </label>
              {{ form.nextOppoTeam(class_="form-control", **{"id": "nextOppoTeam"}) }}
            </div>
          </div>
          
          <!-- Voting Deadline Section -->
          <div class="row mb-4">
            <div class="col-md-6 mb-3">
              <label for="votingDeadline" class="form-label">
                <i class="fas fa-clock me-2"></i>Voting Deadline
              </label>
              {{ form.votingDeadline(class_="form-control", **{"id": "votingDeadline", "type": "datetime-local"}) }}
              <small class="form-text text-muted">Set when voting should close (leave empty for no deadline)</small>
            </div>
          </div>
          
          <!-- Previous Winners Section -->
          <div class="row mb-4">
            <div class="col-md-6 mb-3">
              <label for="currMotM" class="form-label">
                <i class="fas fa-trophy me-2 text-warning"></i>Previous Man of the Match
              </label>
              {{ form.currMotM(class_="form-select") }}
              <small class="form-text text-muted">
                <i class="fas fa-magic me-1"></i>Auto-selected from previous vote. Choose "No Previous" to override.
              </small>
            </div>
            <div class="col-md-6 mb-3">
              <label for="currDotD" class="form-label">
                <i class="fas fa-user-times me-2 text-danger"></i>Previous Dick of the Day
              </label>
              {{ form.currDotD(class_="form-select") }}
              <small class="form-text text-muted">
                <i class="fas fa-magic me-1"></i>Auto-selected from previous vote. Choose "No Previous" to override.
              </small>
            </div>
          </div>
          
          <!-- Warning Message -->
          {% if not form.currMotM.choices or form.currMotM.choices|length == 0 %}
          <div class="row mb-4">
            <div class="col-12">
              <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Note:</strong> No players available for previous MOTM/DotD. This is normal if you haven't set up a match squad yet. You can still save the match details.
              </div>
            </div>
          </div>
          {% endif %}
          
          <!-- Action Buttons -->
          <div class="row">
            <div class="col-12">
              <div class="d-flex gap-2 flex-wrap">
                {{ form.saveButton(class_="btn btn-success") }}
                {{ form.activateButton(class_="btn btn-primary") }}
                <a class="btn btn-outline-secondary" href="/admin" role="button">
                  <i class="fas fa-times me-2"></i>Cancel
                </a>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Opposition Logo Card -->
<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-image me-2"></i>Opposition Team Logo
        </h5>
      </div>
      <div class="card-body text-center">
        <img src="{{ nextOppoLogo }}" height="120" id="nextOppoLogo" class="img-fluid rounded" alt="Opposition Team Logo"/>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
  function loadNextFixture() {
    // Show loading status
    const statusElement = document.getElementById('fixtureStatus');
    const infoElement = document.getElementById('fixtureInfo');
    const loadBtn = document.getElementById('loadFixtureBtn');
    
    statusElement.innerHTML = '<span class="text-info"><i class="fas fa-spinner fa-spin me-2"></i>Loading...</span>';
    loadBtn.disabled = true;
    
    // Fetch the next fixture from the API
    fetch('/admin/api/next-fixture')
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // Update the form fields
          document.getElementById('nextMatchDate').value = data.date;
          document.getElementById('nextOppoTeam').value = data.opponent;
          
          // Update the opponent logo if provided
          if (data.opponent_logo_url) {
            const logoElement = document.getElementById('nextOppoLogo');
            if (logoElement) {
              logoElement.src = data.opponent_logo_url;
            }
          }
          
          // Show fixture information
          let clubInfo = '';
          if (data.opponent_club_info) {
            const club = data.opponent_club_info;
            const confidence = club.match_result ? club.match_result.confidence : 'unknown';
            const matchType = club.match_result ? club.match_result.match_type : 'unknown';
            
            clubInfo = '<br><small class="text-muted">';
            clubInfo += 'Club: ' + club.club_name;
            if (club.logo_url) {
              clubInfo += ' | <a href="' + club.logo_url + '" target="_blank">Logo</a>';
            }
            clubInfo += ' | Match: ' + matchType + ' (' + confidence + ')';
            clubInfo += '</small>';
          }
          
          infoElement.innerHTML = '<strong>Next Match:</strong> ' + 
            data.date_formatted + ' vs ' + data.opponent + 
            ' (' + (data.is_home ? 'Home' : 'Away') + ' - ' + data.venue + ')' +
            '<br><small>Division: ' + data.division + ' | Time: ' + data.time + '</small>' +
            clubInfo;
          infoElement.style.display = 'block';
          
          statusElement.innerHTML = '<span class="text-success"><i class="fas fa-check me-2"></i>Fixture loaded!</span>';
          
          // Clear status message after 3 seconds
          setTimeout(function() {
            statusElement.innerHTML = '';
          }, 3000);
        } else {
          statusElement.innerHTML = '<span class="text-danger"><i class="fas fa-times me-2"></i>' + data.message + '</span>';
          infoElement.style.display = 'none';
        }
        loadBtn.disabled = false;
      })
      .catch(error => {
        console.error('Error:', error);
        statusElement.innerHTML = '<span class="text-danger"><i class="fas fa-exclamation-triangle me-2"></i>Error loading fixture</span>';
        infoElement.style.display = 'none';
        loadBtn.disabled = false;
      });
  }
  
  // Auto-load fixture on page load (optional)
  document.addEventListener('DOMContentLoaded', function() {
    // Uncomment the next line if you want to auto-load the fixture when the page loads
    // loadNextFixture();
  });
</script>
{% endblock %}