<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tuningrechner</title>
    <style>
      body{
      margin: 0;
      }
        h1{
          margin-left: 20px;
          font-size: 40px;
          margin-bottom: 1px;
          }
        .linke_überschrift{
          font-size: 20px;
          color: red;
          }
        .mitte_überschrift{
          font-size: 20px;
          color: green;
          }
          .rechte_überschrift{
            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_links,
        .container_info_mitte,
        .container_info_rechts,
        .upgrade-box,
        .container_name,
        .Felgen-box,
        .lackierung-box,
        .licht-box,
        .sonstiges-box,
        .Rabatt-Box
        {
          background-color: rgba(0, 0, 0, 0.9);
          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: 0px 10px 10px 10px;  /* oben, rechts, unten, links */
          margin: 10px 10px 10px 10px;  /* 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 */
        margin: 0px 25px 25px 25px;  /* oben, rechts, unten, links */
        padding: 5px;
        border-radius: 20px; /* Runde Ecken */
        }
        /* Hintergrundkasten für die Infobox */
        .container_info{
          display: flex;
          flex-direction: row;
          border-radius: 20px; /* Runde Ecken */
          margin: 0px 25px 0px 25px;  /* oben, rechts, unten, links */
          padding: 25px 25px 5px 25px;  /* 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;
        }
        .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;
          }
          .Felgen-box,
          .lackierung-box,
          .licht-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 */
            }
            .sonstiges-box
            {
              border-radius: 20px; /* Runde Ecken */
              padding: 0px 10px 10px 10px;  /* oben, rechts, unten, links */
              margin: 10px 10px 10px 10px;  /* 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 */
              }
              .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_links,
            .container_info_mitte,
            .container_info_rechts{
              flex:1;
              margin: 0px 10px 0px 10px;  /* oben, rechts, unten, links */
              padding: 0 10px 3px 10px;  /* oben, rechts, unten, links */
              border-radius: 20px; /* Runde Ecken */
            }
            .container_info_mitte{
              margin: 0px 20px 0px 20px;  /* oben, rechts, unten, links */
            }
              .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 */
          }
          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_links">
      <h3 class="linke_überschrift">Wichtige Infos:</h3>
      <p>
        - Ist nur der Turbo als Tuning auswählbar, so darf dieser nicht eingebaut werden!<br>
        - Einige E-Autos haben kein Getriebe!<br>
        - 15 Minuten vor der Sonnenwende keine Autos mehr tunen!<br>
        - Unter Extras fällt alles, was in dem Tuningrechner nicht separat beschrieben ist. (Spoiler, Heckstoßstange, Frontstoßstange, usw...)
      </p>
      </div>
      <div class="container_info_mitte">
      <h3 class="mitte_überschrift">Kostenlos:</h3>
      <p>
        - Innenraumfarbe + Dashboard<br>
        - Lacktypen (Matt, Chrom, etc...)<br>
        - Reifenqualm + Felgenfarbe<br>
      </p>
      </div>
      <div class="container_info_rechts">
      <h3 class="rechte_überschrift">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, Dienstnummer und Kennzeichen:</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();" />

              <label for="Kennzeichen">Kennzeichen:</label>
              <input type="text" id="kennzeichen" placeholder="Kennzeichen eingeben" oninput="updateTextarea();" />
          </form>
        </div>
        <div class="upgrade-box">
        <h2>Upgrades:</h2>
        <p>
            <input type="checkbox" id="Fulltune" value="333000" onchange="toggleFulltune(); updateTextarea()">Fulltune (Beinhaltet Motor, Bremsen, Getriebe auf der höchsten Stufe und einen Turbolader)<br>
        </p>
        <p>
            <input type="checkbox" id="Turbo" value="90000" onchange="calculate();updateTextarea()">Turbo: 90.000,-<br>
        </p>
        <p> - Motor:
            <select id="Motor" onchange="calculate()">
                <option value="0"></option>
                <option value="15000">Default: 15.000,-</option>
                <option value="24000">Level 1: 24.000,-</option>
                <option value="60000">Level 2: 60.000,-</option>
                <option value="75000">Level 3: 75.000,-</option>
                <option value="120000">Level 4: 120.000,-</option>
            </select>
        </p>
        <p> - Bremsen:
            <select id="Bremse" onchange="calculate()">
                <option value="0"></option>
                <option value="7500">Default: 7.500,-</option>
                <option value="15000">Level 1: 15.000,-</option>
                <option value="27000">Level 2: 27.000,-</option>
                <option value="54000">Level 3: 54.000,-</option>
            </select>
        </p>
        <p> - Getriebe:
            <select id="Getriebe" onchange="calculate()">
                <option value="0"></option>
                <option value="16000">Default: 16.000,-</option>
                <option value="33000">Level 1: 33.000,-</option>
                <option value="48000">Level 2: 48.000,-</option>
                <option value="69000">Level 3: 69.000,-</option>
                <option value="90000">Level 4: 90.000,-</option>
            </select>
        </p>
        <p> - Federung:
            <select id="Federung" onchange="calculate()">
                <option value="0"></option>
                <option value="8000">Default: 8.000,-</option>
                <option value="16000">Level 1: 16.000,-</option>
                <option value="28500">Level 2: 28.500,-</option>
                <option value="45000">Level 3: 45.000,-</option>
                <option value="66000">Level 4: 66.000,-</option>
            </select>
        </p>
        <p> - Panzerung:
            <select id="Panzerung" onchange="calculate()">
                <option value="0"></option>
                <option value="60000">Default: 60.000,-</option>
                <option value="150000">Level 1: 150.000,-</option>
                <option value="180000">Level 2: 180.000,-</option>
                <option value="195000">Level 3: 195.000,-</option>
                <option value="275000">Level 4: 275.000,-</option>
                <option value="300000">Level 5: 300.000,-</option>
            </select>
        </p>
      </div>
      <div class="container_dreier">
      <div class="Felgen-box">
        <h2>Felgen:</h2>
        <p>
            <input type="checkbox" id="Felgen" value="20000" onchange="calculate()"> Felgen: 20.000,-<br>
            <input type="checkbox" id="Felgenhighend" value="45000" onchange="calculate()"> Highend Felgen: 45.000,-<br>
        </p>
      </div>
      <div class="lackierung-box">
        <h2>Lackierung:</h2>
        <p>
            <input type="checkbox" id="Primärfarbe" value="20000" onchange="calculate()"> Primärfarbefarbe: 20.000,-<br>
            <input type="checkbox" id="Sekundärfarbe" value="10000" onchange="calculate()"> Sekundärfarbefarbe: 10.000,-<br>
            <input type="checkbox" id="Perlglanz" value="3000" onchange="calculate()"> Perlglanz: 3.000,-<br>
        </p>
        </div>
        <div class="licht-box">
        <h2>Licht:</h2>
        <p>
            <input type="checkbox" id="Xenon" value="3000" onchange="calculate()"> Xenon: 3.000,-<br>
            <input type="checkbox" id="Neon" value="10000" onchange="calculate()"> Neon (Unterboden): 10.000,-<br>
        </p>
        </div>
        </div>
        </div>
        <div class="container_rechts">
        <div class="sonstiges-box">
        <h2>Sonstiges:</h2>
        <p>
            <input type="checkbox" id="Hupe" value="5000" onchange="calculate()"> Hupe: 5.000,-<br>
            <input type="checkbox" id="Sticker" value="20000" onchange="calculate()"> Sticker: 20.000,-<br>
            <input type="checkbox" id="Scheiben" value="6000" onchange="calculate()"> Scheibentönung: 6.000,-<br>

        Extras:
            <input type="number" id="Extras" min="0" onchange="calculate()">
            <button onclick="deleteExtras()">Löschen</button>
        </p>
        </div>
          <!-- <hr> Abstandshalter hinzugefügt -->
        <div class="container_rechts_unten">
        <div class="Rabatt-Box">
        <h2>Rechnung:</h2>
        <div class="Rabatt_Eingabe">
        <p><h3 class="Eingabe_Liste_Überschrift"> Rabatt Gesamt:</h3></p>
        <p> Kunde:
            <select id="Rabattliste_gesamt" onchange="calculate()">
                <option value="0"></option>
                <option value="1">n.A 0%</option>
                <option value="0">n.A 0%</option>
                <option value="0">n.A 0%</option>
                <option value="0">n.A 0%</option>
                <option value="0">n.A 0%</option>
            </select>
            oder Manuell:
                <input type="number" id="Rabatt" min="0" max="100"style="width: 70px;" placeholder="0 - 100%  " required onchange="calculate()">
                <button onclick="deleteRabatt()">Löschen</button>
        </p>
        <p><h3 class="Eingabe_Liste_Überschrift"> Rabatt Panzerung:</h3></p>
        <p> Kunde:
            <select id="Rabattliste_panzerung" onchange="calculate()">
                <option value="0"></option>
                <option value="1">n.A 0%</option>
                <option value="0">n.A 0%</option>
                <option value="0">n.A 0%</option>
                <option value="0">n.A 0%</option>
                <option value="0">n.A 0%</option>
            </select>
            oder Manuell:
              <input type="number" id="RabattPanzerung" min="0"  max="100"style="width: 70px;" placeholder="0 - 100%  " required  onchange="calculate()">
              <button onclick="deleteRabattPanzerung()">Löschen</button>
        </p>
        </div>
        <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 id="test" 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>
        function formatPrice(price) {
            return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "" + (price % 1 === 0 ? "" : price.toFixed(2).split(".")[1]) + "$";
          }
        function calculate() {
          let total = 0;
          let RabattDetails = ""; // Variable für Rabattdetails

          // Ü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 Motor = document.getElementById("Fulltune").checked ? 0 : (parseInt(document.getElementById("Motor").value) || 0);
          const Bremse = document.getElementById("Fulltune").checked ? 0 : (parseInt(document.getElementById("Bremse").value) || 0);
          const Getriebe = document.getElementById("Fulltune").checked ? 0 : (parseInt(document.getElementById("Getriebe").value) || 0);
          const Federung = parseInt(document.getElementById("Federung").value) || 0;
          const Panzerung = parseInt(document.getElementById("Panzerung").value) || 0;

          total += Motor + Bremse + Getriebe + Federung + Panzerung;

          // Berechnung der Extras
          const Extras = parseInt(document.getElementById("Extras").value) || 0;
          total += Extras * 7500;
//***********************Entweder oder Auswahl bei der Rabatt********************************
          if(0 == (parseInt(document.getElementById("Rabattliste_gesamt").value) || 0))
          {
            if(0 == (parseInt(document.getElementById("Rabatt").value) || 0))
            {
              //Nichts passiert
              Rabattliste_gesamt.disabled = false;
              document.getElementById("Rabatt").disabled = false;
              Rabatt = 0;
            }
            else{
              Rabatt = parseInt(document.getElementById("Rabatt").value) || 0;
              Rabattliste_gesamt.disabled = true;
            }
          }
          else{
            Rabatt = parseInt(document.getElementById("Rabattliste_gesamt").value) || 0;
            document.getElementById("Rabatt").disabled = true;
          }
//***********************Entweder oder Auswahl bei der Rabattpanzerung********************************
          if(0 == (parseInt(document.getElementById("Rabattliste_panzerung").value) || 0))
          {
            if(0 == (parseInt(document.getElementById("RabattPanzerung").value) || 0))
            {
              //Nichts passiert
              Rabattliste_panzerung.disabled = false;
              document.getElementById("RabattPanzerung").disabled = false;
              RabattPanzerung = 0;
            }
            else{
              RabattPanzerung = parseInt(document.getElementById("RabattPanzerung").value) || 0;
              Rabattliste_panzerung.disabled = true;
            }
          }
          else{
            RabattPanzerung = parseInt(document.getElementById("Rabattliste_panzerung").value) || 0;
            document.getElementById("RabattPanzerung").disabled = true;
          }

        //  if(0 == (parseInt(document.getElementById("Rabattliste_panzerung").value) || 0)){
        //    RabattPanzerung = parseInt(document.getElementById("RabattPanzerung").value) || 0;
        //  }
        //  else{
        //    RabattPanzerung = parseInt(document.getElementById("Rabattliste_panzerung").value) || 0;
        //  }
//****************************************************************************************************************************
          let Rabatt_abzug = 0;
          let Rabatt_abzug_normal = 0;

          if (RabattPanzerung > 0) {
            Rabatt_abzug_normal =(total - Panzerung) * Rabatt / 100;
            total -= (total - Panzerung) * Rabatt / 100;
            RabattDetails += `Rabatt auf Gesamtpreis: ${Rabatt}% (${Rabatt_abzug_normal}$)<br>`;
          } else {
            Rabatt_abzug_normal = (total * Rabatt) / 100;
            total -= (total * Rabatt) / 100;
            if (Rabatt > 0) {
                RabattDetails += `Rabatt auf Gesamtpreis: ${Rabatt}% (${Rabatt_abzug_normal}$)<br>`;
              }
            }

            if (RabattPanzerung > 0) {
              Rabatt_abzug = Panzerung * RabattPanzerung / 100;
              const RabattierterPanzerung = Panzerung - (Panzerung * RabattPanzerung / 100);
              total -= (Panzerung - RabattierterPanzerung);
              RabattDetails += `Rabatt auf Panzerung: ${RabattPanzerung}% (${Rabatt_abzug}$)<br>`;
            }
            Rabatt_abzug = Rabatt_abzug + Rabatt_abzug_normal;
            document.getElementById("total").innerText = "Gesamtpreis:" + formatPrice(total);
            document.getElementById("RabattDetails").innerHTML = RabattDetails;
            updateTextarea(Rabatt_abzug);
            return total;
          }

        function toggleFulltune() {
            const FulltuneChecked = document.getElementById("Fulltune").checked;

            // Felder zurücksetzen, wenn Fulltune aktiviert wird
            if (FulltuneChecked) {
                document.getElementById("Motor").value = "0";
                document.getElementById("Bremse").value = "0";
                document.getElementById("Getriebe").value = "0";
                document.getElementById("Turbo").checked = false; // Turbo zurücksetzen
                calculate(); // Neuberechnung
            }

            // Aktivieren/Deaktivieren der Felder für Motor, Bremsen, Getriebe und Turbo
            document.getElementById("Motor").disabled = FulltuneChecked;
            document.getElementById("Bremse").disabled = FulltuneChecked;
            document.getElementById("Getriebe").disabled = FulltuneChecked;
            document.getElementById("Turbo").disabled = FulltuneChecked;

            calculate(); // Neuberechnung nach Aktivierung/Deaktivierung
        }

        function deleteExtras() {
            document.getElementById("Extras").value = '';
            calculate();
        }

        function deleteRabatt() {
            document.getElementById("Rabatt").value = '';
            document.getElementById("Rabattliste_gesamt").value = '0';
            calculate();
        }

        function deleteRabattPanzerung() {
            document.getElementById("RabattPanzerung").value = '';
            document.getElementById("Rabattliste_panzerung").value = '0';
            calculate();
        }

            // 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 Eingabefelder zurücksetzen
            document.getElementById("kennzeichen").value = '';
            document.getElementById("Extras").value = '';
            document.getElementById("Rabatt").value = '';
            document.getElementById("RabattPanzerung").value = '';
            document.getElementById("RabattPanzerung").disabled = false;
            document.getElementById("Rabatt").disabled = false;
            // Gesamtpreis zurücksetzen
            document.getElementById("total").innerText = "Gesamtpreis: 0$";
            document.getElementById("RabattDetails").innerHTML = ""; // Rabattdetails zurücksetzen

            // Alle Felder für Motor, Bremsen, Getriebe und Turbo zurücksetzen und aktivieren
            resetFulltune();
            updateTextarea();
        }
//Fulltune auf Anfangswerte zurücksetzen
        function resetFulltune() {
            document.getElementById("Fulltune").checked = false;
            document.getElementById("Motor").disabled = false;
            document.getElementById("Bremse").disabled = false;
            document.getElementById("Getriebe").disabled = false;
            document.getElementById("Turbo").disabled = false;
        }

        // Aktualisiere die Textarea und prüfe Debugging
        function updateTextarea(Rabatt_abzug) {

          // Werte der Eingabefelder abrufen
          const name = document.getElementById("name").value.trim();
          const dienstnummer = document.getElementById("dienstnummer").value.trim();
          const kennzeichen = document.getElementById("kennzeichen").value.trim();
          const total = document.getElementById("total").innerHTML;
          const rabatt_absolut = Rabatt_abzug ?? 0;
          // 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,keine Dienstnummer oder kein Kennzeichen"
          // Überprüfen, ob beide Felder ausgefüllt sind
          if (name !== "" && dienstnummer !== "" && kennzeichen !== "") {
            nameText = `Tuning:\nName: ${name}, Dienstnummer: ${dienstnummer}\nKennzeichen: ${kennzeichen}\nGeänderte Werte:\n${changedValues.join("\n")}\n${total} Rabatt Absolut:${rabatt_absolut}$\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;
          }, {}),
          inputs: {
              Extras: document.getElementById("Extras").value || '',
              Rabatt: document.getElementById("Rabatt").value|| '',
              RabattPanzerung: document.getElementById("RabattPanzerung").value || '',
          }
      };
      console.log('Initial values stored:', initialValues); // Debugging
  }
  //*********Debuggen um geänderte Werte für Textbox zu bekommen**************************
  function getChangedValues() {
      const changedValues = [];
      document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
          if (checkbox.checked !== initialValues.checkboxes[checkbox.id]) {
              changedValues.push(`${checkbox.id}: ${checkbox.checked ? checkbox.value + "$" : "Deaktiviert"}`);
          }
      });
      document.querySelectorAll('select').forEach(select => {
          if (select.value !== initialValues.selects[select.id]) {
              changedValues.push(`${select.id}: ${select.options[select.selectedIndex].text}`);
          }
      });
      const inputs = ["Extras", "Rabatt", "RabattPanzerung"];
      inputs.forEach(inputId => {
          const input = document.getElementById(inputId);
          if (input.value !== initialValues.inputs[inputId]) {
              changedValues.push(`${inputId}: ${input.value}`);
          }
      });

      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;

    // Berechne die Zeit, zu der der Button wieder aktiv ist
    const now = new Date();
    const unlockTime = new Date(now.getTime() + 2 * 60 * 1000); // 2 Minuten später
    const unlockTimeString = unlockTime.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });

    // Zeige die Nachricht mit der genauen Zeit an
    message.textContent = `Bitte warten Sie 2 Minuten. Sie können den Knopf wieder um ${unlockTimeString} verwenden.`;

    // 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_links, .container_info_mitte, .container_info_rechts, .upgrade-box, .container_name, .Felgen-box, .lackierung-box, .licht-box, .sonstiges-box, .Rabatt-Box"
      );

      elements.forEach(element => {
        element.classList.toggle("white-mode");
      });
    });
//************************Abschicken des ausgefüllten Tuningrechners***************************
  document.getElementById('Abschicken').addEventListener('click', async () => {

            const workerUrl = 'https://wrangler-website.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>
