<?php 
    include "../assets/folder_name.php"; 
    session_start(); 
    include('../db/connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>SkyBot - Drones</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- Favicons -->
    <link href="<?php echo $folder_name; ?>documents/img/favicon.png" rel="icon">
    <link href="<?php echo $folder_name; ?>documents/img/apple-touch-icon.png" rel="apple-touch-icon">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="<?php echo $folder_name; ?>assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<?php echo $folder_name; ?>assets/plugins/jquery/jquery.min.js"></script>   

    <style>
        body {
            background-color: rgb(238, 238, 238);
            font-family: "GilroyRegular";
        }
        .directbodytext {
            font-size: small;
            padding: 0.5rem 3rem;
            letter-spacing: 0.1rem;
            margin-top: 1.5rem;
        }

        .dropdown1:hover body :not(#popup1) {
            -webkit-filter: blur(2px);
            -moz-filter: blur(2px);
            -o-filter: blur(2px);
            -ms-filter: blur(2px);
            filter: blur(2px);
        }

        @media screen and (max-width: 500px) {
            body {
                padding-top: 4rem;
                overflow-x: hidden;
            }

            .directbodytext {
                font-size: x-small;
                padding: 0.5rem 2rem;
            }
        }
        .overview-frame {
            width: 100%;
            /* min-height: 100vh;
            border: none; */
            height: auto;
            border: none;
            overflow: hidden;
        }
    </style>

</head>
<body>

    <?php include("header.php");  ?>

    <div id="overviewDiv">
        <iframe 
            src="overview_main_load.php?id=<?php echo $_GET['id']; ?>"
            class="overview-frame mt-5" 
            scrolling="no"
            frameborder="0">
        </iframe>
    </div>

    <?php include("footer.php"); ?>

    <script>
        window.addEventListener("message", function (event) {
            if (event.data.iframeHeight) {
                document.querySelector(".overview-frame").style.height =
                    event.data.iframeHeight + "px";
            }

            if (event.data.closeHeaderMenu) {
                $(".header-menus").removeClass("open");
            }
        });
    </script>

</body>
</html>