@extends('layouts.master')
@section('content')
<style>
	#map {
        height: 400px;
    }

</style>
<section class="content home">
   	<div class="block-header">
      <div class="row">
         <div class="col-lg-5 col-md-5 col-sm-12">
            <h2>Verify Geotagged Map
            <small>Welcome to TOF</small>
            </h2>
         </div>            
         <div class="col-lg-7 col-md-7 col-sm-12 text-right">
            <!-- <button class="btn btn-white btn-icon btn-round d-none d-md-inline-block float-right m-l-10" type="button">
               <i class="zmdi zmdi-plus"></i>
            </button> -->
            <ul class="breadcrumb float-md-right">
               <li class="breadcrumb-item"><a href="index.html"><i class="zmdi zmdi-home"></i>ASSAM-TOF</a></li>
               <li class="breadcrumb-item active">Verify Geotagged Map</li>
            </ul>
         </div>
      </div>
   	</div>
    <div class="container-fluid">
       <div class="row">
          <div class="col-12 col-lg-12">
             <div class="card">
                <div class="header">
                   <h2><strong>Verify</strong> Geotagged Map</h2>
                </div>
                @if ($message = Session::get('success'))
                    <div class="alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
                @if ($message = Session::get('failed'))
                    <div class="alert alert-danger">
                        <p>{{ $message }}</p>
                    </div>
                @endif
				<form id="geoTagModalForm" action="" method="PUT">
					<div class="modal-body">
						<input type="hidden" id="id" name="id"></input>
						<div class="row mb-3">
							<div class="col-md-4">
								<p>Latitude</p>
								<input class="form-control" type="text" id="latitude" name="latitude"></input>
							</div>
							<div class="col-md-4">
								<p>Longitude</p>
								<input class="form-control" type="text" id="longitude" name="longitude"></input>
							</div>
							<div class="col-md-4">
								<div class="btn-align">
									<button type="button" class="btn btn-primary" onclick=initMap()>Verify</button>
								</div>	
							</div>
						</div>
						<div id="map">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">Save changes</button>
					</div>
				</form>
             </div>
          </div>
       </div>
       <div class="overlay toggle-menu"></div>
    </div>
</div>

@yield('script')
<script type="text/javascript">
    var map;
    function initMap() {
        var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);
		if(panPoint){
			// alert('Please input Coordinates');
		}
        var mapOptions = {
            zoom: 15,
            center: panPoint,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'),
		mapOptions);

		const icon = {
			url: "https://png.pngtree.com/png-vector/20220831/ourmid/pngtree-banyan-tree-logo-design-vector-png-image_6131481.png",
			scaledSize: new google.maps.Size(50, 50),
		};

		const marker = new google.maps.Marker({
			position:panPoint,
			map: map,
      		icon: icon,
		});
	}
</script>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap" >
</script>
@endsection