@include('includes/header')
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>


<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->

@include('includes/sidebar')

<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section id="minimal-statistics">
                <div class="row">
                    <div class="col-12 mb-1">
                        <h1 class="text-uppercase">Live Location</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-content collpase show mt-1">
                                <div class="card-body">
                                    <form class="form">
                                        <div class="form-body">
                                            <div class="row justify-content-center align-items-center">
                                                <div class="btn-group" role="group" aria-label="Basic example">
                                                    <button type="button" class="btn btn-outline-primary">All <span class="badge badge-primary" name="all" id="all">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">On Duty <span class="badge badge-success" name="all" id="onduty">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">Inactive <span class="badge badge-warning" name="all" id="inactive">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">off Duty <span class="badge badge-danger" name="all" id="offduty">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">Not Working <span class="badge badge-info" name="all" id="notworking">0</span></button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </section>

            <div id="map" style="height: 400px; width: 100%;"></div>


            <section id="global-settings" class="card shadow">
                {{-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3507.264176153251!2d77.50974077417973!3d28.471589791373436!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cefa469c515f7%3A0xff89041ff83737dd!2sShree%20Nandik%20Technologies!5e0!3m2!1sen!2sin!4v1704357468620!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
                <div id="map"></div>
            </section>
        </div>
    </div>
</div>

{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"></script> --}}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJZlwPFTliJP-wpYSI1pYZeG_wG_WMn8&callback=initMap&v=weekly" defer></script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

<script>

    var base_url = 'https://getmeacard.com/hrms/public/';

    function initMap() {

    $.ajax({
        url: base_url+'api/live_location',
        type: 'GET',
        success: function(response){

            if(response.status){
                // console.log('success');
                var active = 0;
                var inActive = 0;
                var offline = 0;
                var notworking = 0;


                
                // var marker = new google.maps.Marker({
                // position: {lat:  28.4744, lng: 77.5031},
                // map: map,
                // title: user.name
                // });  

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 28.532881, lng: 77.466551},
                    zoom: 8
                    });

                for(let i=0; i < response.data.length; i++){

                
                    var user = response.data[i];
                    
                    // Create markers
                    // console.log(user.latitude, 'latitude');

                    if(user.latitude != 0 && user.longitude != 0 ){
                        console.log(user );

                        console.log( i , "here is the tyep lat ", typeof( Number(user.latitude) )  ,Number(user.latitude)   )
                        console.log( i , "here is the tyep lat ", typeof( Number(user.longitude) )  ,Number(user.longitude)   ) 

                        // console.log( i , "here is the tyep log ", typeof(user.longitude),  user.longitude ) 

                        console.log(user.latitude, 'latitude');
                        console.log(user.longitude, 'longitude');
                        // if(i==0){
                            new google.maps.Marker({
                            position: {lat:  Number(user.latitude) , lng:  Number(user.longitude)},
                        // position: {lat: 28.6184 , lng: 77.3188},
                        map: map,
                        title: user.name
                        });
                        // }
                    
                    }
                    
                    // new google.maps.Marker({
                    //     position: {lat: 28.1184, lng: 77.1527},
                    //     map: map,
                    //     title: user.name
                    // });

                    // console.log('here');

                    

                    if(user.status === 'active'){
                        active++;
                    }else if( user.status === 'inactive' ){
                        inActive++;
                    }else{
                        offline++;
                    }

                    // console.log(inActive, 'lov');

                    $('#all').text(active + inActive + offline);
                    $('#onduty').text(active);
                    $('#inactive').text(inActive);
                    $('#offduty').text(offline);
                    $('#notworking').text(notworking);

                }

            }else{
                console.log('erro');
            }

        }
    });
    }

    initMap();
</script>

<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->

@include('includes/footer')