<?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">
  <link rel="stylesheet" type="text/css" href="css/registration-form.css">
  <style type="text/css">
  	#image-data input[type="checkbox"]{
  		width: 15px;
  		height: auto;
  	}
  </style>
</head>
<body>
  <!--====Start Header====-->
  <?php include 'templets/header.php'; ?>
  <!--====End Header====-->
<!--===Registration Form====--->
<div class="container col-lg-10 m-auto">
         <div class="product-content">
         	<h3 class="text-center">Grievance Registration Form</h3>
			<div class="progress">
				<div class="progress-bar" role="progressbar" id="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Complainant Information</div>
			</div>
			<form method="post">
				<div id="basic-data">
					<div class="row">
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Mobile Number*</label>
								<input type="text" name="t1" id="t1" >
								<span id="t1-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Alternate Mobile Number</label>
								<input type="text" name="t4" id="t4">
								<span id="t4-error" class="text-danger"></span>
							</div>
							<div class="col-md-4 col-lg-4 col-sm-12 col-12">
								<label>First Name*</label>
								<input type="text" name="ta2" id="ta2" >
								<span id="ta2-error" class="text-danger"></span>
							</div>
							<div class="col-md-4 col-lg-4 col-sm-12 col-12">
								<label>Middle Name</label>
								<input type="text" name="tb2" id="tb2" >
								<span id="tb2-error" class="text-danger"></span>
							</div>
							<div class="col-md-4 col-lg-4 col-sm-12 col-12">
								<label>Last Name*</label>
								<input type="text" name="tc2" id="tc2" >
								<span id="tc2-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Father’s/Husband/Mother’s Name</label>
								<input type="text" name="t3" id="t3">
								<span id="t3-error" class="text-danger"></span>
							</div>
							
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Email ID</label>
								<input type="email" name="t5" id="t5">
								<span id="t5-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Gender*</label>
								<select name="t6" id="t6">
									<option value="Male">Male</option>
									<option value="Female">Female</option>
									<option value="Other">Other</option>
								</select>
								<span id="t6-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Aadhar Number</label>
								<input type="text" name="t7" id="t7">
								<span id="t7-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>District*</label>
								<select name="t8" id="t8">
									<option value="Male">Ranchi</option>
								</select>
								<span id="t8-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Occupation</label>
								<input type="text" name="t9" id="t9">
								<span id="t9-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Area*</label>
								<select name="t10" id="t10">
									<option></option>
									<option value="Urban">Urban</option>
									<option value="Rural">Rural</option>
								</select>
								<span id="t10-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Municipality*</label>
								<select name="t11" id="t11">
									<option></option>
								</select>
								<span id="t11-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Block*</label>
								<select name="t12" id="t12">
									<option></option>
									<?php
										$mode_display="SELECT * FROM blocks";
										$mode_query=mysqli_query($con,$mode_display);
										while ($row=mysqli_fetch_assoc($mode_query)) {
									?>
										<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
									<?php
										}

									?>
								</select>
								<span id="t12-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Panchayat*</label>
								<select name="t13" id="t13">
									<option></option>
									<?php
										$mode_display="SELECT * FROM panchayat";
										$mode_query=mysqli_query($con,$mode_display);
										while ($row=mysqli_fetch_assoc($mode_query)) {
									?>
										<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
									<?php
										}

									?>
								</select>
								<span id="t13-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Village*</label>
								<select name="vill" id="vill">
									<option></option>
								</select>
								<span id="vill-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Ward*</label>
								<select name="t15" id="t15">
									<option></option>
								</select>
								<span id="t15-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Land Mark / Tolla</label>
								<input type="text" name="t16" id="t16">
								<span id="t16-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Police Station</label>
								<select name="t17" id="t17">
									<option></option>
									<option value="mithun">PS-1</option>
								</select>
								<span id="t17-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Vidhan Sabha</label>
								<select name="t18" id="t18">
									<option></option>
									<option value="mithun">VS-1</option>
								</select>
								<span id="t18-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Lok Sabha</label>
								<select name="t19" id="t19">
									<option></option>
									<option value="mithun">LS-1</option>
								</select>
								<span id="t19-error" class="text-danger"></span>
							</div>
						<div class="col-md-6 col-lg-6 col-sm-12 col-12">
							<button type="button" id="next1">Next</button>
						</div>
						
					</div>
				</div>



				<div id="image-data">
					<div class="row">
						<div class="col-md-12 col-lg-12 col-sm-12 col-12">
								<input type="checkbox" name="grievance-data" id="grievance-data">
								<span>If same as complainant location, click on Yes</span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Area*</label>
								<select name="c1" id="c1">
									<option></option>
									<option value="Urban">Urban</option>
									<option value="Rural">Rural</option>
								</select>
								<span id="c1-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Municipality*</label>
								<input type="text" name="c2" id="c2">
								<span id="c2-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Block*</label>
								<select name="c3" id="c3">
									<option></option>
									<?php
										$mode_display="SELECT * FROM blocks";
										$mode_query=mysqli_query($con,$mode_display);
										while ($row=mysqli_fetch_assoc($mode_query)) {
									?>
										<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
									<?php
										}

									?>
								</select>
								<span id="c3-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Panchayat*</label>
								<select name="c4" id="c4">
									<option></option>
									<?php
										$mode_display="SELECT * FROM panchayat";
										$mode_query=mysqli_query($con,$mode_display);
										while ($row=mysqli_fetch_assoc($mode_query)) {
									?>
										<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
									<?php
										}

									?>
								</select>
								<span id="c4-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Village*</label>
								<input type="text" name="c5" id="c5">
								<span id="c5-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Ward*</label>
								<input type="text" name="c6" id="c6">
								<span id="c6-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Land Mark / Tolla</label>
								<input type="text" name="c7" id="c7">
								<span id="c7-error" class="text-danger"></span>
							</div>
							
							<div class="col-md-12 col-lg-12 col-sm-12 col-12">
								<label>Grievance Description*</label>
								<textarea name="t22" id="t22"></textarea>
								<span style="float: right;" class="text-danger">max-1000 words</span>
								<span id="t22-error" class="text-danger"></span>
							</div>
							<div class="col-md-6 col-lg-6 col-sm-12 col-12">
								<label>Evidence/Supporting Document*</label>
								<input type="file" name="t23" id="t23">
								<span id="t23-error" class="text-danger"></span>
							</div>
						<div class="col-md-6 col-lg-6 col-sm-12 col-12">
							<button type="button" id="previous1" class="previous-btn">Previous</button>
							<button type="button" id="Submit-form">Submit</button>
						</div>
						<div class="col-md-6 col-lg-6 col-sm-12 col-12">

						</div>
						
					</div>
				</div>
			</form>
         </div>
     </div>	

     <!--=====End Registration form area===-->

<!--=====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 src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/grievance-validation.js"></script>
    <script type="text/javascript" src="js/grievance-data.js"></script>
    <script type="text/javascript">

    </script>
  </body>
</html>
