{% extends "layouts/base.html" %}
{% block title %}Schedule Match - {{ tryout.title }} - TryoutPro{% endblock %}
{% block page_title %}Schedule Match{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="{{ url_for('tryouts.list_tryouts') }}">Tryouts</a> / <a href="{{ url_for('tryouts.view_tryout', tryout_id=tryout.id) }}">{{ tryout.title }}</a> / Schedule Match</span>{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-futbol"></i> Schedule Match for {{ tryout.title }}</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('matches.create_match', tryout_id=tryout.id) }}" class="form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            
<div class="form-group">
                <label for="match_type">Match Type</label>
                <select name="match_type" id="match_type" class="form-select" onchange="toggleMatchType()" required>
                    <option value="team_vs_team">Team vs Team</option>
                    <option value="player_vs_player">Player vs Player</option>
                    <option value="player_scrim">Player Scrim</option>
                </select>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="title">Match Title</label>
                    <input type="text" name="title" id="title" class="form-input" placeholder="e.g., Alpha vs Bravo Scrimmage" required>
                </div>
                <div class="form-group">
                    <label for="date">Date</label>
                    <input type="date" name="date" id="date" class="form-input" value="{{ tryout.date.strftime('%Y-%m-%d') }}" required>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="start_time">Start Time (Optional)</label>
                    <input type="time" name="start_time" id="start_time" class="form-input">
                </div>
                <div class="form-group">
                    <label for="end_time">End Time (Optional)</label>
                    <input type="time" name="end_time" id="end_time" class="form-input">
                </div>
            </div>
            
            <div class="form-group">
                <label for="location">Location</label>
                <input type="text" name="location" id="location" class="form-input" placeholder="Match location">
            </div>
            
            <div class="form-group">
                <label for="description">Description</label>
                <textarea name="description" id="description" class="form-textarea" placeholder="Optional notes about this match"></textarea>
            </div>
            
            <!-- Team vs Team Selection -->
            <div id="team-vs-team-section">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-users"></i> Select Teams</h4>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="team1_id">Team 1</label>
                        <select name="team1_id" id="team1_id" class="form-select">
                            <option value="">-- Select Team 1 --</option>
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="team2_id">Team 2</label>
                        <select name="team2_id" id="team2_id" class="form-select">
                            <option value="">-- Select Team 2 --</option>
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Player vs Player Selection -->
            <div id="player-vs-player-section" class="hidden">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-user-friends"></i> Select Players</h4>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Team 1 Players</label>
                        <div class="checkbox-grid">
                            {% for player in all_players %}
                            <label class="checkbox-label">
                                <input type="checkbox" name="team1_player_ids" value="{{ player.id }}" onchange="handleTeamSelection(this, 1)">
                                {{ player.full_name }}
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Team 2 Players</label>
                        <div class="checkbox-grid">
                            {% for player in all_players %}
                            <label class="checkbox-label">
                                <input type="checkbox" name="team2_player_ids" value="{{ player.id }}" onchange="handleTeamSelection(this, 2)">
                                {{ player.full_name }}
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Player Scrim Selection -->
            <div id="player-scrim-section" class="hidden">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-users"></i> Select Players</h4>
                
                <div class="form-group">
                    <label>Players</label>
                    <div class="checkbox-grid">
                        {% for player in all_players %}
                        <label class="checkbox-label">
                            <input type="checkbox" name="player_ids" value="{{ player.id }}">
                            {{ player.full_name }}
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Schedule Match
                </button>
                <a href="{{ url_for('tryouts.view_tryout', tryout_id=tryout.id) }}" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleMatchType() {
    var matchType = document.getElementById('match_type').value;
    var teamSection = document.getElementById('team-vs-team-section');
    var playerVsPlayerSection = document.getElementById('player-vs-player-section');
    var scrimSection = document.getElementById('player-scrim-section');
    
    // Hide all sections first
    teamSection.classList.add('hidden');
    playerVsPlayerSection.classList.add('hidden');
    scrimSection.classList.add('hidden');
    
    // Show relevant section
    if (matchType === 'team_vs_team') {
        teamSection.classList.remove('hidden');
    } else if (matchType === 'player_vs_player') {
        playerVsPlayerSection.classList.remove('hidden');
    } else if (matchType === 'player_scrim') {
        scrimSection.classList.remove('hidden');
    }
}

function handleTeamSelection(checkbox, teamSide) {
    // When selecting from one team, deselect from the other team
    var otherSide = teamSide === 1 ? 2 : 1;
    var otherCheckboxes = document.querySelectorAll('input[name="team' + otherSide + '_player_ids"]');
    var playerId = checkbox.value;
    
    // Find the corresponding checkbox in the other team and uncheck it
    otherCheckboxes.forEach(function(other) {
        if (other.value === playerId) {
            other.checked = false;
        }
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleMatchType();
});
</script>
{% endblock %}