<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Wash</title>
    <link rel="stylesheet" href="style/main.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div id="overlay" class="hidden">
        <div id="carwash-menu" class="menu">
            <div class="header">
                <span class="close-btn" onclick="closeMenu()">X</span>
            </div>
            <h1>Waschanlage Kaufen</h1>
            <h2>Informationen</h2>
            <p>Auf diese Waschanlage fallen Betriebskosten in Höhe von $568 an. Außerdem muss
            dafür gesorgt werden, dass die Tankstelle regelmäßig mit Treibstoff befüllt wird.</p>
            <div id="buy-price" class="price"></div> <!-- Neuer Absatz für den Preis -->
            <button class="buy-btn" onclick="openConfirmationMenu()">Kaufen</button>
        </div>
        <div id="confirmation-menu" class="hidden">
            <div class="header">
                <span class="close-btn" onclick="closeMenu()">X</span>
            </div>
            <h1>Willst du die Waschanlage wirklich kaufen?</h1>
            <p>Wie willst du bezahlen?</p>
            <select id="payment-method">
                <option value="cash">Bargeld</option>
                <option value="bank">Bank</option>
            </select>
            <div class="buttons">
                <button class="confirm-btn" onclick="confirmPurchase()">Bestätigen</button>
                <button class="cancel-btn" onclick="closeConfirmationMenu()">Abbrechen</button>
            </div>
        </div>
    </div>
    <div id="management-menu" class="hidden">
        <div class="header">
            <button class="close-btn" onclick="closeManagementMenu()">X</button>
        </div>
        <div class="category-bar">
            <button class="category-btn" onclick="showCategory('information')">Informationen</button>
            <button class="category-btn" onclick="showCategory('employees')">Angestellte</button>
            <button class="category-btn" onclick="showCategory('management')">Management</button>
        </div>
        <div class="content">
            <div id="information" class="category-content active">
                <div class="chart-container left">
                    <canvas id="managementChart"></canvas>
                </div>
                <div class="chart-container right">
                    <canvas id="managementChart2"></canvas>
                </div>
                <div class="management-box">
                    <div class="transaction-history-box">
                        <div class="transaction-header">
                            <span>Name</span>
                            <span>Art</span>
                            <span>Betrag</span>
                            <span>Grund</span>
                            <span>Datum/Uhrzeit</span>
                        </div>
                        <div id="transaction-history" class="transaction-history">
                            <!-- Transaktionen werden hier dynamisch eingefügt -->
                        </div>
                    </div>
                </div>
                <div class="sale-info">
                    <p id="sale-status">Steht nicht zum Verkauf</p>
                    <p id="sale-price"></p>
                </div>
            </div>
            <div id="employees" class="category-content">
                <div class="employees-box">
                    <div class="header-bar">
                        <span class="name">Name</span>
                        <span class="phone">Telefonnummer</span>
                        <span class="hire-date">Einstellungsdatum</span>
                        <button class="add-employee-btn" onclick="openAddEmployeeMenu()">Einstellen</button>
                    </div>
                    <div id="employee-list" class="employee-list">
                        <!-- Angestelltenliste wird hier dynamisch eingefügt -->
                    </div>
                </div>
            </div>
            <div id="management" class="category-content">
                <div class="info-box">
                    <p>Firmen Kasse</p>
                    <h2 id="general-money">Allgemeines Geld: $0</h2>
                    <div class="info-buttons">
                        <button class="deposit-btn" onclick="openDepositMenu()">Einzahlen</button>
                        <button class="withdraw-btn" onclick="openWithdrawMenu()">Abheben</button>
                    </div>
                </div>
                <div class="rename-box">
                    <p>Waschanlage Umbennen</p>
                    <input type="text" id="blipname-input" placeholder="Neuer Name">
                    <button class="rename-btn" onclick="renameBlip()">Bestätigen</button>
                </div>
                <div class="sell-box">
                    <p>Waschanlage Verkaufen</p>
                    <input type="text" id="sellprice-input" placeholder="Verkaufspreis eingeben">
                    <div class="button-container">
                        <button class="sell-btn" onclick="sellCarWash()">Bestätigen</button>
                        <button class="cancel-sell-btn" onclick="cancelSell()">Abbrechen</button>
                    </div>
                </div>
                <div id="new-box" class="new-box">
                    <div class="top-bar">
                        <span>Name</span>
                        <span>Informationen</span>
                        <span>Angestellte</span>
                        <span>Management</span>
                    </div>
                    <div id="member-list" class="member-list">
                        <!-- Mitglieder werden hier dynamisch eingefügt -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="deposit-menu" class="hidden">
        <div class="header">
            <span class="close-btn" onclick="closeDepositMenu()">X</span>
        </div>
        <h1>Einzahlen</h1>
        <form id="deposit-form" onsubmit="confirmDeposit(); return false;">
            <input type="text" id="deposit-reason" placeholder="Grund für das Einzahlen">
            <input type="number" id="deposit-amount" placeholder="Betrag">
            <div class="buttons">
                <button type="submit" id="confirm-deposit-btn" class="confirm-btn">Bestätigen</button>
                <button type="button" class="cancel-btn" onclick="closeDepositMenu()">Abbrechen</button>
            </div>
        </form>
    </div>
    <div id="withdraw-menu" class="hidden">
        <div class="header">
            <span class="close-btn" onclick="closeWithdrawMenu()">X</span>
        </div>
        <h1>Abheben</h1>
        <form id="withdraw-form" onsubmit="confirmWithdraw(); return false;">
            <input type="text" id="withdraw-reason" placeholder="Grund für das Abheben">
            <input type="number" id="withdraw-amount" placeholder="Betrag">
            <div class="buttons">
                <button type="submit" id="confirm-withdraw-btn" class="confirm-btn">Bestätigen</button>
                <button type="button" class="cancel-btn" onclick="closeWithdrawMenu()">Abbrechen</button>
            </div>
        </form>
    </div>
    <div id="add-employee-menu" class="hidden">
        <div class="header">
            <span class="close-btn" onclick="closeAddEmployeeMenu()">X</span>
        </div>
        <h1>Angestellte hinzufügen</h1>
        <select id="employee-select">
            <!-- Liste der Spieler wird hier dynamisch eingefügt -->
        </select>
        <div class="buttons">
            <button class="confirm-btn" onclick="addEmployee()">Hinzufügen</button>
            <button class="cancel-btn" onclick="closeAddEmployeeMenu()">Abbrechen</button>
        </div>
    </div>
    <script src="script/main.js"></script>
</body>
</html>