<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel='icon' href='/favicon.ico' type='image/x-icon'/>
    <title> <%= settings["WebsiteName"].Value %> || <%= title %></title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <!-- Google Tag Manager -->

    <!-- End Google Tag Manager -->
    <style>
        body {
            background: #F4F6F9;
            text-align: center;
        }
        .content-wrapper{
            margin-left: auto !important;
            margin-right: auto;
        }
        img{
            margin-left: auto !important;
            margin-right: auto;
            max-height: 200px;
        }
        .MainKPI, .KPITimeline{
            margin-left: auto;
            margin-right: auto;
            max-width: 600px;
        }
        .MainKPI .card-title {
            margin-left: auto;
            margin-right: auto;
            float: none;
        }
        .KPITimeline .card-title {
            float: none;
        }
        .TKnob{
            background: white;
        }
        canvas{
            background: white;
        }
        .timeline::before{
            left: 48.7%;
            width: 5px;
        }
        .timelineEndIcon{
            position: relative !important;
            left: 0 !important;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<!-- Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->
<div class="wrapper">

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <img src="/images/<%=settings["WebsiteLogo"].Value%>" alt="HRPortal Logo">
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <%
            let CurrentMonth;
        if (mem.KPI.July !== null){
             CurrentMonth = "July"
        }else if (mem.KPI.June !== null){
            CurrentMonth = "June"
        }else if (mem.KPI.May !== null){
            CurrentMonth = "May"
        }else if (mem.KPI.April !== null){
            CurrentMonth = "April"
        }else if (mem.KPI.March !== null){
            CurrentMonth = "March"
        }else if (mem.KPI.February !== null){
            CurrentMonth = "February"
        }else if (mem.KPI.January !== null){
            CurrentMonth = "January"
        }
        %>
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
<!--                Content Here-->
                <div class="card card-success card-outline MainKPI">
                    <div class="card-header">
                        <h3 class="card-title">Your KPI For <%=CurrentMonth%></h3>
                        <!-- /.card-tools -->
                    </div>
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <input type="text" class="knob TKnob" value="<%= mem.KPI[CurrentMonth] ? mem.KPI[CurrentMonth] : 0%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                   data-height="140" data-fgColor="#28a745" data-readonly="true" disabled>
                        </div>
<!--                        3c8dbc-->
                        <h3 class="profile-username text-center"><%=mem.Name%></h3>

                        <p class="text-muted text-center"><%=mem.Committee%></p>

                    </div>
                    <!-- /.card-body -->
                </div>
                <div class="card card-primary card-outline KPITimeline">
                    <div class="card-header">
                        <h3 class="card-title">Your KPI Timeline</h3>
                        <!-- /.card-tools -->
                    </div>
                    <div class="card-body">
                            <div class="timeline">
                                <!-- timeline time label -->
                                <%if (mem.KPI.July !== null){%>
                                <div class="time-label">
                                    <span class="bg-blue">July</span>
                                </div>
                                <!-- /.timeline-label -->
                                <!-- timeline item -->
                                <div>
                                    <i><input type="text" class="knob" value="<%= mem.KPI.January%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                              data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                </div>
                                <%}%>
                                <%if (mem.KPI.June !== null){%>
                                    <div class="time-label">
                                        <span class="bg-blue">June</span>
                                    </div>
                                    <!-- /.timeline-label -->
                                    <!-- timeline item -->
                                    <div>
                                        <i><input type="text" class="knob" value="<%= mem.KPI.June%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                                  data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                    </div>
                                <%}%>
                                <%if (mem.KPI.May !== null){%>
                                    <div class="time-label">
                                        <span class="bg-blue">May</span>
                                    </div>
                                    <!-- /.timeline-label -->
                                    <!-- timeline item -->
                                    <div>
                                        <i><input type="text" class="knob" value="<%= mem.KPI.May%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                                  data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                    </div>
                                <%}%>
                                <%if (mem.KPI.April !== null){%>
                                    <div class="time-label">
                                        <span class="bg-blue">April</span>
                                    </div>
                                    <!-- /.timeline-label -->
                                    <!-- timeline item -->
                                    <div>
                                        <i><input type="text" class="knob" value="<%= mem.KPI.April%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                                  data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                    </div>
                                <%}%>
                                <%if (mem.KPI.March !== null){%>
                                    <div class="time-label">
                                        <span class="bg-blue">March</span>
                                    </div>
                                    <!-- /.timeline-label -->
                                    <!-- timeline item -->
                                    <div>
                                        <i><input type="text" class="knob" value="<%= mem.KPI.March%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                                  data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                    </div>
                                <%}%>
                                <%if (mem.KPI.February !== null){%>
                                    <div class="time-label">
                                        <span class="bg-blue">February</span>
                                    </div>
                                    <!-- /.timeline-label -->
                                    <!-- timeline item -->
                                    <div>
                                        <i><input type="text" class="knob" value="<%= mem.KPI.February%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                                  data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                    </div>
                                <%}%>
                                <%if (mem.KPI.January !== null){%>
                                    <div class="time-label">
                                        <span class="bg-blue">January</span>
                                    </div>
                                    <!-- /.timeline-label -->
                                    <!-- timeline item -->
                                    <div>
                                        <i><input type="text" class="knob" value="<%= mem.KPI.January%>" data-skin="tron" data-thickness="0.2" data-width="140"
                                                  data-height="140" data-fgColor="#3c8dbc" data-readonly="true" disabled></i>
                                    </div>
                                <%}%>
                                <!-- END timeline item -->
                                <div>
                                    <i class="fas fa-clock bg-gray timelineEndIcon"></i>
                                </div>
                            </div>

                        <!--                        3c8dbc-->

                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
</div>

<!-- /.content-wrapper -->
<!--    Footer-->


<!-- jQuery -->
<script src="/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/dist/js/adminlte.min.js"></script>
<!-- jQuery Knob -->
<script src="/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- page script -->
<script>
    $(function () {
        /* jQueryKnob */

        $('.knob').knob({
            draw: function () {

                // "tron" case
                if (this.$.data('skin') == 'tron') {

                    let a   = this.angle(this.cv)  // Angle
                        ,
                        sa  = this.startAngle          // Previous start angle
                        ,
                        sat = this.startAngle         // Start angle
                        ,
                        ea                            // Previous end angle
                        ,
                        eat = sat + a                 // End angle
                        ,
                        r   = true

                    this.g.lineWidth = this.lineWidth

                    this.o.cursor
                    && (sat = eat - 0.3)
                    && (eat = eat + 0.3)

                    if (this.o.displayPrevious) {
                        ea = this.startAngle + this.angle(this.value)
                        this.o.cursor
                        && (sa = ea - 0.3)
                        && (ea = ea + 0.3)
                        this.g.beginPath()
                        this.g.strokeStyle = this.previousColor
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false)
                        this.g.stroke()
                    }

                    this.g.beginPath()
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false)
                    this.g.stroke()

                    this.g.lineWidth = 2
                    this.g.beginPath()
                    this.g.strokeStyle = this.o.fgColor
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false)
                    this.g.stroke()
                    return false
                }
            }
        })
    })
        /* END JQUERY KNOB */
    </script>

</body>
</html>
