<?php
include 'connection.php';

?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>जिला लोक शिकायत केंद्र</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <style type="text/css">
    input{
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <!--====Start Header====-->
  <?php include 'templets/header.php'; ?>
  <!--====End Header====-->
    <div class="container col-lg-8 m-auto pt-5 pb-5">
      <h3 class="text-center">USER REGISTRATION</h3>
      <form>
        <div class="row">
          <div class="col-md-4">
            <input type="text" name="u1" class="form-control" id="u1" placeholder="First Name">
            <span id="u1-error" class="text-danger"></span>
          </div>
          <div class="col-md-4">
            <input type="text" name="u2" class="form-control" id="u2" placeholder="Middle Name">
            <span id="u2-error" class="text-danger"></span>
          </div>
          <div class="col-md-4">
            <input type="text" name="u3" class="form-control" id="u3" placeholder="Last Name">
            <span id="u3-error" class="text-danger"></span>
          </div>
          <div class="col-md-12">
            <input type="text" name="u4" class="form-control" id="u4" placeholder="Phone Number">
            <span id="u4-error" class="text-danger"></span>
          </div>
          <div class="col-md-12">
            <input type="email" name="u5" class="form-control" id="u5" placeholder="Email Address">
            <span id="u5-error" class="text-danger"></span>
          </div>
          <div class="col-md-12">
            <input type="password" name="u6" class="form-control" id="u6" placeholder="Password">
            <span id="u6-error" class="text-danger"></span>
          </div>
          <div class="col-md-12">
            <input type="submit" id="user-register" class="form-control btn btn-success" value="Register">
          </div>
        </div>
      </form>
    </div>

  <!--=====End Contact area===-->
  <!---=====Footer Area Start=========-->
    <?php include 'templets/footer.php'; ?>

    <!---=====Footer Area End=========-->


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#user-register').click(function(e){
          e.preventDefault();
          $('#u1-error').html("");
          $('#u3-error').html("");
          $('#u4-error').html("");
          $('#u5-error').html("");
          $('#u6-error').html("");
          if ($('#u1').val()=='') {
            $('#u1-error').html("*first name is required");
            return false;
          }
          else if ($('#u1').val().length < 3) {
            $('#u1-error').html("First name must be 3 or more character");
            return false;
          }
          else if (!isNaN($('#u1').val())) {
            $('#u1-error').html("*Number is not allowed");
            return false;
          }
          else if ($('#u3').val()=='') {
            $('#u3-error').html("*Last name is required");
            return false;
          }
          else if ($('#u3').val().length < 3) {
            $('#u3-error').html("Last name must be 3 or more character");
            return false;
          }
          else if (!isNaN($('#u3').val())) {
            $('#u3-error').html("*Number is not allowed");
            return false;
          }
          else if ($('#u4').val()=='') {
            $('#u4-error').html("Phone no. is required")
            return false;
          }
          else if (isNaN($('#u4').val())) {
            $('#u4-error').html("*only Number are allowed");
            return false;
          }
          else if ($('#u4').val().length!=10) {
            $('#u4-error').html("*Phone no. must be of 10 digits");
            return false;
          }
          if ($('#u5').val()=='') {
            $('#u5-error').html('E-mail is required');
            return false;
          }
          else if (!validateEmail($('#u5').val())) {
            $('#u5-error').html("Invalid Email");
            return false();
          }
          else  if ($('#u6').val()=='') {
            $('#u6-error').html("password is required");
            return false;
          }
          else  if ($('#u6').val().length < 8) {
            $('#u6-error').html("password must of 8 digit");
            return false;
          }
          else{
            $.ajax({
              url:'user_data.php',
              method:'post',
              data:$('form').serialize(),
              dataType:"text",
              success:function(strMessage){
                alert(strMessage);
              }
            });
          }


          function validateEmail($email){
            var emailReg=/^([a-zA-Z0-9_\.\_\+])+\@(([a-zA-Z0-9])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return emailReg.test($email);
          }
        });
      });
    </script>
</body>