@model GASArabianERP.Models.LocalDashboardVM
@{
    ViewBag.Title = "LocalDashboard";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="content">
    <div class="box box-primary">
        <div class="box-header">
            <h3 class="box-title"> <span class="widget-icon"> <i class="fa fa-dashboard"></i> </span> Local  Dashboard</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            @{
                var clist = (List<GASArabianERP.Models.LocalDashboardVM>)ViewBag.LocalDashboardData;
                foreach (var item in clist)
                {
                    if (clist != null)
                    {
                        <div class="row">
                            <div class="col-md-2 col-sm-6 col-xs-12">
                                <div class="info-box bg-light-blue-gradient">
                                    <div class="info-box-content" style="margin-left:0px;">
                                        <span class="info-box-text"><b>Total Applicant</b></span>
                                        <span class="info-box-text">Pending: <b> @item.TotalPendingLocalApplicants</b></span>
                                        <span class="info-box-text">Approval: <b>@item.TotalSelectedLocalApplicants </b></span>
                                        <span class="info-box-text">Total: <b> @item.TotalApplicants</b></span>
                                    </div>
                                </div>
                            </div><!-- /.col -->
                            <div class="col-md-2 col-sm-6 col-xs-12">
                                <div class="info-box bg-aqua-gradient ">
                                    <div class="info-box-content" style="margin-left:0px;">
                                        <span class="info-box-text"><b>Interview</b></span>
                                        <span class="info-box-text">Pending: <b> @item.PendingInterviews</b></span>
                                        <span class="info-box-text">Approval: <b> @item.SelectedInterviews</b></span>
                                        @*<span class="info-box-text">Rejected: <b> 26</b></span>*@
                                    </div>
                                </div>
                            </div><!-- /.col -->
                            <div class="col-md-2 col-sm-6 col-xs-12">
                                <div class="info-box bg-light-blue-gradient">
                                    <div class="info-box-content" style="margin-left:0px;">
                                        <span class="info-box-text"><b>Safty Orientation</b></span>
                                        <span class="info-box-text">Pending: <b> @item.PendingSaftyorientation</b></span>
                                        <span class="info-box-text">Approval: <b> @item.SelectSaftyorientation</b></span>
                                        @*<span class="info-box-text">Rejected: <b> 26</b></span>*@
                                    </div>
                                </div>
                            </div><!-- /.col -->
                            <!-- fix for small devices only -->
                            <div class="clearfix visible-sm-block"></div>
                            <div class="col-md-2 col-sm-6 col-xs-12">
                                <div class="info-box bg-teal-gradient">
                                    <div class="info-box-content" style="margin-left:0px;">
                                        <span class="info-box-text"><b>Plant ID</b></span>
                                        <span class="info-box-text">Pending: <b> @item.PendingPlantID</b></span>
                                        <span class="info-box-text">Repared: <b> @item.SelectPlantID</b></span>
                                        @*<span class="info-box-text">Perminent: <b> 26</b></span>*@
                                    </div>
                                </div>
                            </div><!-- /.col -->

                            <div class="col-md-2 col-sm-6 col-xs-12">
                                <div class="info-box bg-teal-gradient ">
                                    <div class="info-box-content" style="margin-left:0px;">
                                        <span class="info-box-text"><b>PPE KiT</b></span>
                                        <span class="info-box-text">Assign: <b> @item.AssignedPPEKit</b></span>
                                        <span class="info-box-text">Return: <b>@item.ReturnPPEKit</b></span>
                                    </div>
                                </div>
                            </div><!-- /.col -->
                            <div class="col-md-2 col-sm-6 col-xs-12">
                                <div class="info-box bg-light-blue-gradient">
                                    <div class="info-box-content" style="margin-left:0px;">
                                        <span class="info-box-text"><b>Suppliers</b></span>
                                        <span class="info-box-text">Active: <b> 5</b></span>
                                        <span class="info-box-text">Not Active: <b>2</b></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                }
            }

            <div class="row">
                <!-- Left col -->
                <section class="col-lg-12 connectedSortable">
                    <!-- Custom tabs (Charts with tabs)-->
                    <div class="nav-tabs-custom">
                        <!-- Tabs within a box -->
                        <ul class="nav nav-tabs pull-right">
                            <li><a href="#sales-data" data-toggle="tab">TimeSheet</a></li>
                            <li class="active"><a href="#crm-data" data-toggle="tab">Employees</a></li>
                            <li class="pull-left header"><i class="fa fa-line-chart"></i> Live Charts</li>
                        </ul>
                        <div class="tab-content no-padding">
                            <!-- Sales Dashboard values-->
                            <div class="chart tab-pane active" id="sales-data" style="position: relative; height: 400px;">
                                <div id="divdailyops">
                                    <canvas id="dailyops" style="width:100%;max-width:600px"></canvas>

                                </div>
                            </div>
                            <!-- End Sales Dashboard values-->
                            <!-- CRM Dashboard values-->
                            <div class="chart tab-pane" id="crm-data" style="position: relative; height: 400px;">

                            </div>
                            <!-- End CRM Dashboard values-->
                        </div>
                    </div>
                    <!-- /.nav-tabs-custom -->
                </section>
            </div>
        </div>
    </div>

    <!--<div class="row">
        <div class="col-md-2 col-sm-6 col-xs-12">
            <div class="info-box ">
                <div class="info-box-content" style="margin-left:0px;">
                    <span class="info-box-text"><b>Employees</b></span>
                    <span class="info-box-text">Local: <b> 90</b></span>
                    <span class="info-box-text">Overseas: <b> 12</b></span>
                    <span class="info-box-text">Freelancer: <b> 26</b></span>
                    <span class="info-box-text">Perminent: <b> 26</b></span>
                </div>
            </div>
        </div>-->
    <!-- /.col -->
    <!--<div class="col-md-2 col-sm-6 col-xs-12">
        <div class="info-box ">
            <div class="info-box-content" style="margin-left:0px;">
                <span class="info-box-text"><b>Vechile</b></span>
                <span class="info-box-text">Coaster: <b> 90</b></span>
                <span class="info-box-text">Buses: <b> 12</b></span>
                <span class="info-box-text">Cars: <b> 26</b></span>
            </div>
        </div>
    </div>-->
    <!-- /.col -->
    <!-- fix for small devices only -->
    <!--<div class="clearfix visible-sm-block"></div>
    <div class="col-md-2 col-sm-6 col-xs-12">
        <div class="info-box ">
            <div class="info-box-content" style="margin-left:0px;">
                <span class="info-box-text"><b>User Access</b></span>
                <span class="info-box-text">Users: <b> 03</b></span>
            </div>
        </div>
    </div>-->
    <!-- /.col -->
    <!--<div class="col-md-2 col-sm-6 col-xs-12">
        <div class="info-box ">
            <div class="info-box-content" style="margin-left:0px;">
                <span class="info-box-text"><b>Accomdation</b></span>
                <span class="info-box-text">Building: <b> 5</b></span>
                <span class="info-box-text">Total Room: <b>90 </b></span>
                <span class="info-box-text">Availble Rooms: <b> 26</b></span>
            </div>
        </div>
    </div>-->
    <!-- /.col -->
    <!--<div class="col-md-2 col-sm-6 col-xs-12">
        <div class="info-box ">
            <div class="info-box-content" style="margin-left:0px;">
                <span class="info-box-text"><b>Projects</b></span>
                <span class="info-box-text">Active: <b> 5</b></span>
                <span class="info-box-text">Not Active: <b>2</b></span>
            </div>
        </div>
    </div>-->
    <!-- /.col -->
    <!--<div class="col-md-2 col-sm-6 col-xs-12">
            <div class="info-box ">
                <div class="info-box-content" style="margin-left:0px;">
                    <span class="info-box-text"><b>Customer</b></span>
                    <span class="info-box-text">Active: <b> 5</b></span>
                    <span class="info-box-text">Not Active: <b>2</b></span>
                </div>
            </div>
        </div>
    </div>-->

</section>


@section scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ChartViewModel = [];
            var month = 4;
            var year = 2022;
            ChartViewModel = {
                Month: month,
                Year: year
            };
            $.ajax({
                type: "POST",
                url: '/Dashboard/DailyOPS',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(ChartViewModel),
                success: function (chData) {
                    buildChart(chData);
                }
            });
        });
        var myNewChart = null;
        var config = { options: {} }
        @* Daily OPS % details............*@
        function buildChart(chData) {
            /*    alert("test");*/
            debugger;
            var aData = chData;
            var aLabels = aData[0];
            var aDatasets1 = aData[1];
            var aDatasets2 = aData[2];
            var aDatasets3= aData[3];

            var dataT = {
                labels: aLabels,
                datasets: [{
                    label: "Total",
                    data: aDatasets1,
                    fill: false,
                    borderColor: "red",
                    backgroundColor:"red"

                },
                {
                    label: "Local",
                    data: aDatasets2,
                    fill: false,
                    borderColor: "blue",
                    backgroundColor: "blue"
                 },
                    {
                        label: "Overseas",
                        data: aDatasets3,
                        fill: false,
                        borderColor: "green",
                        backgroundColor: "green"
                    }
                ]
            };
            var ctx = $("#dailyops").get(0).getContext("2d");
            config = {
                type: 'line',
                data: dataT,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Daily Work',
                        fontSize: 15
                    },
                    legend: {
                        display: true,
                        position: "bottom"
                    },
                    elements: {
                        point: {
                            pointStyle: 'circle'
                        }
                    },
                    tooltips: {
                        position: 'nearest',
                        mode: 'index',
                        intersect: false,
                        yPadding: 10,
                        xPadding: 10,
                        caretSize: 8,
                        borderWidth: 2
                    },
                    hover: {
                        mode: 'dataset',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            //scaleLabel: {
                            //    display: true,
                            //    labelString: 'Date'
                            //},
                            gridLines: {
                                display: false
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Employees'
                            },
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            };

            if (myNewChart == null) {
                // alert("test1");
                myNewChart = new Chart(ctx, config);
            }
            else {
                //alert("test2");
                myNewChart.destroy();
                myNewChart = new Chart(ctx, config);
            }
        }
    </script>
}