{% extends "base.html" %}

{% block title %}Match Squad Selection - HKFC Men's C Team{% 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-users text-primary me-2"></i>
          Match Squad Selection
        </h1>
        <p class="lead text-muted">Select players for the match squad from the available players</p>
      </div>
    </div>
  </div>
</div>

<!-- Action Buttons -->
<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-bolt me-2"></i>Quick Actions
        </h5>
      </div>
      <div class="card-body">
        <div class="d-flex flex-wrap gap-2">
          <a href="/admin/players" class="btn btn-outline-primary">
            <i class="fas fa-user-plus me-2"></i>Manage Players
          </a>
          <a href="/admin/squad/list" class="btn btn-outline-info">
            <i class="fas fa-list me-2"></i>View Current Squad
          </a>
          <a href="/admin/squad/history" class="btn btn-outline-secondary">
            <i class="fas fa-history me-2"></i>Squad History
          </a>
          <a href="/admin" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Admin
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Squad Selection Form -->
{% if players %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-success text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-check-circle me-2"></i>Available Players
        </h5>
        <small class="opacity-75">Select players to add to the match squad</small>
      </div>
      <div class="card-body">
        <form action="/admin/squad/submit" method="post">
          <div class="row">
            {% for player in players %}
              <div class="col-md-4 col-lg-3 mb-3">
                <div class="card h-100">
                  <div class="card-body p-3">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="playerNumber" value="{{ player.playernumber }}" id="player{{ player.playernumber }}">
                      <label class="form-check-label w-100" for="player{{ player.playernumber }}">
                        <div class="d-flex align-items-center">
                          <div class="player-number me-3">
                            <span class="badge bg-primary fs-6">#{{ player.playernumber }}</span>
                          </div>
                          <div class="player-info flex-grow-1">
                            <div class="fw-bold">{{ player.playerforenames }} {{ player.playersurname }}</div>
                            <small class="text-muted">{{ player.playernickname }}</small>
                            <br>
                            <small class="text-info">
                              <i class="fas fa-users me-1"></i>{{ player.playerteam }}
                            </small>
                          </div>
                        </div>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
          
          <div class="mt-4 text-center">
            <button type="submit" class="btn btn-success btn-lg">
              <i class="fas fa-plus-circle me-2"></i>Add Selected Players to Squad
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% else %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <div class="alert alert-warning">
          <i class="fas fa-exclamation-triangle fa-3x mb-3 text-warning"></i>
          <h4>No Players Available</h4>
          <p class="mb-3">There are no players in the database. You need to add some players before selecting a squad.</p>
          <a href="/admin/players/add" class="btn btn-primary">
            <i class="fas fa-user-plus me-2"></i>Add Players
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
$(document).ready(function() {
    // Select all functionality
    $('#selectAll').on('change', function() {
        $('input[name="playerNumber"]').prop('checked', this.checked);
    });
    
    // Update select all checkbox when individual checkboxes change
    $('input[name="playerNumber"]').on('change', function() {
        var totalCheckboxes = $('input[name="playerNumber"]').length;
        var checkedCheckboxes = $('input[name="playerNumber"]:checked').length;
        $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
    });
});
</script>
{% endblock %}