@extends('layouts.public')

@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') }}">
<style>
	.ais-RefinementList-count { display: none;}
</style>

<div class="row loop-div pl-3 pr-3" >
	<div class="col-lg-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-sm-3" id="facets">
		<h5 class="text-bolder">Refine your search</h5><span id="clear-refinements"></span>
		<hr/>
		<div id="facet-objectType" class="my-2" style="display:none"></div>
		<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">Experience Level</h5>
		<div id="facet-experience-level" class="my-2"></div>	
		<h5 class="text-bolder">Employment Type</h5>
		<div id="facet-preferred-employment" class="my-2"></div>	
		<div id="facet-city" class="my-2"></div>
		<div id="facet-organization" class="my-2"></div>		
		@include('public.jobs.adsListing')
	</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 = algoliaJobInfo(); @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();
	$('.ajax-loader').css("visibility", "visible");
	var type = $(this).data('type');
	var id = $(this).data('id');

	if((type == 'Job' || type == 'Jobs')  && id != ""){
		url = '{{url("jobs")}}/'+ id;
	}
if (typeof id === 'undefined'){
	return false;
}
	$.get(url,function(data){
		if(data.html == ""){
			$('.ajax-loader').css("visibility", "hidden");  

			toastr.error(data.message);
			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-jobs.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