{% extends "layouts/base.html" %}
{% block title %}Teams - TryoutPro{% endblock %}
{% block page_title %}Teams{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / Teams</span>{% endblock %}

{% block header_actions %}
{% if can_manage %}
<button class="btn btn-primary" onclick="showCreateForm()">
    <i class="fas fa-plus"></i> New Team
</button>
{% endif %}
{% endblock %}

{% block content %}
{% if can_manage %}
<div id="createTeamForm" class="card mb-4 {% if not form_visible %}hidden{% endif %}">
    <div class="card-header">
        <h3>Create New Team</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('teams.create_team') }}" class="form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div class="form-row">
                <div class="form-group col-4">
                    <label for="name">Team Name</label>
                    <input type="text" id="name" name="name" placeholder="e.g., Varsity, JV, U14" required>
                </div>
                <div class="form-group col-4">
                    <label for="coach_id">Assigned Coach</label>
                    <select id="coach_id" name="coach_id" class="form-select">
                        <option value="">-- No coach assigned --</option>
                        {% for coach in coaches %}
                        <option value="{{ coach.id }}">{{ coach.username }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group col-4">
                    <label for="manager_id">Assigned Manager</label>
                    <select id="manager_id" name="manager_id" class="form-select">
                        <option value="">-- No manager assigned --</option>
                        {% for manager in managers %}
                        <option value="{{ manager.id }}">{{ manager.username }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="hideCreateForm()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Team</button>
            </div>
        </form>
    </div>
</div>
{% endif %}

{% for team in teams %}
{% set can_manage_team = can_manage or (current_user.role == 'coach' and team.coach_id == current_user.id) %}
<div class="card mb-4">
    <div class="card-header">
        <h3><i class="fas fa-users-cog"></i> {{ team.name }}</h3>
        <div class="card-actions">
            <div class="team-staff">
                {% if team.coach %}
                <span class="text-muted">Coach: {{ team.coach.username }}</span>
                {% if can_manage %}
                <form method="POST" action="{{ url_for('teams.remove_coach', team_id=team.id) }}" class="inline-form" onsubmit="return confirm('Remove coach {{ team.coach.username }} from {{ team.name }}?')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Remove Coach">
                        <i class="fas fa-user-minus"></i>
                    </button>
                </form>
                {% endif %}
                {% else %}
                <span class="text-muted">No coach assigned</span>
                {% endif %}
                {% if team.manager %}
                <span class="text-muted ml-2">Manager: {{ team.manager.username }}</span>
                {% if can_manage %}
                <form method="POST" action="{{ url_for('teams.remove_manager', team_id=team.id) }}" class="inline-form" onsubmit="return confirm('Remove manager {{ team.manager.username }} from {{ team.name }}?')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Remove Manager">
                        <i class="fas fa-user-minus"></i>
                    </button>
                </form>
                {% endif %}
                {% else %}
                <span class="text-muted ml-2">No manager assigned</span>
                {% endif %}
            </div>
            {% if can_manage %}
            <button class="btn btn-sm btn-outline edit-team-btn" data-team-id="{{ team.id }}" data-team-name="{{ team.name }}" data-coach-id="{{ team.coach_id or '' }}" data-manager-id="{{ team.manager_id or '' }}">
                <i class="fas fa-edit"></i> Edit
            </button>
            <form method="POST" action="{{ url_for('teams.delete_team', team_id=team.id) }}" class="inline-form" onsubmit="return confirm('Delete team {{ team.name }}? This will unassign it from any linked tryouts.')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash"></i> Delete
                </button>
            </form>
            {% endif %}
            {% if current_user.role == 'coach' and team.coach_id == current_user.id %}
            <a href="{{ url_for('users.notes_dashboard') }}" class="btn btn-sm btn-primary" title="Add Notes">
                <i class="fas fa-sticky-note"></i> Notes
            </a>
            {% endif %}
        </div>
    </div>
    <div class="card-body">
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Player</th>
                        <th>Status</th>
                        <th>Position / Role</th>
                        <th>Email</th>
                        <th>Phone</th>
                        {% if can_manage_team %}
                        <th>Actions</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for entry in team.get_players_with_status() %}
                    <tr>
                        <td>
                            <div class="user-mini">
                                <div class="avatar-sm">{{ entry.player.username[:2] | upper }}</div>
                                <span>{{ entry.player.username }}</span>
                            </div>
                        </td>
                        <td>
                            {% if can_manage_team %}
                            <button class="btn btn-sm status-toggle-btn {% if entry.status == 'starter' %}btn-success{% else %}btn-warning{% endif %}"
                                    data-team-id="{{ team.id }}"
                                    data-player-id="{{ entry.player.id }}"
                                    onclick="toggleStatus(this)">
                                {{ entry.status | capitalize }}
                            </button>
                            {% else %}
                            <span class="badge {% if entry.status == 'starter' %}badge-success{% else %}badge-warning{% endif %}">
                                {{ entry.status | capitalize }}
                            </span>
                            {% endif %}
                        </td>
                        <td>{{ entry.player.role | capitalize }}</td>
                        <td>{{ entry.player.email }}</td>
                        <td>{{ entry.player.phone or '-' }}</td>
                        {% if can_manage_team %}
                        <td>
                            <form method="POST" action="{{ url_for('teams.remove_player', team_id=team.id, player_id=entry.player.id) }}" class="inline-form" onsubmit="return confirm('Remove {{ entry.player.username }} from {{ team.name }}?')">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                <button type="submit" class="btn btn-sm btn-danger">
                                    <i class="fas fa-user-minus"></i> Remove
                                </button>
                            </form>
                        </td>
                        {% endif %}
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="{% if can_manage_team %}6{% else %}5{% endif %}" class="text-center">
                            <div class="empty-state">
                                <i class="fas fa-users-slash"></i>
                                <h4>No players assigned</h4>
                                {% if can_manage_team %}
                                <p>Add players to this team using the form below.</p>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if can_manage_team %}
        <hr class="my-3">
        <div class="add-player-section">
            <h5 class="mb-2"><i class="fas fa-user-plus"></i> Add Player to {{ team.name }}</h5>
            <form method="POST" action="{{ url_for('teams.add_player', team_id=team.id) }}" class="form-inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <select name="player_id" class="form-select" required>
                    <option value="">-- Select a player --</option>
                    {% for p in all_players %}
                    {% if p.id not in team.players | map(attribute='id') %}
                    <option value="{{ p.id }}">{{ p.username }}</option>
                    {% endif %}
                    {% endfor %}
                </select>
                <select name="status" class="form-select ml-2">
                    <option value="starter">Starter</option>
                    <option value="substitute">Substitute</option>
                </select>
                <button type="submit" class="btn btn-sm btn-primary ml-2">
                    <i class="fas fa-plus"></i> Add to Team
                </button>
            </form>
        </div>
        {% endif %}
    </div>
</div>
{% else %}
<div class="card">
    <div class="card-body text-center">
        <div class="empty-state">
            <i class="fas fa-users-cog"></i>
            <h3>No teams yet</h3>
            {% if can_manage %}
            <p>Create organization teams and assign coaches to manage tryouts.</p>
            <button class="btn btn-primary" onclick="showCreateForm()">Create Team</button>
            {% else %}
            <p>There are no teams to display.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}

<!-- Edit Team Modal -->
<div id="editTeamModal" class="modal hidden">
    <div class="modal-backdrop" onclick="hideEditForm()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Team</h3>
            <button class="modal-close" onclick="hideEditForm()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="editTeamForm" method="POST" action="" class="form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="form-group">
                    <label for="edit_name">Team Name</label>
                    <input type="text" id="edit_name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="edit_coach_id">Assigned Coach</label>
                    <select id="edit_coach_id" name="coach_id" class="form-select">
                        <option value="">-- No coach assigned --</option>
                        {% for coach in coaches %}
                        <option value="{{ coach.id }}">{{ coach.username }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit_manager_id">Assigned Manager</label>
                    <select id="edit_manager_id" name="manager_id" class="form-select">
                        <option value="">-- No manager assigned --</option>
                        {% for manager in managers %}
                        <option value="{{ manager.id }}">{{ manager.username }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="hideEditForm()">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function showCreateForm() {
    document.getElementById('createTeamForm').classList.remove('hidden');
}

function hideCreateForm() {
    document.getElementById('createTeamForm').classList.add('hidden');
}

function toggleStatus(btn) {
    var teamId = btn.getAttribute('data-team-id');
    var playerId = btn.getAttribute('data-player-id');
    
    fetch('/teams/' + teamId + '/toggle_status/' + playerId, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (data.success) {
            btn.textContent = data.new_status.charAt(0).toUpperCase() + data.new_status.slice(1);
            if (data.new_status === 'starter') {
                btn.classList.remove('btn-warning');
                btn.classList.add('btn-success');
            } else {
                btn.classList.remove('btn-success');
                btn.classList.add('btn-warning');
            }
        }
    })
    .catch(function(error) {
        console.error('Error:', error);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.edit-team-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var teamId = this.getAttribute('data-team-id');
            var teamName = this.getAttribute('data-team-name');
            var coachId = this.getAttribute('data-coach-id');
            var managerId = this.getAttribute('data-manager-id');
            document.getElementById('editTeamForm').action = '/teams/' + teamId + '/edit';
            document.getElementById('edit_name').value = teamName;
            document.getElementById('edit_coach_id').value = coachId || '';
            document.getElementById('edit_manager_id').value = managerId || '';
            document.getElementById('editTeamModal').classList.remove('hidden');
        });
    });
});

function showEditForm(teamId, teamName, coachId, managerId) {
    document.getElementById('editTeamForm').action = '/teams/' + teamId + '/edit';
    document.getElementById('edit_name').value = teamName;
    document.getElementById('edit_coach_id').value = coachId || '';
    document.getElementById('edit_manager_id').value = managerId || '';
    document.getElementById('editTeamModal').classList.remove('hidden');
}

function hideEditForm() {
    document.getElementById('editTeamModal').classList.add('hidden');
}
</script>
<style>
.team-staff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.team-staff .text-muted {
    font-size: 0.85rem;
}
.ml-2 {
    margin-left: 8px;
}
.status-toggle-btn {
    cursor: pointer;
    min-width: 90px;
}
</style>
{% endblock %}