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

{% set active_page ='people' %}

{% block pagehead %}
<title>add people</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">
<h2>Add People</h2>

<form action="/people/add" method="post">

  <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">
    {{message}}
  </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 required autocomplete="off" id="birthday" type="date" class="form-control" name="birthday" placeholder="">
    <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" placeholder="0111 111 222">
    <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="0711 111 222">
    <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"
      placeholder="me@somewhere.me">
  </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"
      placeholder="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"
      placeholder="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"
      placeholder="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" placeholder="Notes: ...">
  </div>
  <div class="input-group mb-3">
    <input required type="submit" class="submit btn btn-info" value="add">
  </div>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>
</div>
{% endblock %}