<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1{
          margin-left: 20px;
          font-size: 40px;
          margin-bottom: 1px;
          }
        .Spalte1{
          font-size: 20px;
          color: green;
          }
        .Spalte2{
          font-size: 20px;
          color: yellow;
          }
          .Spalte3{
            font-size: 20px;
            color: red;
            }
          .Spalte4{
            font-size: 20px;
          }
          h6{
            margin: 20px 5px 0px 0px;
            font-size: 15px;
            text-align: right;
            }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #b3d9ff; /* Babyblauer Hintergrund */
            background-image: url('Bilder/NC_Bild2.webp');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: top;
            padding-top: 80px;
        }
        /* Farbliche Einstellung + Transparenz für alle Innenkästen */
        .container_info_spalte1,
        .container_info_spalte2,
        .container_info_spalte3,
        .container_info_spalte4,
        .upgrade-box,
        .container_name,
        .container_Karte,
        .Auto_reparatur_mittel-box,
        .Auto_reparatur_groß-box,
        .Beschreibung_dispatch-box,
        .Rabatt-Box
        {
          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;
          color: white;
        }

        /* Alternative Stile für deaktivierte Schatten und dunklen Hintergrund */
        .white-mode {
          background-color: rgba(255, 255, 255, 1.0); !important; /* Dunkelgrau */
          box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0; !important; /* Kein Schatten */
          color: black; !important;
        }
        /* Innerer Kasten für die Eingabe von Name */
        .container_name{
          border-radius: 20px; /* Runde Ecken */
          padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
          margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
          display: inline-block; /* Passt die Breite an den Inhalt an */
          width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
          }
        /* Hintergrundkasten für die untere Box (den Rest) */
        .container_main
        {
        display: flex; /* Aktiviert Flexbox */
        gap: 16px; /* Abstand zwischen den Containern */
        margin: 25px; /* Abstand außen (oben, rechts, unten, links) */
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.9);
        border-radius: 20px; /* Runde Ecken */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); /* Dunklerer Schatten */
        }
        /* Hintergrundkasten für die Infobox */
        .container_info{
          display: flex;
          flex-direction: row;
          background-color: rgba(0, 0, 0, 0.9);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); /* Dunklerer Schatten */
          border-radius: 20px; /* Runde Ecken */
          margin: 25px; /* Abstand außen (oben, rechts, unten, links) */
          padding: 25px; /* Inennabstand außen (oben, rechts, unten, links) */
          opacity: 1; /* Voll sichtbar */
        }
        .container_links,
        .container_rechts
        {
          flex: 1; /* Beide Container nehmen gleich viel Platz ein */
          padding: 20px; /* Innenabstand */
        }
        .container_links
        {
          justify-content: space-between;
          padding: 5px;
          margin: 20px;
        }
        .container_rechts,
        {
          justify-content: space-between;
        }
        .upgrade-box{
            border-radius: 20px; /* Runde Ecken */
            padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
            margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
            display: inline-block; /* Passt die Breite an den Inhalt an */
            width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
          }
          .container_dreier{
            display: flex;
            justify-content: space-between;
          }
          .container_Karte,
          .Auto_reparatur_mittel-box,
          .Auto_reparatur_groß-box {

              border-radius: 20px; /* Runde Ecken */
              padding: 10px 20px; /* Innenabstand */
              margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
              display: inline-block; /* Passt die Breite an den Inhalt an */
              padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
              border-radius: 20px; /* Runde Ecken */
            }
            .Beschreibung_dispatch-box
            {
              border-radius: 20px; /* Runde Ecken */
              padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
              margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
              display: inline-block; /* Passt die Breite an den Inhalt an */
              width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
              border-radius: 20px; /* Runde Ecken */
              }
              .Beschreibung_dispatch_ausgabe-box{
                width: calc(100% - 10px);
                display: inline-block;
              }
              .column{
                flex: 1; /* Jede Spalte nimmt den gleichen Platz ein */
                padding: 10px; /* Innenabstand */

              }
              .column li {
                list-style-type: none ;
              }
              .hidden{
                display: none; /* Vollständig aus dem Layout entfernt */
              }
              /* InfoBox zum Ausblenden */
            .container_info_spalte1,
            .container_info_spalte2,
            .container_info_spalte3,
            .container_info_spalte4{
              flex:1;
              margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
              padding: 0 10px 3px 10px;  /* oben, rechts, unten, links */
              border-radius: 20px; /* Runde Ecken */
            }
              .container_rechts_unten{
                display: flex;
                flex-direction: column;
              }
              .Rabatt-Box{
                  border-radius: 20px; /* Runde Ecken */
                  padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
                  margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
                  display: inline-block; /* Passt die Breite an den Inhalt an */
                  width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
                  border-radius: 20px; /* Runde Ecken */
                }
                .ausgabe-box{
                  width: calc(100% - 10px);
                  display: inline-block;
                }
                /* Nachricht-Styling */
                #sendMessage {
                  display: none;
                  position: fixed;
                  bottom: 20px;
                  right: 20px;
                  background-color: #4CAF50;
                  color: white;
                  padding: 10px 20px;
                  border-radius: 5px;
                  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                  font-size: 14px;
                  }
                  #copyMessage {
                    display: none;
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    background-color: #4CAF50;
                    color: white;
                    padding: 10px 20px;
                    border-radius: 5px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                    font-size: 14px;
                    }
                  #clearMessage {
                    display: none;
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    background-color: red;
                    color: white;
                    padding: 10px 20px;
                    border-radius: 5px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                    font-size: 14px;
                    }
                    #closeInfoMessage {
                      display: none;
                      position: fixed;
                      bottom: 20px;
                      right: 20px;
                      background-color: black;
                      color: white;
                      padding: 10px 20px;
                      border-radius: 5px;
                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                      font-size: 14px;
                      }
                      #changeInfobrightness{
                        display: none;
                        position: fixed;
                        bottom: 20px;
                        right: 20px;
                        background-color: black;
                        color: white;
                        padding: 10px 20px;
                        border-radius: 5px;
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                        font-size: 14px;
                        }
                textarea
                {
                  flex: 1; /* Textarea nimmt den gesamten verbleibenden Platz ein */
                  padding: 5px;
                  font-size: 15px;
                  border: 1px solid #ccc;
                  border-radius: 5px;
                  resize: none ; /* Verhindert manuelles Resizing */
                  overflow: hidden;
                  width: 100%;
                }
        .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; /* Bildhöhe */
            margin-right:40px; /* Abstand zwischen Bild und Links */
        }
        .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%; /* Positionierung relativ zur Mitte des Dropdown-Knopfes */
            transform: translateX(-50%); /* Zentriert das Menü */
            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;
        }
        button {
              color: rgb(0, 0, 0);
              background-color: #b3d9ff; Optional: dunklerer Button-Hintergrund */
              border: 1px dotted;
              padding: 5px;
              cursor: pointer;
              border-radius: 5px;
          }
          input[type="number"], input[type="checkbox"], select {
              color: #dadad9; /* Weiße Schriftfarbe für Eingabefelder, Checkboxen und Auswahlfelder */
              background-color: rgb(107, 107, 107); /* Grauer Hintergrund für bessere Lesbarkeit */
          }
          input::placeholder{
              color: #dadad9; /* Weiße Schriftfarbe für die 0-100% */
          }
          .info {
              font-size: 0.9em;
              color: black; /* Helle Schriftfarbe für das Informationsfeld */
              margin-top: 5px;
          }
          .footer {
              margin-top: 20px;
          }
          #total {
              font-size: 1.5em; /* Größere Schriftgröße für den Gesamtpreis */
              font-weight: bold; /* Fettdruck für den Gesamtpreis */
              color: green; /* Farbe des Gesamtpreises auf Grün ändern */
          }
          hr {
              border: 1px solid #555; /* Farbe und Dicke des Abstandshalters */
              margin: 20px 0; /* Abstand oberhalb und unterhalb des Strichs */
          }
          .checkbox-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
          }

          .checkbox-container label {
            flex: 1
            align-items: center;
            margin: 5px;
          }
          .checkbox-header {
            margin: 5px;
            font-size: 18px;
          }
          .container_Karte img {
            width: 100%; /* Bild passt sich der Breite des Containers an */
            height: auto; /* Höhe wird proportional angepasst */
            border-radius: 5px; /* Beibehaltung der abgerundeten Ecken */
            padding: 5px;
          }
          button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body onload="storeInitialValues()">
  <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="">Rechner</a>
          <ul class="submenu">
              <li><a href="Tuningrechner.html">Tuningrechner</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>
      <div class="container_info">
        <div class="container_info_spalte1">
      <h3 class="Spalte1">Reparatur - Klein:</h3>
      <p>
        - Kleinere Kratzer am Auto<br>
        - Lediglich Beulen, keine abgefallenen Teile<br>
        - Es sind keine Schweinwerfer oder Rückleuchten defekt<br>
      </p>
      </div>
      <div class="container_info_spalte2">
      <h3 class="Spalte2">Reparatur - Mittel:</h3>
      <p>
        - Es fehlt maximal 1 Teil des Fahrzeugs<br>
        - Teile sind Gegestände die abfallen können<br>
      </p>
      </div>
      <div class="container_info_spalte3">
      <h3 class="Spalte3">Reparatur - Groß:</h3>
      <p>
        - Das Fahrzeug qualmt aus dem Motorraum und ist nicht mehr fahrbar<br>
        - Mehrere Fahrzeugteile sind abgefallen oder stark beschädigt<br>
      </p>
      </div>
      <div class="container_info_spalte4">
      <h3 class="Spalte4">Support:</h3>
      <p>
        Bei technischen Problemen<br>
        oder Verbesserungsvorschlägen<br>
        melden Sie sich bitte bei <br>
        Alfred Lange: <br>
        - E-Mail Verteiler: donluxa<br>
        - Tel.Nr: (6)9222248<br>
      </p>
      </div>
      </div>
    </div>
  </div>
</div>
</div>
      <div class="container_main">
        <div class="container_links">
         <div class="container_name">
          <h2>Eingabe von Name und Dienstnummer:</h2>
          <form>
              <!-- Eingabefelder -->
              <label for="name">Name:</label>
              <input type="text" id="name" placeholder="Name eingeben" oninput="updateTextarea();" />
              <label for="dienstnummer">Dienstnummer:</label>
              <input type="text" id="dienstnummer" placeholder="Dienstnummer eingeben" oninput="updateTextarea();" />
             </form>
        </div>
        <div class="upgrade-box">
        <h2>Service:</h2>
        <div class="checkbox-container">
          <h7 class="checkbox-header">Reparatur:</h7>
           <div class="checkbox-group">
          <label><input type="checkbox" id="Reparatur_Klein" name="option" value="1000" class="single-checkbox" onchange="singleCheckboxSelection(this)"> Reparatur - Klein</label>
          <label><input type="checkbox" id="Reparatur_Mittel" name="option" value="1500" class="single-checkbox" onchange="singleCheckboxSelection(this)"> Reparatur - Mittel</label>
          <label><input type="checkbox" id="Reparatur_Groß" name="option" value="2000" class="single-checkbox" onchange="singleCheckboxSelection(this)"> Reparatur - Groß</label>
        </div>
        </div>
        <div class="checkbox-container">
          <h7 class="checkbox-header">Fahrzeugart:</h7>
          <div class="checkbox-group">
          <label><input type="checkbox" id="Abschleppen_PKW" name="option" value="1000" class="single-checkbox_abschleppen" onchange="singleCheckboxSelection_abschleppen(this)"> Abschleppen - PKW</label>
          <label><input type="checkbox" id="Abschleppen_LKW" name="option" value="1500" class="single-checkbox_abschleppen" onchange="singleCheckboxSelection_abschleppen(this)"> Abschleppen - LKW</label>
        </div>
        </div>
        <div class="checkbox-container">
        <h7 class="checkbox-header">Fahrzeug getankt?</h7>
        <div class="checkbox-group">
        <label><input type="checkbox" id="Fahrzeug_getankt" name="option" value="1000" class="single-checkbox_tanken" onchange="singleCheckboxSelection_abschleppen(this)">Ja</label>
      </div>
        </div>
        <div class="checkbox-container">
        <h7 class="checkbox-header">Weitere Reparaturkästen verkauft?</h7>
        <div class="checkbox-group">
          <label><input type="number" id="Reparaturkästen_verkauft" min="0"  max="100"style="width: 70px;" placeholder="0 Stück" required  onchange="calculate()"></label>
          <button onclick="deleteEingabe_Reparaturkästen()">Löschen</button>
        </div>
        </div>
        <p>Anfahrtsweg:
            <select id="Anfahrtsweg" onchange="calculate()">
                <option value="0"></option>
                <option value="1000">Kurz: 1.000,-</option>
                <option value="2000">Mittel: 2.000,-</option>
                <option value="3000">Lang: 3.000,-</option>
            </select>
        </p>
      </div>
      <div class="container_dreier">
      <div class="container_Karte">
      <img src="Bilder/NC_GTAV_Map.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden">
      </div>
      </div>
      </div>
        <div class="container_rechts">
        <div class="Beschreibung_dispatch-box">
        <h2>Beschreibung Dispatch:</h2>
        <div class="Beschreibung_dispatch_ausgabe-box">
        <textarea id="textToInsert" placeholder="Bitte Dispatch beschreiben" oninput="updateTextarea();"></textarea>
        </div>
        </div>
          <!-- <hr> Abstandshalter hinzugefügt -->
        <div class="container_rechts_unten">
        <div class="Rabatt-Box">
        <h2>Rechnung:</h2>
        <div class="footer">
            <p id="total">Gesamtpreis: 0$</p>
            <button id ="copyPrice" onclick="copyPrice()">Preis kopieren</button>
            <div id="copyMessage">Preis wurde kopiert</div>
            <p id="RabattDetails"></p> <!-- Hier wird die Rabattbeschreibung angezeigt -->
        </div>
        <div class="ausgabe-box">
          <textarea id="textToCopy" readonly>Keine Änderungen vorgenommen.</textarea>
          <button id="Abschicken" onclick="sendText(),waitbutton()">Abschicken</button>
          <p id="message"></p>
          <div id="sendMessage">Rechnung wurde versendet</div>
          <button onclick="resetInputs()">Alle Eingaben löschen</button>
          <div id="clearMessage">
            Alle Eingaben wurden gelöscht!
          </div>
          <button id="info_ausblenden">Infos ausblenden</button>
          <div id="closeInfoMessage">
            Infos wurden ein-/ausgeblendet.
          </div>
          <button id="info_whitemode">Whitemode</button>
          <div id="changeInfobrightness">
            Whitemode/Darkmode aktiviert.
          </div>
        </div>
    </div>
  </div>
    </div>
    </div>

    <script>
//*********Formatierung Preis******************************************
    function formatPrice(price) {
        return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "" + (price % 1 === 0 ? "" : price.toFixed(2).split(".")[1]) + "$";
      }
//***************************Berechnung Preis**********************
    function calculate() {
        let total = 0
        // Überprüfen der Checkboxen und Berechnung des Gesamtkosten
        const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
        checkboxes.forEach(checkbox => {
          total += parseInt(checkbox.value);
        });
        // Berechnung der ausgewählten Optionen
        const Anfahrt = parseInt(document.getElementById("Anfahrtsweg").value || 0);
        // Berechnung der noch zusätzlich an den Kunden verkauften Reparaturkästen
        const Reperaturkaesten_verkauft = parseInt(document.getElementById("Reparaturkästen_verkauft").value) || 0;
        let  Reperaturkaesten_kosten_einer = 1000;
        Reperaturkaesten_kosten_gesamt = Reperaturkaesten_kosten_einer * Reperaturkaesten_verkauft;
        total += Anfahrt + Reperaturkaesten_kosten_gesamt;
        //Ausgabe des Gesamtpreises in die varbiable Total
        document.getElementById("total").innerText = "Gesamtpreis:" + formatPrice(total);
        updateTextarea();
        return total;
    }
//******************Funktion zum Zurücksetzen aller Eingaben********************************
    function resetInputs() {
      // Nachricht anzeigen
      const message = document.getElementById("clearMessage");
      message.style.display = "block";

      // Nachricht nach 5 Sekunden ausblenden
      setTimeout(() => {
        message.style.display = "none";
      }, 2000);
      // Alle Checkboxen zurücksetzen
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(checkbox => {
          checkbox.checked = false;
      });

      // Alle Auswahlfelder zurücksetzen
      const selects = document.querySelectorAll('select');
      selects.forEach(select => {
          select.value = "0";
      });
      // Alle Nummernfelder zurücksetzen
      const numbers = document.querySelectorAll('input[type="number"]');
      numbers.forEach(number => {
          number.value = "";
      });


      //Zurücksetzten der Eingabebox
      document.getElementById("textToInsert").value = "";
      // Gesamtpreis zurücksetzen
      document.getElementById("total").innerText = "Gesamtpreis: 0$";
      // Updaten der Textausgabe
      updateTextarea();
      }
//**************Zurücksetzen der Anzahl der weiteren verkauften Reparaturkästen********************
      function deleteEingabe_Reparaturkästen() {
        document.getElementById("Reparaturkästen_verkauft").value = '';
          calculate();
      }
//**************Keine Ahnung ob dies benötigt wird**************************************
    function adjustTextareaHeight(textarea) {
        textarea.style.height = "auto"; // Setze die Höhe auf "auto", um die vorherige Höhe zu entfernen
        textarea.style.height = textarea.scrollHeight + "px"; // Setze die Höhe basierend auf scrollHeight
    }
//***************** Aktualisiere die Textarea und prüfe Debugging**********************
    function updateTextarea() {

      // Werte der Eingabefelder abrufen
      const name = document.getElementById("name").value.trim();
      const dienstnummer = document.getElementById("dienstnummer").value.trim();
      const total = document.getElementById("total").innerHTML;
      const eingabe_text = document.getElementById("textToInsert").value;
        // Bestehendes Textfeld in einem anderen Container ansteuern
        const textToCopy = document.getElementById("textToCopy");
        const changedValues = getChangedValues(); //Hole die geänderten Werte
        const now = new Date();
        const date = now.toLocaleDateString(); // Formatiertes Datum
        const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); //Formatierte Uhrzeit
        let nameText = "Kein Name oder keine Dienstnummer"
      // Überprüfen, ob beide Felder ausgefüllt sind
        if (name !== "" && dienstnummer !== "") {
          nameText = `Abschleppen:\nName: ${name}, Dienstnummer: ${dienstnummer}\nService:\n${changedValues.join("\n")}\nDispatchbeschreibung:\n${eingabe_text}\n${total}\n${date} ${time}Uhr`;
          }

            // Textfeld aktualisieren
            textToCopy.value = nameText

            textToCopy.style.height = "auto"; // Setzt die Höhe zurück
            textToCopy.style.height = `${textToCopy.scrollHeight}px`; // Passt die Höhe an den Inhalt an
          }
//*********Füge Debugging hinzu, um Anfangswerte zu speichern für Textbox**************************
    function storeInitialValues() {
        initialValues = {
            checkboxes: Array.from(document.querySelectorAll('input[type="checkbox"]')).reduce((acc, checkbox) => {
                acc[checkbox.id] = checkbox.checked;
                return acc;
            }, {}),
            selects: Array.from(document.querySelectorAll('select')).reduce((acc, select) => {
                acc[select.id] = select.value;
                return acc;
            }, {}),
            numbers: Array.from(document.querySelectorAll('input[type="number"]')).reduce((acc, number) => {
                acc[number.id] = number.value;
                return acc;
            }, {})
        };
        console.log('Initial values stored:', initialValues); // Debugging
    }

//*********Debuggen um geänderte Werte für Textbox zu bekommen**************************
    function getChangedValues() {
        const changedValues = [];

        // Überprüfen der geänderten Checkboxen
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            if (checkbox.checked !== initialValues.checkboxes[checkbox.id]) {
                changedValues.push(`${checkbox.id}: ${checkbox.checked ? checkbox.value + "$" : "Deaktiviert"}`);
            }
        });

        // Überprüfen der geänderten Select-Optionen
        document.querySelectorAll('select').forEach(select => {
            if (select.value !== initialValues.selects[select.id]) {
                changedValues.push(`${select.id}: ${select.options[select.selectedIndex].text}`);
            }
        });
        // Überprüfen der geänderten Checkboxen
        document.querySelectorAll('input[type="number"]').forEach(number => {
            if (number.value !== initialValues.numbers[number.id]) {
                changedValues.push(`${number.id}: ${number.value ? number.value + " Stück" : "Deaktiviert"}`);
            }
        });
        console.log('Changed values detected:', changedValues); // Debugging
        return changedValues;
    }

//*****************************Infobox Knopf Änderung Inhalt (aus-/einblenden)**************************
    document.getElementById('info_ausblenden').addEventListener('click', function () {
        // Nachricht anzeigen
        const message = document.getElementById("closeInfoMessage");
        message.style.display = "block";

        // Nachricht nach 5 Sekunden ausblenden
        setTimeout(() => {
          message.style.display = "none";
        }, 2000);

      const container = document.querySelector('.container_info'); // Container mit Klasse ".container_info" auswählen
      if (container.classList.contains('hidden')) {
        container.classList.remove('hidden'); // Entferne die Klasse "hidden", um den Container wieder sichtbar zu machen
        this.textContent = 'Infos ausblenden'; // Ändere den Button-Text zurück
      } else {
        container.classList.add('hidden'); // Füge die Klasse "hidden" hinzu, um den Container zu verstecken
        this.textContent = 'Infos anzeigen'; // Ändere den Button-Text
      }
    });

//*****************************Whitemode Knopf Änderung Inhalt (Whitemode/Darkmode)**************************
    document.getElementById('info_whitemode').addEventListener('click', function () {
        // Nachricht anzeigen
        const message = document.getElementById("changeInfobrightness");
        message.style.display = "block";

        // Nachricht nach 5 Sekunden ausblenden
        setTimeout(() => {
          message.style.display = "none";
        }, 2000);

      const container = document.querySelector('.container_info'); // Container mit Klasse ".container_info" auswählen
      if (container.classList.contains('white-mode')) {
        container.classList.remove('white-mode'); // Entferne die Klasse "white-mode", um den Container wieder dunkler zu machen
        this.textContent = 'Whitemode'; // Ändere den Button-Text zurück
      } else {
        container.classList.add('white-mode'); // Füge die Klasse "white-mode" hinzu, um den Container wieder heller zu machen
        this.textContent = 'Darkmode'; // Ändere den Button-Text
      }
    });
  //************************Kopieren des Gesamtpreises für IC***********************************
    function copyPrice() {
      const total = calculate(); // Gesamtpreis abrufen
      navigator.clipboard.writeText(total.toString())
      .then(() => {
        // Nachricht anzeigen
        const message = document.getElementById("copyMessage");
        message.style.display = "block";

        // Nachricht nach 5 Sekunden wieder ausblenden
        setTimeout(() => {
          message.style.display = "none";
        }, 2000);
      })
      .catch(err => {
        console.error("Kopieren fehlgeschlagen: ", err);
      });
    }

//*****************************Rechnung verschicken Meldung**************************
    function sendText() {
             // Nachricht anzeigen
             const message = document.getElementById("sendMessage");
             message.style.display = "block";

             // Nachricht nach 5 Sekunden wieder ausblenden
             setTimeout(() => {
               message.style.display = "none";
             }, 2000);
       }
//*******************Abschicken Knopf 2 Min pause*****************
    function waitbutton() {
          const button = document.getElementById('Abschicken');
          const message = document.getElementById('message');

          // Aktion beim Klicken ausführen (z. B. Daten senden)
          console.log("Text gesendet!"); // Hier kannst du deine eigene Logik einfügen

          // Button deaktivieren
          button.disabled = true;
          message.textContent = "Bitte warten Sie 2 Minuten, bevor Sie erneut klicken.";

          // Nach 2 Minuten den Button wieder aktivieren
          setTimeout(() => {
              button.disabled = false;
              message.textContent = "";
          }, 2 * 60 * 1000); // 2 Minuten in Millisekunden
      }
//*****************************Whitemode aktivieren**************************
    document.getElementById("info_whitemode").addEventListener("click", function () {
       const elements = document.querySelectorAll(
         ".container_info_spalte1, .container_info_spalte2,.container_info_spalte3, .container_info_spalte4, .upgrade-box, .container_name, .container_Karte, .Auto_reparatur_mittel-box, .Auto_reparatur_groß-box, .Beschreibung_dispatch-box, .Rabatt-Box"
       );

       elements.forEach(element => {
         element.classList.toggle("white-mode");
       });
     });
//***********Auswahlmöglichkeit einer Reparatur aus drei**********************
    function singleCheckboxSelection(checkbox) {
      // Alle Checkboxen mit der Klasse "single-checkbox" finden
      const checkboxes = document.querySelectorAll('.single-checkbox');

      // Wenn eine Checkbox aktiviert wird, deaktiviere die anderen
      checkboxes.forEach(cb => {
          if (cb !== checkbox) {
              cb.checked = false;
          }
      });
      // Hier kannst du auch andere Logik einfügen, wie das Berechnen oder Aktualisieren eines Textbereichs
      calculate();
      updateTextarea();
    }
//***********Auswahlmöglichkeit eines Abschleppens aus zwei**********************
    function singleCheckboxSelection_abschleppen(checkbox) {
            // Alle Checkboxen mit der Klasse "single-checkbox" finden
            const checkboxes = document.querySelectorAll('.single-checkbox_abschleppen');

            // Wenn eine Checkbox aktiviert wird, deaktiviere die anderen
            checkboxes.forEach(cb => {
                if (cb !== checkbox) {
                    cb.checked = false;
                }
            });
            // Hier kannst du auch andere Logik einfügen, wie das Berechnen oder Aktualisieren eines Textbereichs
            calculate();
            updateTextarea();
          }
//***********Auswahlmöglichkeit getankt**********************
    function singleCheckboxSelection_abschleppen(checkbox) {
                      // Alle Checkboxen mit der Klasse "single-checkbox" finden
                      const checkboxes = document.querySelectorAll('.single-checkbox_tanken');

                      // Wenn eine Checkbox aktiviert wird, deaktiviere die anderen
                      checkboxes.forEach(cb => {
                          if (cb !== checkbox) {
                              cb.checked = false;
                          }
                      });
                      // Hier kannst du auch andere Logik einfügen, wie das Berechnen oder Aktualisieren eines Textbereichs
                      calculate();
                      updateTextarea();
                    }

//************************Abschicken des ausgefüllten Tuningrechners***************************
document.getElementById('Abschicken').addEventListener('click', async () => {

                                const workerUrl = 'https://wrangler-website-abschlepper.alfred-lange-nc.workers.dev'; // Deine Worker-URL
                                const textContent = document.getElementById('textToCopy').value; // Text aus der Textarea
                                // Daten, die an den Worker gesendet werden
                                const data = { message: textContent };

                                try {
                                    const response = await fetch(workerUrl, {
                                        method: 'POST', // POST-Methode für das Senden von Daten
                                        headers: {
                                            'Content-Type': 'application/json'
                                        },
                                        body: JSON.stringify(data) // Die Daten im Body der Anfrage
                                    });

                                    if (response.ok) {
                                        const text = await response.text();
                                        document.getElementById('responseOutput').textContent = 'Antwort vom Worker: ' + text;
                                        // Anzeige der Antwort im HTML
                            document.getElementById('output').innerText = responseData; // Hier wird die Antwort (inkl. Rate Limit Info) angezeigt
                          } else {
                            console.error('Fehler:', response.statusText);
                          }
                                } catch (error) {
                                    document.getElementById('responseOutput').textContent = 'Fehler: ' + error.message;
                                }
                            });

  </script>
</body>
</html>
