<?php  
$status_water = $_GET['water_swicth'];
$status_light = $_GET['light_swicth'];
$status_air   = $_GET['air_swicth'];
$id = $_GET["id"];

if ($status_water == "on")
    { $water_on = "selected"; 
      $file = fopen("light.json", "w") or die("can't open file");
      fwrite($file, '{"water_sensor":'.$id.'}');
      fclose($file);
    }
if ($status_water == "off") {  
  $file = fopen("light.json", "w") or die("can't open file");
      fwrite($file, '{"water_sensor": "0"}');
  fclose($file);
}

if ($status_light == "on")
    { $light_on = "selected"; 
      $file = fopen("light.json", "w") or die("can't open file");
      fwrite($file, '{"water": "off", "light":"on", "air":"off", "id":"'.$id.'"}');
      fclose($file);}
if ($status_light == "off") {  
  $file = fopen("light.json", "w") or die("can't open file");
      fwrite($file, '{"water": "off", "light":"off", "air":"off", "id":"0"}');
  fclose($file);
}

if ($status_air == "on")
    { $air_on = "selected"; 
      $file = fopen("light.json", "w") or die("can't open file");
      fwrite($file, '{"water": "off", "light":"off", "air":"on", "id":"'.$id.'"}');
      fclose($file);}
if ($status_air == "off") {  
  $file = fopen("light.json", "w") or die("can't open file");
      fwrite($file, '{"water": "off", "light":"off", "air":"off", "id":"0"}');
  fclose($file);
}
?>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/gauge.css" />
    <link rel="stylesheet" href="css/MyTheme.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="jquery.switchButton.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="test">
    <?php
$id = $_GET["id"];
    $connection1 = mysqli_connect("","","","") or die("Error " . mysqli_error($connection1));
    $sql1 = "select id, plant_name, picture from Plants where id=$id";
        
    $result1 = mysqli_query($connection1, $sql1) or die("Error in Selecting " . mysqli_error($connection1));

	while($row1 =mysqli_fetch_assoc($result1)){
	?>
            <div data-role="header" data-position="fixed" style="height:55px;"> <a href="index.php" data-icon="arrow-l" rel="external">Back</a>
                <h1 style="padding:.5em 0px;"><?php echo $row1["plant_name"];?></h1> </div> <img src="Plants_img_big/<?php echo $row1["picture"];?>.jpg" alt="" style="width:100%;height:150px; border:1px solid black; margin:-1px;">
            <div id="page1" data-role="main" style="text-align: center; height:372px;background-size:100%; background-position: 0% 73%; background-image:url(images/bg.png);" class="ui-content">
                                  <div class="ui-field-contain">

                  </div>
                <p>
                    <div class="GaugeMeter" id="PreviewGaugeMeter_1" data-percent="90" data-append="%" data-size="90" data-theme="Green-Gold-Red" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="9" data-label="" data-style="Arch" data-label_color="fff"></div>
                    <div class="GaugeMeter" id="PreviewGaugeMeter_2" data-percent="60" data-append="%" data-size="90" data-theme="Red-Blue" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="9" data-label="" data-style="Arch" data-label_color="fff"></div>
                    <div class="GaugeMeter" id="PreviewGaugeMeter_3" data-percent="80" data-append="%" data-size="90" data-theme="White-Blue" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="9" data-label="" data-style="Arch" data-label_color="fff"></div>
                </p>
                <p>
                    <div style="width: 170px; margin:50px;" class="GaugeMeter" id="PreviewGaugeMeter_4" data-percent="60" data-size="170" data-theme="Yellow-Green" data-animate_text_colors="1" data-width="11" data-style="Arch" data-label_color="fff"></div>
                </p>
            </div>
            <?php }mysqli_close($connection1); ?>
                <div data-role="footer" style="text-align:center; height:55px;" data-position="fixed">
                    <div data-role="navbar">
                        <ul>
                            <li style="font-size: 14px;">Water
                                
<div id="water_switch">  
<select name="water" id="water" data-role="flipswitch" data-mini="true" class="switch">
    <option value="off" myTag="off">Off</option>
    <option value="on" myTag="on" <?php echo $water_on; ?>>On</option>
</select>
</div>
                                

                            </li>
                            <li style="font-size: 14px;">Light
<div id="light_switch">  
<select name="water" id="water" data-role="flipswitch" data-mini="true">
    <option value="off" myTag="off">Off</option>
    <option value="on" myTag="on" <?php echo $light_on; ?>>On</option>
</select>
</div>
                            </li>
                            <li style="font-size: 14px;">Air
<div id="air_switch">  
<select name="water" id="water" data-role="flipswitch" data-mini="true">
    <option value="off" myTag="off">Off</option>
    <option value="on" myTag="on" <?php echo $air_on; ?>>On</option>
</select>
</div>
                            </li>
                            <li>
                                <a href="#">
                                    <div style="width:40px; height:40px;background: url('images/stats.png');background-size:40px 40px;margin-left:auto;margin-right:auto; background-position:160px 0px;"></div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div style="width:40px; height:40px;background: url('images/info.png');background-size:40px 40px;margin-left:auto;margin-right:auto; background-position:160px 0px;"></div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
    </div>
<script type="text/javascript">

    $('#water_switch').on('click', function() {
    var checkStatus = $('option:selected', this).attr('mytag');
    window.location.href = "details.php?id=<?php echo $id; ?>&water_swicth=" + checkStatus; 
    });
    $('#light_switch').on('click', function() {
    var checkStatus = $('option:selected', this).attr('mytag');
    window.location.href = "details.php?id=<?php echo $id; ?>&light_swicth=" + checkStatus; 
    });
    $('#air_switch').on('click', function() {
    var checkStatus = $('option:selected', this).attr('mytag');
    window.location.href = "details.php?id=<?php echo $id; ?>&air_swicth=" + checkStatus; 
    });

</script>

    <script src="jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script>
    <script>
        $(".GaugeMeter").gaugeMeter();
    </script>

</body>

</html>