@extends('admin.layouts.admin')

@section('content')
    <div class="container-fluid">
        <br>
        <!-- row -->
        <div class="row">
            <div class="col-sm-12">
                <div class="widget list-widget" id="map" style="width: 100%; max-width: 100%;">
                    <div id="googlemap" style="height: 500px;" class="col-xs-12"></div>
                </div>

            </div>
        </div>
        <!-- /row -->
        <!-- row -->
        <div class="row">
            <div class="col-sm-12">
                <div class="widget list-widget">
                    <div class="card-header">
                        <div class="pull-right">
                            <small class="text-muted">Last update <span class="last-update"></span></small>
                        </div>
                        <h4 class="card-title m-b-0">Pickup/Drop data</h4>
                    </div>
                    <div class="row bus-data-table">
                        <div class="col-xs-12">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                        <tr class="row-name">
                                            <th>Task</th>
                                            <th>Vehicle No.</th>
                                            <th>Started</th>
                                            <th>Ended</th>
                                            <th>Total</th>
                                            <th>In Vehicle</th>
                                            <th>Absent</th>
                                            <th>Route</th>
                                            <th>Driver</th>
                                            <th>Vehicle Trip Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($buses as $bus)
                                            @if($bus->route->driver)
                                                <tr id="{{$bus->id}}" class="{{$bus->id}} row-content @if($bus->current_location == 'SCHOOL' || $bus->current_location == 'IDLE') red @endif @if($bus->current_location == 'PICKUP') yellow @endif @if($bus->current_location == 'DROP') blue @endif">
                                                    <td><i class="fa fa-bus"></i></td>
                                                    <td>{{$bus->bus_number}}</td>
                                                    <td class="start_time">-</td>
                                                    <td class="end_time">-</td>
                                                    <td class="total">{{$bus->route->students->count()}}</td>
                                                    <td class="picked" data-bus-id="{{$bus->id}}" style="cursor:pointer">-</td>
                                                    <td class="absent" data-bus-id="{{$bus->id}}" style="cursor:pointer">{{$bus->route->students->where('bus_service_status', 'INACTIVE')->count()}}</td>
                                                    <td>{{ $bus->route->title }}</td>
                                                    <td>{{ $bus->route->driver->name }}</td>
                                                    <td class="status">
                                                        <span class="percent_complete">-</span>
                                                        <div class="widget-line" style="width: 100%;height: 4px;">
                                                            <span style="width:0%;"
                                                                  class="widget-horigental-line"></span>
                                                        </div>
                                                    </td>
                                                </tr>
                                        @endif
                                        @endforeach
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /row -->
    </div>

    <!-- Modal Start-->

    @foreach($buses as $bus)
    @if($bus->route->driver)

        <div class="bus-model">
            <div class="modal fade" id="modal-" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="row bus-data-table">
                            <div class="col-xs-12">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                            <tr class="row-name">
                                                <th>Student Name</th>
                                                <th>Student Class</th>
                                            </tr>
                                            </thead>
                                            <tbody class="row-">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    @endif
    @endforeach
    <!-- Modal End -->
@endsection

@section('scripts')
    @parent
    <script>
        // map
        var map;
        var bounds;

        function initMap() {
            var myLatLng = {lat: -1.3044917, lng: 36.823092};

            map = new google.maps.Map(document.getElementById('googlemap'), {
                zoom: 15,
                center: myLatLng
            });

            bounds  = new google.maps.LatLngBounds();
        }
    </script>

    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6Gj4Kf0CAQsN7Ho5-TTRva0MbFXc2oEk&callback=initMap"
            type="text/javascript"></script>
    <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "{{ config('firebase.api_key') }}",
            authDomain: "{{ config('firebase.auth_domain') }}",
            databaseURL: "{{ config('firebase.database_url') }}",
            projectId: "{{ config('firebase.project_id') }}",
            storageBucket: "{{ config('firebase.storage_bucket') }}",
            messagingSenderId: "{{ config('firebase.sender_id') }}"
        };
        firebase.initializeApp(config);

        var refs = [];
        var markers = [];
        var infowindows = [];

        @foreach($buses as $key=>$bus)
                @if($bus->route->driver)
            refs[""] = firebase.database().ref('buses/' + '{{ $bus->id }}');
        refs[""].on('value', function (snapshot) {
            if(snapshot.val()) {
                try {
                    var newLatLng = new google.maps.LatLng(snapshot.val().lat, snapshot.val().lang);
                    var statusClassName = undefined;

                    if(snapshot.val().status == 'PICKUP') {
                        statusClassName = 'yellow';
                        marker = {
                            url: '{{asset('assets/admin/images/ic_yellow.png')}}'
                        };
                    }

                    else if(snapshot.val().status == 'DROP') {
                        statusClassName = 'blue';
                        marker = {
                            url: '{{asset('assets/admin/images/ic_blue.png')}}'
                        };
                    } else {
                        statusClassName = 'red';
                        marker = {
                            url: '{{asset('assets/admin/images/ic_red.png')}}'
                        };
                    }

                    if(markers[""]) {
                        markers[""].setMap(null);
                    }
                    markers[""] = new google.maps.Marker({
                        map: map,
                        icon: marker
                    });
                    markers[""].setPosition(newLatLng);

                    loc = new google.maps.LatLng(markers[""].position.lat(), markers[""].position.lng());
                    bounds.extend(loc);

                    var driver_pic_url = "{{$bus->image_url ? $bus->image_url : asset('assets/admin/images/driver.png')}}";
                    var speed = snapshot.val().speed_kmph ? snapshot.val().speed_kmph : "0";
                    var busLastUpdated = 'Not Available';

                    if (snapshot.val().trip && snapshot.val().trip.lastUpdated) {
                        busLastUpdated = new Date(snapshot.val().trip.lastUpdated).toLocaleString('en-US', { day:'numeric', month:'short', hour: 'numeric', minute: 'numeric', hour12: true });
                    }

                    var content = '<div class="all-bus yellow {{$bus->id}}" style="top:140px;left: 630px;"><div class="bus-detail animated fadeIn"> <div class="panel"> <div class="panel-heading">{{$bus->bus_number}}<div class="pull-right">' + speed + ' kmph</div></div><div class="panel-body"> <div class="row"> <div class="col-xs-12 mb"> <small>Route</small> <h6>{{$bus->route->title}}</h6> </div><div class="col-xs-4 mb"> <h3 class="total">{{$bus->route->students->count()}}</h3> <small>Total Students</small> </div><div class="col-xs-4 mb"> <h3 class="picked" data-bus-id="{{$bus->id}}" style="cursor:pointer">' + snapshot.val().trip.total +' </h3> <small>Picked up</small> </div><div class="col-xs-4 mb"> <h3 class="absent" data-bus-id="{{$bus->id}}" style="cursor:pointer">{{$bus->route->students->where('bus_service_status', 'INACTIVE')->count()}}</h3> <small>Absent</small> </div> <div class="col-xs-12 mb"><h6>Last Update: ' + busLastUpdated + '</h6></div> <hr/> <div class="col-xs-12"> <div class="row"> <div class="col-xs-3"> <img src="' + driver_pic_url +'" alt="User Avatar" class="img-circle driver" width="100%"> </div><div class="col-xs-7 pl-0 pr-0"> <small>Vehicle Driver</small> <h6>{{ $bus->route->driver->name }}</h6> <small>{{ $bus->route->driver->mobile_number }}</small> </div></div></div></div></div></div></div></div>';
                    infowindows[""] = new google.maps.InfoWindow({
                        content: content
                    });

                    markers[""].addListener('click', function () {
                        infowindows[""].open(map, markers[""]);
                    });

                    map.fitBounds(bounds);
                    map.panToBounds(bounds);

                    console.log("snapshot update");
                    var listener = google.maps.event.addListener(map, "idle", function () {
                        if(map.getZoom() > 12) {
                            console.log("map zoomed");
                            map.setZoom(12);
                        }
                        google.maps.event.removeListener(listener);
                    });

                    $("#").find(".picked").text(snapshot.val().trip.total);

                    // calculate percent
                    var total = parseInt($(".").find(".total").text());
                    var currentInVehicle = snapshot.val().trip.total;
                    var percent = 0;

                    @if($bus->current_location == 'PICKUP')
                        percent = parseInt(((currentInVehicle) / total) * 100);
                    @endif

                    @if($bus->current_location == 'DROP')
                        percent = parseInt(((total-currentInVehicle) / total) * 100);
                    @endif

                    $(".").find(".picked").text(snapshot.val().trip.total);
                    $("#").find(".percent_complete").text(percent + '%');
                    $("#").find(".widget-line span").css('width', percent + '%');

                    if (snapshot.val().trip && snapshot.val().trip.start) {
                        var startDate = new Date(snapshot.val().trip.start);
                        $(".").find(".start_time").text(startDate.toLocaleString('en-US', { day:'numeric', month:'short', hour: 'numeric', minute: 'numeric', hour12: true }));
                    }
                    if (snapshot.val().trip && snapshot.val().trip.end) {
                        var endDate = new Date(snapshot.val().trip.end);
                        $(".").find(".end_time").text(endDate.toLocaleString('en-US', { day:'numeric', month:'short', hour: 'numeric', minute: 'numeric', hour12: true }));
                    }

                    // update last updated time
                    $(".last-update").text(new Date().toLocaleString('en-US', { day:'2-digit', month:'short', hour: '2-digit', minute: '2-digit', hour12: true, second: '2-digit' }));

                    // apply class as per status
                    $(".").removeClass('red blue yellow').addClass(statusClassName);
                } catch(ex) {
                    console.log(ex);
                }
            }
        });
        @endif
        @endforeach

        $(document).on("click", ".picked", function() {
            var bus_id = $(this).attr("data-bus-id");
            $.ajax({
                type:'GET',
                url: window.location.href + '/students/' + bus_id,
                data:'_token =