@extends('layouts.app')

@section('content')
@include('shared.messages')
<div class="p-a white lt box-shadow">
    <div class="row">
        <div class="col-sm-6">
            <h4 class="m-b-0 _300">Welcome to Orbit</h4>
            <small class="text-muted">Administration Panel</small>
        </div>
    </div>
</div>
<div class="padding">
    <div class="row">
        <div class="col-xs-6 col-sm-3">
            <div class="box p-a">
                <div class="pull-left m-r">
                    <span class="w-48 rounded  accent">
                        <i class="material-icons">&#xe8e8;</i>
                    </span>
                </div>
                <div class="clear">
                    <h4 class="m-a-0 text-lg _300">
                        <a href>
                            <span id="total_devices">0</span> 
                            <span class="text-sm">Device Registrations</span>
                        </a>
                    </h4>
                    <small class="text-muted">total registrations</small>
                </div>
            </div>
        </div>
        
        <div class="col-xs-6 col-sm-3">
            <div class="box p-a">
                <div class="pull-left m-r">
                    <span class="w-48 rounded primary">
                        <i class="material-icons">&#xe422;</i>
                    </span>
                </div>
                <div class="clear">
                    <h4 class="m-a-0 text-lg _300">
                        <a href>
                            <span id="active_devices">0</span> 
                            <span class="text-sm">Active Devices</span>
                        </a>
                    </h4>
                    <small class="text-muted">
                        <span id="activeToday">0</span> active today.
                    </small>
                </div>
            </div>
        </div>
        
        <div class="col-xs-6 col-sm-3">
            <div class="box p-a">
                <div class="pull-left m-r">
                    <span class="w-48 rounded warn">
                        <i class="material-icons">&#xe8d3;</i>
                    </span>
                </div>
                <div class="clear">
                    <h4 class="m-a-0 text-lg _300">
                        <a href>
                            <span id="devices_online">0</span> 
                            <span class="text-sm">Online Devices</span>
                        </a>
                    </h4>
                    <small class="text-muted">
                        <span id="devices_online_today">0</span> online today.
                    </small>
                </div>
            </div>
        </div>
        
        <div class="col-xs-6 col-sm-3">
            <div class="box p-a">
                <div class="pull-left m-r">
                    <span class="w-48 rounded warn">
                        <i class="material-icons">&#xe8d3;</i>
                    </span>
                </div>
                <div class="clear">
                    <h4 class="m-a-0 text-lg _300">
                        <a href>
                            <span id="total_users">0</span> 
                            <span class="text-sm">User Registrations</span>
                        </a>
                    </h4>
                    <small class="text-muted"> total registrations.</small>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="box">
                <div class="box-header">
                    <h3>Device Registrations</h3>
                </div>
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">
                            <a class="nav-link"  onclick="regs('/ajax/deviceRegsGraph', 'Devices', 'canvas');">
                                <i class="material-icons md-18">&#xe863;</i>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="box-body" id="registration">
                    <div id="canvas" style="height:200px" >

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-sm-6 col-md-3">
            <div class="box">
                <div class="box-header">
                    <h3>Devices Activity</h3>                    
                </div>
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">                            
                            <a class="nav-link"  onclick="regs('/api/deviceActiveGraph', 'Devices', 'active');">
                                <i class="material-icons md-18">&#xe863;</i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="box-body">
                    <div id="active" style="height:200px" ></div>	
                </div>       
            </div>
        </div>
        
        <div class="col-sm-6 col-md-3">
            <div class="box">
                <div class="box-header">
                    <h3>Online Devices</h3>
                </div>
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">
                            <a class="nav-link">
                                <i class="material-icons md-18">&#xe863;</i>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="box-body">

                    <div id="onlineDevices" style="height:200px" >

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-sm-6 col-md-3">
            <div class="box">
                <div class="box-header">
                    <h3>User Registrations</h3>
                </div>
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">
                            <a class="nav-link"  onclick="regs('/ajax/userRegsGraph', 'Users', 'users');">
                                <i class="material-icons md-18">&#xe863;</i>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="box-body">

                    <div id="users" style="height:200px" >

                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div id="map"></div>
        </div>
    </div>

</div>

<script src="{{ asset('js/dashboard.js') }}"></script>
<script src="{{ asset('js/dygraph-combined.js') }}"></script>
<script src="{{ asset('js/jquery.flot.js') }}"></script>
<script src="{{ asset('js/jquery.flot.pie.js') }}"></script>
<script src="{{ asset('js/markerclusterer_compiled.js') }}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy60tIF4PIJFWEhqF1RprIPDxySj0Ptn8"></script>


@endsection