<!DOCTYPE html>
<html>
<head>
  <title>Energies</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html {font-family: Calibri;}
    body {background-color: #3d3d3d;}
    h2 {text-align: center;}
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
    }
    
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    } 
    
    .line {
      width: 400px;
      border-bottom: 3px;
      border-style: solid;
      border-color: #FFD65C;
      margin: 1em auto;
      
    }
    
    .image {
      flex-basis: 20%;
      order:1;
    }
    
    .text{
      font-size: 10px;
      padding-left: 10px;
      padding-right: 10px;
      order:2;
      text-align: center;
      color: #FFD65C;
    }
   
  </style>
</head><body>
<div class = "text">
<h1>Měření spotřeby</h1>
</div>
<a href="<?php echo 'data.csv'; ?>">
    <div class = "text"> <h1>Stáhnout informace o spotřebě</h1></div>
</a>
<?php
  // Image extensions
 // $image_extensions = array("png","jpg","jpeg","gif");

  // Target directory
  $dir = 'uploads/';
  $lastWaterLine = [];
  $lastGasLine = [];
  $lastElectricityLine = [];
  
  if (($handle = fopen("data.csv", "r")) !== FALSE){
    while(($data = fgetcsv($handle, 1000, ",")) !== FALSE){
      switch ($data[1]) {
        case "gas":
          $lastGasLine[0] = $data[0];
          $lastGasLine[1] = $data[1];
          $lastGasLine[2] = $data[2];
          break;
        case "water":
          $lastWaterLine[0] = $data[0];
          $lastWaterLine[1] = $data[1];
          $lastWaterLine[2] = $data[2];
          break;
        case "electricity":
          $lastElectricityLine[0] = $data[0];
          $lastElectricityLine[1] = $data[1];
          $lastElectricityLine[2] = $data[2];
          break;
        default:
          break;
      } 
        
      }
    }
  
  if (is_dir($dir)){
    echo '<div class = "flex-container">';
    $count = 1;
    $output = "";
    $files = scandir($dir);
    rsort($files);
    foreach ($files as $file) {
      if ($file != '.' && $file != '..') {
        switch ($file) {
          case "gas.jpg":
            $output = "Aktuální stav plynoměru {$lastGasLine[2]} m3";
            break;
          case "water.jpg":
            $output = "Aktuální stav vodoměru: {$lastWaterLine[2]} m3";
            break;
          case "electricity.jpg":
            $output = "Aktuální stav elektroměru: {$lastElectricityLine[2]} kWh";
            break;
          default:
            $output = "Neznámé zařízení";
            break;
        } ?>
          <div class = "container">
           <div class = "text"> <h1><?php echo $output; ?></h1></div>
          </div>
          <div class = "container">
            <div class = "image">
              <a href="<?php echo $dir . $file; ?>">
                <img src="<?php echo $dir . $file; ?>" style="width: 350px;">
              </a>
            </div>
          </div>
          <div class="line"></div>
          
<?php
       $count++;
      }
    }
    echo '</div>';
  }
  if($count==1) { echo "<p>No images found</p>"; } 
?>
 
</body>
</html>
