@php
    use App\MemberListingModel;
	$memberInstance = new MemberListingModel();
    use App\MasterModel;
    $master_instance = new MasterModel();
    use App\classifiedModel;
    $classifiedModelInstance = new classifiedModel();
    use App\DashboardModel;
   $dashboardModelInstance = new DashboardModel();
@endphp
@php
$api_key = $dashboardModelInstance->get_API_key();
@endphp

<style type="text/css">
	#country-list {
		float: left;
		list-style: none;
		margin-top: 0px;
		padding: 0;
		width: 100%;
	}
	#country-list li {
		padding: 10px;
		background: #f0f0f0;
		border-bottom: #bbb9b9 1px solid;
	}
	#country-list li:hover {
		background: #ece3d2;
		cursor: pointer;
	}
	.ch_name {
		display: block;
		z-index: 9;
		border: 10px solid #f0f0f0;
		background-color: #f0f0f0;
		left: 58%;
	}
</style>

<div class="col-xl-3 col-lg-4 col-md-12">
    <div class="card">
        <form action="{{url('/book-dvds-elearning-filter')}}" method="get">
            <div class="card-header">
                <h3 class="card-title">Books, DVDs & E Learning Search</h3>
            </div>
            <div class="card-body">
                <div class="" id="">
                    @php
                    $category_name = $classifiedModelInstance->display_bookdvdselearning_Categories();
                    $cat_array = explode(",",$category_name->feature_categories);
                    $member_name = $classifiedModelInstance->display_bookdvdselearning_member();
                @endphp
                    <div class="form-group">
                        <label for="keyword" class="control-label">Posted by Member</label>
                        {{-- <input type="text" placeholder="Member Name" name="member_name" class="form-control" id="memberName" onkeyup="getAllrelatedNames('memberName')" autocomplete="off" >
                        <div class="ch_name" style="display: none;overflow: scroll;"></div> --}}
                        <select class="form-control select2" name="member_name">
                            <option value="">Select Member</option>
                                @foreach($member_name as $member)
                                <option value="{{$member->first_name}} {{$member->last_name}}">{{$member->first_name}} {{$member->last_name}}</option>
                                @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="keyword" class="control-label">Keyword</label>
                        <input type="text" class="form-control br-tl-7 br-bl-7" name="cls_name" placeholder="Name" value="{{$cls_name}}">
                    </div>
                   
                    <div class="form-group">
                        <label>Search Category</label>
                        <select class="form-control select2" name="category[]" multiple="">
                            <option value="">Select Category</option>
                            @for($i = 0; $i< sizeof($cat_array); $i++)
                            @if($category!=NULL)
                            <option value="{{$cat_array[$i]}}" {{in_array($cat_array[$i] , $category) ? 'selected="selected"' : ''}}>{{$cat_array[$i]}}</option>
                            @else
                            <option value="{{$cat_array[$i]}}">{{$cat_array[$i]}}</option>
                            @endif
                            @endfor
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="keyword" class="control-label">Location</label>
                        <input type="text" class="form-control br-tl-7 br-bl-7" name="location" id="autocomplete" placeholder="Search Location(Optional)" value="{{$location}}">
                        <input type="hidden" name="country_sn" id ="country_code">
						<input type="hidden" name="county_sn" id ="administrative_area_level_2">
						<input type="hidden" name="stateSearchLN" id ="administrative_area_level_1">
						<input type="hidden" name="country" id ="country">
						<input type="hidden" name="lat" id ="lat">
						<input type="hidden" name="lon" id ="lng">
                    </div>
                </div>
            </div>
            <div class="card-header border-top">
                <h3 class="card-title">Price Range</h3>
            </div>
            <div class="card-body">
                <h6>
                <label for="price">Price Range:</label>
                <input type="text" id= "price" name="price"  value="{{$price}}">
                </h6>
                <div id="mySlider"></div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-secondary btn-block">Apply Filter</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    function getAllrelatedNames(id) {
        var keyword = $('#' + id).val();

        var token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ url('/') }}/all-bookdvdselearning-membername",
            type: "POST",
            data: {
                '_token': token,
                'keyword': keyword,
            },
            success: function(data) {
                if (data != '') {
                    $(".ch_name").show();
                    $(".ch_name").html(data);
                    $(".ch_name").css("background", "#FFF");
					$(".ch_name").css("max-height", "200px");
                } else {
                    $(".ch_name").hide();
                }
            },
            error: function(data) {
                console.log(data);
            }
        });
    }

    /*
     * Related to autosuggest names of categories.
     */
    function selectCategories(first_name,last_name) {
		if(first_name != "" && last_name != ""){
			name= first_name.concat(" ",last_name);
			$("#memberName").val(name);
			$(".ch_name").hide();
		}
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{$api_key->result}}&libraries=places"></script>
<script>
	function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    // document.getElementById(component).value = '';
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
	// alert(addressType);
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
    //   document.getElementById(addressType).value = val;
    }
    // for the country, get the country code (the "short name") also
    if (addressType == "country") {
      document.getElementById("country_code").value = place.address_components[i].short_name;
	  document.getElementById("country").value = place.address_components[i].long_name;
    }
	if (addressType == "locality") {
      document.getElementById("locality").value = place.address_components[i].long_name;
	//   document.getElementById("country").value = place.address_components[i].long_name;
    }
	if (addressType == "administrative_area_level_2") {
      document.getElementById("administrative_area_level_2").value = place.address_components[i].long_name;
	//   document.getElementById("country").value = place.address_components[i].long_name;
    }
	if (addressType == "administrative_area_level_1") {
      document.getElementById("administrative_area_level_1").value = place.address_components[i].long_name;
	//   document.getElementById("country").value = place.address_components[i].long_name;
    }
  }
}

var placeSearch, autocomplete;
var componentForm = {
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  sublocality_level_2: 'long_name',
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement}     */
    (document.getElementById('autocomplete')));

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  // Get Latitude and longitude
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    document.getElementById('lat').value = place.geometry.location.lat();
    document.getElementById('lng').value = place.geometry.location.lng();
    fillInAddress();
  });
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>