{% extends 'menu/menu.html' %}
{% load static %}

{% block title %} Configurar horario {% endblock %}

{% block body %}
    
	<h2 class="text-center mb-4">Configuración de Horario</h2>

    <!-- Tabla de horario -->
    <form>
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead class="table-light text-center">
            <tr>
              <th>Día</th>
              <th>Apertura</th>
              <th>Cierre</th>
              <th>¿Cerrado?</th>
            </tr>
          </thead>
          <tbody>
            <!-- Lunes -->
            <tr>
              <td class="text-center align-middle">Lunes</td>
              <td>
                <input type="time" class="form-control" id="apertura-lunes">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-lunes">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-lunes" onchange="toggleHorario('lunes')">
              </td>
            </tr>
            <!-- Martes -->
            <tr>
              <td class="text-center align-middle">Martes</td>
              <td>
                <input type="time" class="form-control" id="apertura-martes">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-martes">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-martes" onchange="toggleHorario('martes')">
              </td>
            </tr>
            <!-- Miércoles -->
            <tr>
              <td class="text-center align-middle">Miércoles</td>
              <td>
                <input type="time" class="form-control" id="apertura-miercoles">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-miercoles">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-miercoles" onchange="toggleHorario('miercoles')">
              </td>
            </tr>
            <!-- Jueves -->
            <tr>
              <td class="text-center align-middle">Jueves</td>
              <td>
                <input type="time" class="form-control" id="apertura-jueves">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-jueves">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-jueves" onchange="toggleHorario('jueves')">
              </td>
            </tr>
            <!-- Viernes -->
            <tr>
              <td class="text-center align-middle">Viernes</td>
              <td>
                <input type="time" class="form-control" id="apertura-viernes">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-viernes">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-viernes" onchange="toggleHorario('viernes')">
              </td>
            </tr>
            <!-- Sábado -->
            <tr>
              <td class="text-center align-middle">Sábado</td>
              <td>
                <input type="time" class="form-control" id="apertura-sabado">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-sabado">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-sabado" onchange="toggleHorario('sabado')">
              </td>
            </tr>
            <!-- Domingo -->
            <tr>
              <td class="text-center align-middle">Domingo</td>
              <td>
                <input type="time" class="form-control" id="apertura-domingo">
              </td>
              <td>
                <input type="time" class="form-control" id="cierre-domingo">
              </td>
              <td class="text-center align-middle">
                <input class="form-check-input" type="checkbox" id="cerrado-domingo" onchange="toggleHorario('domingo')">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Botón de guardar -->
      <div class="text-center mt-4">
        <button type="submit" class="btn btn-primary">Guardar Configuración</button>
      </div>
    </form>
  </div>

  <script>
    // Desactiva los campos de horario cuando está marcado como cerrado
    function toggleHorario(dia) {
      const apertura = document.getElementById(`apertura-${dia}`);
      const cierre = document.getElementById(`cierre-${dia}`);
      const cerrado = document.getElementById(`cerrado-${dia}`);
      if (cerrado.checked) {
        apertura.disabled = true;
        cierre.disabled = true;
      } else {
        apertura.disabled = false;
        cierre.disabled = false;
      }
    }
  </script>
{% endblock %}