{# filepath: c:\Users\Darwin\Desktop\Client_Dashboard\public_html\dashboard\templates\team_detail.html #}
{% extends "base.html" %}
{% load static %}

{% block title %}{{ team.name }} - Team Details{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    
    {# Header del Equipo #}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        {% if team.logo %}
                            <img src="{{ team.logo.url }}" alt="{{ team.name }}" class="rounded-circle me-3" style="width: 80px; height: 80px; object-fit: cover;">
                        {% else %}
                            <div class="bg-gradient-primary rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                <i class="fas fa-shield-alt text-white" style="font-size: 2rem;"></i>
                            </div>
                        {% endif %}
                        
                        <div>
                            <h2 class="mb-1">{{ team.name }}</h2>
                            <p class="text-muted mb-0">
                                <i class="fas fa-map-marker-alt me-1"></i>
                                {% if team.city %}
                                    {{ team.city.name }}, {{ team.country.name }}
                                {% elif team.country %}
                                    {{ team.country.name }}
                                {% else %}
                                    Location not specified
                                {% endif %}
                            </p>
                            <small class="text-muted">Code: {{ team.code|upper }}</small>
                        </div>
                        
                        <div class="ms-auto">
                            {% if can_view_historic %}
                                <span class="badge bg-success">
                                    <i class="fas fa-check-circle me-1"></i>Full Access
                                </span>
                            {% else %}
                                <span class="badge bg-warning">
                                    <i class="fas fa-eye me-1"></i>Limited Access
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Estadísticas del Equipo #}
    {% if team_stats %}
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-futbol text-primary" style="font-size: 2rem;"></i>
                    <h3 class="mt-2 mb-0">{{ team_stats.total_matches }}</h3>
                    <p class="text-muted mb-0">Total Matches</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-home text-success" style="font-size: 2rem;"></i>
                    <h3 class="mt-2 mb-0">{{ team_stats.home_matches }}</h3>
                    <p class="text-muted mb-0">Home Matches</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-plane text-info" style="font-size: 2rem;"></i>
                    <h3 class="mt-2 mb-0">{{ team_stats.away_matches }}</h3>
                    <p class="text-muted mb-0">Away Matches</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Tabs: Recent Matches y Players #}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <ul class="nav nav-tabs" id="teamTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="matches-tab" data-bs-toggle="tab" data-bs-target="#matches" type="button" role="tab">
                                <i class="fas fa-calendar-alt me-1"></i>Recent Matches
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="players-tab" data-bs-toggle="tab" data-bs-target="#players" type="button" role="tab">
                                <i class="fas fa-users me-1"></i>Players ({{ players.count }})
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="teamTabsContent">
                        
                        {# Tab: Recent Matches #}
                        <div class="tab-pane fade show active" id="matches" role="tabpanel">
                            {% if recent_matches %}
                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Competition</th>
                                            <th>Home Team</th>
                                            <th class="text-center">vs</th>
                                            <th>Away Team</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-end">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for match in recent_matches %}
                                        <tr>
                                            <td>
                                                <small class="text-muted">
                                                    {{ match.date|date:"M d, Y" }}<br>
                                                    {{ match.date|date:"H:i" }}
                                                </small>
                                            </td>
                                            <td>
                                                {% if match.competition %}
                                                    <span class="badge bg-light text-dark">
                                                        {{ match.competition.name }}
                                                    </span>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    {% if match.home_team_division.team.logo %}
                                                        <img src="{{ match.home_team_division.team.logo.url }}" 
                                                             alt="{{ match.home_team_division.team.name }}" 
                                                             class="rounded-circle me-2" 
                                                             style="width: 30px; height: 30px; object-fit: cover;">
                                                    {% endif %}
                                                    <span>{{ match.home_team_division.team.name }}</span>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <i class="fas fa-shield-alt text-muted"></i>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    {% if match.away_team_division.team.logo %}
                                                        <img src="{{ match.away_team_division.team.logo.url }}" 
                                                             alt="{{ match.away_team_division.team.name }}" 
                                                             class="rounded-circle me-2" 
                                                             style="width: 30px; height: 30px; object-fit: cover;">
                                                    {% endif %}
                                                    <span>{{ match.away_team_division.team.name }}</span>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                {% if match.processing_status == 'completed' %}
                                                    <span class="badge bg-success">Completed</span>
                                                {% elif match.processing_status == 'processing' %}
                                                    <span class="badge bg-warning">Processing</span>
                                                {% elif match.processing_status == 'pending' %}
                                                    <span class="badge bg-secondary">Pending</span>
                                                {% else %}
                                                    <span class="badge bg-danger">Failed</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-end">
                                                <a href="{% url 'matchs_view' division_id=match.home_team_division.division_id match_id=match.id %}" 
                                                   class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye me-1"></i>View
                                                </a>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-5">
                                <i class="fas fa-calendar-times text-muted" style="font-size: 3rem;"></i>
                                <p class="text-muted mt-3">No recent matches found</p>
                            </div>
                            {% endif %}
                        </div>

                        {# Tab: Players #}
                        <div class="tab-pane fade" id="players" role="tabpanel">
                            {% if players %}
                            <div class="row">
                                {% for player in players %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card h-100">
                                        <div class="card-body d-flex align-items-center">
                                            {% if player.logo %}
                                                <img src="{{ player.logo.url }}" 
                                                     alt="{{ player.name }}" 
                                                     class="rounded-circle me-3" 
                                                     style="width: 50px; height: 50px; object-fit: cover;">
                                            {% else %}
                                                <div class="bg-gradient-secondary rounded-circle me-3 d-flex align-items-center justify-content-center" 
                                                     style="width: 50px; height: 50px;">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                            {% endif %}
                                            
                                            <div>
                                                <h6 class="mb-0">{{ player.name }}</h6>
                                                <small class="text-muted">
                                                    {% if player.position %}
                                                        {{ player.position.name }}
                                                    {% else %}
                                                        Position not specified
                                                    {% endif %}
                                                </small>
                                                {% if player.nationality %}
                                                <br>
                                                <small class="text-muted">
                                                    <i class="fas fa-flag me-1"></i>{{ player.nationality.name }}
                                                </small>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <div class="text-center py-5">
                                <i class="fas fa-users text-muted" style="font-size: 3rem;"></i>
                                <p class="text-muted mt-3">No players found for this team</p>
                            </div>
                            {% endif %}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Botón de Regreso #}
    <div class="row mt-3">
        <div class="col-12">
            <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back to Dashboard
            </a>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
    // Inicializar tooltips de Bootstrap si los hay
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
</script>
{% endblock %}