<?php
/**
* @project: ImgAnnotations
* @author: Bram Prieshof
*/

//ID Check
if (empty($_POST["TheID"])) {
    echo '<style type="text/css">.EditorDialog{display:none;}</style>';
}else {
    //If id is set check in database if exists
    include 'db.php';
    $stmt = $mysqli->prepare("SELECT data FROM ImgAnnotations WHERE id = ? LIMIT 1"); 
    $stmt->bind_param("i", $_POST["TheID"]);
    $stmt->execute();
    $result = $stmt->get_result();
    $resultData = $result->fetch_assoc();
    //Check if exists
    if (!empty($resultData)) {
        //If exists get data 
        $TheData = $resultData['data'];  
    }else {
        //If not exists start clean
        echo '<p style="color: red;font-weight: bold;">This DeviceID does not exist</p>';
        echo '<p style="font-weight: bold;">Open in Editor to create it</p>';
        echo '<style type="text/css">.EditorDialog{display:none;}</style>';
    }
}
?>

<!DOCTYPE html>
<html>
    <head>
        <!--Load CSS and JS-->
        <link rel="stylesheet" href="vendor/css/app.css">
        <link rel="stylesheet" href="vendor/css/reset.css">
        <link href="vendor/css/app.css" rel="preload" as="style">
        <link href="vendor/js/picture-annotation-chunk-vendors.min.js" rel="preload" as="script">
        <link href="vendor/js/picture-annotation.min.js" rel="preload" as="script">
        <link href="vendor/css/app.css" rel="stylesheet">
    </head>
    <body>
        <div class="LoadDialog">
            <!--Load data-->
            <form  method="post" name="Load" action="">
                <label for="TheID">Enter DeviceID:</label>
                <input type="number" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
                <input type="submit" value="Load">
            </form>
        </div>
        <div class="EditorDialog">
            <!--Editor-->
            <div id="my-pic-annotation-view" class="picture-annotation" data-image-src="Screen.png"data-width="1200" data-height="500" >
                    <!--Load existing Data-->    
                    <div class="picture-annotation-data" style="display:none;"><?php echo $TheData; ?></div>
            </div>
            <script src="vendor/js/picture-annotation-chunk-vendors.min.js"></script><script src="vendor/js/picture-annotation.min.js"></script>
        </div>
        <!--Hidden form for opeing in editor-->
        <form  method="post" name="OpenInEditor" action="Editor.php">
            <input type="hidden" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
            <input type="submit" value="Open in Editor" >
        </form>
    </body>
</html>