{% extends "base.html" %}

{% block title %}Squad History{% endblock %}

{% block content %}
<div class="row mb-4">
  <div class="col-12">
    <div class="d-flex justify-content-between align-items-center">
      <h2><i class="fas fa-history me-2"></i>Squad History</h2>
      <a href="/admin" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Admin
      </a>
    </div>
  </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ 'danger' if category == 'error' else 'success' if category == 'success' else 'info' }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}

<!-- Historical Squads Summary -->
<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-list me-2"></i>Historical Squads Summary
        </h5>
      </div>
      <div class="card-body">
        {% if history %}
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Fixture Number</th>
                <th>Match Date</th>
                <th>Players</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% for fixture in history %}
              <tr>
                <td>{{ fixture.fixture_number }}</td>
                <td>{{ fixture.match_date }}</td>
                <td>{{ fixture.player_count }} players</td>
                <td>
                  <button class="btn btn-sm btn-info" onclick="showSquadDetails('{{ fixture.fixture_number }}')">
                    <i class="fas fa-eye me-1"></i>View Details
                  </button>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>No historical squad data available yet.
          Squad data will be saved here when you reset the squad for a new match.
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Detailed Squad View -->
{% if details %}
<div class="row">
  <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-users me-2"></i>Detailed Squad Records
        </h5>
      </div>
      <div class="card-body">
        {% set current_fixture = '' %}
        {% for player in details %}
          {% if player.fixture_number != current_fixture %}
            {% if current_fixture != '' %}
              </tbody>
            </table>
          </div>
        </div>
            {% endif %}
            {% set current_fixture = player.fixture_number %}
            <div class="squad-detail mb-4" id="squad-{{ player.fixture_number }}">
              <h6 class="border-bottom pb-2">
                <i class="fas fa-calendar me-2"></i>Fixture {{ player.fixture_number }} - {{ player.match_date }}
                <small class="text-muted">(Archived: {{ player.archived_at }})</small>
              </h6>
              <div class="table-responsive">
                <table class="table table-sm table-bordered">
                  <thead class="table-light">
                    <tr>
                      <th>Number</th>
                      <th>Nickname</th>
                      <th>Full Name</th>
                    </tr>
                  </thead>
                  <tbody>
          {% endif %}
          <tr>
            <td>{{ player.player_number }}</td>
            <td><strong>{{ player.player_nickname }}</strong></td>
            <td>{{ player.player_forenames }} {{ player.player_surname }}</td>
          </tr>
        {% endfor %}
        {% if current_fixture != '' %}
              </tbody>
            </table>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
function showSquadDetails(fixtureNumber) {
    const element = document.getElementById('squad-' + fixtureNumber);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        element.classList.add('highlight-squad');
        setTimeout(() => element.classList.remove('highlight-squad'), 2000);
    }
}
</script>
<style>
.highlight-squad {
    background-color: #fff3cd;
    transition: background-color 0.3s ease;
}
</style>
{% endblock %}