000

@extends('dashboard.layouts.app')
@section('title', 'Attendance')
@section('style')
{{ Html::style('assets/css/bootstrap-datepicker3.min.css') }}
@endsection
@section('content')

<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">{{ __('messages.Home') }}</a>
                </li>
                <li class="active">Attendance</li>
            </ul>
        </div>

<div class="page-content">
        <div class="row" id="map">
                 
                               <div class="col-sm-3 pt-2">
                                    <label style="font-size: 17px; font-weight: 500;">User</label>
                                    <select name="user_id" class="autosubmit mb-3 form-control select2" style="font-size: 13px; padding: 5px 10px;" id="username">
                                        <option value=''>Select User</option>
                                        @foreach($users as $user)
                                            <option value='{{ $user->id }}'>{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 pt-2">
                                    <label style="font-size: 17px; font-weight: 500;">Date</label>
                                    <input class="form-control date-picker fromDates" id="myDate" name="mydate" type="date" value="{{ date('Y-m-d') }}">
                                </div>
                                <div class="col-sm-2 pt-2">
                                    <label style="font-size: 17px; font-weight: 500;">From Time</label>
                                    <input class="form-control date-picker fromTime" id="fromTime" name="fromTime" type="time">
                                </div>
                                <div class="col-sm-2 pt-2">
                                    <label style="font-size: 17px; font-weight: 500;">To Time</label>
                                    <input class="form-control date-picker toTime" id="toTime" name="toTime" type="time">
                                </div>
                                <div class="col-sm-2 pt-2" style="margin-top: 33px;">
                                    <button type="button" id="btn" class="btn btn-sm btn-success" style="border-radius: 7px; font-weight: 500;">Submit</button>
                                    <a href="{{ url('/home') }}" class="btn btn-sm btn-outline-success" style="border-radius: 7px; font-weight: 500;">Clear</a>
                                </div>

</div></div>
    <div class="page-content">
            <div class="pull-right tableTools-container"></div>
            <h3 class="header smaller lighter blue">Candidate Tracking</h3>
                <div class="row">
                    <div class="card" style="box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px; border-radius: 5px;">
                        
                            <div class="row">
                                <div class="col-lg-12">
                                    <div id="map123"></div>
                                </div>
                            </div>
                        
                    </div>
                </div>

<div class="row">
                    <div class="col-sm-12 p-4" style="margin-left: 25px;">
                        <div id="directions-panel"></div>
                    </div>
                </div>

<div class="row" style="margin: 35px 10px">
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    <div class="col-lg-3">
        				<div class="card-box m-t-20">
        					<h4 class="header smaller lighter blue" style="font-weight:bold;">LAST LOGIN ACTIVITY</h4>
        					<div class="p-20 nicescroll mx-box" style="outline: none !important; height:450px; overflow-y: scroll;">
        						@if(count($today_active_users) > 0)
                                    <ul class="list-group list-group-flush">
                                        @foreach($today_active_users as $login_val)
                                            <li class="list-group-item" style="font-size: 14px;">
                                                <span style="color: #2784a4; font-weight: bold;">{{ $login_val->name }} ({{ $login_val->user_id }})</span>
                                                has <span style="color: #018901; font-weight: 500;">logged</span> in on
                                                <span style="font-weight: 500; color: #683614;">{{ date('d-m-Y h:i:s A', strtotime($login_val->created_at)) }}</span>
                                            </li>
             
    									
    									
    									
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No login activity today.</p>
                                @endif
        					</div>
        				</div>
        			</div>
        			<div class="col-lg-3">
        				<div class="card-box m-t-20">
        					<h4 class="header smaller lighter blue" style="font-weight:bold;">ATTENDANCE ACTIVITY</h4>
        					<div class="p-20 nicescroll mx-box" style="outline: none !important; height:450px; overflow-y: scroll;">
        						@if(count($todayAttendances) > 0)
                                    <ul class="list-group list-group-flush">
                                        @foreach($todayAttendances as $attendance_val)
                                            @if(!is_null($attendance_val->out_time))
                                                <li class="list-group-item" style="font-size: 14px;">
                                                    <span style="color: #2784a4; font-weight: bold;">{{ $attendance_val->user }} ({{ $attendance_val->id }})</span>
                                                    left<span style="color: #018901; font-weight: 500;"> office</span> on
                                                    <span style="font-weight: 500; color: #683614;">{{ date('d-m-Y h:i:s A', strtotime($attendance_val->out_time)) }}</span>
                                                </li>
                                            @endif
                                            <li class="list-group-item" style="font-size: 14px;">
                                                <span style="color: #2784a4; font-weight: bold;">{{ $attendance_val->user }} ({{ $attendance_val->id }})</span>
                                                entered<span style="color: #018901; font-weight: 500;"> office</span> on
                                                <span style="font-weight: 500; color: #683614;">{{ date('d-m-Y h:i:s A', strtotime($attendance_val->in_time)) }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No attendance activity today.</p>
                                @endif
        					</div>
        				</div>
        			</div>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    <div class="col-lg-3">
        				<div class="card-box m-t-20">
        					<h4 class="header smaller lighter blue" style="font-weight:bold;">User Online/Offline Status</h4>
        					<div class="p-20 nicescroll mx-box" style="outline: none !important; height:450px; overflow-y: scroll;">
        					    @if(count($user_status) > 0)
                                    <ul class="list-group list-group-flush">
                                        @foreach($user_status as $key=>$value)
                                            <?php
                                            date_default_timezone_set("Asia/Kolkata");
                
                                            $updatedDate=date_create($value->updated_at);
                                            $currentDate=date_create(date('Y-m-d H:i:s'));
                                            $diff=date_diff($updatedDate,$currentDate);
                                            $diffDay = $diff->format("%a");
                                            $diffHour = $diff->format("%h");
                                            $diffMin = $diff->format("%i");
                                            ?>
                                            <li class="list-group-item" style="font-size: 14px;">
                                                <strong><span style="color: #2784a4; font-weight: bold;">{{getModelById('User',$value->user_id)->name}}({{$value->user_id}})</span> is</strong> @if(($diffDay == 0) && ($diffHour==0) &&($diffMin<=30) && ($value->status=='On')) <b style="color:green;">Online</b> @elseif($value->status=='Off') <b style="color:red;">Offline</b>
                                         @else <b style="color:red;">Offline</b> @endif</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>NO User Online/Offline Status Today.</p>
                                @endif
        					</div>
        				</div>
        			</div>
        			 <div class="col-lg-3">
        				<div class="card-box m-t-20">
        					<h4 class="header smaller lighter blue" style="font-weight:bold;">BATTERY STATUS ACTIVITY</h4>
        					<div class="p-20 nicescroll mx-box" style="outline: none !important; height:450px; overflow-y: scroll;">
        						@if(count($user_status) > 0)
                                    <ul class="list-group list-group-flush">
                                        @foreach($user_status as $battery_status)
                                            <li class="list-group-item" style="font-size: 14px;">Battery status of
                                                <span style="color: #2784a4; font-weight: bold;">{{getModelById('User',$battery_status->user_id)->name}} ({{ $battery_status->user_id }} ) </span>is <span style="color: #2784a4; font-weight: bold;">{{$battery_status->batterylevel}}% </span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No battery status today.</p>
                                @endif
        					</div>
        				</div>
        			</div>
                </div>
                <div class="row">
           
        			
        			
        			
        			
           
           
           
           
           
           
           
           
           
           
        			
        			
        			
        			
        			
        			
        			
        			
           
           
           
           
           
           
           
           
           
           
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        				
        				
        			
        			
                </div>
                
            </div>
        </div>
    </div>
</div>
</div>

@section('script')

{{ Html::script('assets/js/buttons.flash.min.js') }}
{{ Html::script('assets/js/buttons.html5.min.js') }}
{{ Html::script('assets/js/buttons.print.min.js') }}

{{ Html::script('assets/js/dataTables.select.min.js') }}
{{ Html::script('assets/js/ace-elements.min.js') }}
{{ Html::script('assets/js/ace.min.js') }}

var marker;

var markers = [];

var beaches = [ <?php $i=1; foreach($today_active_users  as $userinfo) { ?>

['<?php echo $userinfo->name;?>',<?php echo $userinfo->lat;?>,<?php echo $userinfo->lng;?>,<?php echo $i;?>],

<?php $i++; } ?>
    ];

//console.log(beaches);

var map = new google.maps.Map(document.getElementById('map123'), {

zoom: 10,

streetViewControl: false,

center: new google.maps.LatLng(27.5887748,80.8385074,),

mapTypeId: google.maps.MapTypeId.ROADMAP

});
<?php

foreach($location_set as $key=>$value){
    
?>

var myLatLng<?php echo $value->id ?> = new google.maps.LatLng(<?php echo $value->ltlong ?>);

marker<?php echo $value->id ?> = new google.maps.Marker({

position: myLatLng<?php echo $value->id ?>,

map: map,

icon: 'images/download__7_-removebg-preview.png',

animation: google.maps.Animation.DROP,

title: "<?php echo $value->name.', '.$value->add ?>",

zIndex: 2

});
<?php
}
?>

<?php

foreach($location_set as $key=>$value){
?>

var infoWindow<?php echo $value->id ?> = new google.maps.InfoWindow();

google.maps.event.addListener(marker<?php echo $value->id ?>, 'click', function () {

var markerContent =marker<?php echo $value->id ?>.getTitle();

infoWindow<?php echo $value->id ?>.setContent(markerContent);

infoWindow<?php echo $value->id ?>.open(map, this);

}); 
    <?php
}
?>

var infowindow = new google.maps.InfoWindow();

setMarkers(beaches);

function setMarkers(locations) {

for (var i = 0; i < locations.length; i++) {

var beach = locations[i];

var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

marker = new google.maps.Marker({

position: myLatLng,

map: map,

icon: 'images/download__6_-removebg-preview.png',

animation: google.maps.Animation.BOUNCE,

title: beach[0]

// zIndex: beach[3]

});

markers.push(marker);

}

function setMapOnAll(map) {

for (var i = 0; i < markers.length; i++) {

markers[i].setMap(map);

}

}
</script>
 <script type="text/javascript">
 
var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

var infowindow = new google.maps.InfoWindow();

$('.nav-item.active').parent().parent().addClass('show');

$(document).ready(function(){

$('#btn').click(function(){

var username = document.getElementById("username").value;
    var mydate = document.getElementById("myDate").value;
    var fromTime = document.getElementById("fromTime").value;
    var toTime = document.getElementById("toTime").value;

if(username==""){

alert('Please select user');

}else{

$.ajax({

url:"{{url('/get-user-route')}}",

data: {"_token": "{{ csrf_token() }}", id:username,mydate:mydate,fromTime:fromTime,toTime:toTime} ,

type:"POST",

success:function(data){

console.log(data);

var myObject = data;
            
            if(myObject.length == 0)
            {
                alert('User has no records');
            }else{
               
            setMapOnAll(null);
        
            var LocationData=[];
            var i=0; 
            for (i = 0; i < myObject.length; i++) {
              LocationData[i] = myObject[i];
            }

var mypath = new Array();

directionsDisplay = new google.maps.DirectionsRenderer();

directionsDisplay.setMap(map);

var start = new google.maps.LatLng(LocationData[0].lat,LocationData[0].lng);

var end = new google.maps.LatLng(LocationData[LocationData.length-1].lat,LocationData[LocationData.length-1].lng);

var waypts = [];

var upto = LocationData.length-1;

//if(upto > 7)

//upto = 7;

//console.log(LocationData.length);

if(LocationData.length > 1) {

for (var i = 0; i <=upto; i++) {

mypath.push(new google.maps.LatLng(LocationData[i].lat,LocationData[i].lng));

waypts.push({

location: new google.maps.LatLng(LocationData[i].lat,LocationData[i].lng),

stopover: true

});

}

//  alert(mypath);

const lineSymbol = {

path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

scale: 4,

strokeColor: "red",

};

var polyline = new google.maps.Polyline({

path: mypath,

strokeColor: 'yellow',

strokeOpacity: 1.0,

icons: [{

icon: lineSymbol,

offset: '0'

}],

strokeWeight: 4

});

polyline.setMap(map);

animateCircle(polyline);

calcRoute(start,end,waypts);

for (var i = 0; i <=upto; i++) {

var myLatLng = new google.maps.LatLng(LocationData[i].lat,LocationData[i].lng);

if(i==0){

marker = new google.maps.Marker({

position: myLatLng,

map: map,

icon: 'images/location.png',

animation: google.maps.Animation.DROP,

title: 'Starting Point'

// zIndex: beach[3]

});
                    }
                    if(i==upto){

marker = new google.maps.Marker({

position: myLatLng,

map: map,

icon: 'images/download__6_-removebg-preview.png',

animation: google.maps.Animation.DROP,
                        
                        title: LocationData[0].name
                            
                      });
                    }

}
            }
        }

});    
}

});
    
    function calcRoute(start,end,waypts) {

//console.log(waypts);

var request = {

origin: start,

destination: end,

waypoints: waypts,

travelMode: google.maps.DirectionsTravelMode.DRIVING

};

directionsService.route(request, function (response, status) {
        //console.log('');
        if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

var route = response.routes[0];

var summaryPanel = document.getElementById("directions-panel");

summaryPanel.innerHTML = "";

// For each route, display summary information.

for (var i = 0; i < route.legs.length; i++) {

var routeSegment = i + 1;

summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";

summaryPanel.innerHTML += route.legs[i].start_address + " to ";

summaryPanel.innerHTML += route.legs[i].end_address + "<br />";

summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";

}

} else {

//alert("directions response " + status);

}

});

}

function animateCircle(polyline) {

let count = 0;
		window.setInterval(() => {
			count = (count + 1) % 200;
			const icons = polyline.get("icons");
			icons[0].offset = count / 2 + "%";
			polyline.set("icons", icons);
		}, 100);

}

});

$('.select2').select2({
		allowClear: false
});
</script>
@endsection
@endsection