<!DOCTYPE html>
<html lang="pl">
<head>
  <script src="https://cdn.jsdelivr.net/npm/tsparticles"></script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Panel</title>
  <link rel="stylesheet" href="css/styles.css">
  <style>
    #particles-js {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important; /* Tło za wszystkimi elementami */
  pointer-events: none !important; /* Ignoruj interakcje użytkownika */
  background: transparent !important; /* Upewnij się, że nie ma tła */
}
  </style>
</head>
<body>
  <div id="particles-js"></div>
  <div id="notifications" class="notifications-container"></div>
  <!-- Nagłówek (header) z przyciskiem trybu ciemnego -->
  <header>
    <button id="toggleDarkMode">Tryb ciemny</button>
  </header>

  <!-- Sekcja logowania -->
  <div id="loginSection" class="section">
    <h1>Zaloguj Się</h1>
    <form id="loginForm">
      <label for="username">Nazwa użytkownika:</label>
      <input type="text" id="username" name="username" placeholder="Wprowadź nazwę użytkownika" required />

      <label for="adminPassword">Hasło:</label>
      <input type="password" id="adminPassword" name="password" placeholder="Wprowadź hasło" required />

      <button type="submit">Login</button>
    </form>
    <button id="showRegisterFormBtn" class="btn secondary-btn">Rejestracja</button>
    <div id="loginError" class="notification error"></div>
  </div>

  <!-- Formularz rejestracji (ukryty do czasu wyświetlenia) -->
  <div id="registerSection" class="section" style="display: none;">
    <h1>Rejestracja Użytkownika</h1>
    <form id="registerForm">
      <label for="registerUsername">Nazwa użytkownika:</label>
      <input type="text" id="registerUsername" name="username" placeholder="Wprowadź nazwę użytkownika" required />

      <label for="registerPassword">Hasło:</label>
      <input type="password" id="registerPassword" name="password" placeholder="Wprowadź hasło" required />

      <button type="submit">Zarejestruj</button>
      <button type="button" class="btn close-form-btn" onclick="hideRegisterForm()">Anuluj</button>
    </form>
    <div id="registerError" class="notification error"></div>
    <div id="registerSuccess" class="notification success"></div>
  </div>


  <div id="userPanel" class="user-panel" style="display: none;">
    <h2>Twoje Rezerwacje</h2>
    <div class="buttons-container">
        <button class="btn" onclick="logout()">Wyloguj</button>
      </div>
    <table>
      <thead>
        <tr>
          <th>Imię</th>
          <th>Data</th>
          <th>Godzina</th>
        </tr>
      </thead>
      <tbody id="userAppointmentsTable"></tbody>
    </table>
    <div id="userError" class="error-message"></div>
  </div>
  

  <!-- Panel administracyjny (ukryty do czasu zalogowania) -->
  <div id="adminPanel" class="section" style="display: none;">
    <h1>Admin Panel</h1>

    <div class="buttons-container">
      <button class="btn" onclick="showActive()">Pokaż aktywne</button>
      <button class="btn" onclick="showAddAppointmentForm()">Dodaj Rezerwację</button>
      <button class="btn" onclick="showArchived()">Pokaż archiwalne</button>
      <button class="btn" onclick="clearAllTables()">Wyczyść Wszystkie Tabele</button>
      <button class="btn" onclick="logout()">Wyloguj</button>
    </div>

    <!-- Formularz dodawania rezerwacji (ukryty do czasu wyświetlenia) -->
    <div id="addAppointmentFormBox" class="form-box" style="display: none;">
      <h2>Dodaj Rezerwację</h2>
      <form id="addAppointmentForm">
        <label for="userSelect">Wybierz użytkownika:</label>
        <select id="userSelect" name="userId" required>
          <option value="">--Wybierz użytkownika--</option>
          <!-- Opcje zostaną załadowane dynamicznie -->
        </select>

        <label for="name">Imię i nazwisko:</label>
        <input type="text" id="name" name="name" placeholder="Imię i nazwisko" required />

        <label for="email">Adres email:</label>
        <input type="email" id="email" name="email" placeholder="Email" required />

        <label for="phone">Telefon:</label>
        <input type="tel" id="phone" name="phone" placeholder="Telefon" required />

        <label for="date">Data:</label>
        <input type="date" id="date" name="date" required min="2025-01-10" />

        <label for="time">Godzina:</label>
        <select id="time" name="time" required>
          <option value="">--Wybierz godzinę--</option>
          <option value="09:00">09:00</option>
          <option value="09:30">09:30</option>
          <option value="10:00">10:00</option>
          <option value="10:30">10:30</option>
          <option value="11:00">11:00</option>
          <option value="11:30">11:30</option>
          <option value="12:00">12:00</option>
          <option value="12:30">12:30</option>
          <option value="13:00">13:00</option>
          <option value="13:30">13:30</option>
          <option value="14:00">14:00</option>
          <option value="14:30">14:30</option>
          <option value="15:00">15:00</option>
          <option value="15:30">15:30</option>
          <option value="16:00">16:00</option>
          <option value="16:30">16:30</option>
          <option value="17:00">17:00</option>
          <option value="17:30">17:30</option>
          <option value="18:00">18:00</option>
          <option value="18:30">18:30</option>
        </select>

        <button type="submit">Dodaj Rezerwację</button>
        <button type="button" class="btn close-form-btn" onclick="hideAddAppointmentForm()">Zamknij</button>
      </form>
      <div id="addAppointmentNotification" class="notification"></div>
    </div>

    <!-- Tabela z rezerwacjami -->
    <div id="activePanel">
      <h2>Aktywne Rezerwacje</h2>
      <table>
        <thead>
          <tr>
            <th>Imię</th>
            <th>Email</th>
            <th>Telefon</th>
            <th>Data</th>
            <th>Godzina</th>
            <th>Akcje</th>
          </tr>
        </thead>
        <tbody id="activeAppointmentsTable"></tbody>
      </table>
      <div id="activeErrorMessage" class="notification error"></div>
    </div>
  
    <!-- Tabela zarchiwizowanych rezerwacji (ukryta domyślnie) -->
    <div id="archivedPanel" style="display: none;">
      <h2>Zarchiwizowane Rezerwacje</h2>
      <table>
        <thead>
          <tr>
            <th>Imię</th>
            <th>Email</th>
            <th>Telefon</th>
            <th>Data</th>
            <th>Godzina</th>
            <th>Czas archiwizacji</th>
            <th>Powód archiwizacji</th>
          </tr>
        </thead>
        <tbody id="archivedAppointmentsTable"></tbody>
      </table>
    <div id="errorMessage" class="notification error"></div>
  </div>
  

  <footer>Developed by Xarond</footer>
  
  <script src="js/script.js?v=1.0.0"></script>
  <script src="css/styles.js?v=1.0.0"></script>

  
</body>
</html>
