<?php
include 'connect/cms-config.php' ;
include 'requires/function.php' ;
$user_permission_check = 'all-permission' ;
include 'requires/session.php' ;

// keep parameter in value
$filter_page      	= escapeString($_GET['filter_page']) ;
$filter_page        = ( $filter_page != '' ? $filter_page : 'task' ) ;
$date_time          = escapeString($_GET['date_time']) ;
$date_time          = ( $date_time != '' ? $date_time : date('Y-m', time()) ) ;

// active page
$active_main_menu 	= 'dashboard' ;
$active_menu 		= 'dashboard' ;

// start header here
include 'requires/page_header.php' ;
include 'requires/page_top.php' ;
?>
<link rel="stylesheet" href="<?= $require_path ?>css/dashboard.css" />

<script>
$(document).ready(function() {
    $('#filter_page').on('change', function() {
        var selectedValue = $(this).val();
        var link = '?filter_page=' + selectedValue + '&date_time=<?= $date_time ?>';
        window.location.href = link;
    });
});
</script>

<div class="warper container-fluid">
    <div class="container dashboard">
        <!-- Row 1: DASHBOARD -->
        <div class="row">
            <div class="col-xs-12">
                <h4 class="dashboard-title">DASHBOARD</h4>
            </div>
        </div>

        <!-- Row 2: Date and Today Filter -->
        <div class="row date-row">
            <div class="col-xs-6">
                <span class="dashboard-date">2025-07-08</span>
            </div>
            <div class="col-xs-6 text-right">
                <input type="text" class="form-control input-sm dashboard-filter" placeholder="Today">
            </div>
        </div>

        <!-- Row 3: Cards -->
        <div class="row card-container">
            <div class="col-sm-3 col-xs-6">
                <div class="card-box">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="glyphicon glyphicon-user icon"></i>
                        </div>
                        <div class="col-sm-8">
                            <strong>Employee</strong>
                            <div class="card-count">700</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="card-box">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="glyphicon glyphicon-user icon"></i>
                        </div>
                        <div class="col-sm-8">
                            <strong>Employee</strong>
                            <div class="card-count">700</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="card-box">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="glyphicon glyphicon-user icon"></i>
                        </div>
                        <div class="col-sm-8">
                            <strong>Employee</strong>
                            <div class="card-count">700</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="card-box">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="glyphicon glyphicon-user icon"></i>
                        </div>
                        <div class="col-sm-8">
                            <strong>Employee</strong>
                            <div class="card-count">700</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container announcement">
        <div class="row">
            <div class="col-xs-12">
                <h4 class="dashboard-title text-left">ANNOUNCEMENT</h4>
            </div>
        </div>

        <div class="row title-row text-center">
            <div class="col-sm-12">
                <span class="announcement-title">Welcome to your new system</span>
            </div>
        </div>

        <div class="row date-row text-center">
            <div class="col-xs-12">
                <span class="dashboard-date">
                    If you need help getting started, check out our user manual. If you need help, call us at +6016 977 5111 or email us at info@ips.com.my to get information on how to use your current screen and where to go for more assistance.
                </span>
            </div>
        </div>
    </div>

    <div class="dashboard_section">
        <div class="row ">
            <div class="col-sm-6" style="padding: 0px;">
                <div style="margin-top:5px;margin-right:5px;padding: 30px;background-color: white;        border-radius: 8px;">
                    <h4 class="dashboard-title">TOTAL EMPLOYEES</h4>
                    <div id="totalEmployee" class="chart_div"></div>
                </div>
            </div>
            <div class="col-sm-6" style="padding: 0px;">
                <div style="margin-top:5px;margin-left:5px;padding: 30px;background-color: white;        border-radius: 8px;">
                    <h4 class="dashboard-title">EMPLOYEES COMPARISON</h4>
                    <div id="employeeComparison" class="chart_div"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
window.onload = function() {

    var chart = new CanvasJS.Chart("totalEmployee", {
        animationEnabled: true,
        backgroundColor: "white",
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center",
            fontSize: 14,
            fontFamily: "Arial"
        },
        data: [{
            type: "doughnut",
            startAngle: 60,
            innerRadius: 70,
            indexLabelFontSize: 14,
            indexLabel: "{label} - {y}%",
            toolTipContent: "<b>{label}:</b> {y}%",
            dataPoints: [{
                    y: 43.1,
                    label: "Business",
                    color: "#4285F4"
                },
                {
                    y: 32.4,
                    label: "Development",
                    color: "#DB3E88"
                },
                {
                    y: 16.2,
                    label: "Testing",
                    color: "#F4CF27"
                },
                {
                    y: 8.3,
                    label: "Design",
                    color: "#5CCF77"
                }
            ]
        }]
    });
    chart.render();

    // Line Chart Example
    var lineChart = new CanvasJS.Chart("employeeComparison", {
        animationEnabled: true,
        backgroundColor: "white",
        title: {
            text: "Department Performance Over Time"
        },
        axisX: {
            title: "Month"
        },
        axisY: {
            title: "Completed Tasks"
        },
        data: [{
            type: "line",
            name: "IT Department",
            showInLegend: true,
            dataPoints: [{
                    label: "Jan",
                    y: 20
                },
                {
                    label: "Feb",
                    y: 25
                },
                {
                    label: "Mar",
                    y: 22
                },
                {
                    label: "Apr",
                    y: 30
                },
                {
                    label: "May",
                    y: 28
                }
            ]
        }]
    });
    lineChart.render();
}
</script>
<style>

    /*dashboard css dont move it to dashboard.css, it use to ovrrwrite some random css*/
    /*first element*/
    .container.dashboard {
        width: 100%;
        display: inline-block;
        background-color: white;
        padding: 30px;
        border-radius: 8px;
    }

    .dashboard-title {
      font-size: 18px;
      font-weight: bold;
      color: #1a1a1a;
      margin-bottom: 20px;
    }

    .date-row {
      margin-top: 10px;
      margin-bottom: 50px;
    }

    .dashboard-date {
      color: #666;
    }

    .dashboard-filter {
      max-width: 150px;
      float: right;
    }

    .card-container .card-box {
      background-color: #fff;
      border: 1px solid #e1e1e1;
      border-radius: 6px;
      padding: 15px;
      margin-bottom: 15px;
      text-align: left;
    }

    .card-box .icon {
      color: #5e5bd0;
      font-size: 24px;
      display: inline-block;
      margin-right: 8px;
      vertical-align: middle;
    }

    .card-box strong {
      font-size: 14px;
      vertical-align: middle;
      display: inline-block;
    }

    .card-count {
      color: #999;
      font-size: 13px;
    }



    /*second element*/
    .container.announcement {
        width: 100%;
        display: inline-block;
        background-color: white;
        padding: 30px;
        border-radius: 8px;
    }

    .announcement-title {
      font-size: 18px;
      font-weight: bold;
      color: #1a1a1a;
      width: 100%;
      margin-bottom: 100px;
      text-align: center;
    }

</style>


<?php
// footer
include 'requires/page_footer.php' ;
?>