Настройка команды 1


<style>
    .setup-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    .setup-card-header {
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        padding: 16px 20px;
        display: flex; align-items: center; gap: 10px;
    }
    .setup-card-header h2 {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    .setup-card-header .step-badge {
        background: var(--accent-dim);
        color: var(--accent);
        border: 1px solid rgba(88,166,255,0.25);
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
        letter-spacing: 0.3px;
    }
    .setup-body { padding: 24px; }

    .section-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--text-muted);
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }

    /* Players table */
    #players-table {
        width: 100%;
        border-collapse: collapse;
    }
    #players-table thead th {
        background: var(--bg-surface);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
    }
    #players-table tbody td {
        padding: 11px 14px;
        font-size: 13px;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    #players-table tbody tr:last-child td { border-bottom: none; }
    #players-table tbody tr:hover td { background: var(--bg-surface); }

    .form-check-input { cursor: pointer; }
    .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

    .player-number {
        display: inline-block;
        background: var(--accent-dim);
        color: var(--accent);
        font-weight: 700;
        font-size: 12px;
        min-width: 28px;
        text-align: center;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .position-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 4px;
        background: var(--bg-surface);
        color: var(--text-secondary);
        border: 1px solid var(--border);
    }

    .btn-submit {
        background: var(--success);
        border: none;
        border-radius: var(--radius-md);
        padding: 12px 32px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-submit:hover { opacity: 0.88; }

    .info-row {
        background: var(--accent-dim);
        border: 1px solid rgba(88,166,255,0.2);
        border-radius: var(--radius-md);
        padding: 12px 16px;
        font-size: 13px;
        color: var(--text-secondary);
        margin-bottom: 20px;
    }
    .info-row i { color: var(--accent); margin-right: 8px; }
</style>



<div class="setup-card">
    <div class="setup-card-header">
        <h2><i class="fas fa-users-cog me-2" style="color:var(--accent);font-size:14px;"></i>Настройка команды 1</h2>
        <span class="step-badge">Шаг 1 из 2</span>
    </div>
    <div class="setup-body">
        <form method="POST" action="/setup-team/7fdef23b-e96f-48d5-94d1-1dd72bbd7022/1">

            
            <div class="mb-4">
                <div class="section-title">Настройки матча</div>
                <div class="row">
                    <div class="col-md-4">
                        <label for="period_duration" class="form-label">Длительность периода (минуты)</label>
                        <input type="number" class="form-control" id="period_duration" name="period_duration"
                               min="1" max="60" value="20" required>
                        <div class="form-text">От 1 до 60 минут</div>
                    </div>
                </div>
            </div>
            

            <div class="mb-4">
                <div class="section-title">Информация о команде</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="team_name" class="form-label">Название команды</label>
                        <input type="text" class="form-control" id="team_name" name="team_name"
                               value="Gorban Team Academy " readonly>
                        <input type="hidden" id="team_id" name="team_id"
                               value="">
                    </div>
                    <div class="col-md-6">
                        <label for="team_short" class="form-label">Сокращение (3 буквы)</label>
                        <input type="text" class="form-control" id="team_short" name="team_short" maxlength="3"
                               value="GOR" readonly>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <div class="section-title">Состав команды</div>
                <div class="info-row">
                    <i class="fas fa-info-circle"></i>Отметьте игроков, которые участвуют в матче.
                </div>
                <div class="table-responsive">
                    <table id="players-table">
                        <thead>
                            <tr>
                                <th style="width:44px;">
                                    <input class="form-check-input" type="checkbox" id="select-all-players">
                                </th>
                                <th style="width:60px;">№</th>
                                <th>Игрок</th>
                                <th>Позиция</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                                <tr><td colspan="4" style="text-align:center;padding:32px;color:var(--text-muted);">Нет доступных игроков</td></tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="d-flex justify-content-center">
                <button type="submit" class="btn-submit">
                    <i class="fas fa-save"></i>Сохранить команду
                </button>
            </div>
        </form>
    </div>
</div>



<script>
    document.addEventListener('DOMContentLoaded', function () {
        console.log("Страница загружена");
        console.log("team_number:", 1);
        console.log("match:", {"away_team_id": 14, "events": [], "faceoffs": {"team1": 0, "team2": 0}, "full": true, "game_finished": true, "goals": {"team2": [{"assist1_id": 110, "assist2_id": null, "is_bullitt": false, "period": 1, "player_id": 118, "time": "10:11"}]}, "home_team_id": 20, "id": "7fdef23b-e96f-48d5-94d1-1dd72bbd7022", "is_overtime": false, "is_running": false, "is_shootout": false, "match_id": 19, "match_time": "45:00", "penalties": {"team1": [{"duration": 2, "penalty_type": "minor", "period": 1, "player_id": 263, "time": "12:33"}]}, "period": 3, "period_duration_ms": 900000, "period_time": "15:00", "player_stats": {}, "possession_times": {"team1": 0, "team2": 0}, "saves": {"team1": 0, "team2": 0}, "score1": 0, "score2": 6, "shootout_score1": 0, "shootout_score2": 0, "shots_on_goal": {"team1": 0, "team2": 0}, "team1": {"name": "Gorban Team Academy ", "players": [], "short_name": "GOR"}, "team2": {"name": "\u041e\u043b\u0438\u043c\u043f", "players": [], "short_name": "\u041e\u041b\u0418"}, "win_type": "regular", "winner_id": null});

        const playersTable = document.querySelector("#players-table");
        const selectAllCheckbox = document.getElementById("select-all-players");
        const teamIdInput = document.getElementById("team_id");
        const form = document.querySelector("form");

        if (teamIdInput) {
            const matchData = {"away_team_id": 14, "events": [], "faceoffs": {"team1": 0, "team2": 0}, "full": true, "game_finished": true, "goals": {"team2": [{"assist1_id": 110, "assist2_id": null, "is_bullitt": false, "period": 1, "player_id": 118, "time": "10:11"}]}, "home_team_id": 20, "id": "7fdef23b-e96f-48d5-94d1-1dd72bbd7022", "is_overtime": false, "is_running": false, "is_shootout": false, "match_id": 19, "match_time": "45:00", "penalties": {"team1": [{"duration": 2, "penalty_type": "minor", "period": 1, "player_id": 263, "time": "12:33"}]}, "period": 3, "period_duration_ms": 900000, "period_time": "15:00", "player_stats": {}, "possession_times": {"team1": 0, "team2": 0}, "saves": {"team1": 0, "team2": 0}, "score1": 0, "score2": 6, "shootout_score1": 0, "shootout_score2": 0, "shots_on_goal": {"team1": 0, "team2": 0}, "team1": {"name": "Gorban Team Academy ", "players": [], "short_name": "GOR"}, "team2": {"name": "\u041e\u043b\u0438\u043c\u043f", "players": [], "short_name": "\u041e\u041b\u0418"}, "win_type": "regular", "winner_id": null};
            const teamId = 1 === 1 ? matchData.home_team_id : matchData.away_team_id;
            if (teamId) { teamIdInput.value = teamId; loadTeamPlayers(teamId); }
        }

        if (form) {
            form.addEventListener("submit", function (e) {
                e.preventDefault();
                const selectedPlayers = Array.from(document.querySelectorAll(".player-checkbox:checked"))
                    .map((checkbox, index) => ({
                        select: checkbox.value, number: checkbox.dataset.number,
                        name: checkbox.dataset.name, position: checkbox.dataset.position, index: index + 1,
                    }));
                selectedPlayers.forEach(player => {
                    addHiddenField(`player_select_${player.index}`, player.select);
                    addHiddenField(`player_number_${player.index}`, player.number);
                    addHiddenField(`player_name_${player.index}`, player.name);
                    addHiddenField(`player_position_${player.index}`, player.position);
                });
                this.submit();
            });
        }

        function addHiddenField(name, value) {
            const input = document.createElement("input");
            input.type = "hidden"; input.name = name; input.value = value;
            form.appendChild(input);
        }

        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener("change", function () {
                document.querySelectorAll(".player-checkbox").forEach(cb => cb.checked = this.checked);
            });
        }

        document.querySelectorAll(".player-checkbox").forEach(checkbox => {
            checkbox.addEventListener("change", function () {
                const all = Array.from(document.querySelectorAll(".player-checkbox"));
                selectAllCheckbox.checked = all.every(cb => cb.checked);
            });
        });

        function loadTeamPlayers(teamId) {
            if (!teamId) return;
            fetch(`/api/teams/${teamId}/players`)
                .then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
                .then(data => {
                    if (Array.isArray(data)) {
                        const tbody = playersTable.querySelector("tbody");
                        tbody.innerHTML = "";
                        if (data.length === 0) {
                            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;padding:32px;color:var(--text-muted);">Нет доступных игроков</td></tr>';
                            return;
                        }
                        data.forEach(player => {
                            const row = document.createElement("tr");
                            row.innerHTML = `
                                <td><input class="form-check-input player-checkbox" type="checkbox"
                                    name="selected_players[]" value="${player.id || player.player_id}"
                                    data-number="${player.number}" data-name="${player.name}" data-position="${player.position}"></td>
                                <td><span class="player-number">${player.number}</span></td>
                                <td>${player.name}</td>
                                <td><span class="position-badge">${getPositionName(player.position)}</span></td>
                            `;
                            tbody.appendChild(row);
                        });
                        updateCheckboxHandlers();
                    }
                })
                .catch(err => {
                    console.error("Ошибка при загрузке игроков:", err);
                    const tbody = playersTable.querySelector("tbody");
                    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;padding:32px;color:var(--danger);">Ошибка загрузки игроков</td></tr>';
                });
        }

        function updateCheckboxHandlers() {
            const checkboxes = document.querySelectorAll(".player-checkbox");
            checkboxes.forEach(cb => {
                cb.addEventListener("change", function () {
                    selectAllCheckbox.checked = Array.from(checkboxes).every(c => c.checked);
                });
            });
        }

        function getPositionName(position) {
            const map = { forward: "Нападающий", defender: "Защитник", goalkeeper: "Вратарь", "Н": "Нападающий", "З": "Защитник", "ВР": "Вратарь" };
            return map[position] || position || "—";
        }
    });
</script>