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

{% block content %}
<div class="tryout-detail">
    <div class="card mb-4">
        <div class="card-header">
            <h3>Tryout Details</h3>
            <div class="card-actions">
                {% if can_edit %}
                <form method="POST" action="{{ url_for('tryouts.update_status', tryout_id=tryout.id) }}" class="inline-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <select name="status" onchange="this.form.submit()" class="form-select">
                        <option value="upcoming" {% if tryout.status == 'upcoming' %}selected{% endif %}>Upcoming</option>
                        <option value="in_progress" {% if tryout.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                        <option value="completed" {% if tryout.status == 'completed' %}selected{% endif %}>Completed</option>
                    </select>
                </form>
                {% endif %}
                {% if can_edit %}
                <a href="{{ url_for('tryouts.edit_tryout', tryout_id=tryout.id) }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-edit"></i> Edit
                </a>
                {% endif %}
            </div>
        </div>
        <div class="card-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label">Date</span>
                    <span class="detail-value">{{ tryout.date.strftime('%A, %B %d, %Y') }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Location</span>
                    <span class="detail-value">{{ tryout.location or 'Not specified' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Status</span>
                    <span class="detail-value">
                        <span class="badge badge-{{ tryout.status }}">{{ tryout.status | replace('_', ' ') | title }}</span>
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Target Team</span>
                    <span class="detail-value">{{ tryout.target_org_team.name if tryout.target_org_team else 'Not specified' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Registered Players</span>
                    <span class="detail-value">{{ registered_players | length }}</span>
                </div>
                {% if tryout.description %}
                <div class="detail-item full-width">
                    <span class="detail-label">Description</span>
                    <span class="detail-value">{{ tryout.description }}</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% if current_user.role == 'player' and not is_registered and tryout.status in ['upcoming', 'in_progress'] %}
    <div class="card mb-4">
        <div class="card-body text-center">
            <form method="POST" action="{{ url_for('tryouts.register_for_tryout', tryout_id=tryout.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-user-plus"></i> Register for this Tryout
                </button>
            </form>
        </div>
    </div>
    {% endif %}

    {% if can_edit %}
    <div class="card mb-4">
        <div class="card-header">
            <h3><i class="fas fa-user-plus"></i> Add Player to Tryout</h3>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('tryouts.register_player', tryout_id=tryout.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 %}
                    {% set is_already = registrations | selectattr('player_id', 'equalto', p.id) | list | length > 0 %}
                    <option value="{{ p.id }}" {% if is_already %}disabled class="text-muted"{% endif %}>{{ p.full_name }}{% if is_already %} (already registered){% endif %}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-sm btn-primary ml-2">
                    <i class="fas fa-plus"></i> Register Player
                </button>
            </form>
        </div>
    </div>
    {% endif %}

    <div class="dashboard-grid">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-users"></i> Registered Players ({{ registered_players | length }})</h3>
            </div>
            <div class="card-body">
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Player</th>
                                <th>Status</th>
                                {% if current_user.can_evaluate() %}
                                <th>Evaluation</th>
                                <th>Actions</th>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in registered_players %}
                            {% set reg = registrations | selectattr('player_id', 'equalto', p.id) | first %}
                            <tr>
                                <td>
                                    <div class="user-mini">
                                        <div class="avatar-sm">{{ p.full_name[:2] | upper }}</div>
                                        <span>{{ p.full_name }}</span>
                                    </div>
                                </td>
                                <td>
                                    {% if can_edit %}
                                    <form method="POST" action="{{ url_for('tryouts.update_registration_status', tryout_id=tryout.id, player_id=p.id) }}" class="inline-form">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <select name="status" onchange="this.form.submit()" class="form-select form-select-sm">
                                            <option value="registered" {% if reg.status == 'registered' %}selected{% endif %}>Registered</option>
                                            <option value="attended" {% if reg.status == 'attended' %}selected{% endif %}>Attended</option>
                                            <option value="no_show" {% if reg.status == 'no_show' %}selected{% endif %}>No Show</option>
                                        </select>
                                    </form>
                                    {% else %}
                                    <span class="badge badge-{{ reg.status }}">{{ reg.status }}</span>
                                    {% endif %}
                                </td>
                                {% if current_user.can_evaluate() %}
                                <td>
                                    {% if player_eval_status.get(p.id) %}
                                    <span class="badge badge-success">Evaluated</span>
                                    {% else %}
                                    <span class="badge badge-warning">Pending</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ url_for('evaluations.evaluate_player', tryout_id=tryout.id, player_id=p.id) }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i> {% if player_eval_status.get(p.id) %}Edit{% else %}Evaluate{% endif %}
                                    </a>
                                </td>
                                {% endif %}
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="{% if current_user.can_evaluate() %}4{% else %}2{% endif %}" class="text-center">
                                    No players registered yet.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-users-cog"></i> Teams</h3>
                {% if can_edit %}
                <button class="btn btn-sm btn-primary" onclick="showCreateTeam()">
                    <i class="fas fa-plus"></i> New Team
                </button>
                {% endif %}
            </div>
            <div class="card-body">
                {% if can_edit %}
                <div id="createTeamForm" class="hidden mb-3">
                    <form method="POST" action="{{ url_for('tryouts.create_team', tryout_id=tryout.id) }}" class="form-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <input type="text" name="team_name" placeholder="Team name" required class="form-input mr-2">
                        <button type="submit" class="btn btn-sm btn-success">Create</button>
                        <button type="button" class="btn btn-sm btn-secondary" onclick="hideCreateTeam()">Cancel</button>
                    </form>
                </div>
                {% endif %}

                {% for team in team_data %}
                <div class="team-card mb-3">
                    <h4 class="team-name">{{ team.team.name }}</h4>
                    <ul class="team-members">
                        {% for member in team.members %}
                        <li>
                            <div class="avatar-sm">{{ member.player.full_name[:2] | upper }}</div>
                            <span>{{ member.player.full_name }}</span>
                            {% if member.position %}
                            <span class="position-tag">{{ member.position }}</span>
                            {% endif %}
                        </li>
                        {% else %}
                        <li class="text-muted">No players assigned yet.</li>
                        {% endfor %}
                    </ul>
                    {% if can_edit and registered_players %}
                    <form method="POST" action="{{ url_for('tryouts.add_to_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="form-inline mt-2">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <select name="player_id" class="form-select" required>
                            <option value="">Select player...</option>
                            {% for p in registered_players %}
                            {% if p.id not in team.members | map(attribute='player') | map(attribute='id') | list %}
                            <option value="{{ p.id }}">{{ p.full_name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <input type="text" name="position" placeholder="Position" class="form-input mx-2">
                        <button type="submit" class="btn btn-sm btn-primary">Add</button>
                    </form>
                    {% endif %}
                </div>
                {% else %}
                <p class="text-muted text-center">No teams created yet.</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h3><i class="fas fa-star"></i> Evaluation Summary</h3>
        </div>
        <div class="card-body">
            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Player</th>
                            <th>Evaluator</th>
                            <th>Speed</th>
                            <th>Agility</th>
                            <th>Technique</th>
                            <th>Teamwork</th>
                            <th>Attitude</th>
                            <th>Overall</th>
                            <th>Recommendation</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for eval in evaluations %}
                        <tr>
                            <td>{{ eval.player.full_name }}</td>
                            <td>{{ eval.evaluator.full_name }}</td>
                            <td>{{ eval.speed_score or '-' }}</td>
                            <td>{{ eval.agility_score or '-' }}</td>
                            <td>{{ eval.technique_score or '-' }}</td>
                            <td>{{ eval.teamwork_score or '-' }}</td>
                            <td>{{ eval.attitude_score or '-' }}</td>
                            <td><span class="score">{{ eval.overall_score or '-' }}</span></td>
                            <td>{{ eval.position_recommendation or '-' }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="9" class="text-center">No evaluations yet.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
function showCreateTeam() { document.getElementById('createTeamForm').classList.remove('hidden'); }
function hideCreateTeam() { document.getElementById('createTeamForm').classList.add('hidden'); }
</script>
{% endblock %}