<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<?php $this->load->view('template/head_front.php'); ?>
<!-- Modal de Bienvenida -->
<?php if ($mostrar_modal): ?>
<div class="modal fade" id="modal-bienvenida" tabindex="-1" role="dialog" aria-labelledby="modalLabelBienvenida" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 90%; border-radius: 10px;">
        <div class="modal-content" style="border-radius: 10px;">
            <div class="modal-body" style="border-radius: 10px; padding: 20px;">
                <h4 class="text-center text-success" style="margin: 5px 0; padding: 0; color: #000000bf; font-weight: 800;">
                    Señor(a) <?= $this->session->userdata('TEX_NOMPAR') ?> <?= $this->session->userdata('TEX_APEPAR') ?>
                </h4>
                <h5 class="text-center" style="margin: 10px 0; padding: 0; color: red; font-weight: 800; font-size: 1.5em;">
                <?php if ($instancia->BOL_OBLMUL == 1): ?>
                    <?php if ($agencia_participante->NUM_MUSEAG > 0): ?>
                        Recuerde que debe seleccionar 
                        <strong><?= $agencia_participante->NUM_MUSEAG ?></strong> 
                        candidato<?= ((int)$agencia_participante->NUM_MUSEAG <= 1) ? '' : 's' ?>. 
                    <?php else: ?>
                        Recuerde que debe seleccionar 
                        <strong><?= $instancia->NUM_MUSEIN ?></strong> 
                        candidato<?= ((int)$instancia->NUM_MUSEIN <= 1) ? '' : 's' ?>. 
                    <?php endif; ?>
                <?php else: ?>
                    <?php if ($agencia_participante->NUM_MUSEAG > 0): ?>
                        Recuerde que puede votar hasta por 
                        <strong><?= $agencia_participante->NUM_MUSEAG ?></strong> 
                        candidato<?= ((int)$agencia_participante->NUM_MUSEAG <= 1) ? '' : 's' ?>. 
                    <?php else: ?>
                        Recuerde que puede votar hasta por 
                        <strong><?= $instancia->NUM_MUSEIN ?></strong> 
                        candidato<?= ((int)$instancia->NUM_MUSEIN <= 1) ? '' : 's' ?>. 
                    <?php endif; ?>
                <?php endif; ?>
               </h5>

                <p class="text-center" style="margin: 10px 0; font-size: 1em; font-weight: 600; color: #000000bf;">
                    <?= isset($mensaje_modal) ? $mensaje_modal : '' ?>
                </p>
                <div class="row justify-content-center mt-4">
                    <div class="col-12 text-center">
                        <button type="button" class="btn btn-success btn-lg" id="btn-entendido" style="padding: 10px 40px;">Entendido</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>



<style>
[type=checkbox] {
    position: absolute;
}
#contenido-pagina.oculto {
    filter: blur(5px); /* Opcional: efecto de desenfoque */
    pointer-events: none; /* Desactiva interacciones */
    opacity: 0.3; /* Reduce visibilidad */
}

.modal-backdrop {
    background-color: white !important;
    z-index: 1040 !important;
}

#modal-bienvenida {
    z-index: 1050 !important;
}



</style>
<script>
function disableBack() {
    window.history.forward()
}
window.onload = disableBack();
window.onpageshow = function(evt) {
    if (evt.persisted)
        disableBack();
}

function checkCR(evt) {
    var evt = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if ((evt.keyCode == 13) && (node.type == "text")) {
        return false;
    }
}
document.onkeypress = checkCR;
</script>
<div id="url-timer" style="display: none">votacion/timer_votacion</div>
<?php
$data_view_header = [];
if ($empresa) {
	$data_view_header['nombre_empresa'] = $empresa;
}
$this->load->view('template/header.php', $data_view_header);
$form_data = ['name'       => 'crear_form',
'id'         => 'crear-form',
'class'      => 'create-form',
'novalidate' => '',
];
?>
<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>
 <div id="contenido-pagina">
<main class="votacion">
   <!-- <div class="loader loader-default is-active" data-text="Procesandoff..." data-blink style="display: none;"></div>-->
    <section class="row contenedor-titulo votacion-titulo">
        <h1><?= $instancia->TEX_NOMINS ?></h1>
    </section>
    <section id="tarjeton">
        <?= form_open(base_url('votacion/proceso'), $form_data); ?>
        <?= form_hidden('NUM_ORDEN', $instancia->NUM_ORDEN) ?>
        <?= form_hidden('ID_INSTAN', $instancia->ID_INSTAN) ?>

        <?php
$contador = 0;
if ($numero_candidatos_grid == 3 or $numero_candidatos_grid == 4) {
	$size_grid = 'candid-34';
}
if ($numero_candidatos_grid == 5) {
	$size_grid = 'candid-5';
}
if ($numero_candidatos_grid == 6) {
	$size_grid = 'candid-6';
}
if ($numero_candidatos_grid == 7 or $numero_candidatos_grid == 8) {
	$size_grid = 'candid-78';
}
?>
       <div class="row contenedor-info-votacion">
    <div id="informacion-votacion" class="container info-votacion" style="margin-left: 7px;">
        <div class="col-lg-4">
            <!-- Reloj -->
            <h3 id="display"></h3>
        </div>
        <div class="col-lg-4">
            <?php if ($instancia->BOL_OBLMUL == 1): ?>
                <?php if ($agencia_participante->NUM_MUSEAG > 0): ?>
                    <p>Debe seleccionar exactamente <span><?= $agencia_participante->NUM_MUSEAG ?></span>
                        candidato<?= ((int)$agencia_participante->NUM_MUSEAG <= 1) ? '' : 's' ?> </p>
                <?php else: ?>
                    <p>Debe seleccionar exactamente <span><?= $instancia->NUM_MUSEIN ?></span>
                        candidato<?= ((int)$instancia->NUM_MUSEIN <= 1) ? '' : 's' ?> </p>
                <?php endif; ?>
            <?php else: ?>
                <?php if ($agencia_participante->NUM_MUSEAG > 0): ?>
                    <p>Puede seleccionar hasta <span><?= $agencia_participante->NUM_MUSEAG ?></span>
                        candidato<?= ((int)$agencia_participante->NUM_MUSEAG <= 1) ? '' : 's' ?> </p>
                <?php else: ?>
                    <p>Puede seleccionar hasta <span><?= $instancia->NUM_MUSEIN ?></span>
                        candidato<?= ((int)$instancia->NUM_MUSEIN <= 1) ? '' : 's' ?> </p>
                <?php endif; ?>
            <?php endif; ?>
            <p class="texto-cantidad-candidatos" style="display: none;">Ha seleccionado
                <span id="seleccion-candidato">0</span>
                de <span id="total-seleccionado"><?= ($agencia_participante->NUM_MUSEAG > 0) ? $agencia_participante->NUM_MUSEAG : $instancia->NUM_MUSEIN ?></span>
                <?= (($agencia_participante->NUM_MUSEAG > 0) ? (int)$agencia_participante->NUM_MUSEAG : (int)$instancia->NUM_MUSEIN) <= 1 ? 'candidato' : 'candidatos' ?>
            </p>
        </div>
        <div class="col-lg-4">
            <?php if ($buscador): ?>
                <div class="form-inline">
                    <div class="form-group">
                        <label for="busqueda" class="col-12 col-xs-12"
                            style="display: inline-block; vertical-align: bottom; width: 50%">Buscar Candidato:</label>
                        <input type="text" id="buscador-candidatos"
                            style="border-color: #f4863d; display: inline-block; width: 50%; margin-top: 22px;" class="form-control col-xs-7"
                            placeholder="Ingrese el nombre del candidato" name="busqueda">
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>


        <?php 

$numero_grid = $numero_candidatos_grid;
$style_grid = ''; 
$grid= 'block';
$tletra= "1.2em;";
if($agent != 'Apple iPhone' && $agent != 'Android' && $agent != 'LG' && $agent != 'Samsung') {
	$grid = 'grid';
	if($numero_candidatos_grid == 8) {
      
        $style_grid= "grid-template-columns: repeat($numero_grid,134px);";
          $tletra= "10px;";
    
		//$style_grid= " grid-template-columns:r-label2epeat($numero_grid, 144px);";
    
	} elseif ($numero_candidatos_grid == 6) {
		//$style_grid="grid-template-columns:repeat($numero_grid, 198px);";
        $style_grid="grid-template-columns:repeat($numero_grid, 188px);";
        $tletra= "12px";
	} elseif ($numero_candidatos_grid == 7) {
		//$style_grid="grid-template-columns:repeat($numero_grid, 198px);";
        $style_grid="grid-template-columns:repeat($numero_grid, 155px);";
        $tletra= "9px;";
	}
	
	elseif ($numero_candidatos_grid == 4) {
		$style_grid="grid-template-columns:repeat($numero_grid, 278px);";
	}elseif ($numero_candidatos_grid == 3) {
		$style_grid=" grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));";
	} else {
		$style_grid="grid-template-columns:repeat($numero_grid, 220px);";
        $tletra= "13px;";
	}
	
   
}


if($this->agent->is_mobile()){
	//$style_grid="grid-template-columns:repeat(2, 160px);";
	$style_grid="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));";
}


?>

        <div class="candidatos" style="display: <?= $grid ?>; <?= $style_grid ?>">
            <h3 class="text-center" id="candidato-no-encontrado" style="display:none;">Sin resultados</h3>

            <?php
                    foreach ($candidatos as $candidato): $contador++; ?>
            <?php

                    if ($contador % $numero_candidatos_grid == 0):
                        
                    endif;
                    ?>

            <div class="candidato" title="<?php echo trim($candidato->TEX_NOMCAN.' '.$candidato->TEX_APECAN) ?>">
           <!-- data-placement="bottom"   -->
            <label class="voto-area" style="width: 100%;height: auto;display: block;" data-toggle="tooltip"  title="<?= $candidato->TEX_PERCAN ?>">
               
               
                    <div class="profile-header-container">
                        <div class="profile-header-img">
                            <input type="checkbox" value="1" name="NUM_TOVOCA[]"
                                style=" border: 0px; width: 0px; height: 1.2em; opacity: 0;"
                                id="<?= $candidato->ID_CANDID ?>"
                                class="check-candidato agen_<?= $candidato->COD_AGENCIA ?>">
                            <input type="hidden" name="ID_CANDID[]" value="" class="val-candid" disabled="">
                            <?=  img($candidato->TEX_FOTO) ?>
                        </div>
                    </div>
                    <div
                        style="padding: 5px; display: flex; justify-content: center; align-items: center; word-break: break-all;">
                        <h3 style="font-size:<?= $tletra ?>;font-weight: 900;">
                            <?= $candidato->TEX_NOMCAN."<br>".$candidato->TEX_APECAN   ?></h3>
                    </div>
                  
                   
                </label>
            </div>


            <?php endforeach; ?>

            <?php if ($instancia->BOL_VOTBLA): ?>
            <div class="candidato">
            <label class="voto-area" style="width: 100%;height: auto;display: block;">

                    <div class="profile-header-container container-voto-blanco">
                        <div class="profile-header-img">
                            <input type="checkbox" value="1" name="BOL_VOTBLA" id="BOL_VOTBLA"
                                style=" border: 0px; width: 0px; height: 1.2em; opacity: 0;">
                            <input type="hidden" name="ID_BLANCO" id="id-voto-blanco"
                                value="<?= $voto_blanco->ID_CANDID ?>" class="val-banco" disabled="">
                                <?= img($voto_blanco->TEX_FOTO) ?>
                               <!-- <img src="<?= base_url() ?>uploads/candidatos/en_blanco.jpg" alt="">-->
                               
                           
                            <!-- badge -->
                        </div>
                    </div>
                    <div
                        style="padding: 5px; display: flex; justify-content: center; align-items: center; word-break: break-all;">
                        <h3 style="font-size:<?= $tletra ?>;font-weight: 900;">Voto en Blanco</h3>
                    </div>
                </label>
            </div>

            <?php endif; ?>


            <?php if($previsualizar_votacion): ?>
            <input type="hidden" name="previsualizar_votacion" id="previsualizar-votacion" value="1">
            <?php endif; ?>
            <input type="submit" class="btn btn-default boton-votar" value="Votar">
            <?= form_close(); ?>
    </section>

    <!-- Modal cargando pagina... -->
    <div class="modal fade" id="modal-cargando-pagina" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-danger">Cargando...</h3>
                    <h3 class="text-center text-danger">Por favor espere.</h3>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal Aviso tiempo agotado -->
    <div class="modal fade" id="modal-tiempo-agotado" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-danger">El tiempo de votación se ha terminado.</h3>
                </div>
                <div class="modal-footer">
                    <a href="<?= base_url('acceso/logout') ?> " class="btn btn-default btn-leave-app">Salir</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Aviso max candidatos seleccionados -->
    <div class="modal fade" id="modal-max-candidatos" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-danger" style=" margin: 0; padding: 0; color: #333; font-weight: 800;">
                   Ya has seleccionado el máximo de candidatos.</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="font-weight: 900;
                    padding: 10px 5px;background: var(--principal); color: #fff; border: none; text-transform: uppercase;
                     transition: all 0.3s ease-out;">Entiendo</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Aviso max candidatos seleccionados -->
    <div class="modal fade" id="modal-max-candidatos" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-success"><?= $mensaje_bienvenida ?></h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrare</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal previsualización de votos -->
    <div class="modal fade" id="modal-prev-votos" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="
    border-radius: 10px;">
        <div class="modal-content" style="
    border-radius: 10px;">
            <div class="modal-body" style="
    border-radius: 10px;">
                <h3 class="text-center text-success"
                    style="margin:0;padding:0; color: var(--principal); font-weight: 800;">Señor@
                    <?= $this->session->userdata('TEX_NOMPAR') ?> <?= $this->session->userdata('TEX_APEPAR') ?></h3>
                <h3 class="text-center text-success"
                    style="margin: 14px;padding: 0;font-size: 1.0em;font-weight: 800;color: #000000bf;">Está seguro de realizar su VOTO por:
                </h3>
                <br>
                <p id="lista-candidatos" class="text-success" style="font-size: 1.0em;
                font-weight: 800; color: #000000bf;"></p>
                <div class="row">
                    <div class="col-12 col-xs-12 col-md-6 col-lg-6 text-right">
                        <button type="button" class="btn btn-success btn-lg boton-votar-ajax btn-si-votar">Si</button>
                    </div>
                    <div class="col-12 col-xs-12 col-md-6 col-lg-6">
                        <button type="button" class="btn btn-danger btn-lg boton-votar-no-ajax btn-no-votar"
                            data-dismiss="modal">No</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
    </div>

    <!-- Modal previsualización de votos -->
    <div class="modal fade" id="modal-alertas" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-danger">Mensaje del sistema</h3>
                    <p id="mensaje-sistema" class="text-danger text-center" style="font-weight:600;"></p>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="window.location.reload();">Cerrar</button>
               
                </div>
            </div>
        </div>
    </div>
    <span class="ir-arriba icon-arrow-up2" style="display:none;
	padding:20px;
	background:#024959;
	font-size:20px;
    background:url(<?php echo base_url().'uploads/subir.png' ?>) 50% 50% no-repeat rgb(74 76 85 / 0%);
	color:#fff;
	cursor:pointer;
	position: fixed;
    border-radius: 10px;
	bottom:20px;
    top:3px;
	right:20px;"></span>
</main>
 </div>
<?php
$data_view['loajs'] = $load_js;
$this->load->view('template/footer_front.php', $data_view);
?>

<script>
$(document).ready(function() {

    
    $('.ir-arriba').click(function(){
    $('body, html').animate({
        scrollTop: '0px'
    }, 300);
});

$(window).scroll(function(){
    if( $(this).scrollTop() > 0 ){
        $('.ir-arriba').slideDown(300);
    } else {
        $('.ir-arriba').slideUp(300);
    }
});

    /**
     * MAX de candidatos a seleccionar
     * @type int
     */
    var maxCheck =
        <?= ($agencia_participante->NUM_MUSEAG > 0)?$agencia_participante->NUM_MUSEAG:$instancia->NUM_MUSEIN ?>;
    /**
     * Si esta la opcíón de check para un solo candidato se activa el botón de votar. 
     * 
     * @type Bool.
     */
    var onlyOneCheck = <?= $instancia->BOL_OBLMUL ?>;



    /**
     *  El número de selección máximo de candidatos por agencia. Depende de
     *  la agencia del participante. 
     * 
     * @type int
     */
    var maxCandidatoPorAgencia = <?= $agencia_participante->NUM_MUSEAG ?>


    /**
     * Evento selección de candidatos. 
     */
    $('.check-candidato').on('click', function() {
        var vl =  $('#BOL_VOTBLA').is(':checked');

        if(vl==true){ 
           // console.log('cad'+vl);
             $(this).parent().css({
                    "opacity": "70"
                });
                $('.candidatos-contenedor').css('background', '');
                $('#' + candidatoId + '').next().val('')
                $('#' + candidatoId + '').next().prop('disabled', true);
                $(this).parent().parent().parent().parent().css('background-color', '');
                $(this).parent().parent().css('background-color', '');
                $(this).parent().parent().css('background-image', '');
                $(this).parent().parent().css({
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                    "width": "100%",
                    "height": "auto",
                    "transform": "translateY(-5 px)",
                    "color": "rgb(255, 255, 255)",
                    "cursor": "pointer"
                });
        
        }else{  
      

        var cantidadCheck = $('input.check-candidato:checkbox:checked').length;
        var candidatoId = $(this).attr('id');
    
         var checked = $(this).is(':checked');

        $('.texto-max-candidatos').hide();
        $('.texto-cantidad-candidatos').show();
        $('#total-seleccionado').html(maxCheck);

        if (cantidadCheck === 0) {
            $('.texto-max-candidatos').show();
            $('.texto-cantidad-candidatos').hide();
        }

        if (cantidadCheck <= maxCheck) {
            $('#seleccion-candidato').html(cantidadCheck);
        }
         
            if (checked) {
                $('#id-voto-blanco').prop('disabled', true);
                $('#BOL_VOTBLA').prop('checked', false);
                $('.container-voto-blanco').css({
                    "background-color": 'rgba(252, 135, 58, 0.31)',
                    "background-image": 'url(<?php echo base_url().'uploads/backgrounds/equis.svg' ?>)',
                    "display": "block",
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                    "width": "100%",
                    "height": "auto"

                });

                //Si esta definido el max. por agencia.
                if (maxCandidatoPorAgencia) {
                    if (cantidadCheck > maxCandidatoPorAgencia) {
                        $('#modal-max-candidatos').modal({
                            keyboard: false,
                            backdrop: 'static'
                        });
                        return false;
                    }

                } else {
                    if (cantidadCheck > maxCheck) {
                        $('#modal-max-candidatos').modal({
                            keyboard: false,
                            backdrop: 'static'
                        });
                        return false;
                    }
                }


                $('#' + candidatoId + '').next().prop('disabled', false);
                $('#' + candidatoId + '').next().val(candidatoId)
                $('.candidatos-contenedor').css('background-color', '');
                $(this).parent().css({
                    "opacity": "0.3"
                });

                $(this).parent().parent().parent().parent().css('background-color', 'rgba(252, 135, 58, 0.31)');
                $(this).parent().parent().css('background-color', 'rgba(252, 135, 58, 0.31)');
                $(this).parent().parent().css({
                    "background-image": 'url(<?php echo base_url().'uploads/backgrounds/equis.svg' ?>)',
                    "display": "block",
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                    "width": "100%",
                    "height": "auto"

                });

            } else {
                $(this).parent().css({
                    "opacity": "70"
                });
               // $('.profile-header-img').css('opacity', '70');
                $('.candidatos-contenedor').css('background', '');
                $('#' + candidatoId + '').next().val('')
                $('#' + candidatoId + '').next().prop('disabled', true);
                $(this).parent().parent().parent().parent().css('background-color', '');
                $(this).parent().parent().css('background-color', '');
                $(this).parent().parent().css('background-image', '');
                $(this).parent().parent().css({
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                    "width": "100%",
                    "height": "auto",
                    "transform": "translateY(-5 px)",
                    "color": "rgb(255, 255, 255)",
                    "cursor": "pointer"
                });
            }
            //Si se alcanza la cantidad de candidatos seleccionados se activar votar.
            if (cantidadCheck === maxCheck) {
                $('.boton-votar').show();
            } else {
                if (!onlyOneCheck) {
                    if (cantidadCheck < maxCheck) {
                        $('.boton-votar').show();
                        if (cantidadCheck === 0) {
                            $('.boton-votar').hide();
                        }
                    }

                } else {
                    if (cantidadCheck < maxCheck) {
                        $('.boton-votar').hide();
                    }
                }
            }
            //Si selecciona solo un candidato el botón se activa
            if (onlyOneCheck === 0) {
                if (checked) {
                    $('.boton-votar').show();
                }
            }
}    });

    $('.boton-votar').on('click', function() {
        $(this).hide();
    });

    $('#BOL_VOTBLA').on('click', function() {
        var checked = $(this).is(':checked');
        var votoId = $('#id-voto-blanco').val();
       // console.log("eeref"+votoId);
        if (checked) {
          //  console.log("ddddddfd");
            $('.check-candidato').click();
            
          //  document.querySelector(".check-candidato").click();
        //    $('.check-candidato').on('click', function() {
            $('#id-voto-blanco').prop('disabled', false);
            $('#seleccion-scandidato').html(1);
            $('#total-seleccionado').html(1);
            $(this).parent().parent().css('background-color', 'rgba(252, 135, 58, 0.31)');
            $(this).parent().parent().css({
                "background-image": 'url(<?php echo base_url().'uploads/backgrounds/equis.svg' ?>)',
                "display": "block",
                "background-repeat": "no-repeat",
                "background-position": "center center",
                "width": "100%",
                "height": "auto"

            });

            $(this).parent().css({
                "opacity": "0.3"
            });
        }

        else {
            //console.log('rtrtrt');
            $(this).parent().css({
                "opacity": "70"
            });

            $('#id-voto-blanco').next().val('')
            $('#id-voto-blanco').next().prop('disabled', true);
           // $('.profile-header-img').css('opacity', '70');
           $('.check-candidato').prop('checked', false);
           $('.candidatos-contenedor').css('background', '');
            $(this).parent().parent().css('background-color', '');
            $(this).parent().parent().css('background-image', '');
            $(this).parent().parent().css({
                "background-repeat": "no-repeat",
                "background-position": "center center",
                "width": "100%",
                "height": "auto",
                "transform": "translateY(-5 px)",
                "color": "rgb(255, 255, 255)",
                "cursor": "pointer"
            });
        }
    });



    $('.boton-votar').on('click', function(e) {
        e.preventDefault();
        var data = $('#crear-form').serialize();
       // console.log('vamo'+data)
        $.ajax({
            type: "POST",
            url: baseUrl + 'votacion/proceso',
            data: data,
            dataType: "json",
            success: function(response) {
                if (response.type == 'error') {
                    $('#modal-alertas').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                    $('#modal-alertas #mensaje-sistema').html(response.message);

                    if (response.redirect) {
                        setTimeout(
                            function() {
                                location.assign(baseUrl + response.redirect);
                            }, 3000);

                    }
                    return false;
                }
                if (response.url_retorno) {
                    window.location.href = response.url_retorno;
                    return false;
                }
                $('#modal-prev-votos #lista-candidatos').html(response.message);
                $('#modal-prev-votos').modal({
                    keyboard: false,
                    backdrop: 'static'
                });

            }
        });
    });




    $('.boton-votar-no-ajax').on('click', function(e) {
        location.reload();
    });
    $('.boton-votar-ajax').on('click', function(e) {
        var yyy = '<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>'
        var sweet_loader = '<div class="sweet_loader"><svg viewBox="0 0 140 140" width="140" height="140"><g class="outline"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="rgba(0,0,0,0.1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g class="circle"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="#71BBFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="200" stroke-dasharray="300"></path></g></svg></div>';
       
        e.preventDefault();
        $('#previsualizar-votacion').val('0');
        var data = $('#crear-form').serialize();
        $.ajax({
            type: "POST",
            url: baseUrl + 'votacion/proceso',
            data: data,
            dataType: "json",
            beforeSend: function() {
                swal({
                  //  text: "Procesando...",
                    //icon: "info",
                    buttons: false,
                   // dangerMode: true,
                    html: '<h5>Loading...</h5>',
            showConfirmButton: false,
            onRender: function() {
                 // there will only ever be one sweet alert open.
                 $('.swal2-content').prepend(sweet_loader);
            }
                })
            },
            success: function(response) {
                if (response.type == 'error') {
                    $('#modal-prev-votos').modal('hide');
                    $('#modal-alertas').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                    $('#modal-alertas #mensaje-sistema').html(response.message);
                    if (response.url_retorno) {
                        window.location.href = response.url_retorno;
                    }

                    if (response.redirect) {
                        setTimeout(
                            function() {
                                location.assign(baseUrl + response.redirect);
                            }, 3000);

                    }
                    return false;
                }
                if (response.url_retorno) {
                    window.location.href = response.url_retorno;
                }

            }
        });
    });

});
$(window).load(function() {
    $(".loader").fadeOut("slow");
});


$(document).ready(function () {
    // Mostrar la modal al cargar la página
    $('#modal-bienvenida').modal('show');

    // Bloquear el contenido de la página mientras la modal esté visible
    $('#modal-bienvenida').on('shown.bs.modal', function () {
        $('#contenido-pagina').addClass('oculto');
    });

    // Al cerrar la modal, desbloquear el contenido
    $('#modal-bienvenida').on('hidden.bs.modal', function () {
        $('#contenido-pagina').removeClass('oculto');
    });
});


$('#btn-entendido').on('click', function () {
    $('#modal-bienvenida').modal('hide'); // Cierra la modal
    $('#contenido-pagina').removeClass('oculto'); // Desbloquea el contenido
});
// === Tooltips auto en móvil al hacer scroll (mostrar mientras esté visible) ===
(function(){
  var isMobile = window.matchMedia("(max-width: 767px)").matches ||
                 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  if (!isMobile) return;

  var ENTER_RATIO = 0.45;   // entra un poco antes (más sensible)
  var EXIT_RATIO  = 0.25;   // sale un poco después (hace la salida más "lenta")
  var HIDE_DELAY  = 250;    // retardo para evitar parpadeos al salir

  // Re-init tooltips en modo manual solo para móvil
  try { $('[data-toggle="tooltip"]').tooltip('destroy'); } catch(e){}
  $('[data-toggle="tooltip"]').each(function(){
    var $el = $(this);
    var t = $el.attr('title') || $el.attr('data-original-title') || '';
    $el.attr('data-original-title', t);
  }).tooltip({
    container: 'body',
    trigger: 'manual',
    placement: 'auto'
  });

  var hideTimers = new WeakMap();

  function show($el){
    // Oculta otros y muestra el actual
    $('[data-toggle="tooltip"]').not($el).tooltip('hide');
    if (hideTimers.has($el[0])) { clearTimeout(hideTimers.get($el[0])); }
    $el.tooltip('show');
  }

  function scheduleHide($el){
    if (hideTimers.has($el[0])) { clearTimeout(hideTimers.get($el[0])); }
    var t = setTimeout(function(){ $el.tooltip('hide'); }, HIDE_DELAY);
    hideTimers.set($el[0], t);
  }

  var thresholds = [0,0.15,0.25,0.35,0.45,0.55,0.65,0.75,1];

  // rootMargin: muestra más arriba y evita que los primeros se queden sin disparar
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      var $el = $(entry.target);
      if (entry.isIntersecting && entry.intersectionRatio >= ENTER_RATIO){
        show($el);
      } else if (entry.intersectionRatio <= EXIT_RATIO){
        scheduleHide($el);
      }
    });
  }, { threshold: thresholds, rootMargin: '12% 0px -40% 0px' });

  document.querySelectorAll('.voto-area').forEach(function(el){ io.observe(el); });

  // Disparo inicial tras layout para que los primeros/segundos aparezcan si ya están a la vista
  window.setTimeout(function(){
    var vh = window.innerHeight || document.documentElement.clientHeight;
    var vw = window.innerWidth  || document.documentElement.clientWidth;
    document.querySelectorAll('.voto-area').forEach(function(el){
      var r = el.getBoundingClientRect();
      var visibleH = Math.max(0, Math.min(r.bottom, vh) - Math.max(r.top, 0));
      var visibleW = Math.max(0, Math.min(r.right,  vw) - Math.max(r.left, 0));
      var areaRatio = (visibleH * visibleW) / Math.max(1, (r.width * r.height));
      if (areaRatio >= ENTER_RATIO) show($(el));
    });
  }, 300);
})();

</script>


<style>
@media (max-width: 767px){
  .tooltip-inner{
    max-width: 260px;
    font-size: 14px;
    text-align: left;
  }
}


.boton-votar {
    position: fixed;
    top: 85%;
    width: 100%;
    background: var(--principal);
    margin: 0;
    padding: 1px 1px;
    font-size: 35px !important;
    left: 0px;
    height: auto;
}




label {
    display: grid;
    max-width: 100%;
    font-weight: 600;
    margin: 30px 0;
    grid-gap: 1em;
}

#tarjeton .profile-header-img>img.img-circle {
    border: 2px solid #FC873A00;
}

h1 {
    color: #959595;
    border-bottom: 1px dotted var(--principal);
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 300;
}

#foto-candidato img {

    margin: 0 0 0 0px;
    padding: 0px;
}



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

.votacion {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.votacion header {
    background: var(--gris-oscuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--gris-oscuro);
}


body {
    color: #444444;
    height: 100vh;
    padding: 0;
    margin: 0;
    background: #F3F2F2;
    font-family: 'Roboto', sans-serif;
}

strong {
    font-weight: 900;
}

.votacion h1 {
    text-align: center;
    font-weight: 900;
    color: #000;
}


.votacion .candidato {
    background: #ffffff;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
    transition: all 0.3s ease-out;
}

img {
    width: 100%;
    height: auto;
    display: block;
}


.votacion main {
    padding: 0 10%;
}

.btn-votar {
    border: none;
    background: var(--principal);
    color: #ffffff;
    font-size: 30px;
    text-transform: uppercase;
    padding: 15px;
    cursor: pointer;
    position: sticky;
    bottom: 0;
}


a {
    color: var(--principal);
    text-decoration: none;
    transition: all 0.3s ease-out;
}

.candidatos h3::before {
    /* content: url(<?php echo base_url().'uploads/backgrounds/icon.svg' ?>);*/
    position: absolute;
    height: 100px;
    width: 100px;
    top: -23px;
    left: 0;
    animation: aparece 0.5s;
}


.candidato:hover,
.candidatos .seleccionado {
    transform: translateY(-5px);
    box-shadow: 1px 5px 3px rgb(0 0 0 / 10%);
    background: var(--principal);
    color: #fff;
    cursor: pointer;

}
img {
    width: 100%;
    height: 307px;
    display: block;
}


</style>