<!DOCTYPE html>
<?php
include_once("../config.php");
include_once("../functions_freeway.php");
date_default_timezone_set("Asia/Taipei");

$appstore = "<br><a href=\"https://itunes.apple.com/tw/app/id1513092130?l=zh&mt=8\" target=\"_blank\"><img class=\"appstore\" src=\"https://doitwell.app/img/appstore.png\"></a>";
$playstore = "<a href=\"https://play.google.com/store/apps/details?id=app.doitwell.cctvs\" target=\"_blank\"><img class=\"appstore\" src=\"https://doitwell.app/img/playstore.png\"></a>";

$qEncodedStr = "";
// die("DEBUG...");

$qRet = array();
// 預設值
$qLat = "24.688049814640937";
$qLon = "120.88507019431584";

// id:50282141 sid:09
$qID = "50282141";
$qSID = "09";

$qDefaultIDFile = "/mnt/cache.cctvs/speedCameras/defaultID.txt";
if (file_exists($qDefaultIDFile)) {
  $qContent = file_get_contents($qDefaultIDFile);
  $qTokens = preg_split("@\s+@", $qContent);
  if (strlen($qTokens[0])==8 and strlen($qTokens[1])==2) {
    $qID = $qTokens[0];
    $qSID = $qTokens[1];
  }
}

if (isset($_REQUEST['id']) and strlen(preg_replace("@[^0-9]@", "", $_REQUEST['id']))==10) 
{
  $qRealID = preg_replace("@[^0-9]@", "", $_REQUEST['id']);
  $qID = substr($qRealID, 0, 8);
  $qSID = substr($qRealID, 8, 2);
  if (!file_exists($qDefaultIDFile) or filemtime($qDefaultIDFile)<time()-24*3600) {
    file_put_contents($qDefaultIDFile, $qID."\n".$qSID); 
  }
} else if (isset($_REQUEST['loc'])) {
  $qTokens = preg_split("@,@", $_REQUEST['loc']);
  $qLat = preg_replace("@[^0-9\.]@","",$qTokens[0]);
  $qLon = preg_replace("@[^0-9\.]@","",$qTokens[1]);
}


// mysqli
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, "cctvs_db");
$mysqli->query("SET NAMES utf8mb4");
$mysqli->query("SET CHARACTER_SET_CLIENT=utf8mb4");
$mysqli->query("SET CHARACTER_SET_CLIENT=utf8mb4");
$mysqli_threadID = $mysqli->thread_id; // 重要，需要這個才能真正 kill, 有時 close 是不夠的

$qNearMarkers = array();
if (isset($_REQUEST['loc']) and isset($qLat) and isset($qLon)) 
{
  $sql  = "SELECT *,1.60934*3956 * 2 * ASIN(SQRT( POWER(SIN((". $qLat ."-abs(lat)) * pi()/180 / 2),2) + COS(". $qLat ." * pi()/180 ) * COS(abs(lat)* pi()/180) * POWER(SIN((". $qLon ." - lon) * pi()/180 / 2), 2) )) AS absDist";
  $sql .= " FROM cctvs";
  $sql .= " WHERE id LIKE 'speed_%'";
  $sql .= " AND note NOT LIKE '%移動式%'";
  $sql .= " ORDER BY absDist LIMIT 1";


  if ($result = $mysqli->query($sql)) {
     while ($row = $result->fetch_assoc()) {
        $qID = preg_replace("@[^0-9]+@", "",$row['id']);
        $qSID = $row['sid'];
     }
  } 

  /* close connection */
  $mysqli->kill($mysqli_threadID);
  $mysqli->close();

  header("Location: https://cctvs.doitwell.tw/speedCameras/". $qID .$qSID);
  die("Redirect");
} else {
  // $_REQUEST['id']
  $sql  = "SELECT *";
  $sql .= " FROM cctvs";
  $sql .= " WHERE id LIKE 'speed_". $qID ."'";
  $sql .= " AND note NOT LIKE '%移動式%'";
  $sql .= " AND sid LIKE '". $qSID ."'";
  if ($result = $mysqli->query($sql)) { 
    if ($row = $result->fetch_assoc()) {
      $qLat = $row['lat'];
      $qLon = $row['lon'];
    }
  }

  $sql  = "SELECT *,1.60934*3956 * 2 * ASIN(SQRT( POWER(SIN((". $qLat ."-abs(lat)) * pi()/180 / 2),2) + COS(". $qLat ." * pi()/180 ) * COS(abs(lat)* pi()/180) * POWER(SIN((". $qLon ." - lon) * pi()/180 / 2), 2) )) AS absDist";
  $sql .= " FROM cctvs";
  $sql .= " WHERE id LIKE 'speed_%'";
  $sql .= " AND note NOT LIKE '%移動式%'";
  $sql .= " ORDER BY absDist LIMIT 10";
  if ($result = $mysqli->query($sql)) {
    while ($row = $result->fetch_assoc()) 
    {
      $qTempBearing = preg_replace("@正斜@misuU","雙向",$row['bearing']);
      $qTempBearing = preg_replace("@反斜@misuU","雙向",$qTempBearing);
      // $qTempNote += "@";
      array_push($qNearMarkers, array($row['lat'], $row['lon'], $row['note']."\n".$qTempBearing."\n".$row['url'], $row['id'], $row['sid']));   
    }
 } else {
   // printf("Errormessage: %s\n", $mysqli->error);
 }
}

/* close connection */
$mysqli->kill($mysqli_threadID);
$mysqli->close();

$qFirstTouched = false;
foreach ($qNearMarkers as $qOne) {
  if (!$qFirstTouched) {
    $qFirstTouched = true;
    $qLat = $qOne[0];
    $qLon = $qOne[1];
    $qLabel = preg_replace('/\s+/', ' ', $qOne[2]);
    break;
  }
} 

// die("DEBUG...");
?>

<html>
  <head>
    <title>測速照相地點 (<?php echo $qLabel; ?>) (即時路況影像App 提供)</title>
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
      {
        "@context" : "https://schema.org",
        "@type" : "WebSite",
        "name" : "測速照相地點 (即時路況影像App 提供)",
        "alternateName" : "測速照相地點",
        "url" : "https://cctvs.doitwell.tw/",
      }
    </script>
    <style>
      

      #map {
          height: 75vh; /* Set the map height to 100% of the viewport height */
          width: 100%;
      }

      .cctvs_img {
        width: 50%;
      }

      /* Extra small devices (phones, 600px and down) */
      @media only screen and (max-width: 600px) {
        .cctvs_img {
          width: 95%;
        }
      }

      /* Small devices (portrait tablets and large phones, 600px and up) */
      @media only screen and (min-width: 600px) {
        .cctvs_img {
          width: 65%;
        }
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lIPKquseCBOJSnIzl45ipurJWhiIA8Q&libraries=geometry"></script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2363383344058626"
     crossorigin="anonymous"></script>

    <script>
      function initMap() {
        var locations = [
          <?php
              $qFirstTouched = false;
              foreach ($qNearMarkers as $qOne) {
                echo '{ lat: '. $qOne[0] .', lng: '. $qOne[1] .', label: "'. preg_replace('/\s+/', '<br>', $qOne[2]) .'" },';
                if (!$qFirstTouched) {
                  $qFirstTouched = true;
                  $qLat = $qOne[0];
                  $qLon = $qOne[1];
                  $qLabel = preg_replace('/\s+/', ' ', $qOne[2]);
                }
              } 
          ?>
        ];

        const map = new google.maps.Map(document.getElementById("map"), {
          center: { <?php echo "lat:". $qLat .",lng:". $qLon; ?> },
          zoom: 12,
        });

        const bounds = new google.maps.LatLngBounds();

        // Loop through the locations array and create markers for each location
        for (var i = 0; i < locations.length; i++) {
          (function(i) {
            bounds.extend({ lat: locations[i].lat, lng: locations[i].lng });
            var marker = new google.maps.Marker({
              position: { lat: locations[i].lat, lng: locations[i].lng },
              map: map,
              icon: {
                path: google.maps.SymbolPath.CIRCLE,
                fillColor: "blue",
                fillOpacity: 1,
                strokeWeight: 0,
                scale: 8,
              },
            });

            if (i==0) {

              google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                var infowindow = new google.maps.InfoWindow({
                  content: locations[i].label
                });
                infowindow.open(map, marker);
              });

              marker.addListener('click', function() {
                var url = 'https://cctvs.doitwell.tw/speedCameras/?<?php if (isset($_REQUEST['cctv'])) echo "cctv=1&"; ?>loc=' + locations[i].lat + ',' + locations[i].lng;
                window.location.href = url;
              });
            } else {
              marker.addListener('click', function() {
                var url = 'https://cctvs.doitwell.tw/speedCameras/?<?php if (isset($_REQUEST['cctv'])) echo "cctv=1&"; ?>loc=' + locations[i].lat + ',' + locations[i].lng;
                window.location.href = url;
              });
            }
          })(i);
        }

        map.setZoom(16);
        map.fitBounds(bounds);

        map.addListener('click', function(event) {
          var latLng = event.latLng;
          
          var url = 'https://cctvs.doitwell.tw/speedCameras/?<?php if (isset($_REQUEST['cctv'])) echo "cctv=1&"; ?>loc=' + latLng.lat() + ',' + latLng.lng();
          window.location.href = url;
        });

       
      }
    </script>
  </head>
  <body onload="initMap()">

    <center>
      <div><h3><?php echo $qLabel; ?></h3></div>
      <div>測速照相地點 by <a href=https://doitwell.app/CCTVs/ target=_blank>即時路況影像App</a></div>
      <div id="map"></div>
 
      <br />
      <div>測速照相地點 by <a href=https://doitwell.app/CCTVs/ target=_blank>即時路況影像App</a>
      <?php echo $appstore."&nbsp;"; echo $playstore; ?>
      </div>
      <div>附近測速照相地點</div>
      <?php
        foreach ($qNearMarkers as $qOne) {
            $qLat = $qOne[0];
            $qLon = $qOne[1];
            $qLabel = preg_replace('/\s+/', ' ', $qOne[2]);
            $qID = preg_replace("@speed_@","",$qOne[3]). $qOne[4];

            echo "<div><a href=https://cctvs.doitwell.tw/speedCameras/". $qID .">$qLabel</a></div>";
        } 
      ?>
      <div">
          <h4>打開定位即實際地圖上繪製所在地中心附近的攝影機監視器、警廣路況、測速照相站點，快速了解各地的路況，並且可縮放地圖，不再是小小的縮小圖，快速了解各地的路況、附近旅遊景點說明，以及基本天氣資料。另外提供行車測速模式，可播報行車沿路之測速照相站點以及攝影機。</h4>
          <div>
              <img class="cctvs_img" src="https://doitwell.app/CCTVs/tw/CCTVs_Promo_Web.png" class="img-responsive" alt="即時路況影像App" >
          </div>
          <?php echo $appstore."&nbsp;"; echo $playstore; ?>
          <br>
    
          <br />
      </div>

      <br />
      <div><a href=https://doitwell.app/CCTVs/tw/ target=_blank>台灣景點影像</a></div>
      <div><a href=https://doitwell.app/CCTVs/world/ target=_blank>世界景點影像</a></div>
      <div><a href=https://doitwell.app/CCTVs/tw_roads/ target=_blank>台灣道路影像</a></div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
     </center>
  </body>
</html>
