<?php
 $patientEngagementColorCodes = @Config::get('constants.client_engagement_status_color_codes');
?>
<div>
  @include('app.admin.patients-results-view-options')
</div>
<style media="screen">
  .pt-content {
    background-color: #ffffff;
    position: absolute;
    top:60px;
    left: 10px;
    width: 300px;
    height:87%;
    overflow-y: scroll;
  }
</style>
<div class="bg-white position-relative w-100" id="mapComponent">
  <div id="map-canvas" style="height:700px;width:100%;"></div>
  <div class="pt-content shadow">
    @foreach($patients as $patient)
      @if($patient->home_address_geo_lat && $patient->home_address_geo_long)
        <div class="px-3 py-2 border-bottom">
          <div class="d-flex justify-content-between align-items-start mb-1">
            <div class="d-flex align-items-baseline flex-nowrap">
              <span>{{$patient->displayName()}}</span>
              <?php $latestMemo = $patient->latestMemo(); ?>
              <div class="on-hover-show d-inline-block on-hover-opaque ml-2">
                <i class="fa fa-info-circle ml-1 {{$latestMemo ? '' : 'opacity-35'}}"></i>
                <div class="on-hover-content py-2 pl-3 text-nowrap text-dark" style="left:0;right:auto;">
                  @if($latestMemo)
                  <p class="mb-1 font-weight-bold text-secondary">Last Memo: {{$latestMemo->category}}</p>
                  <div class="text-wrap mb-1">{{$latestMemo->content}}</div>
                  <div class="text-secondary text-sm mb-1">{{friendly_date_time($latestMemo->created_at)}}</div>
                  @if($latestMemo->createdBy && $latestMemo->createdBy->pro)
                  <div class="text-secondary text-sm">By {{$latestMemo->createdBy->pro->displayName()}}</div>
                  @endif
                  @else
                  <div class="text-secondary">No client memos.</div>
                  @endif
                </div>
              </div>
            </div>
            <p class="m-0"># <a native target="_blank" href="{{route('patients.view.dashboard', $patient)}}">{{$patient->chart_number}}</a></p>
          </div>
            @if($pro->pro_type == 'ADMIN')
            <p class="mb-1"><b>MCP:</b> {{@$patient->mcp ? $patient->mcp->displayName() : '--'}}</p>
            @endif
          @include('app.patient.coverage_column_renderer', ['patient'=>$patient])
          @if($patient->mailing_address_city)
          <p class="m-0 mt-1"><i class="fas fa-map-marker"></i> {{$patient->mailing_address_city}}, {{$patient->mailing_address_state}}</p>
          @endif
        </div>
      @endif
    @endforeach
    <div class="px-3 py-2 border-top bg-light" style="position:sticky; bottom:0;">
      Showing <b>{{ count($patients) }}</b> patients
    </div>
  </div>
</div>
<div class="px-3 pt-3 d-flex align-items-center">
    {{$patients->withQueryString()->links()}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.min.js"></script>
<script>
    var patients = <?= json_encode($patients) ?>;
    (function () {
      function init() {
        var mapOptions = {
          center: {
            lat: 38.129469,
            lng: -101.111794
          },
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        var markers = [];
        var locations = [];
          patients = patients.data;
        for (var x = 0; x < patients.length; x++) {
          var patient = patients[x];
          if (patient.home_address_geo_lat && patient.home_address_geo_long) {
            var location = ['<center><a href="patients/view/'+ patient.uid +'"><strong>'+ patient.name_first + ' ' + patient.name_last +'</strong></a><br />', patient.home_address_geo_lat, patient.home_address_geo_long, 0]
            locations.push(location);
            addMarkers(locations);

          }
        };

        function addMarkers(_locations) {
          var infowindow = new google.maps.InfoWindow();
          for (var i = 0; i < _locations.length; i++) {
            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(_locations[i][1], _locations[i][2]),
              map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
              }
            })(marker, i));
            markers.push(marker);
            if (markers.length == patients.length) {
              callClusterer();
            }
          }
        };

        function callClusterer() {
          new MarkerClusterer(map, markers);
        }
      }
      window.init = init;

        addMCInitializer('admin-patients-maps', init, '#admin-patients-maps');
    }).call(window);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVKvrlQ6b-hFFLo6MdjHCnfUu3g_XtEuA&callback=init&v=weekly" defer></script>
