@extends('admin.account.show')
@section('content')


<div class="card card-flush">

	<!--begin::Card body-->
		<div class="card-body pt-0">
			<!--begin::Table-->
				<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
					<!--begin::Table head-->
					<thead>
						<!--begin::Table row-->
						<tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
							<th class="min-w-125px">Location</th>
							<th class="min-w-125px">Message</th>
							<th class="min-w-125px">Date</th>
							<th class="min-w-125px">Time</th>
							<th class="text-end min-w-100px">Actions</th>
						</tr>
						<!--end::Table row-->
					</thead>
					<!--end::Table head-->
					<!--begin::Table body-->
						<tbody class="text-gray-600 fw-bold">
							@if ($data['History'] != null)
							@foreach ($data['History'] as $key => $value )
								<!--begin::Table row-->
								<tr>
									<!--begin::User=-->
									<td class="d-flex align-items-center">
										<a class="menu-link px-3 users_history_data" data-keyid="{{$key}}" >{{$value['address'] ?? '--'}} </a>
									</td>
									<!--end::User=-->
									<td> {{$value['message'] ?? '--'}} </td>
									<!--begin::Date=-->
									<td>
										@php
										$timestamp = $value['time'];
										echo date('Y-m-d', $timestamp/1000);
										@endphp
									</td>
									<!--end::Date=-->

										<!--begin::Time=-->
										<td>
											@php
											$timestamp = $value['time'];
											$time = date('h:i:s A', $timestamp / 1000);
											echo $time;
											@endphp
										</td>
										<!--end::Time=-->

									<td class="text-end">
										<a href="#" data-id="" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
										<span class="svg-icon svg-icon-5 m-0">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
												<path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor" />
											</svg>
										</span>
										<!--end::Svg Icon-->
									</a>
										<!--begin::Menu-->
										<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
											<!--begin::Menu item-->
											<div class="menu-item px-3">
														{{-- <a href="/userHistory/{{$key}}" onclick="initMap({{$value['lat'] ?? ''}},{{$value['lng'] ?? ''}})" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app" id="myModal" class="menu-link px-3">View</a> --}}
														<a class="menu-link px-3 users_history_data" data-keyid="{{$key}}">View</a>
											</div>

											<!--end::Menu item-->
										</div>
										<!--end::Menu-->
									</td>
									<!--end::Action=-->
								</tr>
						<!--end::Table row-->
						@endforeach
						@endif
					</tbody>
					<!--end::Table body-->
				</table>
			<!--end::Table-->
		</div>
	<!--end::Card body-->
	</div>
<!--begin::Modal - Add task-->
<div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
	<!--begin::Modal dialog-->
	<div class="modal-dialog modal-dialog-centered mw-750px">
		<!--begin::Modal content-->
		<div class="modal-content">
			<!--begin::Modal header-->
			<div class="modal-header" id="kt_modal_add_user_header">
				<!--begin::Modal title-->
				<h2 class="fw-bolder">History Record</h2>
				<!--end::Modal title-->
				<!--begin::Close-->
				<div class="btn btn-icon btn-sm btn-active-icon-primary"  data-bs-dismiss="modal">
					<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
					<span class="svg-icon svg-icon-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
							<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
							<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
				</div>
				<!--end::Close-->
			</div>
			<!--end::Modal header-->
			<!--begin::Modal body-->
			<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
				<div id="popup-content"></div>

					{{-- Tabs Start  --}}
					<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
						<li class="nav-item">
								<a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_7">Friends</a>
						</li>
						<li class="nav-item">
								<a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_8">Family</a>
						</li>
						<li class="nav-item">
								<a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_9">Others</a>
						</li>
					</ul>
					<div class="tab-content" id="myTabContent">
						<div class="tab-pane fade show active" id="kt_tab_pane_7" role="tabpanel">
						<!--begin::Table-->

						<div class="card-body p-9 friends_tbl">

						</div>
						<!--end::Table-->
						</div>
						<div class="tab-pane fade" id="kt_tab_pane_8" role="tabpanel">
							<!--begin::Table-->
							<div class="card-body p-9 family_tbl"></div>
						<!--end::Table-->
						</div>
						<div class="tab-pane fade" id="kt_tab_pane_9" role="tabpanel">
							<!--begin::Table-->
							<div class="card-body p-9 others_tbl">

							</div>
						<!--end::Table-->
						</div>
					</div>
					{{-- Tabs End  --}}

			</div>
			<!--end::Modal body-->
		</div>
		<!--end::Modal content-->
	</div>
	<!--end::Modal dialog-->
</div>
<!--end::Modal - Add task-->
<script>
	$( ".users_history_data" ).click(function() {

		$('#kt_modal_add_user').modal('show');

		$(".friends_tbl").empty();
		$(".family_tbl").empty();
		$(".others_tbl").empty();

			var key = $(this).data("keyid");

			var settings = {
				"url": "https://safe-word-new-default-rtdb.firebaseio.com/History.json",
				"method": "GET",
				"timeout": 0,
			};

			$.ajax(settings).done(function (response) {

				const url = $(location).attr('href');
				const lastSegment = url.split("/").pop();

				if(response[lastSegment][key]['friends'] != null)
				{
					var i = 1;
					$.each(response[lastSegment][key]['friends'], function (index, value) {
						i++;
					});

					for (let j = 1; j <= (i-2)/2; j++) {

						$('.friends_tbl').append(`

							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Full Name</label>
							<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['friends']['friendscontact'+j+'name']+`</span>
								</div>

							</div>


							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Email Address</label>
								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['friends']['friendscontact'+j+'email']+`</span>
								</div>

							</div>

							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Contact</label>
								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['friends']['friendscontact'+j+'number']+`</span>
								</div>

							</div>

							<hr>

							`);
					}
				}
				else
				{
					$('.friends_tbl').html(`<p>No data available.</p>`);
				}

				if(response[lastSegment][key]['family'] != null)
				{
					var i = 1;
					$.each(response[lastSegment][key]['family'], function (index, value) {
						i++;
					});

					for (let j = 1; j <= (i-2)/2; j++) {

						$('.family_tbl').append(`

							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Full Name</label>


								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['family']['familycontact'+j+'name']+`</span>
								</div>

							</div>

							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Email Address</label>


								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['family']['familycontact'+j+'email']+`</span>
								</div>

							</div>

							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Contact</label>


								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['family']['familycontact'+j+'number']+`</span>
								</div>

							</div>

							<hr>

							`);

						}
				}
				else
				{
					$('.family_tbl').html(`<p>No data available.</p>`);
				}

				if(response[lastSegment][key]['others'] != null)
				{
					var i = 1;
					$.each(response[lastSegment][key]['others'], function (index, value) {
						console.log(response[lastSegment][key]['others'][index], i);
						i++;
					});

					for (let j = 1; j <= (i-2)/2; j++) {

						$('.others_tbl').append(`

							<div class="row mb-7">

								<label class="col-lg-4 fw-bold text-muted">Full Name</label>
								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['others']['otherscontact'+j+'name']+`</span>
								</div>

							</div>

							<div class="row mb-7">
								<label class="col-lg-4 fw-bold text-muted">Email Address</label>
								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['others']['otherscontact'+j+'email']+`</span>
								</div>

							</div>

							<div class="row mb-7">
								<label class="col-lg-4 fw-bold text-muted">Contact</label>
								<div class="col-lg-8">
									<span class="fw-bolder fs-6 text-gray-800">`+response[lastSegment][key]['others']['otherscontact'+j+'number']+`</span>
								</div>

							</div>

							<hr>

							`);

					}
				}
				else
				{
					$('.others_tbl').html(`<p>No data available.</p>`);
				}

			});

	});
	</script>
@endsection