@extends('layouts.private')

@section('content')
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/algolia.css') }}">

<div class="row loop-div" >
	<div class="col-md-9">
		<div  class="row">
			<div class="col-lg-12 m-0 p-1" id="searchbox"></div>
		</div>
		<div id="hits" class="row"></div>
		<div id="pagination"></div>
	</div>

	<div class="col-md-3" id="facets">
		<h5 class="text-bolder">What are you looking for?</h5>
		<div id="facet-objectType" class="my-2"></div>
		<!--h4>Type</h4>
		<div id="facet-type"></div>
		<hr/-->		
		<h5 class="text-bolder">Technology</h5>
		<div id="facet-technology" class="my-2"></div>
		<h5 class="text-bolder">Domain</h5>
		<div id="facet-domain" class="my-2"></div>
		<h5 class="text-bolder">Position</h5>
		<div id="facet-position" class="my-2"></div>
		<h5 class="text-bolder">Country</h5>
		<div id="facet-country" class="my-2"></div>
		<h5 class="text-bolder">City</h5>
		<div id="facet-city" class="my-2"></div>
		<h5 class="text-bolder">Companies</h5>
		<div id="facet-organization" class="my-2"></div>
		<br/>
		<div id="clear-refinements"></div>
	</div>
</div>
 <!-- Modal 
 <div class="modal fade right" id="detailPopup" role="dialog" data-backdrop="static" data-keyboard="false">

                    
<div class="modal-dialog modal-full-height modal-right" role="document">
			<div class="modal-content" id="detailPopup_inner">
            <button class="btn btn-primary backDetailPopup" type="button" onclick="closePopup('detailPopup')"><i class="fa fa-arrow-left"></i> Back</button>

				<div class="modal-body detailBody">
				</div>
			</div>
		</div>
	</div>
	 modal -->

@php $algoliaInfo = algoliaInfo() @endphp

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script>
$('body').on('click', '.section', function(e){
	e.preventDefault();
	var type = $(this).data('type');
var id = $(this).data('id');
	if(type == 'company' && id != ""){
	return false;
}
	$('.ajax-loader').css("visibility", "visible");

url = '';

if((type == 'Job' || type == 'Jobs')  && id != ""){
	url = '{{url("marketplace/jobs/view")}}/'+ id;
}
if(type == 'People' && id != ""){
	url = '{{url("marketplace/people/view")}}/'+ id;
}

	$.get(url,function(data){
		if(data.html == ""){
			$('.ajax-loader').css("visibility", "hidden");  
			return false;
		}
		$('#detailPopup').find('.detailBody').html(data.html);
           $('#detailPopup').modal();
      
      //appending modal background inside the bigform-content
        $('.modal-backdrop').appendTo('.bigform-content');
      //removing body classes to able click events
      $('body').removeClass();
      $('body').addClass('detailPopup');
      $('body').removeAttr("style");
        $('.modal-backdrop.show').remove();
		$('.ajax-loader').css("visibility", "hidden");  
	
	})
});

$('body').on('click', '.backRequest', function(e){

	e.preventDefault();
	$('.ajax-loader').css("visibility", "visible");
	$('.detailSection').slideUp(1000);
		$('.loadDetailData').html('');
		$('.loop-div').show(1000);
		$('.ajax-loader').css("visibility", "hidden");
})


var marketplaceAppId="{{$algoliaInfo['ALGOLIA_APP_ID']}}";
var marketplaceAppKey="{{$algoliaInfo['ALGOLIA_API_KEY']}}";
var marketplaceAppIndex="{{$algoliaInfo['ALGOLIA_INDEX_NAME']}}";
var url = "{{url('/')}}";
</script>
<script src="{{ asset('js/algolia.js') }}"></script>

<div class="detailSection" style="display:none">
<a href="javascript:;" class="backRequest"><i class="fa fa-chevron-left"></i> Back</a>

<div class="loadDetailData">


</div>
</div>
@endsection