<!-- Inline CSS -->
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
    }
    h1 {
        text-align: center;
        color: #333;
    }
    .team {
        background: #fff;
        padding: 20px;
        margin: 10px 0;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    button {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }
    button:hover {
        background-color: #218838;
    }
    #prediction {
        margin-top: 20px;
        font-size: 18px;
        text-align: center;
    }
    .input-group {
        margin: 10px 0;
    }
    .link {
        text-align: center;
        margin-top: 20px;
    }
    .link a {
        color: #007bff;
        text-decoration: none;
    }
    .link a:hover {
        text-decoration: underline;
    }
</style>

<h1>Prédiction de Match FIFA FC 24</h1>

<div class="input-group">
    <label for="teamAInput">Nom de l'Équipe A:</label>
    <input type="text" id="teamAInput" placeholder="Entrez le nom de l'équipe A">
</div>
<div class="input-group">
    <label for="teamBInput">Nom de l'Équipe B:</label>
    <input type="text" id="teamBInput" placeholder="Entrez le nom de l'équipe B">
</div>
<div class="input-group">
    <label for="matchDateInput">Date du Match:</label>
    <input type="date" id="matchDateInput">
</div>
<div class="input-group">
    <label for="matchTimeInput">Heure du Match:</label>
    <input type="time" id="matchTimeInput">
</div>
<div class="input-group">
    <label for="matchLinkInput">Lien du Match:</label>
    <input type="url" id="matchLinkInput" placeholder="Entrez le lien du match">
</div>

<button id="fetchDataButton">Récupérer les Données et Prédire</button>

<div class="team" id="teamA">
    <h2>Équipe A</h2>
    <p>Statistiques: Victoires à domicile: <span id="teamA-homeWins">0</span>, Victoires à l'extérieur: <span id="teamA-awayWins">0</span>, Nuls: <span id="teamA-draws">0</span>, Défaites: <span id="teamA-losses">0</span></p>
    <p>Classement: <span id="teamA-ranking">1er</span></p>
    <p>Buts marqués: <span id="teamA-goalsFor">0</span>, Buts encaissés: <span id="teamA-goalsAgainst">0</span></p>
</div>

<div class="team" id="teamB">
    <h2>Équipe B</h2>
    <p>Statistiques: Victoires à domicile: <span id="teamB-homeWins">0</span>, Victoires à l'extérieur: <span id="teamB-awayWins">0</span>, Nuls: <span id="teamB-draws">0</span>, Défaites: <span id="teamB-losses">0</span></p>
    <p>Classement: <span id="teamB-ranking">2ème</span></p>
    <p>Buts marqués: <span id="teamB-goalsFor">0</span>, Buts encaissés: <span id="teamB-goalsAgainst">0</span></p>
</div>

<div id="prediction"></div>
<div id="detailedPrediction" style="margin-top: 20px; text-align: center;"></div>

<div class="link">
    <p>Voici le lien des matchs à venir pour trouver les matchs virtuels FC 24 du Championnat d'Espagne :</p>
    <a href="https://1xbet.ci/fr/live/fifa/2718711-fc-24-spain-championship" target="_blank">Matchs Virtuels FC 24 - Championnat d'Espagne</a>
</div>

<div class="link">
    <p>Voici le lien vers les statistiques des matchs passés :</p>
    <a href="https://1xbet.ci/fr/statisticpopup/cyber/85/123/36" target="_blank">Statistiques des Matchs Passés</a>
</div>

<!-- Inline JavaScript -->
<script>
    // Fonction pour récupérer les données des équipes à partir des liens
    async function fetchTeamData(matchLink) {
        try {
            const response = await fetch(matchLink);
            if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`);

            const data = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(data, 'text/html');

            // Extraction des statistiques des équipes
            const teamAStats = extractTeamStats(doc, 'teamA');
            const teamBStats = extractTeamStats(doc, 'teamB');

            // Mettre à jour le DOM avec les statistiques récupérées
            updateDOMWithStats('teamA', teamAStats);
            updateDOMWithStats('teamB', teamBStats);

            // Analyser les données pour fournir une prédiction
            analyzeDataAndPredict(teamAStats, teamBStats);

        } catch (error) {
            alert(`Une erreur s'est produite lors de la récupération des données: ${error.message}`);
        }
    }

    function extractTeamStats(doc, teamPrefix) {
        return {
            homeWins: parseInt(doc.querySelector(`.${teamPrefix}-homeWins-class`)?.innerText) || 0,
            awayWins: parseInt(doc.querySelector(`.${teamPrefix}-awayWins-class`)?.innerText) || 0,
            draws: parseInt(doc.querySelector(`.${teamPrefix}-draws-class`)?.innerText) || 0,
            losses: parseInt(doc.querySelector(`.${teamPrefix}-losses-class`)?.innerText) || 0,
            goalsFor: parseInt(doc.querySelector(`.${teamPrefix}-goalsFor-class`)?.innerText) || 0,
            goalsAgainst: parseInt(doc.querySelector(`.${teamPrefix}-goalsAgainst-class`)?.innerText) || 0
        };
    }

    function updateDOMWithStats(teamPrefix, stats) {
        document.getElementById(`${teamPrefix}-homeWins`).innerText = stats.homeWins;
        document.getElementById(`${teamPrefix}-awayWins`).innerText = stats.awayWins;
        document.getElementById(`${teamPrefix}-draws`).innerText = stats.draws;
        document.getElementById(`${teamPrefix}-losses`).innerText = stats.losses;
        document.getElementById(`${teamPrefix}-goalsFor`).innerText = stats.goalsFor;
        document.getElementById(`${teamPrefix}-goalsAgainst`).innerText = stats.goalsAgainst;
    }

    function analyzeDataAndPredict(teamAStats, teamBStats) {
        const averageGoalsA = (teamAStats.goalsFor / (teamAStats.homeWins + teamAStats.draws + teamAStats.losses)) || 0;
        const averageGoalsB = (teamBStats.goalsFor / (teamBStats.homeWins + teamBStats.draws + teamBStats.losses)) || 0;

        const predictedScoreA = Math.round(averageGoalsA);
        const predictedScoreB = Math.round(averageGoalsB);

        document.getElementById('prediction').innerText = `Prédiction du Match: ${predictedScoreA} - ${predictedScoreB}`;
        document.getElementById('detailedPrediction').innerHTML = `
            <strong>Analyse des Données:</strong> <br>
            Équipe A - Moyenne de Buts: ${averageGoalsA.toFixed(2)} <br>
            Équipe B - Moyenne de Buts: ${averageGoalsB.toFixed(2)} <br>
            <strong>Score Prédit:</strong> ${predictedScoreA} - ${predictedScoreB}
        `;
    }

    document.getElementById('fetchDataButton').addEventListener('click', function() {
        const matchLink = document.getElementById('matchLinkInput').value;

        if (matchLink) {
            fetchTeamData(matchLink);
        } else {
            alert("Veuillez entrer le lien du match.");
        }
    });
</script>