@extends('layouts.seller')

@section('content')
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{!! __('employee_access.employee_access') !!}</p>
        </li>
    </ul>

    <div class="text-right">
        @if($listAccess)
            <a href="{!! route('seller.employee-access.edit') !!}">
                <button type="button" class="btn btn-primary waves-effect waves-light">{!! __('employee_access.employee_access_edit') !!}</button>
            </a>
        @else
            <a href="{!! route('seller.employee-access.create') !!}">
                <button type="button" class="btn btn-primary waves-effect waves-light">{!! __('employee_access.employee_access_add') !!}</button>
            </a>
        @endif
    </div>
</div>
<div class="admin-area-col">
    @include('layouts.partials.messages')
    <div class="row">
        <div class="col-12">
            <div class="error-msg font-14 mt-2"></div>

            <div class="card m-b-30">
                <div class="card-body row">
                    <div class="col-sm-12">
                        <div id="mapContainer" style="width:100%;height:550px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
</div>
@endsection

@section('script')
<script src="https://maps.google.com/maps/api/js?key={{ config('constants.GOOGLE_MAP_KEY') }}&sensor=false"></script>
<script>
	var latlng;
	// LOCATION IN LATITUDE AND LONGITUDE.
			latlng = new google.maps.LatLng(, );
	
	function circleInit()
	{
		var mapOptions = {
			center: latlng,
			zoom: 8,
			mapTypeControl : false,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);

		
		var locations = [];
		var infowindow = new google.maps.InfoWindow();
		var marker, i, latlngs;

		for (i = 0;i <locations.length; i++)
		{
			latlngs = new google.maps.LatLng(locations[i].lat,locations[i].lng);
			marker = new google.maps.Marker({
				map: map,
				position: latlngs,
				icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
			});

			google.maps.event.addListener(marker, 'click', (function(marker, i) {
				return function() {
                    let infoData = `
                        ${locations[i].name} <br/><br/>
                        <a href="{!! route('seller.employee-access.edit') !!}">
                            {!! __('employee_access.employee_access_edit') !!}
                        </a>

                        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;

                        <a href="javascript:void(0);" class="__route"
                            data-text="{!! __('common.delete_message') !!}"
                            data-url="{!! route('seller.employee-access.drop') !!}">
                            {!! __('employee_access.employee_access_delete') !!}
                        </a>
                    `;
					infowindow.setContent(infoData);
					infowindow.open(map, marker);
				}
			})(marker, i));
		}
	}
	google.maps.event.addDomListener(window, 'load', circleInit);
</script>
@endsection