<?php include('session.php') ?>
<?php include('upload.php') ?>
<?php 
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
$email = $_SESSION['login_user'];

if($_SERVER["REQUEST_METHOD"] == "POST") {
    $post_lname = mysqli_real_escape_string($db,$_POST['lname']);
    $post_fname = mysqli_real_escape_string($db,$_POST['fname']);
    $post_middle_in = mysqli_real_escape_string($db,$_POST['middle_in']);
    $contact = mysqli_real_escape_string($db,$_POST['contact']);

    $sql_updt1 = "UPDATE members SET `Last_Name` ='$post_lname', `First_Name`='$post_fname', `Middle_Initial`='$post_middle_in', `Contact_Number`='$contact' WHERE `Email`='$email'";
    // update query
    $result_updt1 = mysqli_query($db, $sql_updt1);
    if($result_updt1){
        echo '<script>alert("You have successfully updated your profile!")</script>';
    }
}

$sql5 = "SELECT * FROM members WHERE `Email` = '$email'"; 
$result5 = mysqli_query($db,$sql5);
while($row5 = $result5->fetch_array()){
    $lname = $row5['Last_Name'];
    $fname = $row5['First_Name'];
    $m_initial = $row5['Middle_Initial'];
    $contact = $row5['Contact_Number'];
    $profile_pic = $row5['Profile_Picture'];
}

?>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- SEO Meta Tags -->
      <meta name="description" content="Tivo is a HTML landing page template built with Bootstrap to help you crate engaging presentations for SaaS apps and convert visitors into users.">
      <meta name="author" content="Inovatik">
      <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
      <meta property="og:site_name" content="" />
      <!-- website name -->
      <meta property="og:site" content="" />
      <!-- website link -->
      <meta property="og:title" content=""/>
      <!-- title shown in the actual shared post -->
      <meta property="og:description" content="" />
      <!-- description shown in the actual shared post -->
      <meta property="og:image" content="" />
      <!-- image link, make sure it's jpg -->
      <meta property="og:url" content="" />
      <!-- where do you want your post to link to -->
      <meta property="og:type" content="article" />
      <!-- Website Title -->
      <title>My Profile </title>
      <!-- Styles -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext" rel="stylesheet">
      <link href="css/bootstrap.css" rel="stylesheet">
      <link href="css/fontawesome-all.css" rel="stylesheet">
      <link href="css/swiper.css" rel="stylesheet">
      <link href="css/magnific-popup.css" rel="stylesheet">
      <link href="css/sstyle.css" rel="stylesheet">
      <link href="css/pme_style.css" rel="stylesheet">
      <link href="css/mystyle.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <!-- Favicon  -->
      <link rel="icon" href="images/logo_2.png">

      <link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="../fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="../vendor/animate/animate.css">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="../vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="../vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="../vendor/select2/select2.min.css">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="../vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="../util.css">
	<link rel="stylesheet" type="text/css" href="../main.css">
<!--===============================================================================================-->
   </head>
   <style>
      @font-face {
      font-family:"Berkshire Swash";
      src: url("css/berkshireswash-regular.ttf") format("truetype");
      }
   </style>
<body style="background-image: url('images/blue_bg.jfif'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">
      <!-- Preloader -->
      <!--<div class="spinner-wrapper">-->
      <!--   <div class="spinner">-->
      <!--      <div class="bounce1"></div>-->
      <!--      <div class="bounce2"></div>-->
      <!--      <div class="bounce3"></div>-->
      <!--   </div>-->
      <!--</div>-->
      <!-- end of preloader -->
      <!-- Navigation -->
      <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top" style="background-color: 	#892a25; ">
         <div class="container">
            <!-- Text Logo - Use this if you don't have a graphic logo -->
            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Tivo</a> -->
            <!-- Image Logo -->
            <a class="navbar-brand logo-image" href="home.php"><img src="images/logo_1.jpg" alt="alternative" style="border-radius: 50%; height:50px; width: 50px; "></a>
            <!-- Mobile Menu Toggle Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-awesome fas fa-bars"></span>
            <span class="navbar-toggler-awesome fas fa-times"></span>
            </button>
            <!-- end of mobile menu toggle button -->
            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
               <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="home.php">HOME <span class="sr-only">(current)</span></a>
                  </li>

                                    <li class="nav-item">
                     <a class="nav-link page-scroll" href="water-consumption.php">WATER CONSUMPTION</a>
                  </li>
                  

                  <!-- <li class="nav-item">
                        <a class="nav-link page-scroll" href="files.php"><span class="item-text">REQUIREMENTS</span></a>
                  </li> -->
                  <!-- end of dropdown menu -->
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="water-supply-schedule.php">WATER SUPPLU SCHEDULE</a>                  
                  </li>
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="notification_list.php">NOTIFICATIONS</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="user-complaint.php">COMPLAINTS</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link page-scroll active" href="user-account.php">MY PROFILE</a>
                  </li>
               </ul>
               <span class="nav-item">
               <a class="btn-outline-sm" href="logout.php">LOG OUT</a>
               </span>
            </div>
         </div>
         <!-- end of container -->
      </nav>
        <br><br><br>

        <div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100" style="padding: 20px; background-color: #f4f4f4;">
				<form class="login100-form validate-form" action="" method="POST" enctype="multipart/form-data" style="background-color: #f4f4f4; padding:20px; border-radius: 10px;">
				<br><br>
				<center><h3 style="font-weight: bold;">MY PROFILE</h3></center>
		        <br>

              <center><img src="../profile_pic/<?php echo $profile_pic ?>" alt="" style="  border-radius: 50%; height:190px; width:210px;"></center>

					<div class="wrap-input100 validate-input m-b-23" data-validate = "Lastname is required" >
						<span class="label-input100">Lastname</span>
						<input class="input100" type="text" name="lname" value="<?php echo $lname ?>" placeholder="Type your last name" maxlength = "50" required>
						<span class="focus-input100"></span>
					</div>

                    <div class="wrap-input100 validate-input m-b-23" data-validate = "First Name is required">
						<span class="label-input100">First Name</span>
						<input class="input100" type="text" name="fname" value="<?php echo $fname ?>" placeholder="Type your first name" maxlength = "50" required>
						<span class="focus-input100"></span>
					</div>

                    <div class="wrap-input100 m-b-23">
						<span class="label-input100">Middle Initial</span>
						<input class="input100" type="text" name="middle_in" value="<?php echo $m_initial ?>" placeholder="Type your middle initial" maxlength = "1" required>
						<span class="focus-input100"></span>
					</div>

                    <div class="wrap-input100 m-b-23">
						<span class="label-input100">Email</span>
						<input class="input100" type="email" name="email" value="<?php echo $_SESSION['login_user']; ?>" readonly>
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>
					
               <div class="wrap-input100 validate-input m-b-23" data-validate = "First Name is required">
						<span class="label-input100">Contact Number</span>
						<input class="input100" type="text" name="contact" value="<?php echo $contact ?>" placeholder="Type your first name" maxlength = "11" required>
						<span class="focus-input100"></span>
					</div>
               
					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button class="login100-form-btn" style="background-color: #242e42;">
								UPDATE
							</button>
						</div>
					</div>
                    <center>
				<!-- <p style="font-size: 16px; font-weight: ;">or</p>
				<a href="Change-Password/forgot-password.php" style="background-color: ; width: 100%; padding: 12px; border-radius: 25px; color: ; font-size: 16px;">Change Password</a></center> -->
				</form>
			</div>
		</div>
	</div>
     
     
      <!-- Scripts -->
      <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
      <script src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
      <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
      <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
      <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
      <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
      <script src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
      <script src="js/scripts.js"></script> <!-- Custom scripts -->
   </body>
</html>