{{>header}}
<style>
    .is-invalid {
        border: 2px solid red;
    }
</style>
<title>Support</title>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline mt-3">
                    <div class="card-header" style="background-color: white; color:Black;">
                        <h4><b style="background-color: white; color:#4B0F77;">Support</b></h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div id="privacy-policy-three" class="privacy-policy">
                            <form method="post" action="/admin/v1/updatesettings/{{allSettings._id}}">
                                <input type="hidden" name="redirection" value="support">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Email</label>
                                            <input type="text" class="form-control" name="email" id="emailInput"
                                                pattern="^[a-zA-Z0-9]+[a-zA-Z0-9._%+-]*@(?:(?!-)[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9](?<!-)\.)+[a-zA-Z]{2,}$"
                                                value="{{allSettings.email}}" required>
                                            <small id="emailError" style="color: red; display: none;">
                                                Please enter a valid email.
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Phone</label>
                                            <input type="text" class="form-control" name="phone" pattern="^[6-9]\d{9}$"
                                                title="Phone number must be exactly 10 digits and start with 6, 7, 8, or 9.  oninput="
                                                this.value=this.value.replace(/[^0-9]/g, '' ) minlength="10"
                                                maxlength="10" value="{{allSettings.phone}}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tax" class="col-form-label">Whatsapp</label>
                                            <input type="text" class="form-control" name="whatsAppPhone"
                                                pattern="^[6-9]\d{9}$"
                                                title="Phone number must be exactly 10 digits and start with 6, 7, 8, or 9."
                                                oninput=this.value=this.value.replace(/[^0-9]/g, '' ) minlength="10"
                                                maxlength="10" value="{{allSettings.whatsAppPhone}}">
                                        </div>
                                    </div>
                                    {{!-- <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tax" class="col-form-label">Preferred Ratings</label>
                                            <input type="number" class="form-control" name="rating" min="1" max="5"
                                                value="{{allSettings.rating}}">
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="form-group d-flex justify-content-center">
                                    <button class="btn btn-lg btn-info" type="submit">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
  const emailInput = document.getElementById('emailInput');
  const emailError = document.getElementById('emailError');

  // Updated email regex
  const emailRegex = /^[a-zA-Z0-9]+[a-zA-Z0-9._%+-]*@(?:(?!-)[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9](?<!-)\.)+[a-zA-Z]{2,}$/;

  function validateEmailField() {
    const emailValue = emailInput.value.trim();

    if (emailValue === '' || !emailRegex.test(emailValue)) {
      emailError.style.display = 'block';
      emailInput.classList.add('is-invalid');
      emailInput.setCustomValidity('Invalid email format');
    } else {
      emailError.style.display = 'none';
      emailInput.classList.remove('is-invalid');
      emailInput.setCustomValidity('');
    }
  }

  emailInput.addEventListener('input', validateEmailField);
  emailInput.addEventListener('blur', validateEmailField);

  // Optional: prevent form submission if invalid
  document.querySelector('form').addEventListener('submit', function (e) {
    validateEmailField();
    if (!emailInput.checkValidity()) {
      e.preventDefault();
    }
  });
</script>



{{>footer}}