$(document).ready(function () {
  let formHTML = `  <!-- pop up -->
    <!-- enquire-form pop up -->
    <div class="modal fade style" id="enquireModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class=" justify-content-center ">
            <!-- <h5 class="modal-title" id="itemTitle"> </h5> -->
            <button type="button" class="close" data-bs-dismiss="modal" style="color: black;" >
              <span >&times;</span>
            </button>
          </div>
          <div class="modal-body" id="myModal">
            <div class="contact-form-content">
              <h3 class="contact-page-title">Buy Now</h3>
              <div class="contact-form">
                <form id="contact-form" name="enquire_form" >
                  <div class="form-group">
                    <input type="text" placeholder="Your Name" name="name" id="usernames" onblur="submit_enquiry()" required />
                    <small id="usercheck" style="color: red;" >
                    *Username is missing
              </small>
                  </div>
                  <div class="form-group">
                    <input type="text" placeholder="Product" name="Title" id="itemTitle" disabled />
                  </div>
                  <div class="form-group">
                    <input type="email" placeholder="Email-Id" name="email" id="email" onblur="submit_enquiry()" required/>
                    <small id="emailvalid" class="form-text
                    text-muted invalid-feedback">
                        Your email must be a valid email
                  </small>
                  </div>
                  <div class="form-group">
                    <input type="phone" placeholder="Mobile No" name="phone" id="phone"  onblur="submit_enquiry()" required/>
                  </div>
                  
                  <div class="form-group">
                    <input type="text" placeholder="subject" name="subject" id="subject" required />
                  </div>
                  <div class="form-group">
                    <textarea name="contactMessage" placeholder="Your Message" class="pb-10" id="contactMessage" required></textarea>
                  </div>
                  <div class="form-group mb-0">
                    <button type="submit" value="submit" id="submitbtn" class="btn btn-dark btn--lg " name="submit" onclick="submit_enquiry()">
                      submit
                    </button>
                  </div>
                </form>
              </div>
              <!-- <p class="form-message mt-10"></p> -->
  
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- end popup -->`

  $("#enquire").html(formHTML);


  // Document is ready
  $(document).ready(function () {

    // Validate Username
    $('#usercheck').hide();
    let usernameError = true;
    $('#usernames').keyup(function () {
      validateUsername();
    });

    function validateUsername() {
      let usernameValue = $('#usernames').val();
      if (usernameValue.length == '') {
        $('#usercheck').show();
        usernameError = false;
        return false;
      } else if ((usernameValue.length < 3) ||
        (usernameValue.length > 10)) {
        $('#usercheck').show();
        $('#usercheck').html("*length of username must be between 3 and 10");
        usernameError = false;
        return false;
      } else {
        $('#usercheck').hide();
      }
    }

    // Validate Email
    const email =
      document.getElementById('email');
    email.addEventListener('blur', () => {
      let regex =
        /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
      let s = email.value;
      if (regex.test(s)) {
        email.classList.remove(
          'is-invalid');
        emailError = true;
      } else {
        email.classList.add(
          'is-invalid');
        emailError = false;
      }
    })

    // Submit button
    $('#submitbtn').click(function () {
      validateUsername();
      validateEmail();
      if ((usernameError == true) &&
        (passwordError == true) &&
        (emailError == true)) {
        return true;
      } else {
        return false;
      }
    });



  });


  function pop_up() {
    let title = $('.single-product-head').find('.title').text();
    //  $('#itemTitle').text(title);
    // console.log(title);
    $('#itemTitle').val(title);
  }

  function submit_enquiry() {
    // alert("awsdfa");
    if (enquire_form.name.value.length == 0) {
      document.getElementById('errName');
    }
    if (enquire_form.email.value.length == 0) {
      document.getElementById('errEmail');

    }
  }
  pop_up();
  submit_enquiry()
})