{% extends 'base.html' %}{% load static %} {% block styleArea %}{% endblock %} {% block bodyArea %}
<!-- About Us Section -->
<div class="container my-5">
    <h2 class="text-center mb-4">About Us</h2>
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <p>Welcome to Zirupay, your ultimate destination for seamless utility and mobile recharge services.
                At Zirupay, we pride ourselves on offering instant recharge solutions coupled with unmatched benefits that prioritize your convenience and satisfaction.</p>
        </div>
    </div>
</div>

<!-- Contact Us Section -->
<div class="container my-5">
  <h2 class="text-center mb-4">Contact Us</h2>
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <form>
        <div class="mb-3">
          <label for="txtName" class="form-label">Name</label>
          <input type="text" class="form-control" id="txtName" required />
        </div>
        <div class="mb-3">
          <label for="txtPhone" class="form-label">Mobile No</label>
          <input type="text" inputmode="numeric" class="form-control" id="txtPhone" required />
        </div>
        <div class="mb-3">
          <label for="txtEmail" class="form-label">Email</label>
          <input type="email" class="form-control" id="txtEmail" required />
        </div>
        <div class="mb-3">
          <label for="txtMessage" class="form-label">Message</label>
          <textarea class="form-control" id="txtMessage" rows="5" required></textarea>
        </div>
        <button type="button" onclick="fn_save()" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>


<!-- Download Our App Section -->
<div class="container my-5">
    <h2 class="text-center mb-4">Download Our App</h2>
    <div class="row text-center">
        <div class="col-md-6 offset-md-3">
            <p>Get our app from the Play Store for a better experience.</p>
            <a href="javascript:fn_Download()" class="btn btn-primary">Download from Play Store</a>
        </div>
    </div>
</div>

{% endblock %} {% block scriptArea %}
<script>
  function fn_Download(){
    alert('Coming soon')
  }
  function fn_save() {
    let name = $("#txtName").val();
    let phone = $("#txtPhone").val();
    let email = $("#txtEmail").val();
    let message = $("#txtMessage").val();

    if (name == "" || name == undefined) {
      $("#txtName").focus();
      $("#txtName").attr("style", "border-color:red;");
    } else if (email == "" || email == undefined) {
      $("#txtEmail").focus();
      $("#txtEmail").attr("style", "border-color:red;");
    }  else if (phone == "" || phone == undefined) {
      $("#txtPhone").focus();
      $("#txtPhone").attr("style", "border-color:red;");
    } else if (message == "" || message == undefined) {
      $("#txtMessage").focus();
      $("#txtMessage").attr("style", "border-color:red;");
    } else {
      let text = `Greetings..!! Zirupay
                This is ${name}, my contact no. is ${phone} and the mailing address is ${email}.

                Kindly provide me with the further details.
                ${message}
                Thank you`;
      window.open(`https://wa.me/+919332614673?text=${text}`);
    }
  }
</script>
{% endblock %}
