{% extends "base/main_base.html" %}

{% set active_page ='people' %}

{% block pagehead %}
<title>edit</title>
{% endblock %}

{% block content %}

<script type="text/javascript">
  $(function () {
    var error = document.getElementById("error");
    error.style.visibility = "hidden";

    $(".submit").click(function () {
      var id = document.getElementById("birthday");
      var enteredDate = new Date(id.value);
      var currentDate = new Date();

      if (enteredDate > currentDate) {
        error.innerHTML = 'Date of birth cannot be greater than current date.';
        error.style.visibility = "visible";
        return false;
      }

    });
  });
</script>
<div class="container">
  <form action="/people/update" method="post">
    <div class="input-group mb-3">
        <input required id="id" type="hidden" class="form-control" name="id" value="{{id}}">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-user-friends"></i></span>
      </div>
      <input required autocomplete="off" id="name" type="text" class="form-control" name="name" placeholder="name"
        value={{name}}>
      
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-calendar-day"></i></span>
      </div>
      <input autocomplete="off" id="birthday" type="date" class="form-control" name="birthday" value="{{birthday}}">
      <span id="error" type="text" vissiblity='hidden'></span>
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-phone"></i></span>
      </div>
      <input required autocomplete="off" id="phone" type="number" class="form-control" name="phone" value="{{phone}}">
      <span id="error" type="text" vissiblity='hidden'></span>
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fas fa-mobile-alt"></i></span>
      </div>
      <input autocomplete="off" id="mobile" type="number" class="form-control" name="mobile" placeholder="{{mobile}}">
      <span id="error" type="text" vissiblity='hidden'></span>
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-envelope"></i></span>
      </div>
      <input required autocomplete="off" id="email" type="email" class="form-control" name="email"
        value="{{email}}">
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fab fa-linkedin"></i></span>
      </div>
      <input  autocomplete="off" id="linkedin" type="text" class="form-control" name="linkedin"
        value="{{linkedin}}">
    </div>
    
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fab fa-facebook"></i></span>
      </div>
      <input autocomplete="off" id="facebook" type="text" class="form-control" name="facebook"
        value="{{facebook}}">
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fab fa-twitter"></i></span>
      </div>
      <input autocomplete="off" id="twitter" type="text" class="form-control" name="twitter"
        value="{{twitter}}">
    </div>
    
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-sticky-note"></i></span>
      </div>
      <input autocomplete="off" id="notes" type="text" class="form-control" name="notes" value="{{notes}}">
    </div>
    
    <div class="input-group mb-3">
      <input required type="submit" class="submit btn btn-info" value="Save">
    </div>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  </form>
</div>
{% endblock %}