<!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">

    <link rel="stylesheet" href="/css/portal.css">
<!-- Google Tag Manager -->

<!-- End Google Tag Manager -->

    <!-- Custom CSS Block -->
    <%- block('css').toString() %>
</head>
<body class="hold-transition sidebar-mini">
<!-- Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->
<div class="wrapper">

    <!-- Navbar -->
    <% include ../partials/navbar.ejs %>
    <!-- /.navbar -->

    <!-- Sidebar -->
    <% include  ../partials/sidebar.ejs %>
    <!-- /.sidebar -->


    <!-- 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">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark"><%= title %></h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active"><%= title %></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-gradient-lightblue">
                            <div class="inner">
                                <h3><%= applied %></h3>

                                <p>Applied</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-user-friends"></i>
                            </div>
                            <% if(["Admin", "President", "Marketing VP", "Projects VP", "Financial VP", "Multimedia VP", "HR VP", "TD Team Leader", "OD Team Leader", "L&D Team Leader"].includes(user.Position?.Name) || user.isAdmin){ %>
                            <a href="/portal/applicants/all" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            <%}%>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-gradient-yellow">
                            <div class="inner">
                                <h3><%= pending %></h3>

                                <p>Pending</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-user-tie"></i>
                            </div>
<!--                            <a href="/departments" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>-->
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-gradient-red">
                            <div class="inner">
                                <h3><%= rejected %></h3>

                                <p>Rejected</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-users-slash"></i>
                            </div>
<!--                            <a href="/devices" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>-->
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-gradient-green">
                            <div class="inner">
                                <h3><%= accepted %></h3>

                                <p>Accepted</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-user-check"></i>
                            </div>
<!--                            <a href="/parts" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>-->
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="card card-info col-lg-6 col-sm-12">
                        <div class="card-header">
                            <h3 class="card-title">First Preference</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="DepDev" style="height: 324px;max-width: 100%;"></canvas>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <div class="card card-danger col-lg-6 col-sm-12">
                            <div class="card-header">
                                <h3 class="card-title">Second Preference</h3>

                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                            <div class="card-body">
                                <canvas id="DepAlert" style="height: 324px;max-width: 100%;"></canvas>
                            </div>
                            <!-- /.card-body -->
                        </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Applications Timeline</h3>

                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart">
                                    <canvas id="areaChart" style="min-height: 324px; height: 324px; max-width: 100%;"></canvas>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>


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

    <!-- /.content-wrapper -->
    <!--    Footer-->
    <% include ../partials/footer.ejs %>


    <!-- Toasts -->
    <% include ../partials/toasts.ejs %>
    <!-- Custom JS Block -->
    <%- block('js').toString() %>
    <script src="/plugins/chart.js/Chart.min.js"></script>
    <script>
        var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
        let labels2 = [];
        let data2 = [];
        <% dates.forEach(al=>{ %>
        labels2.push("<%=al.End %>")
        data2.push(<%=al.count %>)
        <% })%>
        var areaChartData = {
            labels  : labels2,
            datasets: [
                {
                    label               : 'Applicants',
                    backgroundColor     : 'rgba(60,141,188,0.5)',
                    borderColor         : 'rgba(60,141,188,0.8)',
                    pointColor          : '#1ed0ff',
                    pointStrokeColor    : 'rgba(60,141,188,1)',
                    pointHighlightFill  : '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data                : data2
                }
            ]
        }

        var areaChartOptions = {
            maintainAspectRatio : false,
            responsive : true,
            legend: {
                display: true
            },
            scales: {
                xAxes: [{
                    gridLines : {
                        display : false,
                    }
                }],
                yAxes: [{
                    gridLines : {
                        display : true,
                    }
                }]
            }
        }

        // This will get the first returned node in the jQuery collection.
        var areaChart       = new Chart(areaChartCanvas, {
            type: 'line',
            data: areaChartData,
            options: areaChartOptions
        })
        $(function () {
            let colors = ['#d2d6de', '#3c8dbc', '#00c0ef', '#f39c12', '#f56954', '#00a65a', "#a65628", "#7f80cd", "#00d2d5", "#984ea3", "#ddcc77", "#44aa99","#44aa99" ];
            // let colors1 = ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#f39c12']
            let colors1 = ['#d2d6de', '#3c8dbc', '#00c0ef', '#f39c12', '#f56954', '#00a65a', "#a65628", "#7f80cd", "#00d2d5", "#984ea3", "#ddcc77", "#44aa99","#44aa99" ];
            let donutChartCanvas = $('#DepDev').get(0).getContext('2d')
            let labels1 = []
            let data1 = []
            <% second.forEach(al=>{ %>
            labels1.push("<%=al.Second %>")
            data1.push(<%=al.count %>)
            <% })%>
            var donutData        = {
                labels:labels1,
                datasets: [
                    {
                        data:data1,
                        backgroundColor : colors1.slice(0, data1.length),
                    }
                ]
            }
            var donutOptions     = {
                maintainAspectRatio : true,
                responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            var donutChart = new Chart(donutChartCanvas, {
                type: 'doughnut',
                data: donutData,
                options: donutOptions
            })
            var DepAlertChartCanvas = $('#DepAlert').get(0).getContext('2d')
            let labels = [];
            let data = [];
            <% first.forEach(al=>{ %>
            labels.push("<%=al.First %>")
            data.push(<%=al.count %>)
            <% })%>
            var DepAlertData        = {
                labels: labels,
                datasets: [
                    {
                        data: data,
                        backgroundColor : colors.slice(0, data.length),
                    }
                ]
            }
            console.log(DepAlertData)
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            var DepAlertChart = new Chart(DepAlertChartCanvas, {
                type: 'doughnut',
                data: DepAlertData,
                options: donutOptions
            })
        })

    </script>
</body>
</html>
