@extends('layouts.master')



<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



@push('cssCode')
    <style>
        .d-none {
            display: none;
        }

        .lds-dual-ring {

            width: 30px;
            height: 30px;
        }

        .lds-dual-ring:after {
            content: " ";
            display: block;
            width: 30px;
            height: 30px;
            margin: 8px;
            margin-top: 0;
            border-radius: 50%;
            border: 3px solid #6d7fcc;
            border-color: #6d7fcc transparent #6d7fcc transparent;
            animation: lds-dual-ring 1.2s linear infinite;
        }

        @keyframes lds-dual-ring {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Always set the map height explicitly to define the size of the div
                                                                                                                                               * element that contains the map. */
        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }


        /* Overview css starts from here */

        .main-body {
            height: max-content;
            padding: 1em;
        }


        .main-box {
            display: flex;
            color: #ffffff;
            justify-content: flex-end;
        }

        .text {
            margin: 0px 6px;
            width: 150px;
            height: 105px;
            text-align: center;
            border-radius: 8px;
        }

        .text.one {
            background: #f64142;
        }

        .text.two {
            background: #425cfb;
        }

        .text.three {
            background: #4c4c4c;
        }

        .text p {
            font-size: 24px;
            margin-bottom: 0;
            margin-top: 5px;
        }

        .text h2 {
            font-size: 65px;
            margin-top: 0;
            margin-bottom: 0px;
        }

        .title-right {
            width: 50%;
            float: right;
            height: max-content;
        }

        .page-title {

            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 60px;
            padding-bottom: 80px;
        }

        .monitor-type-dropdown {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .monitor-type-dropdown .form-group {
            margin-bottom: 0;
        }

        .icon-hover {
            cursor: pointer;
            font-size: 1.5em;
        }

        /* Overview css ends here */
    </style>
@endpush

@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Live Monitor</h3>
                    <div class="monitor-type-dropdown col-md-4 d-flex" style="padding :0">
                        <div class="form-group">

                            <select class="form-control" id="table-type">
                                <option>All</option>
                                <option>Route 66</option>
                            </select>
                        </div>
                        <i class="fa fa-play icon-hover d-none" aria-hidden="true"></i>
                        <i class="fa fa-pause icon-hover d-none" aria-hidden="true"></i>
                    </div>


                    {{-- Button to control refresh --}}
                    <script>
                        //load last selected option
                        (() => {
                            window.localStorage.getItem('stop_reload_map') == 'true' ? $('.fa-pause').toggleClass('d-none') : $('.fa-play')
                                .toggleClass('d-none')
                        })()

                        $('.fa-play').on('click', function() {
                            $(this).toggleClass('d-none');
                            $('.fa-pause').toggleClass('d-none')
                            stopInterval(true)
                        })

                        $('.fa-pause').on('click', function() {
                            $(this).toggleClass('d-none');
                            $('.fa-play').toggleClass('d-none')
                            stopInterval(false)
                        })
                        const stopInterval = (status) => window.localStorage.setItem('stop_reload_map', status)
                    </script>
                    {{-- Ends here --}}

                    <div class="col-md-4">
                        <div class="lds-dual-ring d-none"></div>
                    </div>
                </div>
                {{-- overview html starts here --}}
                <div class="title-right">
                    <div class="over_view_wrapper">
                        <div class="main-body">
                            <div class="main-box">
                                <div class="text one">
                                    <p> West-Bound</p>
                                    <h2>0</h2>
                                </div>

                                <div class="text two">
                                    <p> East-Bound</p>
                                    <h2>0</h2>
                                </div>
                                <div class="text three">
                                    <p> Total</p>
                                    <h2>0</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- overview html ends here --}}
            </div>

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

                <div class="col-md-12 col-sm-12 col-xs-12">

                    <div id="map"></div>

                    <script>
                        function toggleLoader() {
                            $('.lds-dual-ring').toggleClass('d-none')
                        }


                        function initMap() {
                            toggleLoader()
                            $.ajax({
                                url: '{{ route('live_map_ajax') }}',
                                type: 'get',
                                success: function(response) {
                                    toggleLoader()
                                    // Perform operation on the return value
                                    if (response.status == 1) {

                                        var json = response.data;

                                        var map;

                                        var mapOptions = {
                                            center: new google.maps.LatLng(41.850033, -87.6500523),
                                            mapTypeId: 'roadmap',
                                            zoom: 3,

                                        };


                                        // Display a map on the web page
                                        map = new google.maps.Map(document.getElementById("map"), mapOptions);
                                        map.setTilt(100);
                                        map.setCenter({
                                            lat: 41.850033,
                                            lng: -87.6500523
                                        });

                                        var bounds = new google.maps.LatLngBounds();
                                        // Multiple markers location, latitude, and longitude
                                        var markers = [];

                                        for (var i = 0; i < json.length; i++) {
                                            var obj = json[i];
                                            var image = '';

                                            if (obj.travel_direction == "East-Bound") {
                                                image = "https://rt66ug.com/admin/public/images/car-wb.png";
                                            } else {
                                                image = "https://rt66ug.com/admin/public/images/car-eb.png";
                                            }

                                            var fruits = new Array(obj.name, obj.gps_lat, obj.gps_long, image);
                                            markers[i] = fruits;

                                        }

                                        //  console.log(markers);
                                        var infoWindowContent = [];

                                        for (var i = 0; i < json.length; i++) {
                                            var obj = json[i];
                                            var info_content = new Array('<div class="info_content">' +
                                                '<a href="https://rt66ug.com/admin/public/edituser/' + obj.id +
                                                '"><h3>UID#: ' + obj.id + '</h3>' +
                                                '<p>' + obj.name + ' ' + obj.last_name + '</p>' + '</a></div>');
                                            infoWindowContent[i] = info_content;
                                        }

                                        // Add multiple markers to map
                                        var infoWindow = new google.maps.InfoWindow(),
                                            marker, i;

                                        // Place each marker on the map  
                                        for (i = 0; i < markers.length; i++) {
                                            var image = {
                                                url: markers[i][3],
                                                anchor: new google.maps.Point(25, 25),
                                                scaledSize: new google.maps.Size(50, 50)
                                            };
                                            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                                            bounds.extend(position);
                                            marker = new google.maps.Marker({
                                                position: position,
                                                map: map,

                                                icon: image,
                                                title: markers[i][0]
                                            });



                                            // Add info window to marker    
                                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                return function() {
                                                    infoWindow.setContent(infoWindowContent[i][0]);
                                                    infoWindow.open(map, marker);
                                                }
                                            })(marker, i));

                                            // Center the map to fit all markers on the screen
                                            map.fitBounds(bounds);
                                        }
                                    }
                                }
                            });


                        }

                        function addRoutesUsers() {

                            toggleLoader();
                            $.ajax({
                                url: '{{ route('live_map_routes_ajax') }}',
                                type: 'get',
                                success: function(response) {
                                    toggleLoader();
                                    // Perform operation on the return value
                                    if (response.status == 1) {

                                        var json = response.data;

                                        var map;

                                        var mapOptions = {
                                            center: new google.maps.LatLng(41.850033, -87.6500523),
                                            mapTypeId: 'roadmap',
                                            zoom: 3,

                                        };


                                        // Display a map on the web page
                                        map = new google.maps.Map(document.getElementById("map"), mapOptions);
                                        map.setTilt(100);
                                        map.setCenter({
                                            lat: 41.850033,
                                            lng: -87.6500523
                                        });

                                        var bounds = new google.maps.LatLngBounds();
                                        // Multiple markers location, latitude, and longitude
                                        var markers = [];

                                        for (var i = 0; i < json.length; i++) {
                                            var obj = json[i];
                                            var image = '';

                                            if (obj.travel_direction == "East-Bound") {
                                                image = "https://rt66ug.com/admin/public/images/car-wb.png";
                                            } else {
                                                image = "https://rt66ug.com/admin/public/images/car-eb.png";
                                            }

                                            var fruits = new Array(obj.name, obj.gps_lat, obj.gps_long, image);
                                            markers[i] = fruits;

                                        }

                                        //  console.log(markers);
                                        var infoWindowContent = [];

                                        for (var i = 0; i < json.length; i++) {
                                            var obj = json[i];
                                            var info_content = new Array('<div class="info_content">' +
                                                '<a href="https://rt66ug.com/admin/public/edituser/' + obj.id +
                                                '"><h3>UID#: ' + obj.id + '</h3>' +
                                                '<p>' + obj.name + ' ' + obj.last_name + '</p>' + '</a></div>');
                                            infoWindowContent[i] = info_content;
                                        }

                                        // Add multiple markers to map
                                        var infoWindow = new google.maps.InfoWindow(),
                                            marker, i;

                                        // Place each marker on the map  
                                        for (i = 0; i < markers.length; i++) {
                                            var image = {
                                                url: markers[i][3],
                                                anchor: new google.maps.Point(25, 25),
                                                scaledSize: new google.maps.Size(50, 50)
                                            };
                                            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                                            bounds.extend(position);
                                            marker = new google.maps.Marker({
                                                position: position,
                                                map: map,

                                                icon: image,
                                                title: markers[i][0]
                                            });



                                            // Add info window to marker    
                                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                return function() {
                                                    infoWindow.setContent(infoWindowContent[i][0]);
                                                    infoWindow.open(map, marker);
                                                }
                                            })(marker, i));

                                            // Center the map to fit all markers on the screen
                                            map.fitBounds(bounds);
                                        }
                                    }
                                }
                            });
                        }
                        //fetch overview data from url and update content
                        const getOverViewData = () => {
                            $.ajax({
                                url: '/admin/public/overview_display_ajax',
                                type: 'GET',
                                success: function(data) {
                                   
                                    $('.over_view_wrapper').html(`
                            <div class="main-body">
                            <div class="main-box">
                                <div class="text one">
                                    <p> West-Bound</p>
                                    <h2>${data?.west}</h2>
                                </div>

                                <div class="text two">
                                    <p> East-Bound</p>
                                    <h2>${data?.east}</h2>
                                </div>
                                <div class="text three">
                                    <p> Total</p>
                                    <h2>${data?.total}</h2>
                                </div>
                            </div>
                            </div>`);
                                }
                            });
                        }

                        $(document).ready(function() {
                            getOverViewData();
                            localStorage.setItem('selected_option_map', $('#table-type').val())
                            var selectedOption = '';
                            let allOptions;
                            //dropdown selection
                            $('#table-type').on('change', async (e) => {

                                e.preventDefault();
                                localStorage.setItem('selected_option_map', e.target.value)
                                if (e.target.value == 'Route 66') {
                                    addRoutesUsers();
                                } else {
                                    initMap()
                                }
                            })

                            var interval = 1000 * 10 * 6;
                            // var interval = 3000;

                            const getData = function() {
                            
                                if (localStorage.getItem('stop_reload_map') == 'true') {
                                    
                                    loadNewData();
                                } 
                            }

                            const loadNewData = () => {

                                getOverViewData();
                                if (localStorage.getItem('selected_option_map') == 'Route 66') {
                                    addRoutesUsers()
                                } else {
                                    initMap()
                                }
                            }

                            var interVal;

                            //clear interval if exists
                            if (interVal) {
                                clearInterval(interVal)
                            } else {
                                interVal = setInterval(getData, interval);
                            }

                        });
                    </script>
                    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBV4oF56bXbpyGORvNsgB8w2_NROh3QRHc&callback=initMap">
                    </script>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('jsCode')
    <script type="text/javascript">
        function close_modal() {
            location.reload();
        }


        $(document).ready(function() {

            $('#btn').click(function() {
                alert('done');
                var category_name = $('$categoryName').value();
                $.ajax({
                    type: "POST",
                    data: 'category_name=' + 'category_name',
                    url: '{{ url('/') }}/add-category',
                    success: function(data) {
                        console.log(data);
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        .switch {

            position: relative;

            display: inline-block;

            width: 52px;
            height: 27px;


        }



        .switch input {
            display: none;
        }
    </style>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $(document).on('click', '.pagination li a', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $('#searchForm').attr('action', url);
            console.log($('#searchForm').attr('action'));
            $('#searchForm').submit();
        });

        function checkInActive() {
            return confirm("Are you sure you want to Deactivate?");
        }

        function checkActive() {
            return confirm("Are you sure you want to Activate?");
        }

        function checkDelete() {
            return confirm("Are you sure you want to delete?");
        }

        $(document).ready(function() {
            disabledSearchBtn();

            $(document).on('change', '#searchForm select', function() {
                disabledSearchBtn();
            });

            $(document).on('keyup', '#searchForm input', function() {
                disabledSearchBtn();
            });

            function disabledSearchBtn() {
                var searchBtn = false;
                $('.filters').each(function() {
                    if ($(this).val() != '') {
                        searchBtn = true;
                        return true;
                    }
                });

                if (searchBtn) {
                    $('#searchBtn').removeAttr('disabled');
                } else {
                    $('#searchBtn').attr('disabled', true);
                }
            }
        });
    </script>


    <script type="text/javascript">
        function uploadProfileImage1(fileInput) {

            if (fileInput.files && fileInput.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar1').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput.files[0]);

            }

        }





        function uploadProfileImage2(fileInput2) {

            if (fileInput2.files && fileInput2.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar2').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput2.files[0]);

            }

        }





        function uploadProfileImage3(fileInput3) {

            if (fileInput3.files && fileInput3.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar3').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput3.files[0]);

            }

        }





        function uploadProfileImage4(fileInput4) {

            if (fileInput4.files && fileInput4.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar4').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput4.files[0]);

            }

        }





        function uploadProfileImage5(fileInput5) {

            if (fileInput5.files && fileInput5.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar5').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput5.files[0]);

            }

        }



        function uploadProfileImage6(fileInput6) {

            if (fileInput6.files && fileInput6.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar6').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput6.files[0]);

            }

        }





        function uploadProfileImage7(fileInput7) {

            if (fileInput7.files && fileInput7.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar7').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput7.files[0]);

            }

        }





        function uploadProfileImageH1(fileInputH1) {

            if (fileInputH1.files && fileInputH1.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtarH1').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInputH1.files[0]);

            }

        }





        function uploadProfileImageH2(fileInputH2) {

            if (fileInputH2.files && fileInputH2.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtarH2').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInputH2.files[0]);

            }

        }





        function uploadProfileImageH3(fileInputH3) {

            if (fileInputH3.files && fileInputH3.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtarH3').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInputH3.files[0]);

            }

        }
    </script>
@endpush