@extends('layouts.master')
@section('title','Buyer Dashboard')
@section('content')
  @include('partials.headerbanner',['title'=>"Product
List",'banner' => asset('images/product-list-bnr.jpg')])
  @include('partials.header')
<div class="dash-middle pad30"> 
  <div class="prd-list-outer">
    <div class="prd-frm d-flex">
      <div class="box-lt">
        <h2>Products List</h2> 
      </div>
      <div class="prd-rt-frm cmn-form">
        <label class="f-wd1 ">Product Filters</label>
        <div class="f-wd2 "><input id="min_price" type="number" min="0" step="1" class="form-control numeric-field" placeholder="Min Price"></div>
        <div class="f-wd3 ">to</div>
        <div class="f-wd2"><input id="max_price" type="number" min="0" step="1" class="form-control numeric-field" placeholder="Max Price"></div>
      
        <div class="f-wd4 relative lcn-block">
          {{ Form::text('full_address', old('full_address'), ['class' => 'form-control','id' => 'full_address','placeholder' => 'Enter Your Address']) }}<img src="{{asset('images/icon41.png')}}" data-toggle="tooltip" title="Click here to get current location"
            class="geolocation lcn-img"> {{ Form::hidden('address_line_1', old('address_line_1'), ['id' => 'street_number'])
          }} {{ Form::hidden('address_line_2', old('address_line_2'), ['id' => 'route']) }} {{ Form::hidden('city', old('city'),
          ['id' => 'locality']) }} {{ Form::hidden('state', old('state'), ['id' => 'administrative_area_level_1']) }} {{
          Form::hidden('latitude', old('latitude'), ['id' => 'latitude', 'class' => 'form-control','readonly' => true]) }}
          {{ Form::hidden('longitude', old('longitude'), ['id' => 'longitude', 'class' => 'form-control','readonly' => true])
          }}
        </div>
        <div class="f-wd4"><input id="keyword" name="keyword" type="text" value="{{ isset($_REQUEST['query_string'])?$_REQUEST['query_string']:'' }}"
            class="form-control" placeholder="Key word type"></div>
      </div>
    </div>
    <div class="bg-white prd-list-block prod_list_section">
  @include('productmanager::product_list_table',['products'])
    </div>
  </div>
</div>

@stop
@section('script_per_page')
<script>
  
  function product_filter(pageurl=null)
    {
      var min_price =($.trim($('#min_price').val())!='')?parseInt($('#min_price').val()):'';
      var max_price = ($.trim($('#max_price').val())!='')?parseInt($('#max_price').val()):'';
      var keyword = $('#keyword').val();
      var address = $('#full_address').val();
     var action='';
      @if(!empty($supplierId))
      action="{{ route('product-list-ajax',$supplierId) }}";
      @else
      action="{{ route('product-list-ajax') }}";
      @endif
       if(min_price!='' && max_price!='' && min_price>max_price)
     {
      $.alert({
        columnClass: 'medium',
        title: 'Error',
        icon:  'fa fa-warning',
        type:  'red',
        content: "min price cannot be greater than max price",
        });

        $('#min_price').val('');
        $('#max_price').val('');
        product_filter();
      return false;
     }
     if($.trim($("#full_address").val())=='')
     {
      $('#latitude').val('');
      $('#longitude').val('');
     }
     var lat=$('#latitude').val();
     var long=$('#longitude').val();
var actionurl= (pageurl==null)?action:pageurl;

      $.ajax({
        url:actionurl,
        type: 'post',
        dataType: 'html',
        data:{min_price:min_price,max_price:max_price,keyword:keyword,address:address,lat:lat,long:long},
        headers: {
            "accept": "application/json",
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (data) {
$(".prod_list_section").html(data);
 },
        error: function (xhr, ajaxOptions, thrownError) {
          $.alert({
                columnClass: 'medium',
                title: 'Error',
                icon:  'fa fa-warning',
                type:  'red',
                content: thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText,
                });
        }
    });

    }
    $(document).ready(function(){
      $(document).off('click','.req_quote').on('click','.req_quote',function(){
        requestQuote($(this).data("product_id"));

      });
     


      $("#min_price,#max_price,#keyword").on('change',function(){
        $("#query_string").val($('#keyword').val());
        product_filter();
        return false;
      });
      $("#full_address").on('change',function(){
        setTimeout(function(){ product_filter();  }, 300);
        return false;
      });
      $(document).off('click','.product-pagination a').on('click','.product-pagination a',function(){
        product_filter($(this).attr('href'));
        return false;
      });
    });


function initDefault(){
  initlatLong(1);
}
$('img.geolocation').on("click", function() {
      initlatLong(1);
      setTimeout(function(){product_filter();   }, 300);
  });
function initlatLong(show){
if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
      } else {
          if(show==1){
             alert('Geo Location is not supported');
          }
      }
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var geocoder = new google.maps.Geocoder;

    geocodeLatLng(geocoder, lat, lng);
    $("#latitude").val(lat);
    $("#longitude").val(lng);
    $("#venue_id").val('');
}

function geocodeLatLng(geocoder, lat, lng) {
        var latlng = {lat: lat, lng: lng};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
               var address = results[0].formatted_address;
             $('#full_address').val(address);
            } else {
              alert('No results found');
            }
          } else {
            alert('Geocoder failed due to: ' + status);
          }
        });
      }

    
                                                          // This sample uses the Autocomplete widget to help the product select a
                                                          // place, then it retrieves the address components associated with that
                                                          // place, and then it populates the form fields with those details.
                                                          // This sample requires the Places library. Include the libraries=places
                                                          // parameter when you first load the API. For example:


  var placeSearch, autocomplete;
  var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
          // country: 'long_name',
          //postal_code: 'short_name'
      };
      function initAutocomplete() {
          // Create the autocomplete object, restricting the search predictions to
          // geographical location types.
          var autocomplete = new google.maps.places.Autocomplete(
                  document.getElementById('full_address'), {
                      types: ['geocode']});

          
          // Avoid paying for data that you don't need by restricting the set of
          // place fields that are returned to just the address components.
          autocomplete.setFields(['address_components', 'geometry']);

          // When the user selects an address from the drop-down, populate the
          // address fields in the form.
          autocomplete.addListener('place_changed', function() {
              var place = autocomplete.getPlace();
              for (var component in componentForm) {
                  console.log(component);
                  document.getElementById(component).value = '';
                  document.getElementById(component).disabled = false;
              }

              console.log(autocomplete.getPlace());
              // Get each component of the address from the place details,
              // and then fill-in the corresponding field on the form.
              if (place != undefined) {
                  console.log(place.geometry);
                  var lat = place.geometry.location.lat();
                  var lng = place.geometry.location.lng();
                  document.getElementById("latitude").value = lat;
                  document.getElementById("longitude").value = lng;

                  for (var i = 0; i < place.address_components.length; i++) {
                      var addressType = place.address_components[i].types[0];
                      if (componentForm[addressType]) {
                          var val = place.address_components[i][componentForm[addressType]];
                          document.getElementById(addressType).value = val;
                      }
                  }
              }
          });
         
      }

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
      console.log(component);
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
  }

  console.log(autocomplete.getPlace());
  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  if (place != undefined){

      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();
      document.getElementById("latitude").value = lat;
      document.getElementById("longitude").value = lng;
      for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
              var val = place.address_components[i][componentForm[addressType]];
              document.getElementById(addressType).value = val;
          }
      }
  }
}

  // Bias the autocomplete object to the product's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
              var geolocation = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
              };
              var circle = new google.maps.Circle(
                  {center: geolocation, radius: position.coords.accuracy});
              autocomplete.setBounds(circle.getBounds());
          });
      }
  }

  $('#full_address').keypress(function(e) {
      if (e.which == 13) {
       //   google.maps.event.trigger(autocomplete, 'place_changed');
          return false;
      }
  });

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXZKrj9Z9SBgjD1E9CTk5f4d5rh0Mwvcc&libraries=places&callback=initAutocomplete"
  async defer></script>













@stop