// ============================================
// DATOS DE PRUEBA
// ============================================

const salas = [
    {
        id: 1,
        nombre: "Sala Principal",
        equipos: [
            {
                id: 1,
                nombre: "Equipo 1",
                jugadores: [
                    "Carlos",
                    "María"
                ]
            },
            {
                id: 2,
                nombre: "Equipo 2",
                jugadores: [
                    "Jorge"
                ]
            }
        ]
    },

    {
        id: 2,
        nombre: "Los Trivialeros",
        equipos: [
            {
                id: 3,
                nombre: "Equipo Rojo",
                jugadores: [
                    "Ana",
                    "Pedro",
                    "Lucía"
                ]
            },
            {
                id: 4,
                nombre: "Equipo Azul",
                jugadores: [
                    "David",
                    "Laura"
                ]
            }
        ]
    },

    {
        id: 3,
        nombre: "Partida rápida",
        equipos: [
            {
                id: 5,
                nombre: "Equipo 1",
                jugadores: [
                    "Miguel"
                ]
            },
            {
                id: 6,
                nombre: "Equipo 2",
                jugadores: []
            }
        ]
    },

    {
        id: 4,
        nombre: "Noche de Trivial",
        equipos: [
            {
                id: 7,
                nombre: "Los quesitos",
                jugadores: [
                    "Pablo",
                    "Sara"
                ]
            },
            {
                id: 8,
                nombre: "Los cerebritos",
                jugadores: [
                    "Mario",
                    "Elena",
                    "Álvaro"
                ]
            }
        ]
    }
];


// ============================================
// MOSTRAR SALAS
// ============================================

function mostrarSalas(salas) {

    const contenedor = document.getElementById("contenedorSalas");

    contenedor.innerHTML = "";

    salas.forEach(sala => {

        const columna = document.createElement("div");

        columna.className = "col-12 col-md-6 col-xl-5";


        columna.innerHTML = `

            <div class="sala">

                <div class="sala-header">
                    ${sala.nombre}
                </div>


                <div class="sala-body">

                    <div class="equipos">

                        ${crearEquipo(sala, sala.equipos[0])}

                        ${crearEquipo(sala, sala.equipos[1])}

                    </div>

                </div>

            </div>

        `;

        contenedor.appendChild(columna);
    });
}



// ============================================
// CREAR EQUIPO
// ============================================

function crearEquipo(sala, equipo) {

    let jugadoresHTML = "";

    equipo.jugadores.forEach(jugador => {

        jugadoresHTML += `
            <div class="jugador">
                <span class="avatar">👤</span>
                ${jugador}
            </div>
        `;
    });


    return `

        <div class="equipo">

            <h6>
                ${equipo.nombre}
            </h6>

            <div class="jugadores">

                ${jugadoresHTML}

            </div>

            <button
                type="button"
                class="btn btn-unirse"
                onclick="unirseEquipo(${sala.id}, ${equipo.id})">

                Unirse

            </button>

        </div>

    `;
}

function unirseEquipo(idSala, idEquipo) {

    console.log("Sala:", idSala);
    console.log("Equipo:", idEquipo);

    alert(
        "Has pulsado unirse al equipo " +
        idEquipo +
        " de la sala " +
        idSala
    );
}


// ============================================
// CARGAR DATOS DE PRUEBA
// ============================================

mostrarSalas(salas);