<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Tisch 1</title> <!-- Tisch hier ändern -->
</head>
<body>
    <div class="admin-panel">
        <div class="score-display">
            <div class="player">
                <span id="tisch1_spieler1_name_label" class="player-name-label">Spieler 1</span> <!-- Tisch hier ändern -->
                <span id="tisch1_spieler1_score" class="player-score">0</span> <!-- Tisch hier ändern -->
                <div class="score-buttons">
                    <button onclick="adjustScore('tisch1_spieler1', 1)" class="score-button">+1</button> <!-- Tisch hier ändern -->
                    <button onclick="adjustScore('tisch1_spieler1', -1)" class="score-button">-1</button> <!-- Tisch hier ändern -->
                </div>
            </div>
            <div class="player">
                <span id="tisch1_spieler2_name_label" class="player-name-label">Spieler 2</span> <!-- Tisch hier ändern -->
                <span id="tisch1_spieler2_score" class="player-score">0</span> <!-- Tisch hier ändern -->
                <div class="score-buttons">
                    <button onclick="adjustScore('tisch1_spieler2', 1)" class="score-button">+1</button> <!-- Tisch hier ändern -->
                    <button onclick="adjustScore('tisch1_spieler2', -1)" class="score-button">-1</button> <!-- Tisch hier ändern -->
                </div>
            </div>
        </div>
        <div class="input-container">
            <button id="toggleInputs" class="toggle-button">Eingabefelder ein/ausklappen</button>
            <div id="inputFields" class="input-fields">
                <label for="tisch1_spieler1_name_input">Spieler 1:</label> <!-- Tisch hier ändern -->
                <input type="text" id="tisch1_spieler1_name_input" name="spieler1_name" onchange="updateField('tisch1_spieler1_name', this.value)"> <!-- Tisch hier ändern -->
                
                <label for="tisch1_spieler2_name_input">Spieler 2:</label> <!-- Tisch hier ändern -->
                <input type="text" id="tisch1_spieler2_name_input" name="spieler2_name" onchange="updateField('tisch1_spieler2_name', this.value)"> <!-- Tisch hier ändern -->
                
                <label for="tisch1_liga">Liga:</label> <!-- Tisch hier ändern -->
                <select id="tisch1_liga" name="liga" onchange="updateField('tisch1_liga', this.value)"> <!-- Tisch hier ändern -->
                    <option value="Kreisliga">Kreisliga</option>
                    <option value="Bezirksliga">Bezirksliga</option>
                    <option value="Landesliga">Landesliga</option>
                    <option value="Verbandsliga">Verbandsliga</option>
                    <option value="Oberliga">Oberliga</option>
                    <option value="Turnier">Turnier</option>
                    <option value="Training">Training</option>
                </select>
                
                <label for="tisch1_disziplin">Disziplin:</label> <!-- Tisch hier ändern -->
                <select id="tisch1_disziplin" name="disziplin" onchange="updateField('tisch1_disziplin', this.value)"> <!-- Tisch hier ändern -->
                    <option value="8-Ball">8-Ball</option>
                    <option value="9-Ball">9-Ball</option>
                    <option value="10-Ball">10-Ball</option>
                    <option value="14/1 endlos">14/1 endlos</option>
                </select>
                
                <label for="tisch1_raceto">Race To:</label> <!-- Tisch hier ändern -->
                <input type="number" id="tisch1_raceto" name="raceto" onchange="updateField('tisch1_race_to', this.value)"> <!-- Tisch hier ändern -->
                
                <button onclick="resetScores()" class="reset-button">Reset</button>
            </div>
        </div>
    </div>

  
<script>
    function updateField(field, value) {
        if (field === 'tisch1_spieler1_name') { // Tisch hier ändern
            document.getElementById('tisch1_spieler1_name_label').innerText = value; // Tisch hier ändern
        } else if (field === 'tisch1_spieler2_name') { // Tisch hier ändern
            document.getElementById('tisch1_spieler2_name_label').innerText = value; // Tisch hier ändern
        }

        let xhr = new XMLHttpRequest();
        xhr.open('POST', ajaxurl, true); // ajaxurl ist die WordPress AJAX-URL
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('Feld aktualisiert: ' + field);
            } else {
                console.log('Fehler bei der Aktualisierung des Feldes: ' + field);
            }
        };
        xhr.send(`action=update_field&field=${field}&value=${value}`);
    }

    function adjustScore(player, amount) {
        let scoreElement = document.getElementById(player + '_score');
        if (scoreElement === null) {
            console.log('Fehler: Element mit ID ' + player + '_score nicht gefunden.');
            return;
        }
        console.log('Aktueller innerText:', scoreElement.innerText);
        let currentScore = parseInt(scoreElement.innerText);

        if (isNaN(currentScore)) {
            console.log('Fehler: Die aktuelle Punktzahl ist keine Zahl.');
            return;
        }

        let newScore = currentScore + amount;

        if (newScore < 0) newScore = 0; // Verhindere negative Punktzahlen

        scoreElement.innerText = newScore;

        let player_name = document.getElementById(player + '_name_input').value;
        let disziplin = document.getElementById('tisch1_disziplin').value; // Tisch hier ändern
        let race_to = document.getElementById('tisch1_raceto').value; // Tisch hier ändern
        let liga = document.getElementById('tisch1_liga').value; // Tisch hier ändern

        let xhr = new XMLHttpRequest();
        xhr.open('POST', ajaxurl, true); // ajaxurl ist die WordPress AJAX-URL
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('Daten aktualisiert');
            } else {
                console.log('Fehler bei der Aktualisierung der Daten');
            }
        };
        console.log(`action=update_score_tisch1&player=${player}&score=${newScore}&player_name=${player_name}&disziplin=${disziplin}&race_to=${race_to}&liga=${liga}`); // Tisch hier ändern
        xhr.send(`action=update_score_tisch1&player=${player}&score=${newScore}&player_name=${player_name}&disziplin=${disziplin}&race_to=${race_to}&liga=${liga}`); // Tisch hier ändern
    }

    function resetScores() {
        let xhr = new XMLHttpRequest();
        xhr.open('POST', ajaxurl, true); // ajaxurl ist die WordPress AJAX-URL
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('Scores zurückgesetzt');
                location.reload(); // Seite aktualisieren, um die zurückgesetzten Werte anzuzeigen
            } else {
                console.log('Fehler beim Zurücksetzen der Scores');
            }
        };
        xhr.send('action=reset_scores_tisch1'); // Tisch hier ändern
    }

    document.addEventListener("DOMContentLoaded", function() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', ajaxurl + '?action=get_admin_data_tisch1', true); // Tisch hier ändern
        xhr.onload = function() {
            if (this.status == 200) {
                let data = JSON.parse(this.responseText);
                if (data.success) {
                    console.log('Admin-Daten abgerufen:', data.data);
                    document.getElementById('tisch1_spieler1_name_input').value = data.data.spieler1_name; // Tisch hier ändern
                    document.getElementById('tisch1_spieler2_name_input').value = data.data.spieler2_name; // Tisch hier ändern
                    document.getElementById('tisch1_spieler1_score').innerText = data.data.spieler1_score; // Tisch hier ändern
                    document.getElementById('tisch1_spieler2_score').innerText = data.data.spieler2_score; // Tisch hier ändern
                    document.getElementById('tisch1_disziplin').value = data.data.disziplin; // Tisch hier ändern
                    document.getElementById('tisch1_raceto').value = data.data.race_to; // Tisch hier ändern
                    document.getElementById('tisch1_liga').value = data.data.liga; // Tisch hier ändern

                    document.getElementById('tisch1_spieler1_name_label').innerText = data.data.spieler1_name; // Tisch hier ändern
                    document.getElementById('tisch1_spieler2_name_label').innerText = data.data.spieler2_name; // Tisch hier ändern
                } else {
                    console.log('Fehler beim Abrufen der Admin-Daten');
                }
            } else {
                console.log('Fehler beim HTTP-Request:', this.status);
            }
        };
        xhr.send();
    });

    // JavaScript für das Ein- und Ausklappen der Eingabefelder
    document.getElementById('toggleInputs').addEventListener('click', function() {
        var inputFields = document.getElementById('inputFields');
        if (inputFields.style.display === 'none' || inputFields.style.display === '') {
            inputFields.style.display = 'block';
        } else {
            inputFields.style.display = 'none';
        }
    });
</script>
</body>
</html>
  