@extends('layouts.internal')

@section('content')
@section('breadcrumb')
<div class="c-subheader justify-content-between px-3">
<ol class="breadcrumb border-0 m-0 px-0 px-md-3">
<li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
@if(url()->previous() != url()->current())
<li class="breadcrumb-item"><a href="{{url()->previous()}}">&leftarrow; Previous Page</a></li>
@endif						
<li class="breadcrumb-item" aria-current="page">Companies</li>
</ol>
</div>
@endsection
<div class="container">
	<form id="filtersForm">
		<div class="row ">
			<div class="col-12 text-right mb-4">
				<div class="btn-group">
					<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Sort by
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<input type="hidden" name="sort" id="sort"> 
						<a class="dropdown-item" onclick="searchFilters('company')" href="javascript:;">Company Name</a>
						<a class="dropdown-item" onclick="searchFilters('people')" href="javascript:;">People</a>
						<a class="dropdown-item" onclick="searchFilters('jobposting')" href="javascript:;">Job Postings</a>
					</div>				
				</div>
			</div>
		</div>
	</form>
	<div class="row">
		<div class="col-2">
			<strong>Actions:</strong>
			<p>
				<a href="#">No new action</a>
				<!--form id="filtersForm">
		            <input type="text" class="form-control" name="search" placeholder="Search Organizations">
        		     <input type="button" name="search" value="Search"  onclick="searchFilters()" class="btn btn-primary margintop">
            	</form-->
			</p>
		</div>
		<div class="col-7">
		
			<h4 class="p-0 m-0 p-0 mb-2"><strong>Companies</strong></h4>
			<div class="ajax-load">
			@include('internal.organizations.listing')
		</div>
		</div>
		<div class="col-3">
			Advertisement space
		</div>
	</div>
</div>


@section('script')
<script>
var url = "{{url('organizations')}}";
var page = 1;
	$(window).scroll(function() {
	    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
	        page++;
	        loadMoreData(page);
	    }
	});
	function loadMoreData(page){
		let filters = $('#filtersForm').serializeArray();
		$.get('?page=' + page, filters, function(data){
				$('.ajax-load').append(data.html);
			});
	}

	function searchFilters(type){
		$('#sort').val(type);
		let filters = $('#filtersForm').serializeArray();
			$.post("{{route('organizationFilters')}}",filters, function(data){
				$('.ajax-load').html(data.html);
			});
		page = 1;

	}
</script>


@endsection
@endsection