<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap" rel="stylesheet">
<style>

@page {
                margin: 0cm 0cm;
            }

            /** Define now the real margins of every page in the PDF **/
            body {
                margin-top: 3cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm;
                font-family: 'Arial', sans-serif;
            }
            
            p { page-break-after: always; }

            /** Define the header rules **/
            header {
                position: fixed;
                top: 0cm;
                left: 0cm;
                right: 0cm;
                height: 2cm;

                /** Extra personal styles **/
                background-color: url('https://quiz.sistemex.com/generarpdf/public/graficas/barrasistemex.png');
                color: white;
                text-align: center;
                line-height: 1.5cm;
            }

</style>


</head>    

<body style="font-size:20px;">
   <header>
            <img style="width:100%;" src="https://quiz.sistemex.com/generarpdf/public/graficas/barrasistemex.png" >
    </header>
	<div style="clear: both;">&nbsp;</div>
				<div style="clear: both;">&nbsp;</div>
			
<div id='subcontent'>
<div class="speed_details">

	
	<?php
	
	foreach ($json as $deviceType => $deviceInfo) {
		$divStyle = ($deviceType == 'desktop') ? "display: block;" : "";
		
		// chekc speed rule
		if ($deviceInfo['speed_score'] < 31) {
			$style = "color: #e84639;";
		}
		else if ($deviceInfo['speed_score'] < 50) {
			$style = "color: #ff6c00;";
		} else if ($deviceInfo['speed_score'] < 85) {
			$style = "color: #ff6c00;";
		} else {
			$style = "color: #0cce6b;";
		}
		
		
		// chekc speed rule
		if ($deviceInfo['speed_score'] == 0) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero0.png";
		}
		else if ($deviceInfo['speed_score'] > 0 && $deviceInfo['speed_score'] <= 10) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero10.png";
		} else if ($deviceInfo['speed_score'] > 10 && $deviceInfo['speed_score'] <= 20) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero20.png";
		} else if ($deviceInfo['speed_score'] > 20 && $deviceInfo['speed_score'] <= 30) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero30.png";
		} else if ($deviceInfo['speed_score'] > 30 && $deviceInfo['speed_score'] <= 40) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero40.png";
		}
		else if ($deviceInfo['speed_score'] > 40 && $deviceInfo['speed_score'] <= 50) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero50.png";
		}
		else if ($deviceInfo['speed_score'] > 50 && $deviceInfo['speed_score'] <= 51) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero51.png";
		}
		else if ($deviceInfo['speed_score'] > 51 && $deviceInfo['speed_score'] <= 60) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero60.png";
		}
		else if ($deviceInfo['speed_score'] > 60 && $deviceInfo['speed_score'] <= 70) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero70.png";
		}
		else if ($deviceInfo['speed_score'] > 70 && $deviceInfo['speed_score'] <= 80) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero80.png";
		}
		else if ($deviceInfo['speed_score'] > 80 && $deviceInfo['speed_score'] <= 89) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero89.png";
		}
		else if ($deviceInfo['speed_score'] > 89 && $deviceInfo['speed_score'] <= 90) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero90.png";
		}
		else if ($deviceInfo['speed_score'] > 90 && $deviceInfo['speed_score'] <= 95) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero95.png";
		}
		else if ($deviceInfo['speed_score'] > 95 && $deviceInfo['speed_score'] <= 98) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero98.png";
		}
		else if ($deviceInfo['speed_score'] > 98 && $deviceInfo['speed_score'] <= 100) {
			$image = "https://quiz.sistemex.com/generarpdf/public/graficas/Numero100.png";
		}
		
		// check usability rule
		if ($deviceInfo['usability_score'] < 50) {
			$usabilityStyle = "color: #DD4B3E";
		} else if ($deviceInfo['usability_score'] < 85) {
			$usabilityStyle = "color: #FDA100";
		} else {
			$usabilityStyle = "color: #009A2D";
		}
		
		?>
		<div id="<?php echo $deviceType;?>" class="tabcontent" style="<?php echo $divStyle; ?>">
		<h1><?php echo strtoupper($deviceType); ?></h1>
		
  <div style="
    text-align: center;
    font-size: 20px;z-index: 100;position:absolute;top:2cm;<?php echo $style; ?>" class="image-box__content">
    <h1><?php echo $deviceInfo['speed_score']?></h1>
  </div>
  <div style="text-align: center;z-index:99;" class="image-box__content">
    <img style="width:100px;" src="<?php echo $image; ?>" >
    <h3 style="text-align: center;">Perfomance</h3>
  </div>
</div>

				
				<!--div class="score_val" style="<?php //echo $style?>"><b>
				    Speed:</b> <?php //echo $deviceInfo['speed_score']?> / 100</div-->	

				<?php if ($deviceType == 'mobile') {?>
					<div class="score_val" style="<?php echo $usabilityStyle?>"><b>Usabilidad:</b> <?php echo $deviceInfo['usability_score']?> / 100</div>
				<?php }?>
			</div>
			
			<?php 
				$contador=0;
			foreach ($deviceInfo['details'] as $ruleType => $ruleInfo) {

				// chekc rule impact
				if ($ruleInfo['ruleImpact']) {
					$style = "color: #FDA100;";
					$style2 = "background: #FDA100;";
				} else {
					$style = "color: #009A2D;";
					$style2 = "background: #009A2D;";
				}
				
				if ($contador%2==0){
				        $colorFondo='background:#f7f7f7;';
				    }else{
				        $colorFondo='background:white;';
				        
				    }
				?>
				<div style="padding-top: 8px; border-top: 1px solid #ccc; <?php echo $colorFondo; ?> " >
				<h3 style="<?php echo $style?>"> 
				<?php echo $ruleInfo['localizedRuleName']?></h3>
				<!--div class="imapct_area"><b>Impact:</b> <?php //echo $ruleInfo['impactGroup']?></div--->
				<div><?php echo $ruleInfo['summary']?></div>
				<?php 
			
				
				foreach ($ruleInfo['urlBlocks'] as $urlBlockInfo) {
				    
					?>
					
					<h6><?php echo $urlBlockInfo['header']?></h6>
					<?php
					foreach ($urlBlockInfo['urls'] as $url) {
						?>
						<div class="url_area"><?php echo $url?></div>
						<?php
					}
				
				}
				?>
				
				<div style="clear: both;">&nbsp;</div>
				<div style="clear: both;">&nbsp;</div>
				
			
				<?php
			$contador=$contador+1;		
			}
			?>
			</div>
		</div>
		<?php
	}
	?>
</div>
</div>

<script type="text/php">
      if (isset($pdf)) {
          $x = 250;
          $y = 950;
          $text = "Página {PAGE_NUM} de {PAGE_COUNT}";
          $font = 20.6;
          $size = 20;
          $color = array(000,0,0);
          $word_space = 0.0;  //  default
          $char_space = 0.0;  //  default
          $angle = 0.0;   //  default
          $pdf->page_text($x, $y, $text, $font, $size, $color, $word_space, $char_space, $angle);
      }
  </script>
</body>    
</html>


