@extends('layouts.web_app')
@section('head')

	
@endsection
@section('breadcrumb')
<!-- CONTENT + SIDEBAR -->
<!-- <div class="tt-breadcrumb">
   <div class="container">
    <ul>
        <li><a href="{{route('frontpage')}}">Home</a></li>
        <li>Location</li>
    </ul>
  </div>
</div> -->
@endsection
@section('content')


<div class="container" style="margin-top: 30px;
    margin-bottom: 30px;" ng-init="pickupproductbranches('all');" ng-cloak>

<p style="margin-bottom: 10px;">Take advantage of our great-value products. Hurry to the nearest Primo now. To locate a branch closest to you, please go through our locations mentioned below. </p>



<div style="margin-bottom: 10px;" class="row">
     <div class="col-4 col-lg-4">
        <select
                class="form-control" ng-change="citychange()" ng-model="newuser.city">
                <option value="" disabled selected>Select City</option>
                <option ng-repeat="city in pickupbranch track by $index" value="{$city.id$}">{$city.city_name$}</option> 
        </select>
     </div>
     <div class="col-4 col-lg-4">
        <select
                class="form-control" ng-change="districtchange()" ng-model="newuser.district">
                <option value="" disabled selected>Select Branch</option>
                <option ng-repeat="city in district track by $index" value="{$city.id$}">{$city.branch_name$}</option> 
        </select>
     </div>
</div>
<div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0          rgba(0, 0, 0, 0.19);" class="row">
    <div class="col-12 col-lg-12">
        <div id="map2"></div>
            <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3ljV5IX7n6GnGT-1nHbXpfVofyUs29lY&callback=initMap2">
            </script>
    </div>
</div>
<script>
    var branchdetail ={};
    var citydetail = {};
function initMap2() {
    $.ajax({
      type: "GET",
      url: "api/pickupproductbranches",
      dataType: "json",
      contentType: "application/json",
      headers : { 'Authorization' : 'Bearer '+window.localStorage['token'] ,'Content-Type':'application/json'},
      success: function(data){
         var branchproduct = data.data;
          var map = new google.maps.Map(document.getElementById('map2'), {
            zoom: 9,
            center: new google.maps.LatLng(21.6037101,39.5097304),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
          })

          var infowindow = new google.maps.InfoWindow({})

          var marker, i,j
          var image ="http://142.93.215.221/primo/assets/pointer.png"
          for (i = 0; i < branchproduct.length; i++) {
            for(j = 0;j<branchproduct[i].city_branches.length;j++){
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(branchproduct[i].city_branches[j].latitude,branchproduct[i].city_branches[j].longitude),
              map: map,
              icon: image
            })

            google.maps.event.addListener(
              marker,
              'click',
              (function(marker, i,j) {
                return function() {
                  infowindow.setContent(branchproduct[i].city_branches[j].dukan_code+"-"+branchproduct[i].city_branches[j].branch_name+ '<br>' +branchproduct[i].city_branches[j].pincode)
                  infowindow.open(map, marker)
                  var scope = angular.element(document.getElementById('dashboards-analytics')).scope();
                  var retrunValue = scope.mapevent(branchproduct[i].city_branches[j]);
                }
              })(marker, i,j)
            )
          }
         }
      }
    });
}
function newmaplocation() {
         var branchproduct = branchdetail;
          var map = new google.maps.Map(document.getElementById('map2'), {
            zoom: 12,
            center: new google.maps.LatLng(branchproduct.latitude,branchproduct.longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
          })

          var infowindow = new google.maps.InfoWindow({})

          var marker, i
          var image ="http://142.93.215.221/primo/assets/pointer.png"
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(branchproduct.latitude,branchproduct.longitude),
              map: map,
              icon: image
            })

            google.maps.event.addListener(
              marker,
              'click',
              (function(marker, i) {
                return function() {
                  infowindow.setContent(branchproduct.dukan_code+"-"+branchproduct.branch_name+ '<br>' +branchproduct.pincode)
                  infowindow.open(map, marker)
                }
              })(marker, i)
            )
}
function citychangefn() {
  var branchproduct = citydetail;
  var map = new google.maps.Map(document.getElementById('map2'), {
    zoom: 10,
    center: new google.maps.LatLng(21.6037101,39.5097304),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  })

  var infowindow = new google.maps.InfoWindow({})

  var marker, i
  var image ="http://142.93.215.221/primo/assets/pointer.png"
  for (i = 0; i < branchproduct.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(branchproduct[i].latitude,branchproduct[i].longitude),
      map: map,
      icon: image
    })

    google.maps.event.addListener(
      marker,
      'click',
      (function(marker, i) {
        return function() {
          infowindow.setContent(branchproduct[i].dukan_code+"-"+branchproduct[i].branch_name+ '<br>' +branchproduct[i].pincode)
          infowindow.open(map, marker)
          var scope = angular.element(document.getElementById('dashboards-analytics')).scope();
          var retrunValue = scope.newdistrict(branchproduct[i]);
        }
      })(marker, i)
    )
 }
}
</script>
<style>
#map2 {
  height: 500px;  /* The height is 400 pixels */
  width: 100%;  /* The width is the width of the web page */
 }
</style>
</div>
@include('customer.footer')

	@endsection

    @section('js')  
                        
@endsection