<%- include("../templates/index")%> <%-
include("../templates/menuLoginUsr")%>

<link rel="stylesheet" href="/css/styleLogin.css" />

<div class="container" id="container">
  <div class="form-container sign-up-container">
    <form action="/signup" method="get">
      <h1>Crea cuenta</h1>
      <span>Usa tu correo electr칩nico para el registro</span>
      <button type="submit" class="m-3">Unete</button>
    </form>
  </div>
  <div class="form-container sign-in-container">
    <form action="/login" method="post">
      <h1>Iniciar Sesi칩n</h1>
      <span>Usa tu cuenta</span>
	  <% if(mensaje){ %>
		<div class="alert alert-danger m-1" role="alert">
		  <%= mensaje %>
		</div>
	  <% } %>

      <div class="input-group" style="align-items: center">
        <div class="input-group-text" style="height: 38px">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-person-circle"
            viewBox="0 0 16 16"
          >
            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
            <path
              fill-rule="evenodd"
              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"
            />
          </svg>
        </div>
        <input
          type="usuario"
          id="usuario"
          name="usuario"
          placeholder="Usuario"
          required
          class="form-control"
        />
      </div>

      <div class="input-group" style="align-items: center">
        <div class="input-group-text" style="height: 38px">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            fill="currentColor"
            class="bi bi-key-fill"
            viewBox="0 0 16 16"
          >
            <path
              d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
            />
          </svg>
        </div>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Contrase침a"
          required
          class="form-control"
        />
      </div>

      <button type="submit">Iniciar Sesi칩n</button>
    </form>
  </div>
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>Hola, propietario!</h1>
        <p>
          Para mantenerse conectado, inicie sesi칩n con su informaci칩n personal
        </p>
        <button class="ghost" id="signIn">Iniciar Sesi칩n</button>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>춰Bienvenido!</h1>
        <p>Introduce tus datos personales, y comienza tu experiencia</p>
        <button class="ghost crearCuenta" id="signUp">Crear cuenta</button>
      </div>
    </div>
  </div>
</div>

<footer style="display: flex">
  <footer
    style="display: flex; justify-content: space-between; align-items: center"
  >
    <div style="width: 155%;">
      <p style="padding-left: 30%; border-color: #f39c12; border: 1">
        Creado por Victor Rangel y Abril Sanchez 游뽔
      </p>
    </div>
    <div class="container2 mt-4" style="width: 50%">
      <div class="row justify-content-end">
        <div class="col-auto top-100 z-1">
          <div class="form-check form-switch">
            <i
              id="iconoModoDia"
              class="bi bi-sun"
              style="margin-right: 50px"
            ></i>
            <input
              class="form-check-input"
              type="checkbox"
              id="modoOscuroToggle"
            />

            <label class="form-check-label" for="modoOscuroToggle">
              <i id="iconoModoOscuro" class="bi bi-moon-fill"></i>
            </label>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <style>
    #custom-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -100;
    }
    /* Estilos para el modo oscuro */
    *.dark-mode {
      background-color: #222;
      color: #fff;
    }

    /* Estilos para el modo d칤a */
    *.light-mode {
      background-color: #fff;
      color: #333;
    }

    /* Estilos para los 칤conos */
    #iconoModoOscuro {
      margin-right: 5px;
      color: #f39c12;
      /* Color amarillo */
    }

    #iconoModoDia {
      display: none;
      margin-left: 5px;
      color: #f1c40f;
      /* Color amarillo */
    }
    .crearCuenta{
      background-color: #f39c12;
      color: #fff;
    }
    .crearCuenta:hover{
      font-size: 0.8rem;
      animation: pulse 0.8s infinite;
    }
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
      
    }
  </style>
  <script>
    const signUpButton = document.getElementById("signUp");
    const signInButton = document.getElementById("signIn");
    const container = document.getElementById("container");

    signUpButton.addEventListener("click", () => {
      container.classList.add("right-panel-active");
    });

    signInButton.addEventListener("click", () => {
      container.classList.remove("right-panel-active");
    });
    const modoOscuroToggle = document.getElementById("modoOscuroToggle");
    const iconoModoOscuro = document.getElementById("iconoModoOscuro");
    const iconoModoDia = document.getElementById("iconoModoDia");

    // Funci칩n para cambiar el modo de color y el 칤cono
    function toggleModoOscuro() {
      if (modoOscuroToggle.checked) {
        document.body.classList.remove("light-mode");
        document.body.classList.add("dark-mode");
        iconoModoOscuro.style.display = "inline"; // Ocultar el 칤cono de luna
        iconoModoDia.style.display = "none";
        localStorage.setItem("modoOscuro", "true");
      } else {
        document.body.classList.remove("dark-mode");
        document.body.classList.add("light-mode");
        iconoModoOscuro.style.display = "inline"; // Mostrar el 칤cono de luna
        iconoModoDia.style.display = "none"; // Ocultar el 칤cono de sol
        localStorage.setItem("modoOscuro", "false");
      }
    }

    // Escuchar el cambio de estado del interruptor
    modoOscuroToggle.addEventListener("change", toggleModoOscuro);

    // Verificar y aplicar el estado del interruptor al cargar la p치gina
    const modoOscuroGuardado = localStorage.getItem("modoOscuro");
    if (modoOscuroGuardado === "true") {
      modoOscuroToggle.checked = true;
      toggleModoOscuro();
    }
  </script>
</footer>
