@extends('layouts.index')

@section('header')
<div class="row align-items-center py-4">
	<div class="col-lg-6 col-7">
		<h6 class="h2 text-white d-inline-block mb-0"> {{$title}} </h6>
		<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
			<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
				<li class="breadcrumb-item"><a href="{{url($url)}}"><i class="fas fa-home"></i></a></li>
				<li class="breadcrumb-item active" aria-current="page">{{$menu}}</li>
			</ol>
		</nav>
	</div>
</div>
@endsection

@push('styles')
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
    <link
      rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
      type="text/css">

      <style type="text/css">
      	.truck-icon {
		  background-image: url('{{ url('/img/truck-icon.png')  }}');
		  background-size: cover;
		  width: 50px;
		  height: 50px;
		  border-radius: 50%;
		  cursor: pointer;
		}
		
		.building-icon {
		  background-image: url('{{ url('/img/building.png')  }}');
		  background-size: cover;
		  width: 50px;
		  height: 50px;
		  border-radius: 50%;
		  cursor: pointer;
		}
      </style>
@endpush

@section('content')
	<div class="row">
		<div class="col">
			<div class="card">
				<!-- Card header -->
				<div class="card-header border-0">
					<div class="row">
						<div class="col-6">
							<h3 class="mb-0">{{$title}}</h3>
						</div>
					</div>
				</div>
				<table class="table" width="100%">
					<tr>
						<td>No. Reference</td>
						<td>:</td>
						<td>{{$transaksi->reference}}</td>
					</tr>
					{{-- <tr>
						<td>Kode Transaksi</td>
						<td>:</td>
						<td>{{$transaksi->kd_transaksi}}</td>
					</tr> --}}
					<tr>
						<td>Tgl. Transaksi</td>
						<td>:</td>
						<td>{{$transaksi->tgl_transaksi}}</td>
					</tr>
					<tr>
						<td>Dealer</td>
						<td>:</td>
						<td>{{$transaksi->dealer->nama_dealer}}</td>
					</tr>
					<tr>
						<td>Penerima</td>
						<td>:</td>
						<td>{{$transaksi->penerima}}</td>
					</tr>
					<tr>
						<td>No Hp</td>
						<td>:</td>
						<td>{{$transaksi->no_hp}}</td>
					</tr>
					<tr>
						<td>Status</td>
						<td>:</td>
						<td>{{$transaksi->status}}</td>
					</tr>

					<tr>
						<td>Start Picking</td>
						<td>:</td>
						<td>
							@if($transaksi->status != 'dibuat')
								@if ($transaksi->start_picking)
									{{ $transaksi->start_picking }}
								@else
								<form action="{{ route('transaksi.startPicking',$transaksi->id) }}" method="POST">
									@csrf
									{{ method_field('PUT') }}
									<button class='btn btn-success btn-sm' type="submit" >Mulai Picking</button>
								</form>
								@endif
							@else
								<a href="{{ route('penjadwalan.edit', $transaksi->id) }}"> <i class="text-danger">Silahkan Atur Penjadwalan Terlebih Dahulu</i> </a>
							@endif
						</td>
					</tr>

					<tr>
						<td>End Picking</td>
						<td>:</td>
						<td>
							@if($transaksi->status != 'dibuat')
								@if ($transaksi->end_picking )
									{{ $transaksi->end_picking }}
								@elseif(!$transaksi->start_picking)
									<form action="{{ route('transaksi.startPicking',$transaksi->id) }}" method="POST">
										@csrf
										{{ method_field('PUT') }}
										<button class='btn btn-success btn-sm' type="submit" >Mulai Picking</button>
									</form>
								@else
									<form action="{{ route('transaksi.endPicking',$transaksi->id) }}" method="POST">
										@csrf
										{{ method_field('PUT') }}
										<button class='btn btn-success btn-sm' type="submit" >End Picking</button>
									</form>
								@endif
							@else
								<a href="{{ route('penjadwalan.edit', $transaksi->id) }}"> <i class="text-danger">Silahkan Atur Penjadwalan Terlebih Dahulu</i> </a>
							@endif
						</td>
					</tr>

					<tr>
						<td>Tgl. Muatan</td>
						<td>:</td>
						<td>{{$transaksi->tgl_muat ?? "Belum DiMuat"}}</td>
					</tr>

					<tr>
						<td>Tgl. Berangkat</td>
						<td>:</td>
						<td>{{$transaksi->tgl_berangkat ?? "Belum Berangkat"}}</td>
					</tr>
					<tr>
						<td>Tgl. Datang(Sampai Dealer)</td>
						<td>:</td>
						<td>{{$transaksi->tgl_datang ?? "Belum Sampai"}}</td>
					</tr>
					<tr>
						<td>Tgl. Selesai</td>
						<td>:</td>
						<td>{{$transaksi->tgl_selesai ?? "Belum Selesai"}}</td>
					</tr>

					<tr>
						<td>Penilaian Pengiriman Unit</td>
						<td>:</td>
						<td>{{ $penilaian }}
							@for($i = 1; $i <= $penilaian; $i++)
							<i class="fas fa-star"></i>
							@endfor
							@for($i = 1; $i <= 5 - $penilaian ; $i++)
							<i class="far fa-star"></i>
							@endfor
						</td>
					</tr>
				</table> 
			</div>
		</div>

		<div class="col-lg-12">
			<!-- Form Basic -->
			<div class="card mb-4">
				<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
					<h3 class="m-0 font-weight-bold text-primary">List Motor</h3>
				</div>
				<div class="card-body">
					<div class="table-responsive p-3">
						<table class="table align-items-center table-flush table-hover" id="dataTableHover">
							<thead class="thead-light">
								<tr>
									<th width="2%">#</th>
									<th>Kendaraan</th>
									<th>Nopol Kendaraan</th>
									<th>Kode Warna</th>
									<th>Nomor Mesin</th>
									<th>Kode Motor</th>
									<th>Lokasi Gudang</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								@foreach($transaksi->detailTransaksi as $detail)
								<tr>
									<td>{{$loop->iteration}}</td>
									<td>{{($detail->armada->nama_armada)?? "Silahkan Pilih Armada Di Menu Penjadwalan"}}</td>
									<td>{{($detail->armada->nomor_armada)?? "Silahkan Pilih Armada Di Menu Penjadwalan"}}</td>

									<td>{{ $detail->batch }}</td>
									<td>{{ $detail->serial_number }}</td>
									<td>{{ $detail->motor->kode_type }}</td>
									<td>{{ $transaksi->gudang->nama }}</td>
									
									<td class="text-center">
									@php
									$text = "";
									$persen = 0;
									if ($detail->status == 'dibuat') {
										$persen = 0;
										$text = 'DI BUAT';
									}elseif($detail->status == 'dijadwal') {
										$persen = 10;
										$text = 'DI JADWAL KAN';
									}elseif($detail->status == 'muat') {
										$persen = 25;
										$text = 'DI MUAT';
									}elseif($detail->status == 'berangkat') {
										$persen = 50;
										$text = 'BERANGKAT';
									}elseif($detail->status == 'datang') {
										$persen = 75;
										$text = 'SAMPAI';
									}elseif($detail->status == 'selesai') {
										$persen = 100;
										$text = 'SELESAI';
									}
									@endphp
									<i> {{$text}} </i>
									<div class="progress" style="height: 15px;">
										<div class="progress-bar progress-bar-striped progress-bar-animated text-dark" role="progressbar" aria-valuenow="{{$persen}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$persen}}%">
										</div>
									</div>
									
								</td>
								</tr>
								@endforeach
								<tr>
									<td colspan="2" class="text-right"><b style="font-size: 16px;">Total : </b></td>
									<td class="text-left"><b style="font-size: 16px;">{{ $transaksi->detailTransaksi->count() }}</b></td>
									<td></td>
								</tr>
							</tbody>
						</table>
					</div>            
				</div>
			</div>

		</div>

		<div class="col-lg-12">
			<!-- Form Basic -->
			<div class="card mb-4">
				<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
					<h3 class="m-0 font-weight-bold text-primary">LKUAT - Laporan Kerusakan Unit Akibat Transportasi</h3>
				</div>
				<div class="card-body">
					<div class="table-responsive p-3">
						<table class="table align-items-center table-flush table-hover" id="dataTableHover">
							<thead class="thead-light">
								<tr>
									<th width="2%">#</th>
									<th>Kendaraan</th>
									<th>Nopol Kendaraan</th>
									<th>Nomor Mesin</th>
									<th>Kode Motor</th>
									<th>Kode Warna</th>
									<th>Area Defect</th>
									<th>Part</th>
									<th>Jenis Defect</th>
									<th>Penyebab Defect</th>
									<th>Gambar</th>
								</tr>
							</thead>
							<tbody>
								@foreach($transaksi->detailTransaksi()->whereNotNull('keluhan')->get() as $item )
								<tr>
									<td>{{$loop->iteration}}</td>
									<td>{{ $item->armada->nama_armada }}</td>
									<td>{{ $item->armada->nomor_armada }}</td>
									<td>{{ $item->serial_number }}</td>
									<td>{{ $item->motor->kode_type }}</td>
									<td>{{ $item->batch }}</td>
									<td>{{ $item->area_defect }}</td>
									<td>{{ $item->part }}</td>
									<td>{{$item->keluhan}}</td>
									<td>{{$item->akibat}}</td>
									<td>
										<a href="{{Storage::url($item->foto_path) }}" target="_blank">
											<img src="{{Storage::url($item->foto_path) }}" width="150">
										</a>
									</td>
								</tr>
								@endforeach
								@if( $transaksi->detailTransaksi()->whereNotNull('keluhan')->count() == 0 )
									<tr>
										<td align="center" colspan="11"> Tidak Ada Laporan Kerusakan</td>
									</tr>
								@endif
							</tbody>
						</table>
					</div>            
				</div>
			</div>

		</div>

		<div class="col-lg-12">
			<!-- Form Basic -->
			<div class="card mb-4">
				<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
					<h3 class="m-0 font-weight-bold text-primary">Lokasi Driver Terakhir</h3>
				</div>
				<div class="card-body">
					<div id="map"></div>
				</div>
			</div>

		</div>
	</div>

@endsection

@push('scripts')
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
	<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>

	<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-database.js"></script>
	<script type="text/javascript">
		const drivers = {!! json_encode(@$drivers) !!}
		const dealers = {!! json_encode(@$dealer) !!}
		$(document).ready(function(){
			var curFollow = null;
			var b = false;
			var el = document.createElement('div');
				el.className = 'truck-icon';
			// var kordinatTransaksi = '{{ $transaksi->kordinat_transaksi }}';
			// var coordinate = kordinatTransaksi.split(',');
            let marker = null
            let map = null
            let lk = [116.924,-0.331];
			if($('#map').length){
				
				
	            mapboxgl.accessToken = 'pk.eyJ1IjoiYmFndXNpbmRyYXlhbmEiLCJhIjoiY2tmbmZ1cjhrMGF5NjJzbXBybzdqcnlvZiJ9.OvI6nC9bKBZIT9tiBJnYfA';
	            

                if(map == null){
                	map = new mapboxgl.Map({
						container: 'map',
						style: 'mapbox://styles/mapbox/streets-v11',
						center: lk,
						zoom: 10
					});
                }

                var geocoder = new MapboxGeocoder({
                    accessToken: mapboxgl.accessToken,
                    mapboxgl: mapboxgl,
                    marker:false,
                    placeholder: 'Masukan kata kunci...',
                    zoom:20
                });


                map.addControl(
                    geocoder
                );

                // if(coordinate[0] != "" && coordinate[0] != null && coordinate[1] != "" && coordinate[1] != null){
                // 	updateMarker(coordinate)
                // }

			}
			
			function updateMarker(kordinat) {
				
				if(marker == null){
					marker = new mapboxgl.Marker(el).setLngLat(kordinat)
                    	.addTo(map);
				} else {
					marker.setLngLat(kordinat);
            		
				}

				map.flyTo({
        			center : kordinat,
        			bearing: 0,
					speed: 0.2, // make the flying slow
					curve: 2, // change the speed at which it zooms out
					easing: function (t) {
						return t;
					},
					essential: true
        		});
			}


			var firebaseConfig = {
			    apiKey: "AIzaSyAi3f8v-kNIwCxx_SYrT69NtdpHvLr3KaQ",
			    authDomain: "absen-driver-astra.firebaseapp.com",
			    databaseURL: "https://absen-driver-astra-default-rtdb.firebaseio.com",
			    projectId: "absen-driver-astra",
			    storageBucket: "absen-driver-astra.appspot.com",
			    messagingSenderId: "455408926095",
			    appId: "1:455408926095:web:4844eba14a6bbb1ad79ffa",
			    measurementId: "G-NKZL4SW64X"
			};
			  
			if (firebase.apps.length === 0) {
				firebase.initializeApp(firebaseConfig);
			  	firebase.analytics();
			}

			var geoJson = {
				'type': 'geojson',
				'data': {
					'type': 'FeatureCollection',
					'features': []
				}
			};
			
			var geoJson2 = {
				'type': 'geojson',
				'data': {
					'type': 'FeatureCollection',
					'features': []
				}
			};
			
			
			for (var i = 0; i < dealers.length; i++){
				const dealer = dealers[i]
				
				if(dealer.koordinat_dealer != null && dealer.koordinat_dealer != ""){
					var c = dealer.koordinat_dealer.split(",");
					const map3 = {
						'type': 'Feature',
						'properties': {
							'id' : dealer.id,
							'description' :
							`<strong>${dealer.nama_dealer}<br></strong><br>
								${dealer.alamat_dealer}<br>
								${dealer.area}<br>
								</p>`,
						},
						'geometry': {
								'type': 'Point',
								'coordinates': [c[1],c[0]]
							}
					}
					geoJson2.data.features.push(map3)
				}
				
			}
			
			
			for (var i = 0; i < drivers.length; i++) {
				const d = drivers[i]
				if(d.koordinat != null && d.koordinat != "" && d.koordinat != "null,null"){
					console.log(d.koordinat);
					var k = d.koordinat.split(",");
					if(k.length == 2 && k[0] != null && k[0] != "" && k[0] != "null" && k[1] != null && k[1] != "" && k[1] != "null"){
						var waktu = new Date(d.updated_at);
						const map = {
							'type': 'Feature',
							'properties': {
								'id':d.user_id,
								'description':
								`<strong>${d.user.nama}<br>${d.user.no_hp}<br>${d.status}</strong><br>
								${d.armada.nomor_armada}<br>
								${d.armada.nama_armada}<br>
								Terakhir Di Update : ${waktu}</p>`,
								'time':d.updated_at
							},
							'geometry': {
								'type': 'Point',
								'coordinates': [k[0],k[1]]
							}
						}
						geoJson.data.features.push(map)
					}
				}
				
				var db = firebase.database().ref('transactions/{{$transaksi->id}}/drivers/'+d.user_id);
				db.once('value', (snapshot) => {
					const data = snapshot.val();
					console.log(data);
					if(data && data.longitude && data.latitude){
						
						var cek = false;
						var update = -1;
						for (var x = 0; x < geoJson.data.features.length; x++) {
							const f = geoJson.data.features[x]
							if(f.properties.id == d.user_id){
								cek = true;
								var a = new Date(data.time);
								var b = new Date(d.updated_at);
								
								if(a >= b){
									update = x;
									// console.log(a)
									// console.log(b)
									break;
								}
							}
						}

						if(!cek){
							var waktu = new Date(data.time);
							const map2 = {
								'type': 'Feature',
								'properties': {
									'id':d.user_id,
									'description':
									`<strong>${d.user.nama}<br>${d.user.no_hp}<br>${d.status}</strong><br>
									${d.armada.nomor_armada}<br>
									${d.armada.nama_armada}<br>
									Terakhir Di Update : ${waktu}</p>`,
									'time':data.time
								},
								'geometry': {
									'type': 'Point',
									'coordinates': [data.longitude,data.latitude]
								}
							}
							geoJson.data.features.push(map2);
						} else {
							if(update >= 0){
								geoJson.data.features[update].geometry.coordinates = [data.longitude,data.latitude];
							}
						}
						
					}

					if(geoJson.data.features.length > 0){
			  			var bounds = new mapboxgl.LngLatBounds();

						geoJson.data.features.forEach(function(feature) {
						    bounds.extend(feature.geometry.coordinates);
						});

						map.fitBounds(bounds);
						
			  		}
				  
				});
				
			}

	

		

			map.on('load', function () {
				map.loadImage('{{ url('img/truck_icon_small.png') }}',function (error, image) {
					if (error) throw error;
					map.addImage('truck-icon', image);
					 
					map.addSource('drivers', geoJson);
					
					
					 
					// Add a layer showing the places.
					map.addLayer({
						'id': 'drivers',
						'type': 'symbol',
						'source': 'drivers',
						'layout': {
							'icon-image': 'truck-icon',
							'icon-allow-overlap': true
						}
					});
					
					
				});
				
				map.loadImage('{{ url('img/building_small.png') }}',function (error, image) {
					if (error) throw error;
					
					
					map.addImage('building-icon', image);
					 
					
					
					map.addSource('dealer', geoJson2);
					 
					// Add a layer showing the places.
					
					
					map.addLayer({
						'id': 'dealer',
						'type': 'symbol',
						'source': 'dealer',
						'layout': {
							'icon-image': 'building-icon',
							'icon-allow-overlap': true
						}
					});
				
				});
				
				
					// Create a popup, but don't add it to the map yet.
				var popup = new mapboxgl.Popup({
					closeButton: true,
					closeOnClick: true
				});

				map.on('click', function (e) {
					curFollow = null;
				});
				 
				map.on('click', 'drivers', function (e) {
					// Change the cursor style as a UI indicator.
					map.getCanvas().style.cursor = 'pointer';
					 
					var coordinates = e.features[0].geometry.coordinates.slice();
					var description = e.features[0].properties.description;
					 
					// Ensure that if the map is zoomed out such that multiple
					// copies of the feature are visible, the popup appears
					// over the copy being pointed to.
					while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
						coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
					}
				 
					// Populate the popup and set its coordinates
					// based on the feature found.
					popup.setLngLat(coordinates).setHTML(description).addTo(map);
					curFollow = e.features[0].properties.id;
				});
				
				map.on('click', 'dealer', function (e) {
					// Change the cursor style as a UI indicator.
					map.getCanvas().style.cursor = 'pointer';
					 
					var coordinates = e.features[0].geometry.coordinates.slice();
					var description = e.features[0].properties.description;
					 
					// Ensure that if the map is zoomed out such that multiple
					// copies of the feature are visible, the popup appears
					// over the copy being pointed to.
					while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
						coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
					}
				 
					// Populate the popup and set its coordinates
					// based on the feature found.
					popup.setLngLat(coordinates).setHTML(description).addTo(map);
					curFollow = e.features[0].properties.id;
				});
				 
				// map.on('click', 'places', function () {
				// 	map.getCanvas().style.cursor = '';
				// 	popup.remove();
				// });

				// popup.on('close', function(){
				// 	curFollow = null;
				// });

			

				var db = firebase.database().ref('transactions/{{$transaksi->id}}/drivers');
		
				db.on('value', (snapshot) => {
				  	const data = snapshot.val();

				  	if(data != null){
				  		for (const [id, value] of Object.entries(data)) {
					  		//console.log(id)
						 	for (var i = 0; i < geoJson.data.features.length; i++) {
							  	if(geoJson.data.features[i].properties.id == id){

							  		//var d = geoJson.data.features[i].properties;
							  		var a = new Date(value.time);
									var b = new Date(geoJson.data.features[i].properties.time);
							  		if(a >= b){

							  			geoJson.data.features[i].geometry.coordinates = [value.longitude,value.latitude];

							  			for (var x = 0; x < drivers.length; x++) {
											const d = drivers[x]
											if(d.user_id == id){
												if(d.user != undefined){
									  				geoJson.data.features[i].properties.description = `<strong>${d.user.nama}<br>${d.user.no_hp}<br>${d.status}</strong><br>
														${d.armada.nomor_armada}<br>
														${d.armada.nama_armada}<br>
														Terakhir Di Update : ${a}</p>`
									  			}
											}
										}
							  			// console.log(d);
							  			
							  			if(curFollow != null && curFollow == id){
							  				if(geoJson.data.features[i] != undefined){
							  					popup.setLngLat(geoJson.data.features[i].geometry.coordinates).setHTML(geoJson.data.features[i].properties.description).addTo(map);
								  				map.flyTo({
								        			center : geoJson.data.features[i].geometry.coordinates,
													speed: 0.8, // make the flying slow
								        		});
							  				} else {
							  					popup.setLngLat([value.longitude,value.latitude]).addTo(map);
								  				map.flyTo({
								        			center : [value.longitude,value.latitude],
													speed: 0.8, // make the flying slow
								        		});
							  				}
							  				

							        		
							  			}
							  		}
							  		
							  	} 
							 }
						}
					
						if(map.getSource('drivers')){
						  	map.getSource('drivers').setData(geoJson.data);
						  	
						}

						if(!b){
					  		if(geoJson.data.features.length > 0){
					  			var bounds = new mapboxgl.LngLatBounds();

								geoJson.data.features.forEach(function(feature) {
								    bounds.extend(feature.geometry.coordinates);
								});

								map.fitBounds(bounds);
								b = true;
								console.log("zoom")
					  		}
					  	}
				  	}
				  
				});

			});


			
	
        });






			
	</script>


@endpush