@include('includes/header')
<style>
    #collapse {
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        max-height: 0; /* Initially collapsed */
    }
    .hidden {
        display: none;
    }
    .header-navbar.navbar-expand-md.navbar.navbar-with-menu.fixed-top.navbar-semi-dark.navbar-shadow{
        display: none;
    }

</style>

<!-- /////////////////////////////////// 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 p-2">
    <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">User Time Line</h1>
                    </div>
                </div>
               
                @if(isset($message) && $message != '' )
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>{{$message}}</strong>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                @endif

            </section>    
            <input type="hidden" id="user_id" value="{{$user_id}}">    


            {{-- 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() {
        console.log("here ak");
        var base_url = "{{ env('BASE_URL') }}";
        var user_id = document.getElementById("user_id").value;
        // var selectedDate = document.getElementById("date").value;

        $.ajax({
            url : base_url+"api/user/timeline/"+user_id,
            type : 'GET',
            success : function(response){
                console.log('all data',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 none font-medium-3" style="display:none"></i></a>  <div class="heading-elements"> <ul class="list-inline mb-0" style="display:block"> <li><a data-action="collapse"><i class="ft-plus" id="collapse_icon" onclick="toggleBtn(this)"></i></a></li>  </ul></div></div>';
                    html += '<div class="card-content collapse show" id="collapse" 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>';
                    console.log(response.data.timeLineItems, 'object length');


                    if(response.data.timeLineItems){
                        console.log(' coming imn ',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" id="timeline-cards"> <div class="qa-message-list" id="wallmessages">';
                        console.log(response.data.timeLineItems, 'object');

                        console.log(333 , response.data.timeLineItems.length );

                        for (var i = 0; i < response.data.timeLineItems.length; i++){
                            console.log( 222 );

                            // 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{
                        
                        console.log(" going in else ", response.data.timeLineItems)
                            html += 'No Data Found!';
                        }

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

    }

    getUserInfo();

    function initMap(start, end) {
        if (!start || !end) {
            console.error('Start or end coordinates are undefined, using dummy coordinates');
            start = { lat: 27.85, lng: 72.0060 }; 
            end = { lat: 27.85, lng: 75.0060 };  
        }
        console.log(end);
        const directionsService = new google.maps.DirectionsService();
        const directionsRenderer = new google.maps.DirectionsRenderer();
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 7,
            center: {
                lat: 41.85,
                lng: -87.65
            },
        });

        directionsRenderer.setMap(map);

        // const start = { lat: 27.4500000, lng: 71.4000000 };
        // const end = { lat: 27.489000, lng: 71.41000 };
        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;

    function toggleBtn() {
        console.log('clicked');
        const collapseElement = document.getElementById('collapse');
        const timelineCards = document.getElementById('timeline-cards');
        const icon = document.getElementById('collapse_icon');

        // Toggle visibility of the collapse div
        if (collapseElement.style.maxHeight) {
            collapseElement.style.maxHeight = null; // Collapse
            icon.classList.remove('ft-minus');
            icon.classList.add('ft-plus');

            if (timelineCards) {
                timelineCards.classList.add('hidden'); // Add 'hidden' class to timelineCards
            }
        } else {
            collapseElement.style.maxHeight = collapseElement.scrollHeight + "px"; // Expand
            icon.classList.remove('ft-plus');
            icon.classList.add('ft-minus');

            if (timelineCards) {
                timelineCards.classList.remove('hidden'); // Remove 'hidden' class from timelineCards
            }
        }
    }

 


</script>




@include('includes/footer')