@extends('admin.layouts.admin')

@section('content')
    <!-- page content -->
    <!-- top tiles -->
    <div class="col-12">
        <h4 class="greetings"> <span id="greetings"></span>, {{auth()->user()->name}}</h4>       
    </div>
    <div class="row tile_count">
        <div class="col-sm-3">
            <div class="hero-widget well well-sm">
                <div class="icon">
                    <i class="fa fa-users"></i>
                </div>
                <div class="text">
                    <var class="theme">{{ $counts['students'] }}</var>
                    <label class="text-muted">Students</label>
                </div>
                <div class="options">
                    <a href="/admin/students" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View students</a>
                </div>
            </div>
    	</div>

        <div class="col-sm-3">
            <div class="hero-widget well well-sm">
                <div class="icon">
                    <i class="fa fa-address-card"></i>
                </div>
                <div class="text">
                    <var class="theme">{{ $counts['guardians'] }}</var>
                    <label class="text-muted">Parent/Guardian</label>
                </div>
                <div class="options">
                    <a href="/admin/guardians" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View Guardians</a>
                </div>
            </div>
    	</div>

        <div class="col-sm-3">
            <div class="hero-widget well well-sm">
                <div class="icon">
                    <i class="fa fa-envelope "></i>
                </div>
                <div class="text">
                    <var class="theme">{{ $counts['drivers'] }}</var>
                    <label class="text-muted">Drivers</label>
                </div>
                <div class="options">
                    <a href="/admin/drivers" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View Drivers</a>
                </div>
            </div>
    	</div>


        <div class="col-sm-3">
            <div class="hero-widget well well-sm">
                <div class="icon">
                    <i class="fa fa-rss"></i>
                </div>
                <div class="text">
                    <var class="theme">{{ $counts['drivers'] }}</var>
                    <label class="text-muted">Vehicles</label>
                </div>
                <div class="options">
                    <a href="admin/buses" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View Vehicles</a>
                </div>
            </div>
    	</div>

        @if(auth()->user()->hasRole('administrator'))
        <div class="col-sm-3">
			<div class="bg-white box-shadow border-radius-10 widget-style3 pd-20">
				<div class="d-flex flex-wrap align-items-center">
					<div class="widget-data">
						<div class="weight-500 font-20">Schools</div>
						<div class="weight-500 font-30 text-dark">{{$counts['schools']}}</div>
					</div>
					<div class="widget-icon">
						<div class="icon"><i class="fa fa-server" aria-hidden="true"></i></div>
					</div>
				</div>
			</div>
		</div>

        <div class="col-sm-3">
			<div class="bg-white box-shadow border-radius-10 widget-style3 pd-20">
				<div class="d-flex flex-wrap align-items-center">
					<div class="widget-data">
						<div class="weight-500 font-20">Activity</div>
						<div class="weight-500 font-30 text-dark">{{$counts['logs']}}</div>
					</div>
					<div class="widget-icon">
						<div class="icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
					</div>
				</div>
			</div>
		</div>
        @endif
    </div>
    <!-- /top tiles -->


    <div class="row">
        <div class="col-md-7 col-sm-12">
            <h4>Activity</h4>
            <div class="table-responsive">
                <table class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>Location</th>
                        <th>Vehicle Status</th>
                        <th>Location Text</th>
                        <th>Student</th>
                        <th>Driver</th>
                        <th>Time</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($logs as $log)
                        <tr>
                            <td>{{ $log->current_location }}</td>
                            <td>{{ $log->bus_status }}</td>
                            <td>{{ $log->location_text }}</td>
                            <td><a href="{{ route('admin.students.edit', $log->student_id)  }}">{{ $log->student->name }}</a></td>
                            <td><a href="{{ route('admin.drivers.edit', $log->driver_id)  }}">{{ $log->driver->name }}</a></td>
                            <td>{{ $log->created_at }}</td>
                        </tr>
                    @empty
                        @include('admin.sections.no_result')
                    @endforelse
                    </tbody>
                    <tfoot>
                        <tr><td colspan="6"> <a href="/admin/logs" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View Logs</a></td></tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="col-md-5 col-sm-12 col-xs-12">
            <div id="log_activity" class="dashboard_graph">

                <div class="row x_title">
                    <div class="col-md-6">
                        <h3>Students picked/dropped by day</h3>
                    </div>
                    {{-- <div class="col-md-6">
                        <div class="date_piker pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                            <span class="date_piker_label">
                                {{ \Carbon\Carbon::now()->addDays(-6)->format('F j, Y') }} - {{ \Carbon\Carbon::now()->format('F j, Y') }}
                            </span>
                            <b class="caret"></b>
                        </div>
                    </div> --}}
                </div>

                <div class="col-xs-12">
                    <div class="pick-drop-chart demo-placeholder" style="width: 100%; height:460px;"></div>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>
        
    </div>
    <br />

    {{-- <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div id="registration_usage" class="x_panel tile fixed_height_320 overflow_hidden">
                <div class="x_title">
                    <h2>Appointment Services</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="" style="width:100%">
                        <tr>
                            <th></th>
                            <th>
                                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                                    <p class="">{{  __('views.admin.dashboard.sub_title_3') }}</p>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                    <p class="">{{  __('views.admin.dashboard.sub_title_4') }}</p>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <canvas class="canvasChart" height="140" width="140" style="margin: 15px 10px 10px 0">
                                </canvas>
                            </td>
                            <td>
                                <table class="tile_info">
                                    <tr>
                                        <td>
                                            <p><i class="fa fa-square aero"></i>
                                                <span class="tile_label">
                                                     {{ __('views.admin.dashboard.source_0') }}
                                                </span>
                                            </p>
                                        </td>
                                        <td id="registration_usage_from"></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p><i class="fa fa-square red"></i>
                                                <span class="tile_label">
                                                    {{ __('views.admin.dashboard.source_1') }}
                                                </span>
                                            </p>
                                        </td>
                                        <td id="registration_usage_google"></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p><i class="fa fa-square blue"></i>
                                                <span class="tile_label">
                                                    {{ __('views.admin.dashboard.source_2') }}
                                                </span>
                                            </p>
                                        </td>
                                        <td id="registration_usage_facebook"></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p><i class="fa fa-square grren"></i>
                                                <span class="tile_label">
                                                     {{ __('views.admin.dashboard.source_3') }}
                                                </span>
                                            </p>
                                        </td>
                                        <td id="registration_usage_twitter"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div> --}}
@endsection

@section('scripts')
    @parent
    {{ Html::script(mix('assets/admin/js/dashboard.js')) }}
    <script type="text/javascript">
        $(document).ready(function () {
            function drawOrdersChart() {
                if ($(".pick-drop-chart").length) {

                    var CHART_DATA = [];
                    @foreach($chart_data as $data)
                    CHART_DATA.push([new Date("{{ $data->created_date }}").getTime(), {{ $data->total }}]);
                    @endforeach

                    var plot_settings = {
                            grid: {
                                show: true,
                                aboveData: true,
                                color: "#3f3f3f",
                                labelMargin: 10,
                                axisMargin: 0,
                                borderWidth: 0,
                                borderColor: null,
                                minBorderMargin: 5,
                                clickable: true,
                                hoverable: true,
                                autoHighlight: true,
                                mouseActiveRadius: 100
                            },
                            series: {
                                lines: {
                                    show: true,
                                    fill: true,
                                    lineWidth: 2,
                                    steps: false
                                },
                                points: {
                                    show: true,
                                    radius: 4.5,
                                    symbol: "circle",
                                    lineWidth: 3.0
                                }
                            },
                            legend: {
                                position: "ne",
                                margin: [0, -25],
                                noColumns: 0,
                                labelBoxBorderColor: null,
                                labelFormatter: function (label, series) {
                                    return label + '&nbsp;&nbsp;';
                                },
                                width: 40,
                                height: 1
                            },
                            colors: ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'],
                            shadowSize: 0,
                            tooltip: true,
                            tooltipOpts: {
                                content: "%s: %y.0",
                                xDateFormat: "%d/%m",
                                shifts: {
                                    x: -30,
                                    y: -50
                                },
                                defaultTheme: false
                            },
                            yaxis: {
                                min: 0
                            },
                            xaxis: {
                                mode: "time",
                                minTickSize: [1, "day"],
                                timeformat: "%d/%m/%y",
                                min: CHART_DATA[0][0],
                                max: CHART_DATA[CHART_DATA.length - 1][0]
                            }
                        };

                    $.plot($(".pick-drop-chart"),
                        [{
                            label: "Pick/Drop Students",
                            data: CHART_DATA,
                            lines: {
                                fillColor: "rgba(150, 202, 89, 0.12)"
                            },
                            points: {
                                fillColor: "#fff"
                            }
                        }], plot_settings);
                }
            }
            drawOrdersChart();
        })
    </script>
    <script>
        var myDate = new Date();
        var hrs = myDate.getHours();

        var greet;

        if (hrs < 12)
        greet = 'Good Morning';
        else if (hrs >= 12 && hrs <= 17)
        greet = 'Good Afternoon';
        else if (hrs >= 17 && hrs <= 24)
        greet = 'Good Evening';

        document.getElementById('greetings').innerHTML ='<b>' + greet + '</b>';
    </script>
@endsection

@section('styles')
    @parent
    {{ Html::style(mix('assets/admin/css/dashboard.css')) }}

    <style>
        .hero-widget { text-align: center; padding-top: 20px; padding-bottom: 20px; }
        .hero-widget .icon { display: block; font-size: 96px; line-height: 96px; margin-bottom: 10px; text-align: center; }
        .hero-widget var { display: block; height: 64px; font-size: 64px; line-height: 64px; font-style: normal; }
        .hero-widget label { font-size: 17px; }
        .hero-widget .options { margin-top: 10px; }
        .well{
            background-color: white !important;
        }
        .greetings{
            background: white;
            border-bottom: 1px solid green;
            border-left: 5px solid green;
            border-bottom-left-radius: 5px;
            padding: 20px;
            color: green;
        }
        .unflex {
            padding: .25rem .75rem;
            margin: 0;
        }
    </style>

<style>
    html {
	-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
	width: 100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input[type="submit"] {
	-webkit-appearance: none;
}
*, *:after, *:before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a:hover, a:focus {
	outline: none;
	text-decoration: none;
}
img {
	border: 0;
}
input, textarea, select {
	outline: none;
	resize: none;
	font-family: 'Muli', sans-serif;
}
a, input, button {
	outline: none !important;
}
 button::-moz-focus-inner {
 border: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: 700;
	color: #202342;
	font-family: 'Muli', sans-serif;
}
img {
	border: 0;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
p {
	margin: 0 0 15px 0;
	padding: 0;
}

.container-fluid{
	max-width: 1900px;
}

/* Common Class */
.pd-5{padding: 5px;}
.pd-10{padding: 10px;}
.pd-20{padding: 20px;}
.pd-30{padding: 30px;}
.pb-10{padding-bottom: 10px;}
.pb-20{padding-bottom: 20px;}
.pb-30{padding-bottom: 30px;}
.pt-10{padding-top: 10px;}
.pt-20{padding-top: 20px;}
.pt-30{padding-top: 30px;}
.pr-10{padding-right: 10px;}
.pr-20{padding-right: 20px;}
.pr-30{padding-right: 30px;}
.pl-10{padding-left: 10px;}
.pl-20{padding-left: 20px;}
.pl-30{padding-left: 30px;}
.px-30{padding-left: 30px; padding-right: 30px;}
.px-20{padding-left: 20px; padding-right: 20px;}
.py-30{padding-top: 30px; padding-bottom: 30px;}
.py-20{padding-top: 20px; padding-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-50{margin-bottom: 50px;}

.font-30{font-size: 30px; line-height: 1.46em;}
.font-24{font-size: 24px; line-height: 1.5em;}
.font-20{font-size: 20px; line-height: 1.5em;}
.font-18{font-size: 18px; line-height: 1.6em;}
.font-16{font-size: 16px; line-height: 1.75em;}
.font-14{font-size: 14px; line-height: 1.85em;}
.font-12{font-size: 12px; line-height: 2em;}

.weight-300{font-weight: 300;}
.weight-400{font-weight: 400;}
.weight-500{font-weight: 500;}
.weight-600{font-weight: 600;}
.weight-700{font-weight: 700;}
.weight-800{font-weight: 800;}

.text-blue{color: #1b00ff;}
.text-dark{color: #000000;}
.text-white{color: #ffffff;}
.height-100-p{height: 100%;}
.bg-white{background: #ffffff;}
.border-radius-10{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.border-radius-100{
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}
.box-shadow{
	-webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
	-moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
	box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
}



.widget-style3 .widget-data{
	width: calc(100% - 64px);
    display: inline-block;
}
.widget-style3 .widget-icon{
	width: 60px;
	font-size: 45px;
	line-height: 1;
    display: inline-block;
}

.apexcharts-legend-marker{
	margin-right: 6px !important;
}

.theme,.icon,.greetings{
    color: #A0191C
}
</style>
    
@endsection