<style>
    .cont {
        width: 90%;
        text-align: left !important;
        transition: all 0.6s ease;
        margin: 0% auto;
    }

    th,
    td {
        width: 50px;
        padding: 0px !important;
        text-align: center;
    }

    .main {
        display: flex;
        padding: 0em;
        justify-content: center;
        align-items: middle;
        margin-top:-20px;
    }

    .clockbox,
    #clock {
        width: 100%;
    }

    /* Clock styles */
    .circle {
        fill: none;
        stroke: #404040;
        stroke-width: 9;
        stroke-miterlimit: 10;
    }

    .mid-circle {
        fill: #404040;
    }

    .hour-marks {
        fill: none;
        stroke: #404040;
        stroke-width: 9;
        stroke-miterlimit: 10;
    }

    .hour-arm {
        fill: none;
        stroke: #404040;
        stroke-width: 17;
        stroke-miterlimit: 10;
    }

    .minute-arm {
        fill: none;
        stroke: #404040;
        stroke-width: 11;
        stroke-miterlimit: 10;
    }

    .second-arm {
        fill: none;
        stroke: #404040;
        stroke-width: 4;
        stroke-miterlimit: 10;
    }

    /* Transparent box ensuring arms center properly. */
    .sizing-box {
        fill: none;
    }

    #dateAndTime {
        color: red
    }

    /* Make all arms rotate around the same center point. */
    /* Optional: Use transition for animation. */
    #hour,
    #minute,
    #second {
        transform-origin: 300px 300px;
        transition: transform .7s ease-in-out;
    }

    #clock2 h2 {
        position: static;
        display: block;
        color: #404040;
        text-align: center;
        margin: 10px 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4em;
        font-size: 0.8em;
    }

    h3 {
        position: static;
        display: block;
        color: #404040;
        text-align: center;
        margin: 5px 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4em;
        font-size: 1em;
    }

    #clock2 #time {
        display: flex;
        justify-content: center;

    }

    #clock2 #time div {
        position: relative;
        margin: 0 5px;

    }

    #clock2 #time div span {
        position: relative;
        display: block;
        width: 100px;
        height: 80px;
        background: #2196f3;
        color: #fff;
        font-weight: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3em;
        z-index: 10;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    }

    #clock2 #time div span:nth-child(2) {
        height: 30px;
        font-size: 0.7em;
        letter-spacing: 0.2em;
        font-weight: 500;
        z-index: 9;
        box-shadow: none;
        background: #127fd6;
        text-transform: unset;
    }

    #clock2 #time div:last-child span {
        background: #ff006a;
    }

    #clock2 #time div:last-child span:nth-child(2) {
        background: #ec0062;
    }

    button {
        font-family: Source Sans Pro;
        font-size: 1rem;
        line-height: 3.5em;
        padding: 0 1.5em;
        background: #2f4f4f;
        color: white;
        border-radius: 0em;
        width: 320px;
        cursor: pointer;
        border: 1px solid #2f4f4f;
        margin-top: 30px;

    }
</style>


<?php
include($_SERVER['DOCUMENT_ROOT'] . "/attendance/attendance-mobile-api/conn.php");
header('content-type:application/json');
// $year = "2020/2021";
// $term = "Term 1";
$staffid = $_GET['StaffId'];
$role = $_GET['Role'];
// $query = mysqli_query($conn, "SELECT * FROM admissions WHERE StudentId = '$studentid'");
// while ($spec = mysqli_fetch_assoc($query)) {
//     $image = $spec['Image'];
//     $school = $spec['School'];
//     $class = $spec['CurrentClass'];
//     $classarm = $spec['ClassArm'];
//     $sex = $spec['Sex'];
//     $firstname = $spec['FirstName'];
//     $lastname = $spec['LastName'];
// }

$query=mysqli_query( $conn, "SELECT * FROM appointments WHERE StaffId = '$staffid'");
while($row=mysqli_fetch_assoc($query)){
$firstname =$row['FirstName'];
$lastname =$row['LastName'];
$user_image =$row['Image'];
$role =$row['Role'];
$managing_class =$row['ManagingClass'];
$class_arm =$row['ClassArm'];
$title = $row['Title'];
$login_session6 = "$login_sessiont $login_session $login_session1";
}


echo '<div class="card" style="border-radius:5px; box-shadow:none !important;">';
echo '<div class="card-content">';


if (empty($image)) {
    if ($sex == 'Male') {
        echo "<image src='$website_name/LIBRARY/images/images/201612.png' alt=''>";
    } else {
        echo "<image src='$website_name/LIBRARY/images/images/201608.png' alt=''>";
    }
} else {
    echo "<image src='$website_name/UPLOADS/" . $image . "' alt=''>";
}
echo '<h2 style="margin-top:0px;">' . $firstname . ' ' . $lastname  . '</h2>';
echo '<h2 style="margin-top:-20px;">' . $class . ' ' . $classarm  . '</h2>';
echo '<p style="margin-top:-20px; font-weight:500;"><span>' . $year . ' / ' . $term . ' / ' . DATE("Y-m-d") . '</span></p>';
echo '<p style="margin-top:-10px; font-size:12px;"><span' . $class . ' (' . $classarm . ')</span></p>'; ?>

<div class="studentBalancesSection">

</div>


<div class="clockInSection" style="display:nossdsne;">

    <?php
    $query11 = mysqli_query($conn, "SELECT * FROM student_attendance WHERE Date = '" . DATE("Y-m-d") . "' AND StudentId = '$studentid'");
    $affected_row = mysqli_affected_rows($conn);
    if ($affected_row > 0) {
        while ($spec11 = mysqli_fetch_assoc($query11)) {
            $status = $spec11['StatusIndicating'];
            $timein = $spec11['TimeIn'];
            $timeout = $spec11['TimeOut'];
            $broughtby = $spec11['BroughtBy'];
            $pickedby = $spec11['PickedBy'];
            if ($spec11['StatusIndicating'] == "Present") {
                echo "<h3 style='margin-top:-3px;  color:#018e5d; font-weight:600;'>" . $spec11['StatusIndicating'] . " Today</h3>";
            } elseif ($spec11['StatusIndicating'] == "Absent") {
                echo "<h3 style='margin-top:-3px;  color:#c74444; font-weight:600;'>" . $spec11['StatusIndicating'] . " Today</h3>";
            } elseif ($spec11['StatusIndicating'] == "Late") {
                echo "<h3 style='margin-top:-3px;  color:rgb(175, 151, 15); font-weight:600;'>" . $spec11['StatusIndicating'] . " Today</h3>";
            } elseif ($spec11['StatusIndicating'] == "Excused") {
                echo "<h3 style='margin-top:-3px;  color:rgb(102, 102, 102); font-weight:600;'>" . $spec11['StatusIndicating'] . " Today</h3>";
            }
        }
    } else {
        echo "<h3 style='margin-top:-3px;  color:rgb(168, 21, 21); font-weight:600;'> Not Determined</h3>";
    }
    ?>

    <div data-status-check="<?php echo $status; ?>" data-clock-out="<?php echo $timeout; ?>" class="row checkState1" style="width:80%; margin:0% auto; font-size:20px; font-weight:500;">
        <div class="col-50">
            <span style="font-size:10px;">CLOCK IN TIME:</span> <?php
                                                                if (empty($timein)) {
                                                                    echo  "<br>--:-- --";
                                                                } else {
                                                                    echo "<br>" . date('h:i A', strtotime($timein));
                                                                    echo "<p style='font-size:10px; text-transform:uppercase; margin-top:-0px;'><span style='color:#2f4f4f; font-weight:700;'>ESCORT:</span>" . $broughtby."</p>";

                                                                }

                                                                ?>
        </div>

        <div class="col-50">
            <span style="font-size:10px;">CLOCK OUT TIME:</span> <?php
                                                                    if (empty($timeout) || $timeout == "00:00:00") {
                                                                        echo  "<br>--:-- --";
                                                                    } else {
                                                                        echo "<br>" . date('h:i A', strtotime($timeout));
                                                                        echo "<p style='font-size:10px; text-transform:uppercase; margin-top:-0px;'><span style='color:#696969; font-weight:700;'>ESCORT:</span>" . $pickedby."</p>";
                                                                    }

                                                                    ?>
        </div>
    </div>

    <main class="main">
        <div class="clockbox">
            <svg id="clock" xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 600 600">
                <g id="face">
                    <circle class="circle" cx="300" cy="300" r="253.9" />
                    <path class="hour-marks" d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6" />
                    <circle class="mid-circle" cx="300" cy="300" r="16.2" />
                </g>
                <g id="hour">
                    <path class="hour-arm" d="M300.5 298V142" />
                    <circle class="sizing-box" cx="300" cy="300" r="253.9" />
                </g>
                <g id="minute">
                    <path class="minute-arm" d="M300.5 298V67" />
                    <circle class="sizing-box" cx="300" cy="300" r="253.9" />
                </g>
                <g id="second">
                    <path class="second-arm" d="M300.5 350V55" />
                    <circle class="sizing-box" cx="300" cy="300" r="253.9" />
                </g>
            </svg>
            <div id="clock2">
                <h2>The time is now</h2>
                <div id="time">
                    <div><span id="Hours">00</span><span>Hours</span></div>
                    <div><span id="Minutes">00</span><span>Minutes</span></div>
                    <div><span id="Seconds">00</span><span>Seconds</span></div>
                </div>
            </div>

        </div><!-- .clockbox -->
    </main>

    <figure style="margin-top:-10px;">
        <?php
        if ($clockinguardian == "Self" || empty($clockinguardian)) {
            echo "<button type='button' class='first markAttendance' data-button='first' data-school='$school' data-role='$role' data-year='$year' data-term='$term' data-student='$studentid' data-class='$class' data-classarm='$classarm' data-time='" . DATE("H:i:s") . "' data-statusIndicating='Present'><i class='fa fa-clock-o fa-2x' style='font-size:21px; color:white;'></i> <span class='buttonText'>Clock In</span></button>";
        } else {
            echo "<button type='button' class='first escort popup-open'  data-popup='.popup-escort' data-website-name='$website_name' data-escort='$clockinguardian' data-escort-confirm='Please Confirm Escort Person For Arrival' data-escort-photo='$clockinguardianphoto' data-button='first' data-school='$school' data-role='$role' data-year='$year' data-term='$term' data-student='$studentid' data-class='$class' data-classarm='$classarm' data-time='" . DATE("H:i:s") . "' data-statusIndicating='Present'><i class='fa fa-clock-o fa-2x' style='font-size:21px; color:white;'></i> <span class='buttonText'>Clock In</span></button>";
        }

        if ($clockoutguardian == "Self" || empty($clockoutguardian)) {
            echo "<button type='button' class='second markAttendance' data-button='second' style='background:#696969; border: 1px solid #696969;' data-school='$school' data-role='$role' data-year='$year' data-term='$term' data-student='$studentid' data-class='$class' data-classarm='$classarm' data-time='" . DATE("H:i:s") . "' data-statusIndicating='Present'><i class='fa fa-sign-out fa-2x' style='font-size:21px; color:white;'></i> <span class='buttonText'>Clock Out</span></button>";
        } else {
            echo "<button type='button' class='second escort popup-open' data-popup='.popup-escort' data-button='second' style='background:#696969; border: 1px solid #696969;' data-website-name='$website_name' data-website-name='$website_name' data-escort='$clockoutguardian' data-escort-confirm='Please Confirm Escort Person For Departure' data-escort-photo='$clockoutguardianphoto' data-school='$school' data-role='$role' data-year='$year' data-term='$term' data-student='$studentid' data-class='$class' data-classarm='$classarm' data-time='" . DATE("H:i:s") . "' data-statusIndicating='Present'><i class='fa fa-sign-out fa-2x' style='font-size:21px; color:white;'></i> <span class='buttonText'>Clock Out</span></button>";
        }
        echo "<button type='button' class='third' style='background:black;  border: 1px solid black;' diabled><i class='fa fa-sign-out fa-2x' style='font-size:21px; color:white;'></i> Clocked Out</button>";
        // if (empty($status)) {
        //     echo "<button type='button' class='first' id='markAttendance' data-school='$school' data-role='$role' data-year='$year' data-term='$term' data-student='$studentid' data-class='$class' data-classarm='$classarm' data-time='" . DATE("H:i:s") . "' data-statusIndicating='Present'><i class='fa fa-clock-o fa-2x' style='font-size:21px; color:white;'></i> Clock In</button>";
        // } else {
        //     if ($timeout == "00:00:00") {
        //         echo "<button type='button' class='second' id='markAttendance' style='background:#696969; border: 1px solid #696969;' data-school='$school' data-role='$role' data-year='$year' data-term='$term' data-student='$studentid' data-class='$class' data-classarm='$classarm' data-time='" . DATE("H:i:s") . "' data-statusIndicating='Present'><i class='fa fa-sign-out fa-2x' style='font-size:21px; color:white;'></i> Clock Out</button>";
        //     } else {
        //         echo "<button type='button' class='third' style='background:black;  border: 1px solid black;' diabled><i class='fa fa-sign-out fa-2x' style='font-size:21px; color:white;'></i> Clocked Out</button>";
        //     }
        // }
        ?>



    </figure>







</div>
<?php

echo '</div>';
echo '</div>';




?>




<script>
  
    var status = $(".checkState1").attr("data-status-check");
    var timeout = $(".checkState1").attr("data-clock-out");
    if (status == "") {
        $(".second,.third").hide();
        $(".first").show();
    } else {
        if (timeout == "00:00:00") {
            $(".first,.third").hide();
            $(".second").show();
        } else {
            $(".first,.second").hide();
            $(".third").show();
        }

    }

    $(".escort").off().on("click", function() {
        var escort = $(this).attr('data-escort');
        var escort_photo = $(this).attr('data-escort-photo');
        var escort_confirm = $(this).attr("data-escort-confirm")
        var website_name = $(this).attr("data-website-name");
        var school = $(this).attr("data-school");
        var role = $(this).attr("data-role");
        var year = $(this).attr("data-year");
        var term = $(this).attr("data-term");
        var studentid = $(this).attr("data-student");
        var form = $(this).attr("data-class");
        var classarm = $(this).attr("data-classarm");
        var time = $(this).attr("data-time");
        sessionStorage.setItem("button", $(this).attr("data-button"));
        var button = $(this).attr("data-button");
        var statusIndicating = $(this).attr("data-statusIndicating");
        var deviceName = device.model;
        $("#title").html(escort);
        $(".escort-view").load("https://schoolrobotghana.com/schoolrobot-mobile-api/endpoints/attendance-escort.php?escort=" + encodeURIComponent(escort) + "&escort_photo=" + encodeURIComponent(escort_photo) + "&escort_confirm=" + encodeURIComponent(escort_confirm) + "&website_name=" + encodeURIComponent(website_name) + "&school=" + encodeURI(school) + "&role=" + encodeURI(role) + "&year=" + encodeURI(year) + "&term=" + encodeURI(term) + "&studentid=" + encodeURI(studentid) + "&class=" + encodeURI(form) + "&classarm=" + encodeURI(classarm) + "&time=" + encodeURI(time) + "&statusIndicating=" + encodeURI(statusIndicating) + "&deviceName=" + encodeURI(deviceName) + "&button=" + encodeURI(button) + "", function(data) {});
    });


    $(".markAttendance").off().on("click", function() {
        app.dialog.preloader();
        var escort = "Self";
        var escort_photo = "self.jpg";
        var school = $(this).attr("data-school");
        var role = $(this).attr("data-role");
        var year = $(this).attr("data-year");
        var term = $(this).attr("data-term");
        var studentid = $(this).attr("data-student");
        var form = $(this).attr("data-class");
        var classarm = $(this).attr("data-classarm");
        var time = $(this).attr("data-time");
        sessionStorage.setItem("button", $(this).attr("data-button"));
        var button = $(this).attr("data-button");
        var statusIndicating = $(this).attr("data-statusIndicating");
        var deviceName = device.model;

        $.get(WebsiteName + "/COMPONENTS/SYSTEMS-ADMINISTRATOR/student-attendance/database.student-attendance.php?escort=" + encodeURIComponent(escort) + "&escort_photo=" + encodeURIComponent(escort_photo) + "&school=" + encodeURI(school) + "&role=" + encodeURI(role) + "&year=" + encodeURI(year) + "&term=" + encodeURI(term) + "&studentid=" + encodeURI(studentid) + "&class=" + encodeURI(form) + "&classarm=" + encodeURI(classarm) + "&time=" + encodeURI(time) + "&statusIndicating=" + encodeURI(statusIndicating) + "&deviceName=" + encodeURI(deviceName) + "&button=" + encodeURI(button) + "", function(data) {
            $("#tab1").load("https://schoolrobotghana.com/schoolrobot-mobile-api/endpoints/attendance.php?StudentId=" + encodeURIComponent(studentid) + "&Role=" + encodeURIComponent(role) + "", function(data) {
                app.dialog.close();
                $('.page-content').fadeIn();
                $(".refreshed").html("refreshed");
                const HOURHAND = document.querySelector("#hour");
                const MINUTEHAND = document.querySelector("#minute");
                const SECONDHAND = document.querySelector("#second");
                const GETREALTIME = document.querySelector("#dateAndTime");
                const DATEDOTAY = document.getElementById("date")
                var HOURHAND2 = document.querySelector("#Hours");
                var MINUTEHAND2 = document.querySelector("#Minutes");
                var SECONDHAND2 = document.querySelector("#Seconds");
                var date = new Date();
                console.log(date);
                let hr = date.getHours();
                let min = date.getMinutes();
                let sec = date.getSeconds();
                console.log("Hour: " + hr + " Minute: " + min + " Second: " + sec);

                let hrPosition = (hr * 360 / 12) + (min * (360 / 60) / 12);
                let minPosition = (min * 360 / 60) + (sec * (360 / 60) / 60);
                let secPosition = sec * 360 / 60;

                function runTheClock() {
                    var date = new Date();
                    console.log(date);
                    let hr = date.getHours();
                    let min = date.getMinutes();
                    let sec = date.getSeconds();
                    let currentHour = function() {
                        let realHour = 0;
                        let realHourInPM = 0;
                        if (hr >= 13) {
                            realHour = hr - 12;
                            realHourInPM = `${realHour}`;
                        } else {
                            realHour = hr;
                            realHourInPM = `${realHour}`;
                        }

                        return realHourInPM;
                    }
                    hrPosition = hrPosition + (3 / 360);
                    minPosition = minPosition + (6 / 60);
                    secPosition = secPosition + 6;

                    HOURHAND.style.transform = "rotate(" + hrPosition + "deg)";
                    MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)";
                    SECONDHAND.style.transform = "rotate(" + secPosition + "deg)";
                    HOURHAND2.innerHTML = currentHour();
                    MINUTEHAND2.innerHTML = min;
                    SECONDHAND2.innerHTML = sec;

                }

                setInterval(runTheClock, 1000);
                if (sessionStorage.getItem("button") == "first") {
                    $(".buttonText").html("Re-clock In");
                    $(".second,.third").hide();
                    $(".first").show();
                } else {
                    $(".buttonText").html("Re-clock Out");
                    $(".first,.third").hide();
                    $(".second").show();
                }
               

                $("#tab3").load("https://schoolrobotghana.com/schoolrobot-mobile-api/endpoints/attendance-student-history.php?StudentId=" + encodeURIComponent(studentid) + "", function(data) {

                });

                $("#tab4").load("https://schoolrobotghana.com/schoolrobot-mobile-api/endpoints/attendance-today.php", function(data) {

                })


            });

        })
    });
</script>