{% extends 'base.html' %}

{% block header %}
  <h2>{% block title %}Hacer una nueva reserva{% endblock title %}</h2>
{% endblock header %}

{% block content %}
    <form action="/inserta/{{ diaelegido }}" method="post">

      <div class="form-group">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required class="form-control"><br>
      </div>

      <div class="form-group">
  <!-- <label for="fecha">Fecha:</label>
       <input type="date" id="fecha" name="fecha" required class="form-control" min="{{ diaelegido }}", max="{{ diaelegido }}", value={{ diaelegido }}""><br> -->
        <p>Fecha de la reserva: {{ diaelegido }} </p>
      </div>

      <div class="form-group">
        <label for="hora">Hora:</label>
        <input type="time" id="hora" name="hora" required class="form-control" list="horas-permitidas"><br>
      </div>
      <datalist id="horas-permitidas">
        <option value="08:00"></option>
        <option value="09:00"></option>
        <option value="10:00"></option>
        <option value="11:00"></option>
        <option value="12:00"></option>
        <option value="13:00"></option>
        <option value="14:00"></option>
        <option value="15:00"></option>
        <option value="16:00"></option>
        <option value="17:00"></option>
    </datalist>
      <div class="form-group">
        <button type="submit" class="submit-btn">Reservar</button>
      </div>
    </form>

    <script>
      document.getElementById('hora').addEventListener('input', function() {
          var val = this.value;
          var options = document.getElementById('horas-permitidas').querySelectorAll('option');
          var match = Array.from(options).find(function(option) {
              return option.value === val;
          });
          if (!match) {
              this.value = '';
          }
      });
  </script>
{% endblock content %}