@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">

    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="content-header row">
        <div class="content-header-left col-md-6 col-6 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Live Tracking</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ $orgUrl.'/home' }}">Home</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ $orgUrl . '/visit-live-tracking' }}">Live Tracking</a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
            <div class="content-header-right text-end col-md-6 col-12">
                <div class="form-group breadcrumb-right">
                        <button class="btn btn-primary btn-sm waves-effect waves-float waves-light" data-bs-target="#filter" data-bs-toggle="modal"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg> Filter</button> 
                </div>
            </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
   
    <section id="multiple-column-form">
        <div class="row">

            <div class="col-md-9">
                <div class="card new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">Live Tracking</h4>
                    </div>
                    @if(count($visitArr))
                        <div class="card-body">
                            <div class="card-datatable">
                                <table class="dt-column-search table" id="dataTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Title</th>
                                            <th>In Time</th>
                                            <th>Out Time</th>
                                            <th>Time</th>
                                            <th>Distance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($visitArr as $key => $visit)
                                        <tr>
                                            <td> {{$loop->iteration}} </td>
                                            <td> {{$visit['title']}} </td>
                                            <td> {{$visit['in_time']}} </td>
                                            <td> {{$visit['out_time']}} </td>
                                            <td> {{$visit['time']}} </td>
                                            <td> {{round($visit['distance'], 2)}} KM </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif

                    <div class="card-header p-0">
                        <div class="map" id="map" style="width: 100%; height: 450px"></div>
                    </div>
                    
                </div>
            </div>

            <div class="col-md-3 mb-2">
                <div class="card h-100">
                    <div class="card-header">
                        <h4 class="card-title">Tracking Logs</h4>
                    </div>
                    <div class="card-body" style="height: 450px;overflow: scroll;">
                        @if (count($visitLiveTrackings) < 1) 
                            <div class="row invoice-spacing">
                                <div class="col-md-12 leavedetailhead mb-0 text-danger">No tracking found!</div>
                            </div>
                        @endif
                        @foreach ($visitLiveTrackings as $visitLiveTracking)
                            
                        <div class="row invoice-spacing">
                            <div class="col-md-12 leavedetailhead mb-0">Name:</div>
                            <div class="col-md-12 leavedetailhead">
                                <strong>
                                    {{ $visitLiveTracking->employee ? $visitLiveTracking->employee->name : '' }}
                                </strong>
                            </div>
                            <div class="col-md-12 leavedetailhead m-0">Address:</div>
                            <div class="col-md-12 leavedetailtxt">
                                <span class="badge rounded-pill badge-light-info badgeborder-radius">{{ $visitLiveTracking->type }}</span>
                                <strong>{{ $visitLiveTracking->geo_address }}</strong>
                            </div>
                            <div class="col-md-12 leavedetailhead m-0">Date Time:</div>
                            <div class="col-md-12 leavedetailtxt">
                                <strong>{{ $visitLiveTracking->created_at }}</strong>
                            </div>
                            <div class="border-bottom mb-25 pt-25"></div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
    </section>

    </form>
    <!-- Basic Floating Label Form section end -->

     {{-- filter --}}
     <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
		<div class="modal-dialog sidebar-sm">
			<form class="add-new-record modal-content pt-0" method="GET"> 
				<div class="modal-header mb-1">
					<h5 class="modal-title" id="exampleModalLabel">Apply Filter</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
				</div>
				<div class="modal-body flex-grow-1">
					<div class="mb-1">
						  <label class="form-label" for="fp-range">Select Date Range</label>
						  <input type="date" name="date" class="form-control" value="{{ Request::get('date') ? Request::get('date') : date('Y-m-d') }}"  />
					</div>
                </div>
                <div class="modal-footer justify-content-start">
					<button type="submit" class="btn btn-primary data-submit mr-1">Apply</button>
					<a href="{{ $orgUrl.'/visit-live-tracking' }}" class="btn btn-outline-secondary" data-dismiss="modal">Clear</a>
				</div>
			</form>
		</div>
	</div>
    {{-- filter --}}
@endsection

@section('scripts')

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZHiJY-h95-Cm_PmRPUbwkPaDhZPNLC3U&libraries=places"></script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

    <script>
    function initMap(){

        var options = {
            center:,
            zoom: 18,
            // mapTypeId: "satellite",
        }
        var map = new google.maps.Map(document.getElementById('map'),options);

        // Add a marker clusterer to manage the markers.
   
       var infoWindowContent ='<div id="content" class="over-filledtree">'+
                            '<div class="filledtree-imgbox">'+
                                '<h1>Hello</h1>'+
                            "</div>"+
                        "</div>";

      //Add marker
      var markers = ;
    
      // Loop through markers
      var gmarkers = [];
      for(var i = 0; i < markers.length; i++){
        gmarkers.push(addMarker(markers[i]));
      }

      //Add MArker function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props,
          map:map,
          icon:props.image,
        });

        if(props.iconImage){
          marker.setIcon('images/map-icon/'+props.iconImage);
        } 

        //Check content
        if(props.iconImage != 'white.png'){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content,
            maxWidth: 400,
          });
          marker.addListener('click',function(){
            infoWindow.open(map,marker);
          });
        }


        // Construct the Polyline.
        const trackingPath = new google.maps.Polyline({
            path: markers,
            geodesic: true,
            strokeColor: "blue",
            strokeOpacity: 6.0,
            strokeWeight: 6,
        });

        trackingPath.setMap(map);

        return marker;
      }

         //Cluster
        // var markerCluster = new MarkerClusterer(map, gmarkers, {
        //     imagePath:
        //     'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        // });
    }
    google.maps.event.addDomListener(window, 'load', initMap)
    </script>
@endpush