@extends('admin.includes.app')
@push('page_external_css')

@section('content')
<style>
    .header-top{
        display:none;
    }
</style>
      <div class="row">
         <div class="col">
          <div class="card">
            <div class="card-body primary_background">
              <div class="d-flex justify-content-center">
                <h5 class="card-title">Map Location</h5>
              </div>
            </div>
          </div>
         </div>
      </div>
      
      <div class="row">
        <div class="col-md-12">
          
          <div class="card">
            <div class="card-body">
              <div class="row">
                <form action="{{route('admin.map-location')}}" method="get" class="w-100">
                  <div class="col-md-2 float-left">
                    <div class="form-group">
                      <label>Brands</label>
                      <select class="form-control" name="brand" id="brand">
                        <option value="">Select brand</option>
                        @foreach($Brands as $key=>$value)
                          <option @if(app('request')->input('brand')==$value->brand_name) selected @endif value="{{$value->brand_name}}">{{$value->brand_name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-md-2 float-left">
                    <div class="form-group">
                      <label>Village Code / Village Name</label>
                      <select class="form-control" name="village_code" id="village_code">
                        <option value="">Select Village Code / Village Name</option>
                        @foreach($VillageCode as $Vkey=>$Vvalue)
                          <option @if(app('request')->input('village_code')==$Vvalue->village_code) selected @endif value="{{$Vvalue->village_code}}">{{$Vvalue->village_code}} - {{$Vvalue->village_name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <!--<div class="col-md-2 float-left">-->
                  <!--  <div class="form-group">-->
                  <!--    <label>Wall No. A</label>-->
                  <!--    <select class="form-control" name="wall_a" id="wall_a">-->
                  <!--      <option value="">Select Wall No. A</option>-->
                  <!--    </select>-->
                  <!--  </div>-->
                  <!--</div>-->
                  <!--<div class="col-md-2 float-left">-->
                  <!--  <div class="form-group">-->
                  <!--    <label>Wall No. B</label>-->
                  <!--    <select class="form-control" name="wall_b" id="wall_b">-->
                  <!--      <option value="">Select Wall No. B</option>-->
                  <!--    </select>-->
                  <!--  </div>-->
                  <!--</div>-->
                  <!--<div class="col-md-2 float-left">-->
                  <!--  <div class="form-group">-->
                  <!--    <label>Wall No. ABC</label>-->
                  <!--    <select class="form-control" name="wall_abc" id="wall_abc">-->
                  <!--      <option value="">Select Wall No. ABC</option>-->
                  <!--    </select>-->
                  <!--  </div>-->
                  <!--</div>-->
                  <div class="col-md-2 float-left">
                    <input type="submit" class="btn btn-success" value="Search" style="margin-top:32px;">
                  </div>
                </form>
                <div id="map-canvas" style="width:100%;height:100vh;overflow: hidden;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>


@endsection
@push('page_external_script')
    
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDZ6-4q6SVGEzxA9TP01_jp_CiSMkoIhP0&callback=initialize"></script>
<script>
  // necessary variables
  var map;
  var infoWindow;
  var markers = [];

  // markersData variable stores the information necessary to each marker
  /*var markersData = [
     {
        lat: 40.6386333,
        lng: -8.745,
        image: "http://127.0.0.1:8000/dashboard/assets/logo/macoutdoorlogo.jpg",
        name: "Jayasurya Tex",
        address1:"Anna strret",
        address2: "Chennai",
        postalCode: "625789" // don't insert comma in the last item of each marker
     },
     {
        lat: 40.59955,
        lng: -8.7498167,
        name: "Ram Tex",
        address1:"65 Kovalan strret",
        address2: "Chennai",
        postalCode: "625001" // don't insert comma in the last item of each marker
     },
     {
        lat: 40.6247167,
        lng: -8.7129167,
        name: "Niva Tex",
        address1:"75 small bazar street",
        address2: "Trichy",
        postalCode: "698547" // don't insert comma in the last item of each marker
     } // don't insert comma in the last item
  ];*/

  var markersData = @php echo str_replace("&quot;","'",json_encode($FnRecords)); @endphp;
  console.log("markersData = ",markersData);

  function initialize() {
     var mapOptions = {
        center: new google.maps.LatLng(40.601203,-8.668173),
        zoom: 9,
        mapTypeId: 'roadmap',
     };

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     // a new Info Window is created
     infoWindow = new google.maps.InfoWindow();

     // Event that closes the Info Window with a click on the map
     google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
     });

     // Finally displayMarkers() function is called to begin the markers creation
     displayMarkers();
  }

  // This function will iterate over markersData array
  // creating markers with createMarker function
  function displayMarkers(){

     // this variable sets the map bounds according to markers position
     var bounds = new google.maps.LatLngBounds();

     // for loop traverses markersData array calling createMarker function for each marker 
     for (var i = 0; i < markersData.length; i++){

        var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
        var image = markersData[i].image;
        var name = markersData[i].name;
        var address1 = markersData[i].address1;
        var address2 = markersData[i].address2;
        var postalCode = markersData[i].postalCode;
        var status = markersData[i].status;
        var wall_number = markersData[i].wall_number;
        var village_name = markersData[i].village_name;
        var brand_name = markersData[i].brand_name;
        console.log(markersData[i].brand);
        createMarker(latlng, image, name, address1, address2, postalCode, status, wall_number, village_name, brand_name);

        // marker position is added to bounds variable
        bounds.extend(latlng);  
     }

     // Finally the bounds variable is used to set the map bounds
     // with fitBounds() function
     map.fitBounds(bounds);
  }

  // This function creates each marker and it sets their Info Window content
  function createMarker(latlng, image, name, address1, address2, postalCode, status, wall_number, village_name,brand_name){
     var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: name,
     });
     
     marker.tag = address2;
     markers.push(marker);

     // This event expects a click on a marker
     // When this event is fired the Info Window content is created
     // and the Info Window is opened.
     google.maps.event.addListener(marker, 'click', function() {

        // Creating the content to be inserted in the infowindow
        /*var iwContent = '<div id="iw_container">' +
              '<div class="iw_title"><img src="'+image+'" style="height: 200px;width: 100%;"></div>' +'<div class="iw_title">' + name + '</div>' +
           '<div class="iw_content">' + address1 + '<br />' +
           postalCode + '</div></div>';*/
      var iwContent = '<div class="card"><div class="card-body0" style="width:500px;"><div class="row"><div class="col-md-8"><div class="wall-image"><img src="'+image+'" class="w-100" style="height: 250px;"></div></div><div class="col-md-4"><div class="wall-info"><p class="m-0 p-0" style="color:#A00405;font-weight: bold;font-size: 15px;margin-bottom: 5px !important;"><strong>Status : '+status+'</strong></p><p class="m-0 p-0" style="color:#A00405;font-weight: bold;font-size: 15px;margin-bottom: 5px !important;"><strong>Brand : '+brand_name+'</strong></p><p class="m-0 p-0" style="color:#A00405;font-weight: bold;font-size: 15px;margin-bottom: 5px !important;"><strong>Village : '+village_name+'</strong></p><p class="m-0 p-0" style="color:#A00405;font-weight: bold;font-size: 15px;margin-bottom: 5px !important;"><strong>Wall No. : '+wall_number+'</strong></p><p class="m-0 p-0" style="color:#A00405;font-weight: bold;font-size: 15px;margin-bottom: 5px !important;"><strong>Distance. : 0 Mts</strong></p></div></div></div></div></div>';

        // including content to the Info Window.
        infoWindow.setContent(iwContent);

        // opening the Info Window in the current map and at the current marker location.
        infoWindow.open(map, marker);
     });
  }

  function filterMarkersByTag(tagName) {
      var bounds = new google.maps.LatLngBounds();
      
      markers.forEach(function(marker) {
          marker.setMap(null);
      });

      var filtered = markers.filter(function(marker) {
          return marker.tag === tagName;
      }); 
      
      if (filtered && filtered.length) {
          filtered.forEach(function(marker) {
              bounds.extend(marker.getPosition());
              marker.setMap(map);
          });

          map.fitBounds(bounds);
      }
  }
  
</script>
<script type="text/javascript">
  $(document).ready(function(){
    $('body').on('change','#brand',function(){
      var BrandName = $(this).val();
      $.ajax({
        url: "{{route('admin.brand-reports')}}",
        type:'POST',
        data: {brand_name:BrandName,_token:"{{csrf_token()}}"},
        success: function(data) {
          //console.log(data);
          var VillageCode = '<option value="">Select Village Code</option>';
          var WallNumber  = '<option value="">Select Wall Number</option>';
          $.each(data.data, function (key, val) {
              console.log(val);
              WallNumber += '<option value="'+val.id+'">'+val.wall_number+'</option>';
          });
          $.each(data.village_code, function (key, val) {
              console.log(val);
              VillageCode += '<option value="'+val.village_code+'">'+val.village_code+'-'+val.village_name+'</option>';
          });
          $('#village_code').html(VillageCode);
          $('#wall_a').html(WallNumber);
          $('#wall_b').html(WallNumber);
          $('#wall_abc').html(WallNumber);
        },
        error: function(data) {
          var errors = data.responseJSON;
          console.log(errors);
        }
      })
    })
  })
</script>
@endpush