<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>MeHealth</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/eb33f99750.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/home-style.css">
    <script>
        window.onload = function () {
        
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Covid cases"
            },
            axisX: {
                valueFormatString: "MMM YYYY"
            },
            axisY2: {
                title: "Cases",
            },
            toolTip: {
                shared: true
            },
            legend: {
                cursor: "pointer",
                verticalAlign: "top",
                horizontalAlign: "center",
                dockInsidePlotArea: true,
                itemclick: toogleDataSeries
            },    
            data: [{
                type:"line",
                axisYType: "secondary",
                name: "Positive",
                showInLegend: true,
                markerSize: 0,
                dataPoints: [		
                <% data.forEach(function(day){ %>
                    { x: new Date(<%= day.dateymd[0] %>, <%= day.dateymd[1]-1 %>, <%= day.dateymd[2] %>), y: <%= day.dailyconfirmed%> },
                <% }) %> 
                ]
            },
            {
                type: "line",
                axisYType: "secondary",
                name: "Decreased",
                showInLegend: true,
                markerSize: 0,
                dataPoints: [		
                <% data.forEach(function(day){ %>
                    { x: new Date(<%= day.dateymd[0] %>, <%= day.dateymd[1]-1 %>, <%= day.dateymd[2] %>), y: <%= day.dailydeceased %> },
                <% }) %> 
                ]
            },
            {
                type: "line",
                axisYType: "secondary",
                name: "Recovered",
                showInLegend: true,
                markerSize: 0,
                dataPoints: [		
                <% data.forEach(function(day){ %>
                    { x: new Date(<%= day.dateymd[0] %>, <%= day.dateymd[1]-1 %>, <%= day.dateymd[2] %>), y: <%= day.dailyrecovered %> },
                <% }) %> 
                ]
            }]
        });
        chart.render();
        
        function toogleDataSeries(e){
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else{
                e.dataSeries.visible = true;
            }
            chart.render();
        }
        
        }
        </script>
   
</head>


<body>

    <div class="wrapper">
   <!-- Sidebar Holder start -->
   <nav id="sidebar">
    <div class="sidebar-header">
        <h3><a class="hero-brand" href="/" title="Home"><img alt="MeHealth" src="img/logo.jpeg"></a></h3>
    </div>

    <ul class="list-unstyled components">
        <li>
            <a href="/home">Covid Data</a>
        </li>
        <li>
            <a href="/covid/home">Covid Detection</a>
        </li>
        <li>
        <li>
            <a href="/covid/precautions">Precations</a>
        </li>
        <li>
            <a href="/covid/after-precautions">Precations(after covid +ve)</a>
        </li> 
        <li>
            <a href="/covid/plasma-donars">Plasma donars</a>
        </li>                
        </li>
        <li>
            <a href="/depression/home">Depression Detection</a>
        </li>  
        <li>
            <a href="/mealone">Chat bot</a>  
        </li>
        <li>
            <a href="/live-consultation">Live Consultation</a>
        </li>
    </ul>

</nav>
<!-- Sidebar Holder ends -->
        <!-- Page Content Holder -->
        <div id="content">

                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="navbar-btn">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item active">
                                
                            </li>
                        </ul>
                    </div>
                </div>
   <div class="container">
        <h3>Welcome to MeHealth</h3>
        <div class="stats">
            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="gly" style="background: linear-gradient(60deg, #ffa726, #fb8c00);">
                                <i class="fas fa-head-side-mask"></i>
                            </div>
                            <div class="head">
                                <h6>Total positive</h6>
                            </div>
                            <div class="body">
                                <h5>
                                    <%= (data[(data.length)-1].totalconfirmed)-(data[(data.length)-1].dailyconfirmed) %>
                                </h5>
                                <h6> <i class="fas fa-arrow-up"></i><%= data[(data.length)-1].dailyconfirmed %></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="gly" style="background: #ff5e00;">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="head">
                                <h6>Total active</h6>
                            </div>
                            <div class="body">
                                <h5>
                                    <%= (data[(data.length)-1].totalconfirmed)-(data[(data.length)-1].totalrecovered) %>
                                </h5>
                                <h6> <i class="fas fa-arrow-up"></i><%= (data[(data.length)-1].dailyconfirmed) %></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="gly" style="background: linear-gradient(60deg, #ef5350, #e53935);">
                                <i class="fas fa-exclamation"></i>
                            </div>
                            <div class="head">
                                <h6>Decreased</h6>
                            </div>
                            <div class="body">
                                <h5>
                                    <%= (data[(data.length)-1].totaldeceased) %>
                                </h5>
                                <h6> <i class="fas fa-arrow-up"></i><%= (data[(data.length)-1].dailydeceased) %></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="gly" style="background: linear-gradient(60deg, #26c6da, #00acc1);">
                                <i class="fas fa-syringe"></i>
                            </div>
                            <div class="head">
                                <h6>Vaccinated</h6>
                            </div>
                            <div class="body">
                                <h5>
                                    125377183
                                </h5>
                                <h6> <i class="fas fa-arrow-up"></i>+1899</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="graph">
            <div id="chartContainer" style="height: 400px; width: 100%;"></div>
        </div>
        

    </div>



        </div>
    </div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
                $(this).toggleClass('active');
            });
        });
    </script>
</body>

</html>