<?php
include $_SERVER['DOCUMENT_ROOT'] . "/WebBuilder/WebApp.class.php";
$db = new DBMain();
?>

<div class='back_button' onclick="window.location.href = 'index.php';" id='back_btn'>HOME</div>
<script>
    if (location.pathname == "/WebApp/assesor/") {
        document.getElementById('back_btn').hidden = true;
    }
</script>
<link rel="stylesheet" type="text/css" href="../../Styles/styles.css?v1.2">
<link rel="stylesheet" type="text/css" href="../Styles/styles.css?v1.2">

<style>
    body {
        background-color: white;
    }
</style>
<div class='login_pop_up_loading' hidden id='center_outer_div_loading'></div>
<div class='login_pop_up_form_loading' hidden id='center_div_loading'>
    <h1 id='online_status'>LOADING...</h1>
    <script> document.getElementById('online_status').focus(); </script>
</div>

<script>
    var selected_frame = 1;

    setInterval(online_status, 500);
    setInterval(check_session_status, 1000);

    function stop_loading() {
        document.getElementById('center_outer_div_loading').hidden = true;
        document.getElementById('center_div_loading').hidden = true;
    }

    function loading() {
        document.getElementById('center_outer_div_loading').hidden = false;
        document.getElementById('center_div_loading').hidden = false;
        setTimeout(stop_loading, 3000);
    }
    loading();

    function check_session_status() {
        const xhttp = new XMLHttpRequest();
        // Define a callback function
        xhttp.onload = function() {
            // Here you can use the DataW
            if (this.responseText == 1) {
                document.getElementById('center_outer_div_login').hidden = false;
                document.getElementById('center_div_login').hidden = false;
            } else {
                document.getElementById('center_outer_div_login').hidden = true;
                document.getElementById('center_div_login').hidden = true;
                stop_loading();

            }
        }
        xhttp.open("GET", '/WebBuilder/ajax_check_session.php');
        xhttp.send();
    }

    function online_status() {
        if (window.navigator.onLine == false) {
            document.getElementById('center_outer_div_online').hidden = false;
            document.getElementById('center_div_online').hidden = false;
        } else {
            document.getElementById('center_outer_div_online').hidden = true;
            document.getElementById('center_div_online').hidden = true;
        }

    }
</script>


<div class='login_pop_up_background' id='center_outer_div_login'></div>
<div class='login_pop_up_background' id='center_outer_div_online'></div>
<div class='login_pop_up_form' id='center_div_online' hidden>
    <h1 id='online_status'>YOUR OFFLINE PLEASE WAIT...</h1>
</div>
<div class='login_pop_up_form' id='center_div_login'>
    <h1 id='login_status'>LOGIN</h1>
    <input type='text' id='username' placeholder="USERNAME" class='input' /><br><br>
    <input type='password' id='password' placeholder="PASSWORD" class='input' /><br><br>
    <input type='submit' name='submit' value='LOGIN' onclick='login()' class='button' /><br><br>

    <script>
        function login() {
            username = document.getElementById('username').value;
            password = document.getElementById('password').value;

            const xhttp = new XMLHttpRequest();
            // Define a callback function
            xhttp.onload = function() {
                // Here you can use the Data
                if (this.responseText.indexOf("FAILED") < 1) {
                    document.getElementById('center_outer_div_login').hidden = true;
                    document.getElementById('center_div_login').hidden = true;
                } else {
                    alert(this.responseText);
                    document.getElementById('login_status').innerHTML = "USERNAME OR PASSWORD INCORRECT";
                }
            }
            xhttp.open("GET", '/WebBuilder/ajax_login.php?username=' + username + "&password=" + password);
            xhttp.send();
        }
    </script>
</div>

<?php
$WebApp->pageHeading("SIGNATURE");
if(file_exists("../signatures/a-{$_SESSION['user_id']}-signature.png")){
    $styles_change = "float:right;";

?>
<div class='form_container' style='width:40%; margin-bottom:5vw; float:left'>
    <h1>CURRENT</h1>
<img src="../signatures/a-<?php echo $_SESSION['user_id']; ?>-signature.png?v<?php echo rand(0, 9999); ?>" alt="NOT FOUND" style="width: 40%; border-radius: 1%;">
<button type="button" id="delete_signature" onclick="delete_signature();" class="button">DELETE</button>

<script>
    function delete_signature() {
        // delete the signature png
        if (confirm('Are you sure you want to delete your current signature?')) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    if (this.responseText == "OK") {
                        location.reload();
                    } else {
                        alert(this.responseText);
                    }
                }
            };
            xhttp.open("GET", "delete_signature.php", true);
            xhttp.send();
        }
    }
</script>

</div>
<?php
}else{
    $styles_change = "";
}
?>
<div class='form_container' style='width:55%; margin-bottom:5vw;<?php echo $styles_change; ?>'>
    <h1>NEW</h1>
    <canvas id="signature_pad" class="signature-pad" width=500 height=300 style='background-color:white;border-radius:20px;'></canvas><br>
    <button type="button" id="save_signature" class="button">SAVE</button>
    <!-- clear canvas button -->
    <button type="button" id="clear_signature" onclick="signaturePad.clear();" class="button">CLEAR</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script>
    var canvas = document.getElementById('signature_pad');
    var signaturePad = new SignaturePad(canvas);

    document.getElementById('save_signature').addEventListener('click', function() {
        if (signaturePad.isEmpty()) {
            alert("Please provide signature first.");
        } else {
            var dataURL = signaturePad.toDataURL('image/png');
            var blob = dataURLToBlob(dataURL);
            var formData = new FormData();
            formData.append('file', blob, 'signature.png');

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "upload_signature.php", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // alert(xhr.responseText); // Handle the server response
                    if (xhr.responseText.indexOf("OK") > 1) {
                        // repload page
                        location.reload();

                    } else {
                        alert(xhr.responseText);
                    }
                }
            };
            xhr.send(formData);
        }
    });

    function dataURLToBlob(dataURL) {
        var binary = atob(dataURL.split(',')[1]);
        var array = [];
        for (var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {
            type: dataURL.split(',')[0].split(':')[1].split(';')[0]
        });
    }
</script>