<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MrTAPPS Stats</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
  <style>
    :root {
      --primary: #2563eb;
      --secondary: #1e40af;
      --background: #f8fafc;
      --text: #1e293b;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, sans-serif;
    }

    body {
      background-color: var(--background);
      color: var(--text);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
    }

    header {
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 1rem 0;
      margin-bottom: 2rem;
    }

    .logo {
      width: 150px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .player-card {
      background: white;
      border-radius: 0.5rem;
      padding: 1.5rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
    }

    .player-card:hover {
      transform: translateY(-5px);
    }

    .player-header {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
    }

    .player-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 1rem;
      object-fit: cover;
    }

    .player-name {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      text-align: center;
    }

    .stat-item {
      background: var(--background);
      padding: 0.75rem;
      border-radius: 0.25rem;
    }

    .stat-value {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--primary);
    }

    .stat-label {
      font-size: 0.875rem;
      color: #64748b;
    }

    .comparison-section {
      background: white;
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-top: 2rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .comparison-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    select {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.25rem;
      background: white;
    }

    .tabs {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 0.5rem;
    }

    .tab {
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-radius: 0.25rem;
      transition: background-color 0.2s;
    }

    .tab.active {
      background-color: var(--primary);
      color: white;
    }

    .leagues-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .league-card {
      background: white;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .league-title {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: var(--primary);
    }

    @media (max-width: 768px) {

      .stats-grid,
      .leagues-grid {
        grid-template-columns: 1fr;
      }

      .comparison-controls {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="container">
      <img src="https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/7e80f031-cda0-4c22-39c6-a0e9c1f2bc00/4k"
        alt="MrTAPPS Logo" class="logo">
    </div>
  </header>

  <main class="container">
    <div class="tabs">
      <div class="tab active" onclick="switchView('overall')">General</div>
      <div class="tab" onclick="switchView('leagues')">Por Liga</div>
    </div>

    <div id="overallView">
      <div class="stats-grid" id="playerStats"></div>

      <div class="comparison-section">
        <h2 style="margin-bottom: 1rem">Comparar Jugadores</h2>
        <div class="comparison-controls">
          <select id="player1">
            <option value="">Seleccionar Jugador 1</option>
          </select>
          <select id="player2">
            <option value="">Seleccionar Jugador 2</option>
          </select>
          <select id="leagueSelect">
            <option value="overall">Todas las Ligas</option>
            <option value="betplay">BetPlay</option>
            <option value="origins">Origins CL</option>
            <option value="brasileirao">Brasileirao</option>
            <option value="superliga">SuperLiga</option>
            <option value="ligacalor">Liga de Calor</option>
            <option value="crleague">CR League</option>
            <option value="futsal">Futsal Int.</option>
            <option value="haxball">HaxBall Sunday L.</option>
            <option value="foxcol">FoxCol</option>
          </select>
        </div>
        <canvas id="comparisonChart"></canvas>
      </div>
    </div>

    <div id="leaguesView" style="display: none">
      <div class="leagues-grid" id="leaguesStats"></div>
    </div>
  </main>

  <script>
    const leagueData = {
      betplay: {
        name: 'BetPlay',
        players: {
          Torrez: {goals: 19, assists: 9, matches: 7},
          MrCRACK: {goals: 13, assists: 7, matches: 7},
          Polos: {goals: 3, assists: 5, matches: 7},
          ptzt: {goals: 0, assists: 3, matches: 3},
          Saul: {goals: 1, assists: 0, matches: 4},
          Ryan: {goals: 0, assists: 0, matches: 2}
        }
      },
      origins: {
        name: 'Origins CL',
        players: {
          Torrez: {goals: 7, assists: 2, matches: 7},
          MrCRACK: {goals: 2, assists: 3, matches: 7},
          Polos: {goals: 0, assists: 1, matches: 5},
          ptzt: {goals: 0, assists: 0, matches: 5},
          Saul: {goals: 0, assists: 0, matches: 1}
        }
      },
      brasileirao: {
        name: 'Brasileirao',
        players: {
          Torrez: {goals: 18, assists: 5, matches: 7},
          MrCRACK: {goals: 14, assists: 10, matches: 7},
          Polos: {goals: 1, assists: 6, matches: 7},
          ptzt: {goals: 0, assists: 1, matches: 4},
          Saul: {goals: 0, assists: 0, matches: 4},
          Ryan: {goals: 0, assists: 0, matches: 2}
        }
      },
      superliga: {
        name: 'SuperLiga',
        players: {
          Torrez: {goals: 10, assists: 3, matches: 4},
          MrCRACK: {goals: 6, assists: 4, matches: 4},
          Polos: {goals: 2, assists: 4, matches: 4},
          ptzt: {goals: 0, assists: 0, matches: 2},
          Saul: {goals: 0, assists: 0, matches: 4},
          Ryan: {goals: 0, assists: 0, matches: 1}
        }
      },
      ligacalor: {
        name: 'Liga de Calor',
        players: {
          Torrez: {goals: 7, assists: 4, matches: 3},
          MrCRACK: {goals: 10, assists: 2, matches: 4},
          Polos: {goals: 2, assists: 7, matches: 4},
          ptzt: {goals: 0, assists: 1, matches: 3},
          Saul: {goals: 0, assists: 0, matches: 1}
        }
      },
      crleague: {
        name: 'CR League',
        players: {
          Torrez: {goals: 4, assists: 1, matches: 3},
          MrCRACK: {goals: 0, assists: 2, matches: 3},
          Polos: {goals: 1, assists: 1, matches: 2},
          ptzt: {goals: 0, assists: 0, matches: 1},
          Saul: {goals: 0, assists: 0, matches: 0}
        }
      },
      futsal: {
        name: 'Futsal Int.',
        players: {
          Torrez: {goals: 7, assists: 2, matches: 3},
          MrCRACK: {goals: 2, assists: 3, matches: 3},
          Polos: {goals: 0, assists: 1, matches: 3},
          ptzt: {goals: 0, assists: 0, matches: 0},
          Saul: {goals: 0, assists: 0, matches: 1},
          Ryan: {goals: 0, assists: 0, matches: 0}
        }
      },
      haxball: {
        name: 'HaxBall Sunday L.',
        players: {
          Torrez: {goals: 4, assists: 3, matches: 2},
          MrCRACK: {goals: 3, assists: 1, matches: 2},
          Polos: {goals: 2, assists: 3, matches: 2},
          ptzt: {goals: 0, assists: 0, matches: 1},
          Saul: {goals: 0, assists: 0, matches: 1}
        }
      },
      foxcol: {
        name: 'FoxCol',
        players: {
          Torrez: {goals: 1, assists: 2, matches: 1},
          MrCRACK: {goals: 3, assists: 0, matches: 1},
          Polos: {goals: 3, assists: 2, matches: 1},
          ptzt: {goals: 0, assists: 0, matches: 0},
          Saul: {goals: 0, assists: 0, matches: 0},
          Ryan: {goals: 0, assists: 0, matches: 0}
        }
      },
      premier: {
        name: 'Premier L.',
        players: {
          Torrez: {goals: 3, assists: 4, matches: 1},
          MrCRACK: {goals: 3, assists: 3, matches: 1},
          Polos: {goals: 1, assists: 2, matches: 1},
          ptzt: {goals: 0, assists: 0, matches: 1},
          Saul: {goals: 0, assists: 0, matches: 0},
          Ryan: {goals: 1, assists: 0, matches: 1}
        }
      }
    };

    const playerData = [
      {
        name: 'Torrez',
        avatar: 'https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/483bc012-1349-4be3-7604-f0b042b1e100/4k',
        goals: 80,
        assists: 35,
        matches: 38,
        color: '#00FF00'
      },
      {
        name: 'MrCRACK',
        avatar: 'https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/49d1f03c-b23b-4ade-dbfc-3416c5695000/4k',
        goals: 56,
        assists: 34,
        matches: 38,
        color: '#0000FF'
      },
      {
        name: 'Polos',
        avatar: 'https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/11992e26-13c1-4348-a8b1-43531892ef00/4k',
        goals: 15,
        assists: 30,
        matches: 35,
        color: '#FF0000'
      },
      {
        name: 'ptzt',
        avatar: 'https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/f38f5790-2937-46ab-df5e-e0f9b59f6200/4k',
        goals: 0,
        assists: 5,
        matches: 20,
        color: '#808080'
      },
      {
        name: 'Saul',
        avatar: 'https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b84c9998-9eb6-4852-3e61-cb47ce59e800/4k',
        goals: 1,
        assists: 0,
        matches: 15,
        color: '#FFC0CB'
      },
      {
        name: 'Ryan',
        avatar: 'https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/c2aeb24a-77a3-49af-5268-f874630ec100/4k',
        goals: 1,
        assists: 0,
        matches: 6,
        color: '#000000'
      }
    ];


    // Render player cards
    const statsGrid = document.getElementById('playerStats');
    playerData.forEach(player => {
      const card = document.createElement('div');
      card.className = 'player-card';
      card.innerHTML = `
        <div class="player-header">
          <img src="${player.avatar}" alt="${player.name}" class="player-avatar">
          <h2 class="player-name">${player.name}</h2>
        </div>
        <div class="stat-grid">
          <div class="stat-item">
            <div class="stat-value">${player.goals}</div>
            <div class="stat-label">Goles</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">${player.assists}</div>
            <div class="stat-label">Asistencias</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">${player.matches}</div>
            <div class="stat-label">PJ</div>
          </div>
        </div>
      `;
      statsGrid.appendChild(card);
    });

    // Render league stats
    const leaguesStats = document.getElementById('leaguesStats');
    Object.entries(leagueData).forEach(([key, league]) => {
      const card = document.createElement('div');
      card.className = 'league-card';
      card.innerHTML = `
        <h3 class="league-title">${league.name}</h3>
        <table style="width: 100%">
          <tr>
            <th style="text-align: left">Jugador</th>
            <th style="text-align: center">G</th>
            <th style="text-align: center">A</th>
            <th style="text-align: center">PJ</th>
          </tr>
          ${Object.entries(league.players)
          .map(([name, stats]) => `
              <tr>
                <td style="text-align: left">${name}</td>
                <td style="text-align: center">${stats.goals}</td>
                <td style="text-align: center">${stats.assists}</td>
                <td style="text-align: center">${stats.matches}</td>
              </tr>
            `).join('')}
        </table>
      `;
      leaguesStats.appendChild(card);
    });

    // Populate comparison dropdowns
    const player1Select = document.getElementById('player1');
    const player2Select = document.getElementById('player2');

    playerData.forEach(player => {
      const option1 = new Option(player.name, player.name);
      const option2 = new Option(player.name, player.name);
      player1Select.add(option1);
      player2Select.add(option2);
    });

    // Initialize comparison chart
    const ctx = document.getElementById('comparisonChart').getContext('2d');
    let comparisonChart = new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['Goles', 'Asistencias', 'Partidos Jugados'],
        datasets: []
      },
      options: {
        scales: {
          r: {
            beginAtZero: true,
            grid: {
              color: '#64748b40'
            }
          }
        },
        plugins: {
          legend: {
            labels: {
              color: '#1e293b'
            }
          }
        }
      }
    });

    function getPlayerLeagueStats(playerName, leagueId) {
      if (leagueId === 'overall') {
        return playerData.find(p => p.name === playerName);
      }
      return leagueData[leagueId].players[playerName];
    }

    // Update chart when players are selected
    function updateChart() {
      const player1Name = player1Select.value;
      const player2Name = player2Select.value;
      const selectedLeague = document.getElementById('leagueSelect').value;

      if (!player1Name || !player2Name) return;

      const player1 = getPlayerLeagueStats(player1Name, selectedLeague);
      const player2 = getPlayerLeagueStats(player2Name, selectedLeague);
      const player1Color = playerData.find(p => p.name === player1Name).color;
      const player2Color = playerData.find(p => p.name === player2Name).color;

      comparisonChart.data.datasets = [
        {
          label: `${player1Name} ${selectedLeague !== 'overall' ? `(${leagueData[selectedLeague].name})` : ''}`,
          data: [player1.goals, player1.assists, player1.matches],
          backgroundColor: `${player1Color}33`,
          borderColor: player1Color,
          pointBackgroundColor: player1Color,
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: player1Color
        },
        {
          label: `${player2Name} ${selectedLeague !== 'overall' ? `(${leagueData[selectedLeague].name})` : ''}`,
          data: [player2.goals, player2.assists, player2.matches],
          backgroundColor: `${player2Color}33`,
          borderColor: player2Color,
          pointBackgroundColor: player2Color,
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: player2Color
        }
      ];

      comparisonChart.update();
    }

    function switchView(view) {
      const overallView = document.getElementById('overallView');
      const leaguesView = document.getElementById('leaguesView');
      const tabs = document.querySelectorAll('.tab');

      if (view === 'overall') {
        overallView.style.display = 'block';
        leaguesView.style.display = 'none';
        tabs[0].classList.add('active');
        tabs[1].classList.remove('active');
      } else {
        overallView.style.display = 'none';
        leaguesView.style.display = 'block';
        tabs[0].classList.remove('active');
        tabs[1].classList.add('active');
      }
    }

    player1Select.addEventListener('change', updateChart);
    player2Select.addEventListener('change', updateChart);
    document.getElementById('leagueSelect').addEventListener('change', updateChart);
  </script>
</body>

</html>