<!DOCTYPE html>
<html>
	<!-- HEAD -->		
	<?php include 'includes/head.php';?>
	<!-- FIN HEAD -->
	
	<body data-plugin-page-transition>
		<div class="body">			
		
		<!-- HEADER -->			
		<?php include 'includes/header.php';?>
		<!-- FIN HEADER -->


		  <?php
			// index.php
			// ubicacion JSON online y local
			define('JSON', 'http://identificacionanimal.com/includes/clientes.json');
			define('JSONlocal', 'includes/clientes.json'); 
			// leer JSON validamos si el fichero online e accesible y si no abrimos el json local
			if($data = @file_get_contents(JSON)){
			 $items = json_decode($data, true);
			}
			else{
			 $data = file_get_contents(JSONlocal);
			 $items = json_decode($data, true);
			}
			//lista de items a recorrer
			$listaItems = $items["clientes"]["cliente"];
			?>
		 


			<div role="main" class="main">
							
				
				<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-dark overlay-show overlay-op-5" style="background-image: url(img/animid/proyectos.jpg);">
					<div class="container">
						<div class="row mt-5">
							<div class="col-md-12 align-self-center p-static order-2 text-center">
								<h1 class="text-9 font-weight-bold">Clientes</h1>
								<span class="sub-title">Identificación Animal</span>
							</div>
								<!-- <div class="col-md-12 align-self-center order-1">
								<ul class="breadcrumb breadcrumb-light d-block text-center">
									<li><a href="#">Home</a></li>
									<li class="active">Pages</li>
								</ul>
							</div> -->
						</div>
					</div>
				</section>
				
				
				<div class="row text-center pb-2 pt-5">
								<div class="row text-center pb-3">
								<div class="col-md-9 mx-md-auto">
									<div class="heading heading-border heading-bottom-border" id="sireida">
										<h1 class="font-weight-normal" data-appear-animation="maskUp">
											SIREIDA
										</h1>
									</div>

								</div>
							</div>
				</div>



									

				
			
			<div class="masonry-loader masonry-loader-loaded">
			<div class="masonry row g-0" data-plugin-masonry="" data-plugin-options="{'itemSelector': '.masonry-item'}" style="position: relative; height: 304.35px;">
					<?php
						 //bucle para recorrer los elementos del array
						 for($i = 0; $i<count($listaItems); $i++){
								 // Agregar una condición para filtrar por el valor de "tipo" que deseas
							if ($listaItems[$i]["tipo"] == "Sireida") {
						?>
					
					
						
									<div class="masonry-item no-default-style col-sm-3" style="position: absolute; left: 0px; top: 0px;">
										<a href="<?php echo $listaItems[$i]["url"]; ?>" target="_blank">
											<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
												<span class="thumb-info-wrapper">
													<?php echo '<img class="img-fluid" src= img/animid/clientes/' . $items['clientes']['cliente'][$i]['foto']['content'] . '>'; ?>
													<span class="thumb-info-title">
														<span class="thumb-info-inner"><?php echo $listaItems[$i]["nombre"]["content"]; ?></span>
											<span class="thumb-info-type"><?php echo $listaItems[$i]["tipo"]; ?></span>
													</span>
													<span class="thumb-info-action">
														<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
													</span>
												</span>
											</span>
										</a>
									</div>
					
					<?php 
						  }
					 } //cerramos bucle
					?>
			</div>
			</div>
				
				<div class="row text-center pb-2 pt-5">
							<div class="row text-center pb-3">
								<div class="col-md-9 mx-md-auto">
									<div class="heading heading-border heading-bottom-border" id="riovid">
										<h1 class="font-weight-normal" data-appear-animation="maskUp">
											DATAPETS
										</h1>
									</div>

								</div>
							</div>
				</div>

				<div class="masonry-loader masonry-loader-loaded">
				<div class="masonry row g-0" data-plugin-masonry="" data-plugin-options="{'itemSelector': '.masonry-item'}" style="position: relative; height: auto;">
					<?php
						 //bucle para recorrer los elementos del array
						 for($i = 0; $i<count($listaItems); $i++){
								 // Agregar una condición para filtrar por el valor de "tipo" que deseas
							if ($listaItems[$i]["tipo"] == "Datapets") {
						?>
					<div class="masonry-item no-default-style col-sm-3" style="position: absolute; left: 0px; top: 0px;">
										
											<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
												<span class="thumb-info-wrapper">
													<?php echo '<img class="img-fluid" src= img/animid/clientes/' . $items['clientes']['cliente'][$i]['foto']['content'] . '>'; ?>
													<span class="thumb-info-title">
														<span class="thumb-info-inner"><?php echo $listaItems[$i]["nombre"]["content"]; ?></span>
											
										<?php if (!empty($listaItems[$i]["url"])) { ?>
											<a href="<?php echo $listaItems[$i]["url"]; ?>" target="_blank" class="btn btn-primary btn-sm">
												Android
											</a>
										<?php } ?>

										<?php if (!empty($listaItems[$i]["web"])) { ?>
											<a href="<?php echo $listaItems[$i]["web"]; ?>" target="_blank" class="btn btn-primary btn-sm">
												IOs
											</a>
										<?php } ?>


									</div>
					<?php 
						  }
					 } //cerramos bucle
					?>
				</div>
				</div>




				<div class="row text-center pb-2 pt-5">
								<div class="row text-center pb-3">
								<div class="col-md-9 mx-md-auto">
									<div class="heading heading-border heading-bottom-border" id="sirequid">
										<h1 class="font-weight-normal" data-appear-animation="maskUp">
											SIREQUID
										</h1>
									</div>

								</div>
							</div>
				</div>

				<div class="masonry-loader masonry-loader-loaded">
				<div class="masonry row g-0" data-plugin-masonry="" data-plugin-options="{'itemSelector': '.masonry-item'}" style="position: relative; height: 304.35px;">
					<?php
						 //bucle para recorrer los elementos del array
						 for($i = 0; $i<count($listaItems); $i++){
								 // Agregar una condición para filtrar por el valor de "tipo" que deseas
							if ($listaItems[$i]["tipo"] == "Sirequid") {
						?>
					
					<div class="masonry-item no-default-style col-sm-3" style="position: absolute; left: 0px; top: 0px;">
										<a href="<?php echo $listaItems[$i]["url"]; ?>" target="_blank">
											<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
												<span class="thumb-info-wrapper">
													<?php echo '<img class="img-fluid" src= img/animid/clientes/' . $items['clientes']['cliente'][$i]['foto']['content'] . '>'; ?>
													<span class="thumb-info-title">
														<span class="thumb-info-inner"><?php echo $listaItems[$i]["nombre"]["content"]; ?></span>
											<span class="thumb-info-type"><?php echo $listaItems[$i]["tipo"]; ?></span>
													</span>
													<span class="thumb-info-action">
														<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
													</span>
												</span>
											</span>
										</a>
									</div>
					<?php 
						  }
					 } //cerramos bucle
					?>
			</div>
			</div>





				<div class="row text-center pb-2 pt-5">
							<div class="row text-center pb-3">
								<div class="col-md-9 mx-md-auto">
									<div class="heading heading-border heading-bottom-border" id="riovid">
										<h1 class="font-weight-normal" data-appear-animation="maskUp">
											RIOVID
										</h1>
									</div>

								</div>
							</div>
				</div>

				<div class="masonry-loader masonry-loader-loaded">
				<div class="masonry row g-0" data-plugin-masonry="" data-plugin-options="{'itemSelector': '.masonry-item'}" style="position: relative; height: 304.35px;">
					<?php
						 //bucle para recorrer los elementos del array
						 for($i = 0; $i<count($listaItems); $i++){
								 // Agregar una condición para filtrar por el valor de "tipo" que deseas
							if ($listaItems[$i]["tipo"] == "Riovid") {
						?>
					<div class="masonry-item no-default-style col-sm-3" style="position: absolute; left: 0px; top: 0px;">
										<a href="<?php echo $listaItems[$i]["url"]; ?>" target="_blank">
											<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
												<span class="thumb-info-wrapper">
													<?php echo '<img class="img-fluid" src= img/animid/clientes/' . $items['clientes']['cliente'][$i]['foto']['content'] . '>'; ?>
													<span class="thumb-info-title">
														<span class="thumb-info-inner"><?php echo $listaItems[$i]["nombre"]["content"]; ?></span>
											<span class="thumb-info-type"><?php echo $listaItems[$i]["tipo"]; ?></span>
													</span>
													<span class="thumb-info-action">
														<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
													</span>
												</span>
											</span>
										</a>
									</div>
					<?php 
						  }
					 } //cerramos bucle
					?>
				</div>
				</div>


				





				
			<!-- FOOTER -->
				<?php include 'includes/footer.html';?>
			<!-- FIN FOOTER -->


		</div>

		
			<!-- FOOTER JS -->
				<?php include 'includes/footer-js.html';?>
			<!-- FIN FOOTER JS -->

		
		
		</body>
</html>
