@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<style>
    #map {
        min-height: 300px;
    }    
</style>
<!-- ChartJS 1.0.1 -->
<script src="{{ asset('/adminLTE/plugins/chartjs/Chart.min.js') }}"></script>
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('/adminLTE/plugins/datatables/dataTables.bootstrap.css') }}">

<div class="flex-center position-ref full-height">
    <div class="content">
        <div class="title m-b-md">
            <h1>Dashboard</h1>
            @if(isset($roles) && ($roles === true))
            <!-- DONUT CHART -->
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-3 col-xs-6">
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">Transfer Media</h3>
                                <a href="{{ route('admins.transfer') }}" class="btn btn-sm btn-danger pull-right">view all</a>
                            </div>
                            <div class="box-body">
                                <canvas id="pieChartTransferMedia" style="height:250px"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-6">
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">Video Encoding</h3>
                                <a href="{{ route('videos.index') }}" class="btn btn-sm btn-danger pull-right">view all</a>
                            </div>
                            <div class="box-body">
                                <canvas id="pieChartRawVideo" style="height:250px"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-6">
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">Processed Videos</h3>
                                <a href="{{ route('videos.vod') }}" class="btn btn-sm btn-danger pull-right">view all</a>
                            </div>
                            <div class="box-body">
                                <canvas id="pieChartVod" style="height:250px"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-6">
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">Album Status</h3>
                                <a href="{{ route('songs.index') }}" class="btn btn-sm btn-danger pull-right">view all</a>
                            </div>
                            <div class="box-body">
                                <canvas id="pieChartAlbum" style="height:250px"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-6 col-xs-12 logs-details">
                    <div class="box box-danger">
                        <div class="box-header with-border">
                            <h3 class="box-title">Failed User Logs </h3> <small> (Last 100 records) </small>
                        </div>
                        <div class="box-body table-responsive">
                            <table class="table table-bordered col-md-12 failLog">
                                <thead>
                                    <tr>
                                        <th class="col-md-2">Sr No</th>
                                        <th class="col-md-3">Email</th>
                                        <th class="col-md-2">Mac ID</th>
                                        <th class="col-md-2">IP</th>
                                        <th class="col-md-3">Created</th>
                                    </tr>
                                </thead>
                                @if(isset($failLog) && !empty($failLog))
                                <tbody>
                                    @foreach($failLog as $key=> $logData)
                                    
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>{{ $logData->email }}</td>
                                        <td>{{ $logData->mac_id }}</td>
                                        <td>{{ $logData->ip }}</td>
                                        <td>{{ $logData->created_at }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-xs-12 logs-details">
                    <div class="box box-danger">
                        <div class="box-header with-border">
                            <h3 class="box-title">Success User Logs</h3>  <small> (Last 100 records) </small>
                        </div>
                        <div class="box-body table-responsive">
                            <table class="table table-bordered col-md-12 successLog">
                                <thead>
                                    <tr>
                                        <th class="col-md-2">Sr No</th>
                                        <th class="col-md-3">Email</th>
                                        <th class="col-md-2">Mac ID</th>
                                        <th class="col-md-2">IP</th>
                                        <th class="col-md-3">Created</th>
                                    </tr>
                                </thead>
                                @if(isset($successLog) && !empty($successLog))
                                <tbody>
                                    @foreach($successLog as $key=> $logData)
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>{{ $logData->email }}</td>
                                        <td>{{ $logData->mac_id }}</td>
                                        <td>{{ $logData->ip }}</td>
                                        <td>{{ $logData->created_at }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-xs-12 logs-details">
                    <div class="box box-danger">
                        <div class="box-header with-border">
                            <h3 class="box-title">Geo Locations </h3> <small> (Last 100 records) </small>
                            <a href="{{ route('admins.geo_cordinate') }}" class="btn btn-sm btn-danger pull-right">view all</a>
                        </div>
                        <div class="box-body table-responsive">
                            <table class="table table-bordered col-md-12 GeoCordinates">
                                <thead>
                                    <tr>
                                        <th class="col-md-2">User ID</th>
                                        <th class="col-md-2">Email</th>
                                        <th class="col-md-2">IP</th>
                                        <th class="col-md-3">Last Updated</th>
                                        <th class="col-md-3">Action</th>
                                    </tr>
                                </thead>
                                @if(isset($goeCordinates) && !empty($goeCordinates))
                                <tbody>
                                    @foreach($goeCordinates['data'] as $data)
                                    <tr>
                                        <td>{{ $data->user_id }}</td>
                                        <td class="data-email">{{ $data->email }}</td>
                                        <td>{{ $data->ip }}<br/>{{ $goeCordinates['macID'][$data->user_id]->mac_id }}</td>
                                        <td>{{ $data->updated_at }}</td>
                                        <td>
                                            <a class="btn btn-success btn-sm space_buttons map" id="mapDisplay" data-lat="{{ $data->latitude }}" data-lng="{{ $data->longitude }}">Map</a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-xs-12 logs-details">
                    <div class="box box-danger">
                        <div class="box-header with-border">
                            <h3 class="box-title">User Activities </h3> <small> (Last 100 records) </small>
                        </div>
                        <div class="box-body table-responsive">
                            <table class="table table-bordered col-md-12 userActivities">
                                <thead>
                                    <tr>
                                        <th class="col-md-2">Vid</th>
                                        <th class="col-md-2">Email</th>
                                        <th class="col-md-2">Delta</th>
                                        <th class="col-md-2">IP</th>
                                        <th class="col-md-2">Updated</th>
                                    </tr>
                                </thead>
                                @if(isset($userActivities) && !empty($userActivities))
                                <tbody>
                                    @foreach($userActivities as $data)
                                    <tr>
                                        <td>{{ $data->video_id }}</td>
                                        <td>{{ $data->email }}</td>
                                        <td>{{ round($data->delta / 60) }} Min <br/> {{ $data->type }}</td>
                                        <td>{{ $data->ip }}</td>
                                        <td class="">{{ $data->updated_at }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @endif


            <!-- /.box-body -->
        </div>
    </div>
</div>

@include('elements.map')

<!-- DataTables -->
<script src="{{ asset('/adminLTE/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/adminLTE/plugins/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
<script language=javascript src='{{ asset('/js/map.js') }}'></script>

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" crossorigin=""></script>

<script>
    
var pieChartCanvas = $("#pieChartRawVideo").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieDataRawVideo = null;

var pieChartMedia = $("#pieChartTransferMedia").get(0).getContext("2d");
var pieChartTransferMedia = new Chart(pieChartMedia);
var PieDataTransferMedia = null;

var pieChartVideo = $("#pieChartVod").get(0).getContext("2d");
var pieChartVod = new Chart(pieChartVideo);
var PieDataVod = null;

var pieChartAlbum = $("#pieChartAlbum").get(0).getContext("2d");
var pieChartSong = new Chart(pieChartAlbum);
var PieDataAlbum = null;

var pieOptions = {
    //Boolean - Whether we should show a stroke on each segment
    segmentShowStroke: true,
    //String - The colour of each segment stroke
    segmentStrokeColor: "#fff",
    //Number - The width of each segment stroke
    segmentStrokeWidth: 2,
    //Number - The percentage of the chart that we cut out of the middle
    percentageInnerCutout: 50, // This is 0 for Pie charts
    //Number - Amount of animation steps
    animationSteps: 100,
    //String - Animation easing effect
    animationEasing: "easeOutBounce",
    //Boolean - Whether we animate the rotation of the Doughnut
    animateRotate: true,
    //Boolean - Whether we animate scaling the Doughnut from the centre
    animateScale: false,
    //Boolean - whether to make the chart responsive to window resizing
    responsive: true,
    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
    maintainAspectRatio: true,
    //String - A legend template
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieDataRawVideo, pieOptions);
pieChartTransferMedia.Doughnut(PieDataTransferMedia, pieOptions);
pieChartVod.Doughnut(PieDataVod, pieOptions);
pieChartSong.Doughnut(PieDataAlbum, pieOptions);

$(function () {
    $('.failLog').DataTable({
        "paging": true,
        "lengthChange": false,
        "autoWidth": false,
        "pageLength": 10,
        "order": [[4, "desc"]]
    });
    $('.successLog').DataTable({
        "paging": true,
        "lengthChange": false,
        "autoWidth": false,
        "pageLength": 10,
        "order": [[4, "desc"]]
    });
    $('.GeoCordinates').DataTable({
        "paging": true,
        "lengthChange": false,
        "autoWidth": false,
        "pageLength": 10,
        "order": [[3, "desc"]]
    });
    $('.userActivities').DataTable({
        "paging": true,
        "lengthChange": false,
        "autoWidth": false,
        "pageLength": 10,
        "order": [[4, "desc"]]
    });
});

</script>
@endsection