<?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>DGRC-जिला जन शिकायत केंद्र</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,textarea{
      margin-top: 15px;
    }
    textarea{
      height: 140px;
    }
  </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">CITIZEN FEEDBACK</h3>
      <form>
        <div class="row">
          <div class="col-md-6">
            <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-6">
            <input type="text" name="u2" class="form-control" id="u2" placeholder="Last Name">
            <span id="u2-error" class="text-danger"></span>
          </div>
          <div class="col-md-12">
            <textarea placeholder="message" id="u3" name="u3" class="form-control"></textarea>
            <span id="u3-error" class="text-danger"></span>
          </div>
          <div class="col-md-12">
            <input type="submit" id="feedback" 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(){
        $('#feedback').click(function(e){
          e.preventDefault();
          $('#u1-error').html("");
          $('#u2-error').html("");
          $('#u3-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 ($('#u2').val()=='') {
            $('#u2-error').html("*Last name is required");
            return false;
          }
          else if ($('#u2').val().length < 3) {
            $('#u2-error').html("*Last name must be 3 or more character");
            return false;
          }
          else if (!isNaN($('#u2').val())) {
            $('#u2-error').html("*Number is not allowed");
            return false;
          }
          else if ($('#u3').val()=='') {
            $('#u3-error').html("Message is required")
            return false;
          }
          else if ($('#u3').val().length < 3) {
            $('#u3-error').html("Required must be 3 or more character");
            return false;
          }
          
          else{
            $.ajax({
              url:'feedback_data.php',
              method:'post',
              data:$('form').serialize(),
              dataType:"text",
              success:function(strMessage){
                alert(strMessage);
              }
            });
          }

        });
      });
    </script>
</body>