<?php
require_once 'application.php';

/**
 * Helper: Adjust a time string by an offset and format it.
 * Replaces CFML: TimeFormat(DateAdd('h', -offSet, postionTime),'h:mm tt')
 */
function formatAdjustedTime($positionTime, $offset) {
    $dt = DateTime::createFromFormat('g:i A', $positionTime);
    if (!$dt) return $positionTime;
    $dt->modify(intval(-$offset) . ' hours');
    return $dt->format('g:i A');
}

/**
 * Helper: daily_weather_image logic (converted from includes/daily_weather_image.cfm)
 * Expects $objWeather array (0-indexed). Returns $daily_weather_icon and $daily_description.
 */
function getDailyWeatherIcon($objWeather) {
    $daily_description = $objWeather[0]['description'] ?? '';
    $wId = $objWeather[0]['id'] ?? 0;
    $wIcon = $objWeather[0]['icon'] ?? '';
    $daily_weather_icon = '';

    if ($wId >= 200 && $wId <= 232) {
        if (in_array($wId, [200, 201, 210, 230, 231, 232])) {
            $daily_weather_icon = ($wIcon === '11d') ? 'wi-day-storm-showers' : 'wi-night-storm-showers';
        }
        if (in_array($wId, [211, 212, 221])) {
            $daily_weather_icon = ($wIcon === '11d') ? 'wi-day-thunderstorm' : 'wi-night-thunderstorm';
        }
    } elseif ($wId >= 300 && $wId <= 321) {
        $daily_weather_icon = ($wIcon === '09d') ? 'wi-day-sprinkle' : 'wi-night-sprinkle';
    } elseif ($wId >= 500 && $wId <= 531) {
        $dayNight = (in_array($wIcon, ['09d', '10d', '13d'])) ? 'd' : 'n';
        if (in_array($wId, [500, 501, 521])) {
            $daily_weather_icon = ($dayNight === 'd') ? 'wi-day-showers' : 'wi-night-showers';
        } elseif (in_array($wId, [502, 503, 504])) {
            $daily_weather_icon = ($dayNight === 'd') ? 'wi-day-rain' : 'wi-night-rain';
        } elseif (in_array($wId, [520, 522, 531])) {
            $daily_weather_icon = 'wi-rain';
        } elseif ($wId == 511) {
            $daily_weather_icon = ($dayNight === 'd') ? 'wi-day-rain-mix' : 'wi-night-rain-mix';
        }
    } elseif ($wId >= 600 && $wId <= 622) {
        if (in_array($wId, [600, 601, 602])) {
            $daily_weather_icon = ($wIcon === '13d') ? 'wi-day-snow' : 'wi-night-snow';
        } elseif (in_array($wId, [611, 612, 613])) {
            $daily_weather_icon = ($wIcon === '13d') ? 'wi-day-sleet' : 'wi-night-sleet';
        } elseif (in_array($wId, [615, 616, 620, 621])) {
            $daily_weather_icon = ($wIcon === '13d') ? 'wi-day-rain-mix' : 'wi-night-rain-mix';
        } elseif ($wId == 622) {
            $daily_weather_icon = ($wIcon === '13d') ? 'wi-day-snow-thunderstorm' : 'wi-night-snow-thunderstorm';
        }
    } elseif ($wId >= 701 && $wId <= 781) {
        if ($wId == 701) {
            $daily_weather_icon = ($wIcon === '50d') ? 'wi-day-sprinkle' : 'wi-night-sprinkle';
        } elseif ($wId == 703 || $wId == 741) {
            $daily_weather_icon = ($wIcon === '50d') ? 'wi-day-fog' : 'wi-night-fog';
        } elseif ($wId == 711 || $wId == 721) {
            $daily_weather_icon = ($wIcon === '50d') ? 'wi-day-haze' : 'wi-night-fog';
        } elseif ($wId == 731 || $wId == 751) {
            $daily_weather_icon = 'wi-sandstorm';
        } elseif ($wId == 761) {
            $daily_weather_icon = 'wi-dust';
        } elseif ($wId == 762) {
            $daily_weather_icon = 'wi-volcan';
        } elseif ($wId == 781) {
            $daily_weather_icon = 'wi-tornado';
        }
    } elseif ($wId == 800) {
        $daily_weather_icon = ($wIcon === '01d') ? 'wi-day-sunny' : 'wi-stars';
    } elseif ($wId == 801) {
        $daily_weather_icon = ($wIcon === '02d') ? 'wi-day-cloudy' : 'wi-night-cloudy';
    } elseif ($wId == 802) {
        $daily_weather_icon = ($wIcon === '03d') ? 'wi-day-cloudy' : 'wi-night-cloudy';
    } elseif ($wId == 803 || $wId == 804) {
        $daily_weather_icon = 'wi-cloudy';
    }

    return ['icon' => $daily_weather_icon, 'description' => $daily_description];
}

/**
 * Helper: daily_moon_phase logic (converted from includes/daily_moon_phase.cfm)
 */
function getDailyMoonPhase($phaseSearch) {
    $current_moon_phase = floatval($phaseSearch);
    $moon_align = '18';
    $moon_position = '-16';
    $moonPhase = '';
    $phaseName = '';

    if ($current_moon_phase == 0) {
        $moonPhase = 'wi-moon-new'; $phaseName = 'New Moon'; $moon_align = '25';
    } elseif ($current_moon_phase >= 0.01 && $current_moon_phase <= 0.05) {
        $moonPhase = 'wi-moon-waxing-crescent-1'; $phaseName = 'Waxing Crescent'; $moon_align = '25'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.06 && $current_moon_phase <= 0.10) {
        $moonPhase = 'wi-moon-waxing-crescent-2'; $phaseName = 'Waxing Crescent'; $moon_align = '25'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.11 && $current_moon_phase <= 0.15) {
        $moonPhase = 'wi-moon-waxing-crescent-3'; $phaseName = 'Waxing Crescent'; $moon_align = '24'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.16 && $current_moon_phase <= 0.20) {
        $moonPhase = 'wi-moon-waxing-crescent-4'; $phaseName = 'Waxing Crescent'; $moon_align = '24'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.21 && $current_moon_phase <= 0.24) {
        $moonPhase = 'wi-moon-waxing-crescent-5'; $phaseName = 'Waxing Crescent'; $moon_align = '24'; $moon_position = '-20';
    } elseif ($current_moon_phase == 0.25) {
        $moonPhase = 'wi-moon-first-quarter'; $phaseName = 'First Quarter'; $moon_align = '26'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.26 && $current_moon_phase <= 0.30) {
        $moonPhase = 'wi-moon-waxing-gibbous-1'; $phaseName = 'Waxing Gibbous'; $moon_align = '25'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.31 && $current_moon_phase <= 0.35) {
        $moonPhase = 'wi-moon-waxing-gibbous-2'; $phaseName = 'Waxing Gibbous'; $moon_align = '27'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.36 && $current_moon_phase <= 0.40) {
        $moonPhase = 'wi-moon-waxing-gibbous-3'; $phaseName = 'Waxing Gibbous'; $moon_align = '27';
    } elseif ($current_moon_phase >= 0.41 && $current_moon_phase <= 0.45) {
        $moonPhase = 'wi-moon-waxing-gibbous-4'; $phaseName = 'Waxing Gibbous'; $moon_align = '27';
    } elseif ($current_moon_phase >= 0.46 && $current_moon_phase <= 0.49) {
        $moonPhase = 'wi-moon-waxing-gibbous-5'; $phaseName = 'Waxing Gibbous'; $moon_align = '27';
    } elseif ($current_moon_phase == 0.5) {
        $moonPhase = 'wi-moon-full'; $phaseName = 'Full Moon'; $moon_align = '27';
    } elseif ($current_moon_phase >= 0.51 && $current_moon_phase <= 0.55) {
        $moonPhase = 'wi-moon-waning-gibbous-1'; $phaseName = 'Waning Gibbous'; $moon_align = '23';
    } elseif ($current_moon_phase >= 0.56 && $current_moon_phase <= 0.60) {
        $moonPhase = 'wi-moon-waning-gibbous-2'; $phaseName = 'Waning Gibbous'; $moon_align = '23';
    } elseif ($current_moon_phase >= 0.61 && $current_moon_phase <= 0.65) {
        $moonPhase = 'wi-moon-waning-gibbous-3'; $phaseName = 'Waning Gibbous'; $moon_align = '23';
    } elseif ($current_moon_phase >= 0.66 && $current_moon_phase <= 0.69) {
        $moonPhase = 'wi-moon-waning-gibbous-4'; $phaseName = 'Waning Gibbous'; $moon_align = '23';
    } elseif ($current_moon_phase >= 0.70 && $current_moon_phase <= 0.74) {
        $moonPhase = 'wi-moon-waning-gibbous-5'; $phaseName = 'Waning Gibbous'; $moon_align = '23';
    } elseif ($current_moon_phase == 0.75) {
        $moonPhase = 'wi-moon-third-quarter'; $phaseName = 'Third-Quarter'; $moon_align = '23';
    } elseif ($current_moon_phase >= 0.76 && $current_moon_phase <= 0.80) {
        $moonPhase = 'wi-moon-waning-crescent-1'; $phaseName = 'Waning Crescent'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.81 && $current_moon_phase <= 0.85) {
        $moonPhase = 'wi-moon-waning-crescent-2'; $phaseName = 'Waning Crescent'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.86 && $current_moon_phase <= 0.90) {
        $moonPhase = 'wi-moon-waning-crescent-3'; $phaseName = 'Waning Crescent'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.91 && $current_moon_phase <= 0.95) {
        $moonPhase = 'wi-moon-waning-crescent-4'; $phaseName = 'Waning Crescent'; $moon_position = '-20';
    } elseif ($current_moon_phase >= 0.96 && $current_moon_phase <= 0.99) {
        $moonPhase = 'wi-moon-waning-crescent-5'; $phaseName = 'Waning Crescent'; $moon_position = '-20';
    }

    return ['moonPhase' => $moonPhase, 'phaseName' => $phaseName, 'moon_align' => $moon_align, 'moon_position' => $moon_position];
}

// Include data pull and alert processing
include 'includes/dataPull.php';
include 'includes/alert.php';
include 'includes/5dayForeCast.php';

// Day-of-week settings
$theCurrentDay = date('l'); // Full day name e.g. "Monday"
$current_moon_position = '78';
switch ($theCurrentDay) {
    case 'Monday':    $startDay = 1; $current_moon_position = '58'; break;
    case 'Tuesday':   $startDay = 2; $current_moon_position = '60'; break;
    case 'Wednesday': $startDay = 3; break;
    case 'Thursday':  $startDay = 4; break;
    case 'Friday':    $startDay = 5; $current_moon_position = '44'; break;
    case 'Saturday':  $startDay = 6; $current_moon_position = '60'; break;
    case 'Sunday':    $startDay = 7; $current_moon_position = '58'; break;
}

$dateNow = date('j') . ' ' . date('M');
$dateTimeNow = date('j') . ' ' . date('M') . ', ' . date('g:i A');
?>
<!DOCTYPE html>
<html lang="en">
<?php include 'includes/head.php'; ?>
<body>
<div class="site-content">
  <div class="site-header">
    <div class="container"> <a href="/" class="branding"> <img src="images/logo.png" alt="" class="logo">
      <?php include 'includes/storm_alert.php'; ?>
      <div class="logo-type">
        <h1 class="site-title">
        TampaSkyWarn
        <small class="site-description">
        <div class="tooltip" style="width:104px;font-size:10px">Weather Your Way
          <div class="tooltiptext"> Welcome to Tampaskywarn. Where you can find up to date weather forecasts, alerts and the latest Skywarn information
            for your area. Plus you can search local Weather and Radar using any U.S. zipcode. We also provide links to Webcams via a zipcode search in your local State.
            <p> Tampaskywarn supports the Skywarn program but we are not officially affiliated with them. We support all the local weather spotters out there who help paint a
              more accurate picture of what is happening with severe weather out in the field.
              Tampaskywarn brings you up-to-date weather and National Weather Service
              Alerts for your area or by searching any U.S. city by zipcode. So please stay informed and stay safe. Tampaskywarn is bringing you your weather in your area. </p>
          </div>
        </div>
        </small> </div>
      </a>
      <!-- Default snippet for navigation -->
      <?php include 'includes/navigation.php'; ?>
      <div class="mobile-navigation"></div>
    </div>
  </div>
  <!-- .site-header -->
  <div class="hero" data-bg-image="images/banner.png">
    <div class="container">
      <?php $loopCount = 0; ?>

      <!-- Alert marquee -->
      <?php if (isset($current_alert)): ?>
        <?php if (isset($alert_number) && $alert_number > 1): ?>
          <span class="tooltip" style="width:100%; cursor: pointer;">
        <?php else: ?>
          <span class="tooltip" style="width:100%">
          <?php $height_px = 100; ?>
        <?php endif; ?>
        <marquee behavior="scroll" direction="left" loop="-1" style="color: Red">
        <span class="blink"><?= $current_sender_name ?></span> <?= $current_event ?> <?= $current_alert ?>
        </marquee>
        <?php if (isset($alert_number) && $alert_number > 1): ?>
          <div class="tooltiptext" style="width:100%;max-width:calc(100vw - 20px);height:<?= $height_px ?>px;box-sizing:border-box;">
            <?php include 'includes/all_alerts.cfm'; ?>
          </div>
        <?php endif; ?>
        </span>
      <?php endif; ?>
    </div>
  </div>

  <div class="forecast-table">
    <div class="container">
      <div class="forecast-container" style="overflow:hidden; max-width:100%; position:relative;">
        <?php
        // Loop through 7 days of forecast (index 0..6 in PHP, was 1..7 in CFML)
        for ($loopCount = 0; $loopCount < 7; $loopCount++):
            $ii = $loopCount; // 0-indexed array access
            if (isset($cfData['daily']) && is_array($cfData['daily']) && isset($cfData['daily'][$ii])):
                $windSpeed = round($cfData['daily'][$ii]['wind_speed']);
                $deg = $cfData['daily'][$ii]['wind_deg'];
                include __DIR__ . '/includes/compass_heading.php';
                $objWeather = $cfData['daily'][$ii]['weather'];

                if ($ii === 0):
                    // Today's forecast
        ?>
                  <div class="today forecast">
                    <div class="forecast-header">
                      <div class="day"><?= $theCurrentDay ?>
                        <div style="position:absolute; margin: -24px 0 0px <?= $current_moon_position ?>px;font-size: 20px;text-align:center;" title="Moon Phase"> <i class="wi <?= $moonPhase ?>" style="font-size: 28px;color: #8e8f94;"></i>
                          <div style="position:absolute; margin: -28px 0 0px <?= $current_moon_align ?>px;font-size: 14px;text-align:left;width:164px">&nbsp;<?= $phaseName ?></div>
                        </div>
                      </div>
                      <div class="date"><?= $dateNow ?></div>
                    </div>
                    <!-- .forecast-header -->
                      <div class="forecast-content">
                        <div class="location">Tampa</div>
                        <div class="degree">
                          <div class="num"><?= round($currentTemp) ?><sup>o</sup>F</div>
                          <div class="forecast-icon">
                            <div style="position:absolute; margin: -24px 0 0px -2px;font-size: 20px;text-align:center;"> <i class="wi <?= $weather_icon ?>" style="font-size: 90px;color: #0c9cd7;" title="<?= htmlspecialchars($current_description) ?>"></i>
                            </div>
                          </div>
                        </div>
                        <?php $rainPercent = round($cfData['daily'][$ii]['pop'] * 100); ?>
                        <span title="Feels Like"><img src="images/icon-humidity@2x.png" width="21px" height="21px"><?= round($currentHeatIndex) ?><sup>o</sup>F</span> <span title="Rain Percent"><img src="images/icon-umberella.png" ><?= $rainPercent ?>%</span> <span title="Wind Speed"><img src="images/icon-wind.png" ><?= round($currentWindSpeed) ?>m/h</span> <span title="Wind Direction" style="font-size:13px"><img src="images/icon-compass.png"><?= $current_compass ?></span> <span title="Humidity"><img src="images/icon-humidity.png" ><?= $current_humidity ?>%</span>
                        <p> </p>
                        <span>
                        <?php
                        $timeConvert = $current_sunrise;
                        include __DIR__ . '/includes/current_timeConvert.php';
                        $sunriseTime = formatAdjustedTime($postionTime, $offSet);
                        ?>
                        <small style="font-size: 14px;" title="Sunrise"><i class="wi wi-sunrise" style="font-size: 20px;color: #8e8f94;"></i> <?= $sunriseTime ?></small> &nbsp;
                        <?php
                        $timeConvert = $current_sunset;
                        include __DIR__ . '/includes/current_timeConvert.php';
                        $sunsetTime = formatAdjustedTime($postionTime, $offSet);
                        ?>
                        <small style="font-size: 14px;" title="Sunset"><i class="wi wi-sunset" style="font-size: 20px;color: #8e8f94;"></i> <?= $sunsetTime ?></small> &nbsp;
                        <?php
                        $timeConvert = $current_moonrise;
                        include __DIR__ . '/includes/current_timeConvert.php';
                        $moonriseTime = formatAdjustedTime($postionTime, $offSet);
                        ?>
                        <small style="font-size: 14px;" title="Moonrise">
                        <i class="wi wi-moonrise" style="font-size: 20px;color: #8e8f94;"></i> <?= $moonriseTime ?></small> &nbsp;
                        <?php
                        $timeConvert = $current_moonset;
                        include __DIR__ . '/includes/current_timeConvert.php';
                        $moonsetTime = formatAdjustedTime($postionTime, $offSet);
                        ?>
                        <small style="font-size: 14px;" title="Moonset">
                        <i class="wi wi-moonset" style="font-size: 20px;color: #8e8f94;"></i> <?= $moonsetTime ?></small> </span> </div>
                   </div>
        <?php
                else:
                    // Future day forecast
                    $futureDate = new DateTime();
                    $futureDate->modify("+{$ii} days");
                    $futureDayName = $futureDate->format('l');

                    $dailyWeather = getDailyWeatherIcon($objWeather);
                    $daily_weather_icon = $dailyWeather['icon'];
                    $daily_description = $dailyWeather['description'];
        ?>
                  <div class="forecast">
                    <div class="forecast-header">
                      <div class="day"><?= $futureDayName ?></div>
                    </div>
                    <!-- .forecast-header -->
                    <div class="forecast-content">
                      <div class="forecast-icon">
                        <i class="wi <?= $daily_weather_icon ?>" style="font-size: 48px;color: #0c9cd7;" title="<?= htmlspecialchars($daily_description) ?>"></i> </div>
                      <div class="degree"><?= round($cfData['daily'][$ii]['temp']['day']) ?><sup>o</sup>F</div>
                      <?php $rainPercent = round($cfData['daily'][$ii]['pop'] * 100); ?>
                      <span title="Low Temperature"><i class="wi wi-thermometer" style="font-size: 17px;color: #8e8f94;"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <?= round($cfData['daily'][$ii]['temp']['min']) ?><sup>o</sup>F</span> <br>
                      <span title="Rain Percent"><i class="wi wi-umbrella wi-rotate-45" style="font-size: 17px;color: #8e8f94;"></i>&nbsp;&nbsp;&nbsp;&nbsp; <?= $rainPercent ?>%</span> <br>
                      <span title="Sunrise" style="font-size:14px">
                      <?php
                      $fieldSearch = $cfData['daily'][$ii]['sunrise'];
                      include __DIR__ . '/includes/daily_timeConvert.php';
                      $dailySunrise = formatAdjustedTime($postionTime, $offSet);
                      ?>
                      <i class="wi wi-sunrise" style="font-size: 17px;color: #8e8f94;"></i> <?= $dailySunrise ?> </span> <br>
                      <span title="Sunset" style="font-size:14px">
                      <?php
                      $fieldSearch = $cfData['daily'][$ii]['sunset'];
                      include __DIR__ . '/includes/daily_timeConvert.php';
                      $dailySunset = formatAdjustedTime($postionTime, $offSet);
                      ?>
                      <i class="wi wi-sunset" style="font-size: 17px;color: #8e8f94;"></i> <?= $dailySunset ?> </span> <br>
                      <?php
                      $phaseSearch = $cfData['daily'][$ii]['moon_phase'];
                      $moonData = getDailyMoonPhase($phaseSearch);
                      $moonPhase = $moonData['moonPhase'];
                      $phaseName = $moonData['phaseName'];
                      $moon_align = $moonData['moon_align'];
                      $moon_position = $moonData['moon_position'];
                      ?>
                      <div style="position:absolute; margin: -2px 0 0px <?= $moon_position ?>px;font-size: 10px;text-align:center;" title="Moon Phase"> <i class="wi <?= $moonPhase ?>" style="font-size: 30px;color: #8e8f94;"></i>
                        <div style="position:absolute; margin: -24px 0 0px <?= $moon_align ?>px;font-size: 12px;text-align:left;width:166px"><?= $phaseName ?></div>
                      </div>
                    </div>
                  </div>
        <?php
                endif;
            endif;
        endfor;
        ?>
      </div>
    </div>
  </div>
  <main class="main-content">
    <div class="fullwidth-block">
      <div class="container">
          <span style="text-align:center;">
            <h2 class="section-title">Tampa Weather Map</h2>
            <div style="max-width: 700px; margin: 0 auto;">
              <div style="position: relative; width: 100%; padding-top: 71.43%; box-shadow: 0 0 10px rgba(0,0,0,0.4);">
                <iframe src="weather_radar_map.php"
                  scrolling="no"
                  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block;">
                </iframe>
              </div>
            </div>
          </span> </div>
    </div>
    <div class="fullwidth-block" data-bg-color="#262936">
      <div class="container">
        <div class="row">
          <table id="skyWarn" align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <th class="section-title"> What Is SKYWARN<span style="vertical-align:2.0em; font-size:0.3em;">&reg;</span>?
            </tr>
            <tr class="col-md-12">
              <td style="vertical-align: top;"><img src = "images/skywarn-logo-png-transparent.png" width="150px" height="150px"></td>
              <td vertical-align: top;> The United States is one of the most severe weather-prone country in the world. Each year, people in this country cope with an average of around 10,000 thunderstorms, 5,000 floods, 1,200 tornadoes,
                and two landfalling hurricanes. Approximately 90% of all presidentially declared disasters are weather-related, causing nearly 500 deaths each year and roughly $14 billion in damages.
                <p> SKYWARN&reg; is a National Weather Service (NWS) program developed in the 1960s that consists of trained weather spotters who provide reports of severe and hazardous weather to help
                  meteorologists make life-saving warning decisions. Spotters are concerned citizens, amateur radio operators, truck drivers, mariners, airplane pilots, emergency management personnel,
                  and public safety officials who volunteer their time and energy to report on hazardous weather impacting their community. </td>
            </tr>
            <tr>
              <th scope="col">
                  <p><a href="https://www.weather.gov/TBW/skywarn" target="new"><span style="font-size: 16px;">Click To See If There Are Any SKYWARN<span style="vertical-align:1.0em; font-size:0.7em;">&reg;</span> Classes, Information Or In-Person
                    Training Available In Your Area.</span></a></p>
              </th>
            </tr>
            <tr>
              <th colspan="2" scope="col">&nbsp;</th>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="fullwidth-block">
      <div class="container">
        <h2 class="section-title">Live Cameras & Radars</h2>
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <div class="live-camera">
              <figure>
                <iframe width=100%  height="100%" src="https://www.youtube.com/embed/qYs-SMoyH_k?controls=0&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
              </figure>
              <h3 class="location">Tampa, Fl</h3>
              <small class="date"><?= $dateTimeNow ?></small> </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="live-camera">
              <figure>
                <iframe width=100%  height="100%" src="https://www.youtube.com/embed/E1uVzfQG_Yo?controls=0&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
              </figure>
              <h3 class="location">SpaceX Pad 39A, Fl</h3>
              <small class="date"><?= $dateTimeNow ?></small> </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="live-camera">
              <figure>
                <iframe width=100%  height="100%" src="https://www.youtube.com/embed/HC76HMOZ404?controls=0&autoplay=1&mute=1" title="YouTube video player" frameborder="0" mute="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
              </figure>
              <h3 class="location">Mallory Square Key West, Fl</h3>
              <small class="date"><?= $dateTimeNow ?></small> </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="live-camera">
              <figure>
                <iframe width=100%  height="100%" src="https://www.youtube.com/embed/77aULkAkL2I?controls=0&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
              </figure>
              <h3 class="location">St. petersburg, Fl</h3>
              <small class="date"><?= $dateTimeNow ?></small> </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!-- .main-content -->
  <?php include 'includes/footer.php'; ?>
  <!-- .site-footer -->
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>
<script>
// Mobile menu fix — scoped to this page only, no shared files touched.
document.addEventListener("DOMContentLoaded", function () {
    if (typeof jQuery === 'undefined') return;
    var $ = jQuery;
    var $mobileMenu = $('.mobile-navigation');
    var toggleEl = document.querySelector('.menu-toggle');

    if ($mobileMenu.length && $mobileMenu.children().length === 0) {
        $mobileMenu.html($('.main-navigation .menu').clone());
    }

    if (toggleEl) {
        toggleEl.addEventListener('click', function (e) {
            e.stopPropagation();
            e.stopImmediatePropagation();
            $mobileMenu.stop(true, true).slideToggle();
        }, true);
    }

    document.addEventListener('click', function (e) {
        var mobileMenuEl = $mobileMenu[0];
        if (!mobileMenuEl) return;
        if (e.target !== toggleEl && !toggleEl.contains(e.target) &&
            e.target !== mobileMenuEl && !mobileMenuEl.contains(e.target)) {
            $mobileMenu.slideUp();
        }
    }, true);
});
</script>
</body>
</html>