<!DOCTYPE html>
<html
  lang="en"
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Guest | Add Visit Record</title>
    <link href="/output.css" rel="stylesheet" />
    <link
      href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css"
      rel="stylesheet"
    />
      <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body class="bg-gray-900">
    <!--handeling navbar-->

    <!--user logged in ?-->
    

    <!-- Not logged in OR not verified -->
    <div>
      <nav
  class="bg-white border-gray-200 dark:bg-gray-900 fixed w-full top-0 left-0 right-0"
>
  <div
    class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
  >
    <!-- Existing logo and links -->
    <a href="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
      <img src="/images/1630498303816.jpeg" class="h-8" alt="Logo" />
      <span
        class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
        >CRM</span
      >
    </a>
    <div
      class="flex justify-around md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse gap-2"
    >
      <a
        href="/login"
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >Log In</a
      >
      <a
        href="/register"
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >Sign Up</a
      >
    </div>
    <!-- Existing menu items -->
    <div
      class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
      id="navbar-cta"
    >
      <ul
        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
      ></ul>
    </div>
  </div>
</nav>
    </div>

    <div class="pt-20">
      <div id="content">
      
      

      

      <div class="flex justify-center items-center min-h-screen p-4">
        <div class="w-full max-w-lg p-2">
          <div class="card block p-6 mb-20 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
              <div
  class="flex items-center p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-700 dark:text-blue-400"
  role="alert"
>
  <svg
    class="shrink-0 inline w-4 h-4 me-3"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    viewBox="0 0 20 20"
  >
    <path
      d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
    />
  </svg>
  <span class="sr-only">Info</span>
  <div>
    <span class="font-medium">An unexpected error occurred. Please try again.</span>
  </div>
</div>
              
              <h1 class="text-2xl font-semibold text-white">
                Add Visit Record
              </h1>

              <form
                action="/user/visit/add"
                method="post"
                class="mt-5"
                novalidate
              >
                <div class="mb-3">
                  <!--Scout Name-->
                  <div>
                    <label
                      for="scoutName"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                      >Scout Name *</label
                    >
                    <input
                      type="text"
                      id="scoutName"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="John Nolan" name="scoutName" value=""
                    />
                    
                  </div>
                  
                  <!--Place of Visit-->
                  <div>
                    <label
                      for="placeOfVisit"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                      >Place of Visit *</label
                    >
                    <input
                      type="text"
                      id="placeOfVisit"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Rohini" name="placeOfVisit" value=""
                    />
                    
                  </div>
                  
                  <!--Company Name-->
                  <div>
                    <label
                      for="companyName"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                      >Company Name *</label
                    >
                    <input
                      type="text"
                      id="companyName"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Accounts Bureau" name="companyName" value=""
                    />
                    
                  </div>

                    <div>
                        <label
                                for="email"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                        >Email</label
                        >
                        <input
                                type="text"
                                id="email"
                                class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                placeholder="ab@gmail.com" name="email" value=""
                        />
                        
                    </div>
                  
                  <!--New Or Revisit - Convert to Select-->
                  <div>
                    <label
                      for="newOrRevisit"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                      >New Or Revisit *</label
                    >
                    <select
                      id="newOrRevisit"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="newOrRevisit"
                    >
                      <option value="">-- Select --</option>
                      <option value="New">New</option>
                      <option value="Revisit">Revisit</option>
                    </select>
                    
                  </div>
                  
                  <!--Contact Person Name-->
                  <div>
                    <label
                      for="contactPersonName"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                      >Contact Person Name *</label
                    >
                    <input
                      type="text"
                      id="contactPersonName"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Munish Gagneja" name="contactPersonName" value=""
                    />
                    
                  </div>
                  
                  <!--Contact Number-->
                  <div>
                    <label
                      for="contactNumber"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                      >Contact Person Number *</label
                    >
                    <input
                      type="text"
                      id="contactNumber"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="9999999999"
                      pattern="[0-9]{10}"
                      title="Please enter exactly 10 digits" name="contactNumber" value=""
                    />
                    
                  </div>

                  <!--Nature of Business-->
<!--                  <div>-->
<!--                    <label-->
<!--                      for="natureOfBusiness"-->
<!--                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"-->
<!--                      >Nature of Business *</label-->
<!--                    >-->
<!--                    <input-->
<!--                      type="text"-->
<!--                      id="natureOfBusiness"-->
<!--                      th:field="*{natureOfBusiness}"-->
<!--                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
<!--                      placeholder="Trading, Manufacturing, etc."-->
<!--                    />-->
<!--                    <p-->
<!--                      class="text-orange-600 py-2 px-1 text-xs"-->
<!--                      th:if="${#fields.hasErrors('natureOfBusiness')}"-->
<!--                      th:errors="*{natureOfBusiness}"-->
<!--                    ></p>-->
<!--                  </div>-->

                    <div>
                        <label
                                for="natureOfBusiness"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                        >
                            Nature of Business
                        </label>

                        <!-- Dropdown -->
                        <select
                                id="natureOfBusiness"
                                class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
                            focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
                            dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                onchange="handleNatureOfBusinessChange(this)" name="natureOfBusiness"
                        >
                            <option value="">-- Select Nature of Business --</option>
                            <option value="Manufacture">Manufacture</option>
                            <option value="Retailer">Retailer</option>
                            <option value="Wholesaler">Wholesaler</option>
                            <option value="CA">CA</option>
                            <option value="Advocate">Advocate</option>
                            <option value="Proprietor">Proprietor</option>
                            <option value="TaxPartner">Tax Partner</option>
                            <option value="PvtLtd">Pvt Ltd</option>
                            <option value="Other">Other</option>
                        </select>
                        <input
                                type="text"
                                id="otherBusinessInput"
                                placeholder="Please specify"
                                class="hidden mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
          focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
          dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
          dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="otherNatureOfBusiness" value=""
                        />
                    </div>

                  <!--Checkboxes-->
                  <div class="grid grid-cols-2 gap-4 mb-4"> 
                    <div class="flex items-center">
                      <input
                        type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        id="computer" name="computer" value="true"
                      /><input type="hidden" name="_computer" value="on"/>
                      <label
                        for="computer"
                        class="ms-2 text-sm font-medium text-white"
                        >Computer</label
                      >
                    </div>

                    <div class="flex items-center">
                      <input
                        type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        id="tally" name="tally" value="true"
                      /><input type="hidden" name="_tally" value="on"/>
                      <label
                        for="tally"
                        class="ms-2 text-sm font-medium text-white"
                        >Tally</label
                      >
                    </div>

                    <div class="flex items-center">
                      <input
                        type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        id="revisitRequired"
                        onchange="handleDateOfRevisit(this)" name="revisitRequired" value="true"
                      /><input type="hidden" name="_revisitRequired" value="on"/>
                      <label
                        for="revisitRequired"
                        class="ms-2 text-sm font-medium text-white"
                      >Revisit Required</label>
                    </div>

                    <input
                      type="date"
                      id="dateOfRevisit"
                      class="hidden mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
                            focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 
                            dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="dateOfRevisit" value=""
                    />

                    <div class="flex items-center">
                      <input
                        type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        id="agreedForDemo" name="agreedForDemo" value="true"
                      /><input type="hidden" name="_agreedForDemo" value="on"/>
                      <label
                        for="agreedForDemo"
                        class="ms-2 text-sm font-medium text-white"
                        >Agreed For Demo</label
                      >
                    </div>
                  </div>

                    <div>
                        <label
                                for="natureOfBusiness"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                        >
                            Other Softwares
                        </label>

                        <!-- Dropdown -->
                        <select
                                id="otherSoftwares"
                                class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
                            focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
                            dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="otherSoftwares"
                        >
                            <option value="">-- Other Softwares --</option>
                            <option value="Busy">Busy</option>
                            <option value="Mark">Mark</option>
                            <option value="Vypar">Vypar</option>
                            <option value="Wave">Wave</option>
                        </select>

                  <!--Last Upgrade - REMOVE REQUIRED-->
                    <label
                            for="lastUpgrade"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >Last Upgrade</label
                    >
                    <input
                            type="date"
                            id="lastUpgrade"
                            onchange="handleLastUpgradeChange(this)"
                            class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
                            focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700
                            dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
                            dark:focus:ring-blue-500 dark:focus:border-blue-500" name="lastUpgrade" value=""
                    />

                    <!--Serial Number (Hidden initially)-->
                    <input
                            type="text"
                            id="serialNumberInput"
                            placeholder="Enter Serial Number"
                            class="hidden mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
                            focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
                            dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="serialNumber" value=""
                    />


                    <!--Opportunity - Convert to Select-->
                  <div>
                    <label
                      for="opportunity"
                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >
                      Opportunity
                    </label>

                    <!-- Dropdown -->
                    <select
                      id="opportunity"
                      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
                            focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 
                            dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      onchange="handleOpportunityChange(this)" name="opportunity"
                    >
                      <option value="">-- Select Opportunity --</option>
                      <option value="None">None</option>
                      <option value="New license">New license</option>
                      <option value="Upgrade">Upgrade</option>
                      <option value="TSS">TSS</option>
                      <option value="Service">Service</option>
                      <option value="Customization">Customization</option>
                      <option value="Other">Other</option>
                    </select>
                  </div>

                  <!-- Hidden input (shown only when 'Other' is selected) -->
                  <input
                    type="text"
                    id="otherOpportunityInput"
                    placeholder="Enter other opportunity"
                    class="hidden mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
                          focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 
                          dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 
                          dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="otherOpportunities" value=""
                  />

                  <!-- Dynamic Custom Fields -->
                  <div id="customFieldsContainer" class="mb-3"></div>

                  <!-- Add Field Button -->
                  <div class="mb-3">
                    <button
                      type="button"
                      class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"
                      onclick="addCustomField()"
                    >
                      + Add Custom Field
                    </button>
                  </div>

                  <div class="button-container text-center mt-5">
                    <button class="bg-green-700 hover:bg-green-800 text-white px-6 py-3 rounded-lg font-medium" type="submit">
                      Add Visit Record
                    </button>
                  </div>
                </div>
              </form>
        </div>
      </div>
    </div>

    <script>
      let fieldCount = 0;

      function addCustomField() {
          fieldCount++;
          const container = document.getElementById("customFieldsContainer");

          const fieldDiv = document.createElement("div");
          fieldDiv.classList.add("mb-3", "border", "p-3", "rounded-lg", "bg-gray-100");
          fieldDiv.setAttribute("data-field-id", fieldCount);

          fieldDiv.innerHTML = `
              <label class="block mb-2 text-sm font-medium text-gray-900">Custom Field Label</label>
              <input type="text" name="customLabels[]" placeholder="Enter field label (Other Opportunities)" class="mb-2 bg-gray-50 border border-gray-300 rounded-lg p-2.5 w-full"/>

              <label class="block mb-2 text-sm font-medium text-gray-900">Custom Field Value</label>
              <input type="text" name="customValues[]" placeholder="Enter field value" class="mb-2 bg-gray-50 border border-gray-300 rounded-lg p-2.5 w-full"/>

              <button type="button" class="bg-red-500 text-white px-2 py-1 rounded" onclick="removeCustomField(${fieldCount})">Remove</button>
          `;

          container.appendChild(fieldDiv);
      }

      function handleOpportunityChange(selectEl) {
          const otherInput = document.getElementById("otherOpportunityInput");

          if (selectEl.value === "Other") {
            otherInput.classList.remove("hidden");
            otherInput.focus();
          } else {
            otherInput.classList.add("hidden");
            otherInput.value = ""; // clear when not needed
          }
        }

      function handleNatureOfBusinessChange(selectEl) {
          const otherInput = document.getElementById("otherBusinessInput");

          if (selectEl.value === "Other") {
              otherInput.classList.remove("hidden");
              otherInput.focus();
          } else {
              otherInput.classList.add("hidden");
              otherInput.value = ""; // clear when not needed
          }
      }

        function handleDateOfRevisit(selectEl) {
          const dateInput = document.getElementById("dateOfRevisit");

          if (selectEl.checked) {  
            dateInput.classList.remove("hidden");
            dateInput.focus();
          } else {
            dateInput.classList.add("hidden");
            dateInput.value = ""; // clear when not needed
          }
        }

      function removeCustomField(id) {
          const fieldDiv = document.querySelector(`[data-field-id='${id}']`);
          if (fieldDiv) fieldDiv.remove();
      }

      function handleLastUpgradeChange(dateEl) {
          const serialInput = document.getElementById("serialNumberInput");

          if (dateEl.value) {  // If date selected
              serialInput.classList.remove("hidden");
              serialInput.focus();
          } else {  // If cleared
              serialInput.classList.add("hidden");
              serialInput.value = ""; // clear field
          }
      }
    </script>
  
    </div>


    <!-- flow-bite content -->
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
      let fieldCount = 0;

      function addCustomField() {
          fieldCount++;
          const container = document.getElementById("customFieldsContainer");

          const fieldDiv = document.createElement("div");
          fieldDiv.classList.add("mb-3", "border", "p-3", "rounded-lg", "bg-gray-100");
          fieldDiv.setAttribute("data-field-id", fieldCount);

          fieldDiv.innerHTML = `
              <label class="block mb-2 text-sm font-medium text-gray-900">Custom Field Label</label>
              <input type="text" name="customLabels[]" placeholder="Enter field label (Other Opportunities)" class="mb-2 bg-gray-50 border border-gray-300 rounded-lg p-2.5 w-full"/>

              <label class="block mb-2 text-sm font-medium text-gray-900">Custom Field Value</label>
              <input type="text" name="customValues[]" placeholder="Enter field value" class="mb-2 bg-gray-50 border border-gray-300 rounded-lg p-2.5 w-full"/>

              <button type="button" class="bg-red-500 text-white px-2 py-1 rounded" onclick="removeCustomField(${fieldCount})">Remove</button>
          `;

          container.appendChild(fieldDiv);
      }

      function handleOpportunityChange(selectEl) {
          const otherInput = document.getElementById("otherOpportunityInput");

          if (selectEl.value === "Other") {
            otherInput.classList.remove("hidden");
            otherInput.focus();
          } else {
            otherInput.classList.add("hidden");
            otherInput.value = ""; // clear when not needed
          }
        }

      function handleNatureOfBusinessChange(selectEl) {
          const otherInput = document.getElementById("otherBusinessInput");

          if (selectEl.value === "Other") {
              otherInput.classList.remove("hidden");
              otherInput.focus();
          } else {
              otherInput.classList.add("hidden");
              otherInput.value = ""; // clear when not needed
          }
      }

        function handleDateOfRevisit(selectEl) {
          const dateInput = document.getElementById("dateOfRevisit");

          if (selectEl.checked) {  
            dateInput.classList.remove("hidden");
            dateInput.focus();
          } else {
            dateInput.classList.add("hidden");
            dateInput.value = ""; // clear when not needed
          }
        }

      function removeCustomField(id) {
          const fieldDiv = document.querySelector(`[data-field-id='${id}']`);
          if (fieldDiv) fieldDiv.remove();
      }

      function handleLastUpgradeChange(dateEl) {
          const serialInput = document.getElementById("serialNumberInput");

          if (dateEl.value) {  // If date selected
              serialInput.classList.remove("hidden");
              serialInput.focus();
          } else {  // If cleared
              serialInput.classList.add("hidden");
              serialInput.value = ""; // clear field
          }
      }
    </script>
  </body>
</html>