<?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
        $TheData = "";
    }
}
?>

<!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">
        <!--StoreData in js Var until saved-->
        <script type="application/javascript">
            function callBack(data) {
                document.Save.TheNewData.value = data;
            }
        </script>
    </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" class="picture-annotation" data-image-src="Screen.png" data-width="1200" data-height="500" data-edit-mode="1" data-callback="callBack">
                    <!--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>
            <!--Hidden form for submitting to DB-->
            <form  method="post" name="Save" action="Editor-Save.php">
                <input type="hidden" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
                <input type="hidden" name="TheNewData" value="">
                <input type="submit" value="Save" >
            </form>
            <!--Hidden form for opeing in Vierwer-->
           <form  method="post" name="OpenInViewer" action="Viewer.php">
            <input type="hidden" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
            <input type="submit" value="Open in Viewer" >
        </form>
        </div> 
    </body>
</html>