<div class="col-md-12">

	<div class="container">

		<div class="row">

			<div class="col-md-12" align="center" style="color: #FF5722; font-weight: bold; font-size: 50px; padding: 15px;">
				<b style=" color: #3a3a3a; padding: 7px 20px;"> SPEAKERS </b>
			</div>

			<?php
			$count = 1;
			$query1 = mysqli_query($connect, "SELECT distinct(tipo) FROM Conferencistas WHERE estado = 1 ORDER BY tipo ASC ");

			while ($data1 = mysqli_fetch_array($query1)) {
				$titulo = $data1['tipo'] == 1 ? 'Speakers Town Hall': ($data1['tipo'] == 2? 'Speakers desayunando con líderes': 'Speakers internacionales');
				echo '<div class="col-12"><h1>'.$titulo.'</h1></div>';
				$query = mysqli_query($connect, "SELECT * FROM Conferencistas WHERE estado = 1 AND tipo = ".$data1['tipo']." ORDER BY id ASC ");
				while ($data = mysqli_fetch_array($query)) {
					$bandera = '';
					if ($data["pais"] == 1) {
						$bandera .= '<img src="' . $url . '/img/ban_colombia.png" width="35" > ';
					}
					if ($data["pais"] == 2) {
						$bandera .= '<img src="' . $url . '/img/ban_peru.png" width="35" > ';
					}
					if ($data["pais"] == 3) {
						$bandera .= '<img src="' . $url . '/img/ban_mexico.png" width="35" > ';
					}
					if ($data["pais"] == 4) {
						$bandera .= '<img src="' . $url . '/img/ban_argentina.png" width="35" > ';
					}
					if ($data["pais"] == 5) {
						$bandera .= '<img src="' . $url . '/img/ban_espania.png" width="35" > ';
					}
					if ($data["pais"] == 6) {
						$bandera .= '<img src="' . $url . '/img/ban_polonia.png" width="35" > ';
					}

					echo '
					<div class="col-md-3 " align="center" style="margin-bottom: 30px;">
						<div>
						
                        <div class="item_speakers"> 
							
                            <img src="' . $recursos . '/' . $data["foto"] . '" width="100%" >
                            <div style="background-color: #d91e49; color: #ffffff; padding: 10px; background-position: left; background-size: cover;"> 
							     ' . $data["nombre"] . '
						    </div>
                            <div class="descripcion" >
								 <!-- <div align="center">' . $bandera . '</div> -->
								 <button type="button" class="btn btn-danger" style=" border-radius: 30px; margin-bottom: 15px; color: #000; font-size: 15px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;" data-toggle="modal" data-target="#modal_speaker_' . $data['id'] . '">
									Click aqui para ver más
								</button>
                                 <div style="margin-bottom: 8px; font-weight: bold;" align="center">' . $data["nombre"] . '</div>
				            </div>
							<div class="modal fade" id="modal_speaker_' . $data['id'] . '" tabindex="-1" role="dialog" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="exampleModalLabel">Información de ' . $data["nombre"] . '</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body" align="left">
									<b>Profesion: </b> ' . $data['profesion'] . '
									<br>
									<br>
									' . $data["descripcion"] . '

									</div>
								</div>
							</div>
						</div>
						</div>
						
						</div>
					</div>
					';
					$count++;
				}
			}
			?>

		</div>

	</div>

</div>

<style>
	.item_speakers {
		background-position: center;
		background-size: cover;
		border: 2px solid #242f48;
		cursor: pointer;
		border-radius: 20px;
		overflow: hidden;
	}

	.base_nombre {
		background-image: url(img/base_nombre.jpg);
		color: #ffffff;
		padding: 10px;
		border-top: 0px;
		border-radius: 0px;
		border: 0px;
		background-color: #059190;
		background-size: cover;
		background-position: left;
	}

	.descripcion {
		position: absolute;
		z-index: 1;
		color: #ffffff;
		top: 0;
		text-align: left;
		padding: 20px;
		font-size: 12px;
		opacity: 0;
		height: 100%;
		width: 92%;
		background-color: rgb(217 30 73 / 93%);
		overflow: auto;
		border-radius: 20px;
	}

	ul.a {
		list-style-type: circle;
	}
</style>

<script>
	$(".item_speakers").hover(
		function() {
			//$( this ).fadeTo( "slow", 0.33 );
			$(this).find(".descripcion").fadeTo("slow", 1);


		},
		function() {
			//$( this ).fadeTo( "slow", 1 );
			$(this).find(".descripcion").fadeTo("slow", 0);
		}
	);
</script>

<script>
$( document ).ready(function() {
    $("#bt_speaker").addClass("btn_item_menu_active"); 
});
</script>