{% include 'header.html' %}



{% with messages= get_flashed_messages() %}

{% if messages %}
    <div class="alert alert-danger" role="alert">
        {% for message in messages %}
            {{message}}
        {% endfor %}
    </div>
{% endif %}
{% endwith %}

<!-- Seccion de tarjeta -->
<section class="showcase">
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col"><img src="uploads/Encabezado.png" style="width: 100%;margin-bottom: -70px;padding-bottom: 0px;"></div>
        </div>
        <div class="row g-0">
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 0px;margin-top: 0px;"><img src="uploads/Capa%202.png" style="width: 100%;margin-bottom: -35px;overflow: visible;position: sticky;"><img src="uploads/Capa%203.png" style="width: 100%;margin-top: 0px;"></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 20px;"><img src="uploads/Capa%208.png" style="width: 100%;"></div>
        </div>
        <div class="row g-0">
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="background: url(&quot;uploads/Capa%209.webp&quot;) center / cover no-repeat;padding-top: 30px;padding-bottom: 30px;padding-right: 10px;padding-left: 10px;"><img src="uploads/texto%20biblico.png" style="width: 94%;margin-left: 3%;margin-right: 3%;"></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 20px;"><img src="uploads/2024.png" style="width: 100%;"><img src="uploads/Corazon-PNG-Image%20copia%202.png" style="width: 55%;"><a href="https://maps.app.goo.gl/5wmStiYBchkGXp959" target="_blank"><img src="uploads/como%20llegar.png" style="width: 45%;padding-left: 5%;"></a></div>
        </div>
        <div class="row g-0">
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding-top: 20px;padding-bottom: 20px;"><img src="uploads/Dress%20Code.png" style="width: 100%;text-align: center;padding-right: 25%;padding-left: 25%;"></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 20px;"><img src="uploads/Regalos.png" style="width: 100%;"></div>
        </div>
        <div class="row g-0">
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 20px;"><a href="http://www.wedshoots.com/co/download?albumId=CO9dbb7034" target="_blank"><img src="uploads/Invitado%20espia.png" style="width: 100%;"></a></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 20px;padding-right: 5px;padding-left: 5px;"><img src="uploads/Confirma%20tu%20asistencia.png" style="width: 100%;"><a href="#" data-bs-toggle="modal" data-bs-target="#confirmacion-asistencia"><img src="uploads/Confirma%20aqui.png" style="width: 100%;padding-left: 20%;padding-top: 15px;padding-right: 20%;"></a></div>
        </div>
        <div class="row g-0">
            <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="padding: 0px;"><img src="uploads/9295.webp" style="width: 100%;"></div>
        </div>
    </div>
</section>


  <!-- Ventana Modal -->
<div class="modal fade" id="confirmacion-asistencia" tabindex="-1" aria-labelledby="confirmacion-asistencia" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">CONFIRMACION DE INVITACIONES</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% for empleado in empleados2 %}
                Hola {{empleado[1]}} te hemos invitado a nuestra boda y queremos que nos acompañes en este día tan especial para nosotros.  A continuacion encontrarás la lista de personas invitadas que debes confirmar en caso de asistir.
                <br>
                Por favor confirmar antes del 15 de febrero!!!.
                <br><br>
                {% endfor %}
            
                <b>Tienes invitacion para:</b>
                <form action="/confirmar_asistencia" method="post" enctype="multipart/form-data">  <!-- Cambia la acción y el método según tu aplicación Flask -->
                    <table class="table">
                    <thead>
                        <tr>
                        <th>Invitado</th>
                        <th>Confirmas?</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for empleado in empleados %}
                        <tr>
                        <td><input type="hidden" value="{{empleado[0]}}" name="miembros_id[]">{{empleado[1]}} </td>            
                        <td>
                            <select class="form-control" name="asistencia_{{empleado[0]}}">
                            <option value="0" {% if empleado[2] == 0 %} selected {% endif %}></option>
                            <option value="1" {% if empleado[2] == 1 %} selected {% endif %}>Si</option>
                            <option value="2" {% if empleado[2] == 2 %} selected {% endif %}>No</option>
                            </select>
                        </td>
                        </tr>
                        <!-- Repite este bloque para cada empleado -->
                        {% endfor %}
                
                    </tbody>
                    </table>
                    Recuerda que puedes cambiar la confirmacion volviendo nuevamente a este menu.

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Confirmar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>



<div class="card text-center">
    <h5 class="card-header"> Estamos muy cerca!!!</h5>
    </div>
<div class="card-body">
    <h5 class="card-title text-center">Esto es lo que queda para la gran fecha!!!</h5>
    <div id="cuentaRegresiva" class="display-4 text-center" style="font-size: x-large;"></div>
</div>


  <!-- Bootstrap JS y Popper.js -->
 

  <!-- Código JavaScript para la cuenta regresiva -->
  <script>
    // Fecha y hora objetivo para la cuenta regresiva (puedes ajustarla según tus necesidades)
    var fechaObjetivo = new Date("Feb 24, 2024 17:00:00").getTime();

    // Actualiza la cuenta regresiva cada segundo
    var cuentaRegresiva = setInterval(function() {
      var ahora = new Date().getTime();
      var diferencia = fechaObjetivo - ahora;

      // Calcula los días, horas, minutos y segundos restantes
      var dias = Math.floor(diferencia / (1000 * 60 * 60 * 24));
      var horas = Math.floor((diferencia % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutos = Math.floor((diferencia % (1000 * 60 * 60)) / (1000 * 60));
      var segundos = Math.floor((diferencia % (1000 * 60)) / 1000);

      // Actualiza el contenido de la cuenta regresiva
      document.getElementById("cuentaRegresiva").innerHTML = dias + "d " + horas + "h " + minutos + "m " + segundos + "s ";

      // Si la cuenta regresiva llega a cero, muestra un mensaje
      if (diferencia < 0) {
        clearInterval(cuentaRegresiva);
        document.getElementById("cuentaRegresiva").innerHTML = "¡Tiempo cumplido!";
      }
    }, 1000);  // Actualiza cada segundo
  </script>


{% include 'footer.html' %}