<?php $this->load->view('template/head_front.php'); ?>
<!--[if lt IE 9]>
<div class="row">
  <h3 class="text-center">Este programa solo funciona con versiones superiores a Internet Explorer 9</h3>
</div>
<![endif]-->
<![if IE 9]>
<?php
$logo      = 'uploads/logo.png';
$splas1      = 'uploads/splash-screen.jpg';
$data_view['bienvenida'] = 'Bienvenido a <br>' . $nombre_empresa;
shuffle($images);
//$this->load->view('header_acceso.php', $data_view);
$claves_aleatorias       = array_rand($images, 1);
?>

<div class="loader" style="position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
    background:url(<?php echo base_url().'uploads/cargando.gif' ?>) 50% 50% no-repeat rgb(255, 255, 255);"></div>
<ul class="slide">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<main class="login" style="padding: 30px;display: grid;place-items: center;" }>

    <div class="contenedor" style=" max-width: 700px; background: #ffffff; padding: 0; border-radius: 10px;
    overflow: hidden; box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); display: grid; grid-template-columns: 1fr 1fr;" }>
        <div style="position: relative; left: 0; top: 0;">
            <img src="<?= base_url() . '' . $logo ?>" style="opacity: 0.5; position: absolute;
                width: 50%;top: 10px;left: 60px;z-index: 1;vertical-align: middle;">
            <img src="<?= base_url() . '' . $splas1 ?>" alt="" style="position: absolute;">

        </div>
        <div class="login-area" style=" padding: 30px;">

            <div class="messages" style="">
                <?php if (isset($message)): ?>
                <div class="error"><?= $message ?></div>
                <?php endif; ?>
                <?php if (isset($message2)): ?>
                <div class="error"><?= $message2 ?></div>
                <?php endif; ?>
            </div>
             <script>
                // Verificar si hay mensajes visibles
                document.addEventListener("DOMContentLoaded", function() {
                    // Seleccionar el contenedor de mensajes
                    const messagesContainer = document.querySelector('.messages');

                   
                    if (messagesContainer && messagesContainer.innerText.trim() !== '') {
                       
                        setTimeout(() => {
                            window.location.href = "<?= base_url(); ?>"; 
                        }, 10000); // 10 segundos (30,000 ms)
                    }
                });
            </script>
            <h1><?="Bienvenido a ".$nombre_empresa ?></h1>
            <p><?= $mensaje_login ?></p>





            <?php
			  $form_data         = array(
				'name'  => 'login_form',
				'id'    => 'login-form',
				'class' => 'login-form',
                'autocomplete' => 'off'
               // 'data-parsley-validate'=>""
			   );
			  ?>
            <?php echo form_open('acceso/login', $form_data); ?>
            <input type="text"     name="fakeuser" tabindex="-1" autocomplete="username"
       style="position:absolute;left:-9999px;width:0;height:0;border:0;padding:0;">
<input type="password" name="fakepass" tabindex="-1" autocomplete="current-password"
       style="position:absolute;left:-9999px;width:0;height:0;border:0;padding:0;">
            
            <?php
             //Definiciones
			  $attributes_labels = array(
				'class' => 'control-label',
			  );
			  ?>

            <?php
             //Identificación y contraseña.
			if ($tipo_acceso === 'W'):?>
            <?= form_hidden('TIPO_ACCESO', $tipo_acceso) ?>

            <div class="form-group input-type">
                <?= form_label('Identificación', 'NUM_IDETER', $attributes_labels); ?>
                <?=
					form_input([
						'name'              => 'NUM_IDETER',
						'id'                => 'NUM_IDETER',
						'class'             => 'form-control',
						'data-parsley-type' => 'number',
						'required'          => '',
                       //'value'             => (isset($iden)) ? $iden : ''])
						'value'             => '',
						'autocomplete'      => 'new-password',
						'autofocus'         => true])
						?>
            </div>
            <div class="form-group input-type">
                <?php echo form_label('Contraseña', 'TEX_CLAVE', $attributes_labels); ?>
                <?=
						form_password([
							'name'                   => 'TEX_CLAVE',
							'id'                     => 'TEX_CLAVE',
							'class'                  => 'form-control',
							'required'               => '',
							'autocomplete'           => 'new-password',
							'data-parsley-minlength' => '4'])
							?>
            </div>
            <?php endif; ?>
            <?php
             //Solo identificación
					if ($tipo_acceso === 'I'):
						?>
            <?= form_hidden('TIPO_ACCESO', $tipo_acceso) ?>
            <div class="form-group input-type">
                <?= form_label('Identificación', 'NUM_IDETER', $attributes_labels); ?>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-user"></i>
                    </div>
                    <?=
								form_input(['name'              => 'NUM_IDETER', 'id'                => 'NUM_IDETER', 'class'             => 'form-control',
									'data-parsley-type' => 'number', 'required'          => '', 'autocomplete'             => 'new-password', 'autofocus'         => true])
									?>
                </div>
            </div>
            <?php endif; ?>
            <?php
             //Identificación, contraseña y PIN.
						if ($tipo_acceso === 'P'):
							?>
            <?= form_hidden('TIPO_ACCESO', $tipo_acceso) ?>
            <div class="form-group input-type">
                <?= form_label('Identificación', 'NUM_IDETER', $attributes_labels); ?>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-user"></i>
                    </div>
                    <?=
									form_input([
										'name'              => 'NUM_IDETER',
										'id'                => 'NUM_IDETER',
										'class'             => 'form-control',
										'data-parsley-type' => 'number',
										'required'          => '',
										'autocomplete'      => 'new-password',
										'autofocus'         => true])
										?>
                </div>
            </div>
            <div class="form-group input-type">
                <?php echo form_label('Contraseña', 'TEX_CLAVE', $attributes_labels); ?>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-key"></i>
                    </div>
                    <?=
										form_password([
											'name'                   => 'TEX_CLAVE',
											'id'                     => 'TEX_CLAVE',
											'class'                  => 'form-control',
											'required'               => '',
											'autocomplete'           => 'new-password',
											'autocomplete'           => 'off',
											'data-parsley-minlength' => '4'])
											?>
                </div>
            </div>
            <div class="form-group input-type">
                <?= form_label('Número de celular', 'NUM_TELCEL', $attributes_labels); ?>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-phone"></i>
                    </div>
                    <?=
											form_input([
												'name'                           => 'NUM_TELCEL',
												'id'                             => 'NUM_TELCEL',
												'class'                          => 'form-control',
												'data-parsley-required'          => '',
												'data-parsley-type'              => 'number',
												'data-parsley-minlength '        => '[10]',
												'data-parsley-required-message ' => 'El celular es requerido para remitir el PIN de acceso a la votación',
												'data-parsley-maxlength '        => '[10]',
												'autocomplete'                   => 'new-password',
												'autocomplete'                   => 'off',
											])
											?>
                </div>
            </div>
            <?php endif; ?>
            <?php if (!empty($captcha_enabled)): ?>
  <div class="form-group">
    <div class="g-recaptcha" data-sitekey="<?= htmlspecialchars($captcha_sitekey, ENT_QUOTES) ?>"></div>
  </div>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php endif; ?>

            <div class="input-group submit-forms">
                <?= form_submit('submit', 'Ingresar', "class='boton'"); ?>

                <?php if($activar_rec_password): ?>
                <?php if ($tipo_acceso === 'W' || $tipo_acceso === 'P'): ?>
                <a href="<?php echo base_url('acceso/recordar_password') ?>">¿Olvidó
                    su contraseña?</a>
                <?php endif; ?>
                <?php endif; ?>

                <?php if (!empty($activar_ayuda_wa)): ?>
  <?php
    $waNumber = preg_replace('/\D+/', '', (string)$celular_mesa_ayuda);
    $waText   = "Hola, requiero ayuda con el proceso de votación {$nombre_empresa}";
    $waHref   = "https://wa.me/57{$waNumber}?text=" . rawurlencode($waText);
  ?>
  <table border="0" style="margin-top:8px;">
    <tr>
      <td style="padding-right:8px;">
        <a href="<?= $waHref ?>" target="_blank" rel="noopener noreferrer">Ayuda vía WhatsApp</a>
      </td>
      <td>
        <a href="<?= $waHref ?>" target="_blank" rel="noopener noreferrer">
          <img src="<?= base_url('uploads/logowa.png') ?>" alt="Botón WhatsApp" style="width:28px;height:28px;display:block;">
        </a>
      </td>
    </tr>
  </table>
<?php endif; ?>


            </div>
            <?= form_close(); ?>

        </div>

<?php if (!empty($vigencia_mode) && (int)$vigencia_mode > 0): ?>
  <div
    id="vigencia-box"
    class="countdown-card"
    data-mode="<?= (int)$vigencia_mode ?>"
    data-start="<?= htmlspecialchars($vigencia_start_iso ?? '', ENT_QUOTES) ?>"
    data-end="<?= htmlspecialchars($vigencia_end_iso ?? '', ENT_QUOTES) ?>"
     style="--cd-font: <?= (int)$vigencia_font ?>px;"
   
  >
    <div class="cd-header">
      <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M7 2h2v2h6V2h2v2h3v2H4V4h3V2zm-3 6h16v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8zm4 4v2h4v-2H8zm6 0v2h4v-2h-4z"/></svg>
      <span id="vigencia-line-1"></span>
    </div>

    <div class="cd-timer" id="vigencia-timer">
      <div class="cd-box"><span id="cd-d">00</span><small>días</small></div>
      <div class="cd-box"><span id="cd-h">00</span><small>horas</small></div>
      <div class="cd-box"><span id="cd-m">00</span><small>min</small></div>
      <div class="cd-box"><span id="cd-s">00</span><small>seg</small></div>
    </div>

    <div class="cd-finished" id="vigencia-finished" hidden>Proceso finalizado</div>
  </div>

  <script>
  (function(){
    var box = document.getElementById('vigencia-box'); if(!box) return;
    var mode   = parseInt(box.dataset.mode || 0, 10);
    var startI = box.dataset.start || null;
    var endI   = box.dataset.end   || null;

    var line1  = document.getElementById('vigencia-line-1');
    var timer  = document.getElementById('vigencia-timer');
    var done   = document.getElementById('vigencia-finished');

    var dEl = document.getElementById('cd-d');
    var hEl = document.getElementById('cd-h');
    var mEl = document.getElementById('cd-m');
    var sEl = document.getElementById('cd-s');

    function z(n){ n = Math.max(0, n); return (n<10?'0':'')+n; }

    function paintLine1(){
      var s = startI ? new Date(startI) : null;
      var e = endI   ? new Date(endI)   : null;
      var txt = '';
      if (mode === 1 && s && e) {
        txt = 'Desde ' + s.toLocaleString() + '<br>hasta ' + e.toLocaleString();
      } else if (mode === 2 && e) {
        txt = 'Hasta ' + e.toLocaleString();
      } else {
        txt = '';
      }
      line1.innerHTML = txt;
    }


    function tick(){
      if(!(mode===1||mode===2||mode===3)){ return; } // sin contador
      if(!endI){ timer.style.opacity = .5; return; }  // sin fecha fin

      var now = new Date();
      var end = new Date(endI);
      var diff = end - now;

      if (diff <= 0) {
        dEl.textContent = '00'; hEl.textContent='00'; mEl.textContent='00'; sEl.textContent='00';
        done.hidden = false;
        timer.style.opacity = .35;
        return;
      }
      var s = Math.floor(diff/1000);
      var d = Math.floor(s/86400); s%=86400;
      var h = Math.floor(s/3600);  s%=3600;
      var m = Math.floor(s/60);    s%=60;

      dEl.textContent = d.toString().padStart(2,'0');
      hEl.textContent = h.toString().padStart(2,'0');
      mEl.textContent = m.toString().padStart(2,'0');
      sEl.textContent = s.toString().padStart(2,'0');
    }

    paintLine1(); tick(); setInterval(tick, 1000);

    // Ocultar/mostrar bloques según el modo
    if (mode === 1) { /* fechas + contador */ }
    if (mode === 2) { /* fecha fin + contador */ }
    if (mode === 3) { line1.textContent = 'Restan'; } // solo contador
  })();
  </script>
<?php endif; ?>

    </div>
</main>
<?php $this->load->view('template/footer_front') ?>

</html>
<style>
    body{
    color: #444444;
    padding: 0;
    margin: 0;
    background: #000000;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
  }
h1 {
    color: #959595;
    border-bottom: 1px dotted var(--principal);
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 300;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.submit-forms {
    float: right;
    width: 300px;
}

.control-label {
    font-size: 14px;
    font-weight: 900;
}

.form-control {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

.boton {
    font-weight: 900;
    padding: 10px 5px;
    background: var(--principal);
    color: #fff;
    border: none;
    text-transform: uppercase;
    transition: all 0.3s ease-out;
}


/*Slide*/

.slide {
    position: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.slide li {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50% 50%;
    animation: animacion 64s linear infinite 0s;
}

.slide li:nth-child(1) {

    background: url('<?php echo base_url().'uploads/backgrounds/tech1.jpg' ?>') no-repeat;

}

.slide li:nth-child(2) {
    background: url('<?php echo base_url().'uploads/backgrounds/tech2.jpg' ?>') no-repeat;

    animation-delay: 16s;
}

.slide li:nth-child(3) {
    background: url('<?php echo base_url().'uploads/backgrounds/tech3.jpg' ?>') no-repeat;
    animation-delay: 32s;
}

.slide li:nth-child(4) {
    background: url('<?php echo base_url().'uploads/backgrounds/tech4.jpg' ?>') no-repeat;
    animation-delay: 48s;
}
img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 600px) {

.login {
padding: 0px;
display: grid;
place-items: center;
}

.footer {
  padding: 10px;
  background: rgb(18, 20, 32, .75);
  color: #F0F0F0;
  text-align: center;
  bottom: 0;
  position: unset;
  width: 100%;
  
}
}







/* ===== Countdown styles ===== */
.countdown-card{
  --cd-font: 18px;        /* base desde config */
  --cd-bg:  linear-gradient(135deg,#0ea5e9, #22c55e);
  --cd-fg:  #ffffff;
  --cd-chip:#0f172a;

  border-radius: 12px;
  padding: 14px;
  margin: 10px 0 18px;
  background: var(--cd-bg);
  color: var(--cd-fg);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  font-size: var(--cd-font);
  opacity: 0.50;
}

.countdown-card .cd-header{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700;
  letter-spacing:.2px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,.8);
}

.countdown-card .cd-timer{
  margin-top:.6rem;
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}

.countdown-card .cd-box{
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(4px);
  color: #ffffff; 
  min-width:45px;
  padding:4px 6px; border-radius:10px; text-align:center;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.countdown-card .cd-box span{ 
  display:block; 
  font-size:calc(var(--cd-font) * 1.2); 
  font-weight:800; 
  color: #1a1a1a;
  text-shadow: 1px 1px 2px rgba(255,255,255,.5);
}
.countdown-card .cd-box small{ 
  display:block; 
  font-size:calc(var(--cd-font) * .55); 
  opacity: 1; 
  letter-spacing:.3px; 
  color: #2a2a2a;
  text-shadow: 1px 1px 2px rgba(255,255,255,.5);
}

.countdown-card .cd-finished{
  margin-top:.6rem; text-align:center; font-weight:800;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,.8);
}

/* Responsive tweaks */
@media (max-width: 900px){
  .contenedor{ grid-template-columns: 1fr !important; }
  .contenedor > div:first-child{ display:none; } /* oculta la imagen lateral en móvil */
  .login{ padding: 16px !important; }
}
@media (max-width: 480px){
  .countdown-card{ padding: 12px; }
  .countdown-card .cd-box{ min-width:58px; }
}


/* Asegura un contenedor de referencia */
.login-area{ position: relative; }

/* Escritorio (comportamiento actual, opcional) */
@media (min-width: 901px){
  #vigencia-box{
    position: absolute !important;  /* anula inline si quedó */
    top: 40px !important;
    left: 10px !important;
    max-width: 270px !important;
    z-index: 10 !important;
  }
}

/* Móvil/Tablet: que sea ancho completo y no se superponga */
@media (max-width: 900px){
  #vigencia-box{
    position: sticky !important;     /* se pega en el scroll dentro del login */
    top: 8px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 8px 0 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 2 !important;
    /* tipografía adaptable */
    --cd-font: clamp(13px, 3.6vw, 18px);
  }
  .countdown-card .cd-timer{
    gap: 8px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .countdown-card .cd-box{
    min-width: 56px;
    padding: 6px 8px;
  }
  .countdown-card .cd-box span{
    font-size: calc(var(--cd-font) * 1.15);
  }
  .countdown-card .cd-box small{
    font-size: calc(var(--cd-font) * .52);
  }
}

/* Pantallas muy pequeñas: permitir salto de línea si hace falta */
@media (max-width: 420px){
  .countdown-card .cd-timer{
    flex-wrap: wrap;
    justify-content: center;
  }
  .countdown-card .cd-box{
    min-width: 50px;
    margin-bottom: 4px;
  }
}


</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var vb = document.getElementById('vigencia-box');
  if(!vb) return;
  vb.style.position = '';
  vb.style.top = '';
  vb.style.left = '';
  vb.style.maxWidth = '';
  vb.style.zIndex = '';
});
</script>

<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>
