<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lohn- und Gehaltsabrechnung</title>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="tableScript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
    <nav>
        <h1>Lohn- und Gehaltsabrechnung</h1>
        <button onclick="window.location.href='shops.html'">Shop wechseln</button>
    </nav>
    
    <h1>Mitarbeiterübersicht</h1>
    
        <div id="employee-list" style="margin: 50px;">
            <!-- Mitarbeiter werden hier dynamisch geladen -->
        </div>
    <!-- Formular für das Hinzufügen eines Mitarbeiters -->
    <div id="add-employee-form" style="display:none;">
        <h2>Neuen Mitarbeiter hinzufügen</h2>
        <form id="employeeForm">
            <label for="name">Name:</label>
            <input type="text" id="name" required><br>

            <label for="abteilung">Position</label>
            <input type="text" id="abteilung" required><br>

            <p style="display:none;">Tageslohn: <span id="calculatedTageslohn">0.00 €</span></p>

            <button type="submit">Hinzufügen</button>
            <button type="button" onclick="closeAddEmployeeForm()">Abbrechen</button>
        </form>
    </div>

    <!-- Formular für das Bearbeiten eines Mitarbeiters -->
    <!-- Formular für das Bearbeiten eines Mitarbeiters -->
<div id="edit-employee-form" style="display:none;">
    <h2>Mitarbeiter bearbeiten</h2>
    <form id="editEmployeeForm">
        <label for="editName">Name:</label>
        <input type="text" id="editName" placeholder="Name" required><br>

        <label for="editAbteilung">Position:</label>
        <input type="text" id="editAbteilung" placeholder="Position" required><br>

        <label for="editVon">Von:</label>
        <input type="time" id="editVon" placeholder="Von" required><br>

        <label for="editBis">Bis:</label>
        <input type="time" id="editBis" placeholder="Bis" required><br>

        <label for="editLohn">Lohn pro Stunde (€):</label>
        <input type="number" id="editLohn" placeholder="Lohn pro Stunde" step="0.01" required><br>

        <input type="hidden" id="employeeId">
        <button type="submit">Speichern</button>
    </form>
</div>

<div id="workScheduleTemplateForm" style="display: none;">
    <h3>Arbeitszeiten bearbeiten</h3>
    <form id="templateForm">
        <!-- Montag -->
        <div>
            <label>Montag:</label>
            <input type="time" id="montagVon">
            <input type="time" id="montagBis">
            <input type="number" id="montagLohn" placeholder="Lohn/Std (€)" step="0.01">
        </div>
        <!-- Dienstag -->
        <div>
            <label>Dienstag:</label>
            <input type="time" id="dienstagVon">
            <input type="time" id="dienstagBis">
        </div>
        <!-- Mittwoch -->
        <div>
            <label>Mittwoch:</label>
            <input type="time" id="mittwochVon">
            <input type="time" id="mittwochBis">
        </div>
        <!-- Donnerstag -->
        <div>
            <label>Donnerstag:</label>
            <input type="time" id="donnerstagVon">
            <input type="time" id="donnerstagBis">
        </div>
        <!-- Freitag -->
        <div>
            <label>Freitag:</label>
            <input type="time" id="freitagVon">
            <input type="time" id="freitagBis">
        </div>
        <!-- Samstag -->
        <div>
            <label>Samstag:</label>
            <input type="time" id="samstagVon">
            <input type="time" id="samstagBis">
        </div>
        <!-- Sonntag -->
        <div>
            <label>Sonntag:</label>
            <input type="time" id="sonntagVon">
            <input type="time" id="sonntagBis">
        </div>

        <div>
            <button id="edit-monthly-button" onclick="showOwnMonthlyPlan()">Monatlich bearbeiten</button>
        </div>
        <!-- Erweiterte Felder für die monatliche Bearbeitung -->
        <div id="monthly-fields" style="display: none;">
            <h4>Monatlicher Plan</h4>
            <div id="monthly-container">
                <!-- Dynamisch generierte Tage -->
            </div>
        </div>
    
        <button type="submit">Speichern</button>
        <!-- Button für monatliche Bearbeitung -->
        <button type="button" onclick="closeWorkScheduleTemplate()">Abbrechen</button>
    </form>
</div>

<div id="ownMonthlyPlanForm" style="display: none;">
    <h3>Eigener Monatsplan</h3>
    <div id="ownMonthlyContainer"></div>
    <button id="save-own-monthly-plan">Speichern</button>
    <button onclick="closeOwnMonthlyPlan()">Abbrechen</button>
</div>

<button onclick="toggleAddEmployeeForm()" style="margin-top: 40px; padding: 20px; margin-bottom: 40px;">Mitarbeiter hinzufügen</button>

</div>
</body>
</html>
