@include('includes/header')


<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->
{{-- 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> --}}

@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">Time Line</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="col-md-4">
                                                    <div class="form-group">
                                                        <input type="date" class="form-control" id="date" value="{{ date('Y-m-d') }}" onchange="getUserInfo()">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <select class="form-control" id="users" onchange="getUserInfo()">
                                                            @foreach($data as $val)
                                                            <option value="{{$val['id']}}">
                                                                {{ $val['FirstName'] . ' ' . $val['LastName'] }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </section>

            
            {{-- Map  --}}
            <div id="map" style="height: 800px; width: 100%;"></div>

            <div class="carddiv">
                
            </div>
            </div>


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

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

<script src="https://maps.googleapis.com/maps/api/js?key={{env('MAP_API_KEY')}}&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>


    function getUserInfo() {

        var base_url = "{{ env('BASE_URL') }}";
        var userId = document.getElementById("users").value;
        var selectedDate = document.getElementById("date").value;

        $.ajax({
            url : base_url+"api/v1/time_line/"+userId+"/"+selectedDate,
            type : 'GET',
            success : function(response){
                if(response.status){
                    console.log('success');

                    html = '<div class="timeline col-md-4 bg-light p-1" style="margin-top:-630px; margin-left:20px"> <div class="card bg-primary text-light"> <div class="card-header">';
                    
                    html += '<h4 class="card-title text-light"> '+ response.data.employeeName +'</h4>';
                    html += '<hr>  <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>  <div class="heading-elements"> <ul class="list-inline mb-0"> <li><a data-action="collapse"><i class="ft-plus"></i></a></li>  </ul></div></div>';
                    html += '<div class="card-content collapse show" style=""><div class="card-body"> <dl class="row">';
                    html += '<dt class="col-sm-6">Total tracked time: </dt>';
                    html += '<dd class="col-sm-6">'+ (response.data.totalTrackedTime !== undefined ? response.data.totalTrackedTime : 'N/A')  +'</dd>';
                    html += '<dt class="col-sm-6">Total attendance time: </dt>';
                    html += '<dd class="col-sm-6">'+ (response.data.totalAttendanceTime !== undefined ? response.data.totalAttendanceTime : 'N/A' ) +'</dd>';
                    html += '<dt class="col-sm-6">Total travelled distance: </dt>';
                    html += '<dd class="col-sm-6" id="distance">'+ (response.data.totalKM !== undefined ? response.data.totalKM : '0' ) +' - KM</dd>';
                    html += '<dt class="col-sm-6">Device information: </dt>';
                    html += '<dd class="col-sm-6">'+ (response.data.deviceInfo !== undefined ? response.data.deviceInfo : 'N/A'  ) +'</dd>';

                    html += '</dl> </div></div> </div>';

                    if(response.data.timeLineItems){
                        var firstItem = response.data.timeLineItems[0];
                        var lastItem = response.data.timeLineItems[response.data.timeLineItems.length - 1];
                        const start = { lat: parseFloat(firstItem.latitude), lng: parseFloat(firstItem.longitude) };
                        const end = { lat: parseFloat(lastItem.latitude), lng: parseFloat(lastItem.longitude) };
                        initMap(start, end);
                        // console.log();
                        // console.log(response.data.timeLineItems.pop());
                        html += ' <div class="timeline-cards"> <div class="qa-message-list" id="wallmessages">';
                    
                        for (var i = 0; i < response.data.timeLineItems.length; i++){
                            console.log(response.data.timeLineItems[i].type);
                            if(response.data.timeLineItems[i].id){
                                

                                html += '<div class="message-item shadow" id="m16"> <div class="message-inner"> <div class="message-head clearfix"> <div class="user-detail"><div class="timeline-actitvity d-flex justify-content-between align-items-center">';
                                
                                html += '  <h5 class="handle text-primary"> '+(i+1)+') '+response.data.timeLineItems[i].type+' </h5>';
                                html += '   <span class="handle text-grey"> <i class="fa fa-clock-o"></i> '+response.data.timeLineItems[i].startTime+' - '+response.data.timeLineItems[i].endTime+' </span></div>';
                                                        
                                html += ' <div class="timeline-actitvity-per d-flex justify-content-between align-items-center">';
                                html += '<h5 class="handle"> (Acc '+response.data.timeLineItems[i].accuracy+' % ) </h5>';
                                html += '<span class="handle text-primary"> <i class="fa fa-battery-three-quarters"></i> '+response.data.timeLineItems[i].batteryPercentage+'% </span></div></div></div>';
                                if(response.data.timeLineItems[i].address == ''){
                                    html += '<div class="qa-message-content"> Unknown Address </div></div>  </div>';
                                }else{
                                    html += '<div class="qa-message-content"> '+response.data.timeLineItems[i].address+' </div></div>  </div>';
                                }
                            }
                            // html += ' </div>';
                        }
                    

                        html += ' </div></div>';
                    }else{
                            html += 'No Data Found!';
                        }

                    $('.carddiv').html(html);
                }else{
                    console.log('error');
                }
            }
        });

    }

    function initMap(start, end) {
        let mapCenter, showRoute = false;

        // India-centric dummy coordinates
        const dummyStart = { lat: 28.5319838, lng: 77.4681144 }; 
        const dummyEnd = { lat: 28.5319790, lng: 77.4681037 };  

        // Check if start is valid
        if (!start || start.lat === 0 || start.lng === 0) {
            console.warn("No valid start location. Using dummy start.");
            start = dummyStart; 
        }

        // Check if end is valid
        if (!end || end.lat === 0 || end.lng === 0) {
            console.warn("No valid end location. Using dummy end.");
            end = dummyEnd; 
        }

        // Set map center based on the available start point
        mapCenter = start;
        showRoute = true;

        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 5,
            center: mapCenter,
        });

        // Show route if both start and end exist
        const directionsService = new google.maps.DirectionsService();
        const directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);
        calculateAndDisplayRoute(directionsService, directionsRenderer, start, end);
    }

    function calculateAndDisplayRoute(directionsService, directionsRenderer, start, end) {
        directionsService
            .route({
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING,
            })
            .then((response) => {
                directionsRenderer.setDirections(response);
            })
            .catch((e) => window.alert("Directions request failed due to " + e));
    }

    window.initMap = initMap;

</script>




@include('includes/footer')