@extends('layouts.app')
@section('content')
<!-- <main class="py-4"> -->
<main>
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-header">
                <h3 class="content-header-title">Dashboard Overview</h3>
                <p>Last Update at {{ date("H") }}:00</p>
            </div>
            <div class="content-body">
                <!-- Statistic -->
                <div class="row">
                    
                <div class="col-xl-3 col-lg-6 col-12">
                        <!-- <div class="card bg-gradient-yellow-cara"> -->
                        <div class="card bg-card-w">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="media d-flex">
                                        <div class="media-body text-white text-left">
                                            <h3 class="text-dark font-weight-bold">{{ $onlineDevice }}</h3>
                                            <span class="text-dark">Device <span class="blink text-online">Online</span></span>
                                        </div>
                                        <div class="align-self-center">
                                            <!-- <i class="icon-cup text-white font-large-2 float-right"></i> -->
                                            <img src="{{ asset('/assets/image/aio-orange.png') }}" style="width: 50px;fill: #fff !important;position: relative;" alt="">
                                            <div class="pulsating-circle-green"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="card bg-card-w">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="media d-flex">
                                        <div class="media-body text-white text-left">
                                            <h3 class="text-dark font-weight-bold">{{ $offlineDevice }}</h3>
                                            <span class="text-dark">Device <span class="text-offline font-weight-bold">Offline</span></span>
                                        </div>
                                        <div class="align-self-center">
                                            <!-- <i class="icon-plane text-white font-large-2 float-right"></i> -->
                                            <img src="{{ asset('/assets/image/aio-dc-orange.png') }}" style="width: 50px;fill: #fff !impoirta;" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="card bg-card-w">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="media d-flex">
                                        <div class="media-body text-white text-left">
                                            <h3 class="text-dark font-weight-bold">{{ $totalDevice }}</h3>
                                            <span class="text-dark">Succesfully Transferred API</span>
                                        </div>
                                        <div class="align-self-center">
                                            <!-- <i class="icon-pointer text-white font-large-2 float-right"></i> -->
                                            <img src="{{ asset('/assets/image/aio-success-orange.png') }}" style="width: 50px;fill: #fff !impoirta;" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-12">
                        <div class="card bg-card-w">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="media d-flex">
                                        <div class="media-body text-white text-left">
                                            <h3 class="text-dark font-weight-bold">{{ $person }}</h3>
                                            <span class="text-dark">Total Registered User</span>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="icon-users text-orange-cara font-large-2 float-right"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ eCommerce statistic -->

                <div class="row match-height">
                    <div class="col-xl-8 col-12">
                        <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Daily Visitors</h4>
                            <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body pt-0">
                            <div class="row mb-1">
                                <div class="col-6 col-md-4">
                                <h5>Current Month</h5>
                                <h2 class="info">{{ $currentMonth }}</h2>
                                </div>
                                <div class="col-6 col-md-4">
                                <h5>Previous Month</h5>
                                <h2 class="text-muted">{{ $lastMonth }}</h2>
                                </div>
                            </div>
                            <div class="chartjs">
                                <canvas id="thisYearRevenue" class="position-absolute" width="400"></canvas>
                                <canvas id="lastYearRevenue" width="400"></canvas>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-12">
                        <div class="card">
                        <div class="card-content">
                            <div class="card-body sales-growth-chart">
                            <h4 class="card-title">Total User Registered by Device</h4>
                            <div id="monthly-sales" class="height-250"></div>
                            </div>
                            <div class="chart-stats text-center mb-3">
                                <a href="#" class="btn btn-sm bg-gradient-yellow-cara mr-1 text-white">Statistics <i class="ft-bar-chart"></i></a>
                            </div>
                        </div>
                        <div class="card-footer">
                            <h4 class="card-title">Total User by Category</h4>
                            <div class="card mb-2" style="box-shadow: 0 2px 18px 1px rgb(49 53 72 / 10%) !important;">
                                <div class="card-content p-1">
                                    <p class="mb-0 d-inline font-weight-bold">Staffs</p>
                                    <p class="mb-0 d-inline pull-right">{{ $staff }}</p>
                                </div>
                            </div>
                            <div class="card mb-2" style="box-shadow: 0 2px 18px 1px rgb(49 53 72 / 10%) !important;">
                                <div class="card-content p-1">
                                    <p class="mb-0 d-inline font-weight-bold">Registered Visitors</p>
                                    <p class="mb-0 d-inline pull-right">{{ $registered }}</p>
                                </div>
                            </div>
                            {{-- <div class="card mb-2" style="box-shadow: 0 2px 18px 1px rgb(49 53 72 / 10%) !important;">
                                <div class="card-content p-1">
                                    <p class="mb-0 d-inline font-weight-bold">Un-registered Visitors</p>
                                    <p class="mb-0 d-inline pull-right">{{ $unregistered }}</p>
                                </div>
                            </div> --}}
                            <div class="card mb-2" style="box-shadow: 0 2px 18px 1px rgb(49 53 72 / 10%) !important;">
                                <div class="card-content p-1">
                                    <p class="mb-0 d-inline font-weight-bold">Students</p>
                                    <p class="mb-0 d-inline pull-right">{{ $students }}</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div id="recent-transactions" class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Latest Scan Log</h4>
                                <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                <div class="heading-elements">
                                    <ul class="list-inline mb-0">
                                    </ul>
                                </div>
                            </div>
                            <div class="card-content">
                                <div class="table-responsive">
                                    <table id="recent-orders" class="table table-hover table-xl mb-0">
                                        <thead>
                                            <tr>
                                                <th class="border-top-0" width="2%">No</th>
                                                <th class="border-top-0" width="20%">Name</th>
                                                <th class="border-top-0">Temperature</th>
                                                <th class="border-top-0">Group</th>
                                                <th class="border-top-0">Location</th>
                                                <th class="border-top-0">Door</th>
                                                <th class="border-top-0">Date</th>
                                                <th class="border-top-0">Time</th>
                                                <th class="border-top-0">Image Capture</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($capture as $k => $captures)
                                                @if($captures->device)
                                                <tr>
                                                    <td class="text-truncate">{{ $k = $k + 1 }}</td> 
                                                    <td class="text-truncate">@if($captures->name) {{$captures->name}} @else Unregistered Personnel @endif</td>
                                                    <td class="text-truncate" style="color:@if (number_format((float)$captures->temperature, 1, '.', '') >= (int)env('MAX_TEMPERATURE')) red @else green @endif">{{number_format((float)$captures->temperature, 1, '.', '')}}</td>
                                                    <td class="text-truncate">{{$captures->group}}</td>
                                                    <td class="text-truncate">@if ($captures->device) {{$captures->device->location}} @endif</td>
                                                    <td class="text-truncate">@if ($captures->device) {{$captures->device->door}} @endif</td>
                                                    <td>{{date("d/m/Y",$captures->time)}}</td>
                                                    <td>{{date("H:i:s A",$captures->time)}}</td>
                                                    <td class="text-truncate"><img src="{{$captures->image}}" height="120px">
                                                    </td>
                                                </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div style="padding:10px">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
@push('js')

<script>
    $(window).on("load", (function() {
    new PerfectScrollbar("#recent-orders", {
        wheelPropagation: !0
    });
    Morris.Bar.prototype.fillForSeries = function(e) {
        return "0-#fff-#f00:20-#000"
    }, Morris.Bar({
        element: "monthly-sales",
        data: [
            @foreach($deviceArray as $device)
            {
                month: "{{$device['deviceName']}}",
                sales: parseInt("{{$device['count']}}")
            },
            @endforeach
        ],
        xkey: "month",
        ykeys: ["sales"],
        labels: ["Registered Users"],
        barGap: 4,
        barSizeRatio: .3,
        gridTextColor: "#bfbfbf",
        gridLineColor: "#E4E7ED",
        numLines: 5,
        gridtextSize: 14,
        resize: !0,
        barColors: ["#1EC481"],
        hideHover: "auto"
    })
})), $(window).on("load", (function() {
    Chart.defaults.derivedLine = Chart.defaults.line;
    var e = Chart.controllers.line.prototype.draw,
        o = Chart.controllers.line.extend({
            draw: function() {
                e.apply(this, arguments);
                var o = this.chart.chart.ctx,
                    r = o.stroke;
                o.stroke = function() {
                    o.save(), o.shadowColor = "#1E9FF2", o.shadowBlur = 30, o.shadowOffsetX = 0, o.shadowOffsetY = 20, r.apply(this, arguments), o.restore()
                }
            }
        });
    Chart.controllers.derivedLine = o;
    var gap = {{max($highestArray)}} / 10;
    if ({{max($highestArray)}} == 0)
        gap = 10;
        
    var r = document.querySelector("#thisYearRevenue").getContext("2d"),
        a = (new Chart(r, {
            type: "derivedLine",
            data: {
                labels: [
                    @foreach($monthArray as $month)
                    "",
                    @endforeach
                ],
                datasets: [{
                    data: [
                        @foreach($monthArray as $month)
                            parseInt("{{$month['captureVisitor']}}"),
                        @endforeach
                    ],
                    borderWidth: 4,
                    borderColor: "#1E9FF2",
                    pointBackgroundColor: "#FFF",
                    pointBorderColor: "#1E9FF2",
                    pointHoverBackgroundColor: "#FFF",
                    pointHoverBorderColor: "#1E9FF2",
                    pointRadius: 0,
                    pointHoverRadius: 6,
                    fill: !1
                }]
            },
            options: {
                responsive: !0,
                tooltips: {
                    displayColors: !1,
                    callbacks: {
                        label: function(e, o) {},
                        title: function() {}
                    }
                },
                legend: {
                    display: !1
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: !1
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            padding: gap,
                            stepSize: gap,
                            max: {{max($highestArray)}},
                            min: 0
                        },
                        gridLines: {
                            display: !0,
                            drawBorder: !1,
                            lineWidth: 1,
                            zeroLineColor: "#e5e5e5"
                        }
                    }]
                }
            }
        }), document.querySelector("#lastYearRevenue").getContext("2d"));
    new Chart(a, {
        type: "line",
        data: {
            labels: [
                @foreach($monthArray as $month)
                "{{$month['monthName']}}",
                @endforeach
            ],
            datasets: [{
                data: [
                    @foreach($monthArray as $month)
                        parseInt("{{$month['captureStaff']}}"),
                    @endforeach
                ],
                borderWidth: 4,
                // borderDash: [8, 4],
                borderColor: "#c3c3c3",
                pointBackgroundColor: "#FFF",
                pointBorderColor: "#c3c3c3",
                pointHoverBackgroundColor: "#FFF",
                pointHoverBorderColor: "#c3c3c3",
                pointRadius: 0,
                pointHoverRadius: 6,
                fill: !1
            }]
        },
        options: {
            responsive: !0,
            tooltips: {
                displayColors: !1,
                callbacks: {
                    label: function(e, o) {},
                    title: function() {}
                }
            },
            legend: {
                display: !1
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: !1
                    }
                }],
                yAxes: [{
                    ticks: {
                        padding: gap,
                        stepSize: gap,
                        max: {{max($highestArray)}},
                        min: 0
                    },
                    gridLines: {
                        display: !0,
                        drawBorder: !1,
                        zeroLineColor: "#e5e5e5"
                    }
                }]
            }
        }
    });
    // Morris.Donut({
    //     element: "sessions-browser-donut-chart",
    //     data: [{
    //         label: "India",
    //         value: 3500
    //     }, {
    //         label: "USA",
    //         value: 2500
    //     }, {
    //         label: "Germany",
    //         value: 2e3
    //     }, {
    //         label: "New York",
    //         value: 1e3
    //     }, {
    //         label: "Aingapore",
    //         value: 500
    //     }],
    //     resize: !0,
    //     colors: ["#2DCEE3", "#16D39A", "#40C7CA", "#FFA87D", "#FF7588"]
    // })
}));
</script>

<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<!-- <script type="text/javascript">

$('#modal-changepassword-ftlogin').modal({
    backdrop: 'static',
    keyboard: false
}).show();

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
 

    var options = {
        width: 500,
        height: 600,
        legend: { position: 'none' },
        chart: {
        title: 'Incident Summary',
        subtitle: 'Total Incident by CCTV' },
        colors: ['#1ec481'],
        axes: {
            x: {
                0: { side: 'bottom', label: 'CCTV Name'} // Top x-axis.
            }
        },
        bar: { groupWidth: "90%" }
    };

    // var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    // chart.draw(data, google.charts.Bar.convertOptions(options));
};
</script> -->

<!-- <script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Incidents');

data.addRows([

]);

var options = {
chart: {
title: 'Summary for Year 2020',
subtitle: 'Incidents by Month'
},
width: 1100,
height: 600,
axes: {
x: {
0: {side: 'bottom'}
}
}
};

var chart = new google.charts.Line(document.getElementById('line_top_x'));

chart.draw(data, google.charts.Line.convertOptions(options));
}
</script> -->
@endpush