<!DOCTYPE html>
<html lang="de">
<head>
  <script type="module">
      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js';
      import { getFirestore, collection, getDocs, doc, setDoc, getDoc } from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js';

      const firebaseConfig = {
          apiKey: "AIzaSyDvJJPeMkPn4Z2WTyfwPdANQgc3DUuwFY0",
          authDomain: "ncw-datenbank.firebaseapp.com",
          projectId: "ncw-datenbank",
          storageBucket: "ncw-datenbank.firebasestorage.app",
          messagingSenderId: "829800612125",
          appId: "1:829800612125:web:739c16ae0ec70ba6fee1f4"
      };

      const app = initializeApp(firebaseConfig);
      const db = getFirestore(app);

      const correctPassword = "chido";

      // Überprüfen, ob ein Gutschein für dieselbe Person mit demselben Rabatt existiert
      async function checkExistingCoupon(firstName, lastName, birthDate, discount) {
          const querySnapshot = await getDocs(collection(db, "coupons"));
          let couponExists = false;

          querySnapshot.forEach((doc) => {
              const coupon = doc.data();
              if (
                  coupon.firstName === firstName &&
                  coupon.lastName === lastName &&
                  coupon.birthDate === birthDate &&
                  coupon.discount === discount
              ) {
                  couponExists = true;
              }
          });

          return couponExists;
      }

      // Gutscheine aus Firestore lesen
      async function getAllCoupons() {
          const querySnapshot = await getDocs(collection(db, "coupons"));
          const coupons = [];
          querySnapshot.forEach((doc) => {
              coupons.push(doc.data());
          });
          return coupons;
      }

      // Gutschein erstellen
      async function createCoupon(firstName, lastName, birthDate, discount, password) {
          if (password !== correctPassword) {
              return { success: false, message: "Falsches Passwort. Gutschein konnte nicht erstellt werden." };
          }

          const couponExists = await checkExistingCoupon(firstName, lastName, birthDate, discount);
          if (couponExists) {
              return {
                  success: false,
                  message: `Ein Gutschein für ${firstName} ${lastName} mit dem Geburtsdatum ${birthDate} und einem Rabatt von ${discount}% existiert bereits.`
              };
          }

          const couponCode = `G${Math.random().toString(36).substring(2, 8).toUpperCase()}`;
          const couponId = `${firstName}_${lastName}_${birthDate}_${discount}`; // Eindeutige ID mit Rabatt
          const docRef = doc(db, "coupons", couponId);

          await setDoc(docRef, {
              firstName: firstName,
              lastName: lastName,
              birthDate: birthDate,
              code: couponCode,
              discount: discount
          });

          return { success: true, message: `Gutschein erstellt: für ${firstName} ${lastName}, ${birthDate}, ${couponCode} und Rabatt: ${discount}%` };
      }

      // Gutschein erstellen
      document.getElementById("create-coupon-form").addEventListener("submit", async (e) => {
          e.preventDefault();
          const firstName = document.getElementById("create-first-name").value;
          const lastName = document.getElementById("create-last-name").value;
          const birthDate = document.getElementById("create-birth-date").value;
          const discount = parseInt(document.getElementById("create-discount").value, 10);
          const password = document.getElementById("create-password").value;

          const result = await createCoupon(firstName, lastName, birthDate, discount, password);
          document.getElementById("create-output").textContent = result.message;

          // Nachricht nach 15 Sekunden entfernen
          setTimeout(() => {
              document.getElementById("create-output").textContent = '';
          }, 15000);
      });

      // Gutscheine anzeigen
      document.getElementById("load-coupons").addEventListener("click", async () => {
          const couponListElement = document.getElementById("coupon-list");
          couponListElement.innerHTML = '';

          const coupons = await getAllCoupons();
          coupons.forEach((coupon) => {
              const listItem = document.createElement("li");
              const formattedDate = new Date(coupon.birthDate).toLocaleDateString("de-DE");
              listItem.textContent = `Name: ${coupon.firstName} ${coupon.lastName}, Geburtsdatum: ${formattedDate}, Code: ${coupon.code}, Rabatt: ${coupon.discount}%`;
              couponListElement.appendChild(listItem);
          });
      });

      // Eingabefelder leeren
      document.getElementById("clear-form").addEventListener("click", () => {
          document.getElementById("create-first-name").value = '';
          document.getElementById("create-last-name").value = '';
          document.getElementById("create-birth-date").value = '';
          document.getElementById("create-discount").value = '';
      });
  </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gutscheinsystem Chef</title>
    <style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #b3d9ff;
        background-image: url('Bilder/NC_Bild2.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: top;
        padding-top: 100px;
    }
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    .navbar img {
        height: 80px;
        margin-right: 40px;
    }
    .menu {
        display: flex;
        padding: 10px;
    }
    .menu > a, .dropdown > a {
        display: inline-block;
        padding: 0px 15px;
        text-decoration: none;
        color: #fff;
        background-color: #000;
        height: 40px;
        line-height: 40px;
        border: 2px solid #89CFF0;
        border-radius: 5px;
        margin: 0 5px;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0;
    }
    .menu > a:hover {
        background-color: #89CFF0;
        color: #000;
        box-shadow: 0 0 20px #89CFF0, 0 0 30px #89CFF0, 0 0 40px #89CFF0;
    }
    .dropdown {
        position: relative;
    }
    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        list-style-type: none;
        padding: 10px;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        z-index: 1000;
        min-width: 150px;
    }
    .submenu > li {
        padding: 5px 0;
    }
    .submenu > li > a {
        text-decoration: none;
        color: #fff;
        padding: 10px;
        background-color: #000;
        border: 2px solid #89CFF0;
        border-radius: 5px;
        box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0;
        transition: all 0.3s ease-in-out;
        display: block;
    }
    .submenu > li > a:hover {
        background-color: #89CFF0;
        color: #000;
        box-shadow: 0 0 20px #89CFF0, 0 0 30px #89CFF0, 0 0 40px #89CFF0;
    }
    .dropdown:hover .submenu {
        display: block;
    }
    h6 {
        margin: 0px 5px 0px 0px;
        font-size: 15px;
        text-align: right;
    }
    .Gutscheine {
        background-color: rgba(0, 0, 0, 0.8);
        transition: all 0.3s ease-in-out;
        box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0;
        margin: 15px auto;
        border-radius: 15px;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        display: table;
        color: White;
    }
    button {
          color: rgb(0, 0, 0);
          background-color: #b3d9ff; Optional: dunklerer Button-Hintergrund */
          border: 1px dotted;
          padding: 5px;
          cursor: pointer;
          border-radius: 5px;
      }
</style>
</head>
<!-- *************************Navigationssystem*********************************************** -->
<body>
    <div class="navbar">
        <img src="Bilder/Narco_Customs_Logo.webp" style="border-radius: 5px;" alt="Bild kann nicht geladen werden">
    </div>
    <h6>© 2025 | Alfred Lange</h6>
<!-- *************************Ende Navigationssystem*********************************************** -->

    <div class="Gutscheine">
        <h1>Gutscheinsystem Chef</h1>

        <!-- Gutschein erstellen -->
        <div>
            <h2>Gutschein erstellen</h2>
            <form id="create-coupon-form">
                <input type="text" id="create-first-name" placeholder="Vorname" required>
                <input type="text" id="create-last-name" placeholder="Nachname" required>
                <input type="date" id="create-birth-date" placeholder="Geburtsdatum" required>
                <input type="number" id="create-discount" placeholder="Rabatt (%)" required>
                <input type="password" id="create-password" placeholder="Passwort" required>
                <button type="submit">Gutschein erstellen</button>
            </form>
            <button id="clear-form">Eingabefelder zurücksetzen</button>
            <p id="create-output"></p>
        </div>

        <!-- Gutscheine anzeigen -->
        <div>
            <h2>Gutscheincodes anzeigen</h2>
            <button id="load-coupons">Alle Gutscheine anzeigen</button>
            <ul id="coupon-list"></ul>
        </div>

    </div>

</body>
</html>
