@extends('layouts.admin')
@section('title')
    Map Daerah {{ collect(request()->segments())->last() }}
@endsection
@section('customStyle')
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
    integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
    integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
    crossorigin=""></script>
    <style>
        #map {
            width:100%;
            height:100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
@endsection
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12 mt-5">
            <!-- Basic Card Example -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Map Daerah {{ collect(request()->segments())->last() }}</h6>
                </div>
                <div class="card-body">

                    @if ($participants != NULL)
                        <div id="map" class="jumbotron min-vh-80"></div>
                    @else
                        <div class="alert alert-warning">
                            <i class="fa fa-info-circle"></i>
                            Data absensi masih kosong
                        </div>
                        <div id="map" class="jumbotron min-vh-80"></div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    var map = L.map('map', {doubleClickZoom: false}).locate({setView: true, maxZoom: 300});
    navigator.geolocation.getCurrentPosition(function(location) {
        var latlng = new L.LatLng(location.coords.latitude, location.coords.longitude);
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    @foreach ($participants as $us)
    @php
        if($us->longitude == "-" || $us->longitude == "" || $us->latitude == "-" || $us->latitude == "")
        {
            continue;
        }
    @endphp
    L.circleMarker([{{$us->latitude}},{{$us->longitude}}], {
        color: 'red'
    }).addTo(map)
        .bindPopup('{{$us->name}}')
        .openPopup();
    @endforeach

</script>
{{-- 
    <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    <script>
        var locations = {!! json_encode($participants) !!};
        console.log(locations);
        console.log(locations[0]);
        console.log(locations[0]['name']);

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(locations[0]['latitude'],locations[0]['longitude']),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i]['name']+"<br>("+locations[i]['nik']+")");
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }


    </script> --}}
@endsection