<!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, deleteDoc, 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);

      // Überprüfen, ob ein Gutschein mit dem gleichen Rabatt existiert
      async function checkExistingCoupon(firstName, lastName, birthDate, discount) {
          const couponId = `${firstName}_${lastName}_${birthDate}`;
          const docRef = doc(db, "coupons", couponId);
          const docSnap = await getDoc(docRef);

          if (docSnap.exists()) {
              const existingCoupon = docSnap.data();
              return existingCoupon.discount === discount; // Überprüft, ob Rabatt übereinstimmt
          }

          return false;
      }

      // Gutschein löschen
      async function deleteCoupon(firstName, lastName, birthDate, discount) {
          const couponExists = await checkExistingCoupon(firstName, lastName, birthDate, discount);
          if (!couponExists) {
              return { success: false, message: `Kein Gutschein für ${firstName} ${lastName} mit dem Geburtsdatum ${birthDate} und Rabatt ${discount}% gefunden.` };
          }

          const couponId = `${firstName}_${lastName}_${birthDate}`;
          const docRef = doc(db, "coupons", couponId);
          await deleteDoc(docRef);

          return { success: true, message: `Gutschein für ${firstName} ${lastName} (Geburtsdatum: ${birthDate}, Rabatt: ${discount}%) wurde gelöscht.` };
      }

      // 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);
          });
      });

      // 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 löschen
      document.getElementById("delete-coupon-form").addEventListener("submit", async (e) => {
          e.preventDefault();
          const firstName = document.getElementById("delete-first-name").value;
          const lastName = document.getElementById("delete-last-name").value;
          const birthDate = document.getElementById("delete-birth-date").value;
          const discount = parseInt(document.getElementById("delete-discount").value); // Rabatt eingeben

          const result = await deleteCoupon(firstName, lastName, birthDate, discount);
          document.getElementById("delete-output").textContent = result.message;
      });

      // Eingabefelder leeren
      document.getElementById("clear-form").addEventListener("click", () => {
          document.getElementById("delete-first-name").value = '';
          document.getElementById("delete-last-name").value = '';
          document.getElementById("delete-birth-date").value = '';
          document.getElementById("delete-discount").value = '';
      });
  </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gutscheinsystem Mitarbeiter</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 class="menu">
            <a href="Startseite.html">Startseite</a>
            <div class="dropdown">
              <a href="">Tools</a>
              <ul class="submenu">
                  <li><a href="Tuningrechner.html">Tuningrechner</a></li>
                  <li><a href="">Gutscheinsystem</a></li>
                  <li><a href="Abschlepprechner.html">Abschlepprechner</a></li>
              </ul>
              </div>
            <div class="dropdown">
                <a href="">Werkstattordnung</a>
                <ul class="submenu">
                    <li><a href="Organigramm.html">Organigramm</a></li>
                    <li><a href="Regeln.html">Regeln</a></li>
                    <li><a href="Sanktionen.html">Sanktionen</a></li>
                    <li><a href="">TBC</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <a href="">Ausbildung</a>
                <ul class="submenu">
                    <li><a href="Arbeitskleidung.html">Arbeitskleidung</a></li>
                    <li><a href="Emotes.html">Emotes</a></li>
                    <li><a href="Kundenablauf.html">Kundenablauf</a></li>
                    <li><a href="">TBC</a></li>
                </ul>
            </div>
            <a href="Kontakt.html">Kontakt</a>
        </div>
    </div>
  <h6>© 2025 | Alfred Lange</h6>
<!-- *************************Ende Navigationssystem*********************************************** -->

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

        <!-- Gutschein löschen -->
        <div>
            <h2>Gutschein löschen</h2>
            <form id="delete-coupon-form">
                <input type="text" id="delete-first-name" placeholder="Vorname" required>
                <input type="text" id="delete-last-name" placeholder="Nachname" required>
                <input type="date" id="delete-birth-date" placeholder="Geburtsdatum" required>
                <input type="number" id="delete-discount" placeholder="Rabatt (%)" required>
                <button type="submit">Gutschein löschen</button>
            </form>
            <button id="clear-form">Eingabefelder zurücksetzen</button>
            <p id="delete-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>
