<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barcode</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      font-family: Arial, sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    body.dark-mode {
      background-color: #121212;
      color: #ffffff;
    }

    #background-video {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      z-index: -999;
    }

    .ui.container {
      background: var(--container-bg, white);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-top: 50px;
      transition: background-color 0.3s, color 0.3s;
    }

    .dark-mode .ui.container {
      background: #1e1e1e;
      color: #ffffff;
    }

    .ui.form .field label {
      font-weight: bold;
    }

    .ui.form textarea {
      font-family: monospace;
    }

    #barcode {
      margin-top: 20px;
      background-color: var(--barcode-bg, seashell);
      padding: 10px;
      border: 1px solid #ccc;
      transition: background-color 0.3s;
    }

    .dark-mode #barcode {
      background-color: #2d2d2d;
    }

    .download-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      cursor: pointer;
    }

    .download-container .download-label {
      font-weight: bold;
      text-transform: uppercase;
    }

    .reset-button {
      margin-top: 20px;
    }

    .error-message {
      color: red;
      font-size: 0.9em;
      margin-top: 5px;
    }

    .mode-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }
  </style>
</head>
<body class="light-mode">
  <div class="ui container">
    <h2 class="ui center aligned header">
      <i class="bordered circular globe icon"></i>
      BARCODE
    </h2>
    <form id="aamva" class="ui form">
      <div class="ui two column doubling grid">
        <div class="column">
          <div class="field">
            <label for="DAQ">ID Number</label>
            <input id="DAQ" name="DAQ" type="text" placeholder="ID Number" oninput="validateNumeric(this)">
            <div class="error-message" id="DAQ-error"></div>
          </div>
          <div class="field">
            <label for="DCF">Document Discriminator Number</label>
            <input id="DCF" name="DCF" type="text" placeholder="Document Discriminator Number" oninput="validateNumeric(this)">
            <div class="error-message" id="DCF-error"></div>
          </div>
          <div class="field">
            <label for="DBD">Issue Date</label>
            <input id="DBD" name="DBD" type="date">
          </div>
          <div class="field">
            <label for="DBB">Date of Birth</label>
            <input id="DBB" name="DBB" type="date">
          </div>
          <div class="field">
            <label for="DBA">Expiration Date</label>
            <input id="DBA" name="DBA" type="date">
          </div>
          <div class="field">
            <label for="DAC">First Name</label>
            <input id="DAC" name="DAC" type="text" placeholder="First Name" oninput="validateAlphabetic(this)">
            <div class="error-message" id="DAC-error"></div>
          </div>
          <div class="field">
            <label for="DAD">Middle Name(s)</label>
            <input id="DAD" name="DAD" type="text" placeholder="Middle Names (Comma separated)" oninput="validateAlphabetic(this)">
            <div class="error-message" id="DAD-error"></div>
          </div>
          <div class="field">
            <label for="DCS">Surname</label>
            <input id="DCS" name="DCS" type="text" placeholder="Surname" oninput="validateAlphabetic(this)">
            <div class="error-message" id="DCS-error"></div>
          </div>
        </div>
        <div class="column">
          <div class="field">
            <label for="DAU">Height</label>
            <select id="DAU" name="DAU" class="ui fluid dropdown">
              <option value="">Select Height</option>
              <option value="058 IN">4'10" (058 IN)</option>
              <option value="059 IN">4'11" (059 IN)</option>
              <option value="060 IN">5'0" (060 IN)</option>
              <option value="061 IN">5'1" (061 IN)</option>
              <option value="062 IN">5'2" (062 IN)</option>
              <option value="063 IN">5'3" (063 IN)</option>
              <option value="064 IN">5'4" (064 IN)</option>
              <option value="065 IN">5'5" (065 IN)</option>
              <option value="066 IN">5'6" (066 IN)</option>
              <option value="067 IN">5'7" (067 IN)</option>
              <option value="068 IN">5'8" (068 IN)</option>
              <option value="069 IN">5'9" (069 IN)</option>
              <option value="070 IN">5'10" (070 IN)</option>
              <option value="071 IN">5'11" (071 IN)</option>
              <option value="072 IN">6'0" (072 IN)</option>
              <option value="073 IN">6'1" (073 IN)</option>
              <option value="074 IN">6'2" (074 IN)</option>
              <option value="075 IN">6'3" (075 IN)</option>
              <option value="076 IN">6'4" (076 IN)</option>
              <option value="077 IN">6'5" (077 IN)</option>
              <option value="078 IN">6'6" (078 IN)</option>
              <option value="079 IN">6'7" (079 IN)</option>
              <option value="080 IN">6'8" (080 IN)</option>
            </select>
          </div>
          <div class="field">
            <label for="DBC">Gender</label>
            <select id="DBC" name="DBC" class="ui fluid dropdown">
              <option value="">Gender</option>
              <option value="1">Male</option>
              <option value="2">Female</option>
            </select>
          </div>
          <div class="field">
            <label for="DAY">Eye Color</label>
            <select id="DAY" name="DAY" class="ui fluid dropdown">
              <option value="">Eye Color</option>
              <option value="BLK">Black</option>
              <option value="BLU">Blue</option>
              <option value="BRO">Brown</option>
              <option value="GRY">Gray</option>
              <option value="GRN">Green</option>
              <option value="HAZ">Hazel</option>
              <option value="MAR">Maroon</option>
              <option value="PNK">Pink</option>
            </select>
          </div>
          <div class="field">
            <label for="DAG">Street</label>
            <input id="DAG" name="DAG" type="text" placeholder="Street Address">
          </div>
          <div class="field">
            <label for="DAI">City</label>
            <input id="DAI" name="DAI" type="text" placeholder="City Name" oninput="validateAlphabetic(this)">
            <div class="error-message" id="DAI-error"></div>
          </div>
          <div class="field">
            <label for="DAJ">State</label>
            <select id="DAJ" name="DAJ" class="ui fluid dropdown">
              <option value="AL">Alabama</option>
                              <option value="AK">Alaska</option>
                              <option value="AZ">Arizona</option>
                              <option value="AR">Arkansas</option>
                              <option value="CA">California</option>
                              <option value="CO">Colorado</option>
                              <option value="CT">Connecticut</option>
                              <option value="DE">Delaware</option>
                              <option value="DC">District Of Columbia</option>
                              <option value="FL">Florida</option>
                              <option value="GA">Georgia</option>
                              <option value="HI">Hawaii</option>
                              <option value="ID">Idaho</option>
                              <option value="IL">Illinois</option>
                              <option value="IN">Indiana</option>
                              <option value="IA">Iowa</option>
                              <option value="KS">Kansas</option>
                              <option value="KY">Kentucky</option>
                              <option value="LA">Louisiana</option>
                              <option value="ME">Maine</option>
                              <option value="MD">Maryland</option>
                              <option value="MA">Massachusetts</option>
                              <option value="MI">Michigan</option>
                              <option value="MN">Minnesota</option>
                              <option value="MS">Mississippi</option>
                              <option value="MO">Missouri</option>
                              <option value="MT">Montana</option>
                              <option value="NE">Nebraska</option>
                              <option value="NV">Nevada</option>
                              <option value="NH">New Hampshire</option>
                              <option value="NJ">New Jersey</option>
                              <option value="NM">New Mexico</option>
                              <option value="NY">New York</option>
                              <option value="NC">North Carolina</option>
                              <option value="ND">North Dakota</option>
                              <option value="OH">Ohio</option>
                              <option value="OK">Oklahoma</option>
                              <option value="OR">Oregon</option>
                              <option value="PA">Pennsylvania</option>
                              <option value="RI">Rhode Island</option>
                              <option value="SC">South Carolina</option>
                              <option value="SD">South Dakota</option>
                              <option value="TN">Tennessee</option>
                              <option value="TX">Texas</option>
                              <option value="UT">Utah</option>
                              <option value="VT">Vermont</option>
                              <option value="VA">Virginia</option>
                              <option value="WA">Washington</option>
                              <option value="WV">West Virginia</option>
                              <option value="WI">Wisconsin</option>
                              <option value="WY">Wyoming</option>
			                        <option value="AB">Alberta</option>
                              <option value="BC">British Columbia</option>
                              <option value="MB">Manitoba</option>
                              <option value="NB">New Brunswick</option>
                              <option value="NL">Newfoundland and Labrador</option>
                              <option value="NT">Northwest Territories</option>
                              <option value="NS">Nova Scotia</option>
                              <option value="NU">Nunavut</option>
                              <option value="ON">Ontario</option>
                              <option value="PE">Prince Edward Island</option>
                              <option value="QC">Quebec</option>
                              <option value="SK">Saskatchewan</option>
                              <option value="YT">Yukon</option>
              <!-- Add other states here -->
            </select>
          </div>
          <div class="field">
            <label for="DAK">ZIP</label>
            <input id="DAK" name="DAK" type="text" placeholder="ZIP/Postal Code" oninput="validateNumeric(this)">
            <div class="error-message" id="DAK-error"></div>
          </div>
          <div class="field">
            <label for="DCG">Country</label>
            <input id="DCG" name="DCG" type="text" value="USA" readonly>
          </div>
        </div>
      </div>
      <div class="field">
        <button type="button" class="ui button primary" onclick="generateBarcodeFromForm()">Generate Barcode</button>
        <button type="button" class="ui button secondary reset-button" onclick="resetForm()">Reset</button>
      </div>
    </form>
    <div class="ui segment">
      <canvas id="barcode"></canvas>
      <div class="download-container" onclick="download()">
        <i class="bordered circular download icon"></i>
        <span class="download-label">DOWNLOAD</span>
      </div>
    </div>
  </div>
  <button class="ui button mode-toggle" onclick="toggleMode()">
    <i class="moon icon"></i> Toggle Mode
  </button>
  <video autoplay muted loop id="background-video">
    <source src="./public/1.mp4" type="video/mp4">
  </video>
  <script>
    // Function to validate numeric fields
    function validateNumeric(input) {
      const value = input.value;
      const errorElement = document.getElementById(`${input.id}-error`);
      if (!/^\d*$/.test(value)) {
        errorElement.textContent = "Only numeric values are allowed.";
        input.value = value.replace(/\D/g, ""); // Remove non-numeric characters
      } else {
        errorElement.textContent = "";
      }
    }

    // Function to validate alphabetic fields
    function validateAlphabetic(input) {
      const value = input.value;
      const errorElement = document.getElementById(`${input.id}-error`);
      if (!/^[A-Za-z\s]*$/.test(value)) {
        errorElement.textContent = "Only alphabetic characters are allowed.";
        input.value = value.replace(/[^A-Za-z\s]/g, ""); // Remove non-alphabetic characters
      } else {
        errorElement.textContent = "";
      }
    }

    // Function to generate barcode from form inputs
    function generateBarcodeFromForm() {
      // Capture input values
      const daq = document.getElementById('DAQ').value;
      const dcf = document.getElementById('DCF').value;
      const dbd = document.getElementById('DBD').value;
      const dbb = document.getElementById('DBB').value;
      const dba = document.getElementById('DBA').value;
      const dac = document.getElementById('DAC').value;
      const dad = document.getElementById('DAD').value;
      const dcs = document.getElementById('DCS').value;
      const dau = document.getElementById('DAU').value;
      const dbc = document.getElementById('DBC').value;
      const day = document.getElementById('DAY').value;
      const dag = document.getElementById('DAG').value;
      const dai = document.getElementById('DAI').value;
      const daj = document.getElementById('DAJ').value;
      const dak = document.getElementById('DAK').value;
      const dcg = document.getElementById('DCG').value;

      // Validate required fields
      if (!daq || !dcf || !dbd || !dbb || !dba || !dac || !dcs || !dau || !dbc || !day || !dag || !dai || !daj || !dak || !dcg) {
        alert("Please fill in all required fields.");
        return;
      }

      // Format dates to MMDDYYYY
      const formatDate = (dateString) => {
        const date = new Date(dateString);
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const year = date.getFullYear();
        return `${month}${day}${year}`;
      };

      const formattedDBD = formatDate(dbd);
      const formattedDBB = formatDate(dbb);
      const formattedDBA = formatDate(dba);

      // Format the AAMVA data string
      const aamvaData = `@
ANSI 636020090001DL00310242DLDAQ${daq}
DCF${dcf}
DBD${formattedDBD}
DBB${formattedDBB}
DBA${formattedDBA}
DAC${dac}
DDFN
DAD${dad}
DDGN
DCS${dcs}
DDEN
DAU${dau}
DBC${dbc}
DAY${day}
DAG${dag}
DAI${dai}
DAJ${daj}
DAK${dak}
DCG${dcg}
DDAF
DCJCODL_0_082418_04105
DCLU`;

      // Log the AAMVA data for debugging
      console.log("Generated AAMVA Data:\n", aamvaData);

      // Generate the barcode
      const canvas = document.getElementById('barcode');
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
      PDF417.draw(aamvaData, canvas, 3, 1); // Generate the barcode
    }

    // Function to reset the form
    function resetForm() {
      document.getElementById('aamva').reset();
      const canvas = document.getElementById('barcode');
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    }

    // Function to download the barcode
    function download() {
      const canvas = document.getElementById('barcode');
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'barcode.png';
      link.click();
    }

    // Function to toggle light/dark mode
    function toggleMode() {
      const body = document.body;
      body.classList.toggle('dark-mode');
      body.classList.toggle('light-mode');
    }
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script src="./lib/libbcmath.js"></script>
  <script src="./lib/bcmath.js"></script>
  <script src="./lib/pdf417.js"></script>
</body>
</html>
