<?php $this->load->view('template/head_front.php'); ?>
<?php $this->load->view('template/header_admin.php'); ?>
<style> 
div.roulette {
	margin-top: 35px;
}
div.roulette-inner {
	left : 33px;
}


div.roulette { 
    border: 1px solid #FC873A;
}

div.roulette_container {
	background-color:rgb(253, 252, 253);
	width:200px;
	height:200px;
	border:1px solid rgba(253, 252, 253, 0.31);
	box-shadow:0px 0px 3px lightpink;margin:auto;
}

.btn_container {
	margin:20px;
	text-align:center;
}
.btn_container .start {
	margin-right:20px;
}
.log_container {
	margin-left:25px;
	margin-top:80px;
}
.demo_label {
	border-left:5px solid gray;
	padding-left:5px;
	font-size: 20px;
}

div.ui-slider {
	width: 300px;
}


.footer {
    display:none;
}
</style>

<body>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h3 style="text-align: center; margin-top: 50px;"><?= $titulo ?> </h3>
<h4 style="text-align: center; margin-top: 0px;">TOTAL DE PARTICIPANTES:  <?= count($participantes) ?> </h4>
</div>  
    </div> 

<div class="row">
<div class="col-lg-8 col-md-8 col-md-offset-2">
<div class="roulette" style="display:none;">
<?php foreach ($participantes as $key => $participante): ?>
<script>
var canvasElement<?= $participante->NUM_IDETER  ?> = document.createElement('canvas');
canvasElement<?= $participante->NUM_IDETER  ?>.width = 670;
canvasElement<?= $participante->NUM_IDETER  ?>.height = 100;
var canvas<?= $participante->NUM_IDETER  ?> = canvasElement<?= $participante->NUM_IDETER  ?>.getContext('2d');
canvas<?= $participante->NUM_IDETER  ?>.fillStyle = "#000";
canvas<?= $participante->NUM_IDETER  ?>.textAlign = "center";
canvas<?= $participante->NUM_IDETER  ?>.textBaseline = "middle";
canvas<?= $participante->NUM_IDETER  ?>.font = "bold 35px KaiTi, arial, helvetica, sans-serif";
canvas<?= $participante->NUM_IDETER  ?>.fillText("<?= trim($participante->nombre_participante)  ?>",320,50);
canvas<?= $participante->NUM_IDETER  ?>.canvas.toDataURL();
var url<?= $participante->NUM_IDETER  ?> = canvas<?= $participante->NUM_IDETER  ?>.canvas.toDataURL()
</script>  
    <img id="<?= $participante->NUM_IDETER ?>" src="">

<script>
document.getElementById("<?= $participante->NUM_IDETER  ?>").src = url<?= $participante->NUM_IDETER  ?>;
</script>    
<?php endforeach; ?>
    </div>  
    </div>  
</div>

<div class="row">
<div class="col-lg-4 col-md-4 col-md-offset-4">
<div class="btn_container">
<p>
<button class="btn btn-large btn-primary start"> INICIAR SORTEO </button>
<!-- <button class="stop btn-large btn btn-warning" disabled="disabled"> STOP </button> -->
</p>    
</div>
    </div>
    </div>

<div class="row">
<div class="col-lg-8 col-md-8 col-md-offset-2 ganador">
</div>
</div>

    </div>  

        <?php
         $data_view['loajs'] = $load_js;
         $this->load->view('template/footer_front.php', $data_view);
        ?>


