@extends('layouts.app')

@section('title')

Reviewer Search

@parent

@stop

{{-- page level styles --}}

@section('header_styles')

@stop
{{-- Page content --}}
@section('content')
<style>
	#collapse-country .custom-control {
		min-height: auto;
	}

	#collapse-country .card {
		border-top-right-radius: 0 !important;
		border-top-left-radius: 0 !important;
		height: 400px;
		margin-top: -2px;
	}

	ul.cloud {
		list-style: none;
		padding-left: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		line-height: 1.5rem;
		width: 100%;
	}

	ul.cloud span {
		--size: 4;
		--color: #a33;
		color: var(--color);
		font-size: calc(var(--size) * 0.25rem + 0.5rem);
		display: block;
		padding: 0.125rem 0.25rem;
		position: relative;
		text-decoration: none;
	}

	ul.cloud span[data-weight="1"] {
		--size: 1;
	}

	ul.cloud span[data-weight="2"] {
		--size: 1.5;
	}

	ul.cloud span[data-weight="3"] {
		--size: 2;
	}

	ul.cloud span[data-weight="4"] {
		--size: 2.5;
	}

	ul.cloud span[data-weight="5"] {
		--size: 3;
	}

	ul.cloud span[data-weight="6"] {
		--size: 3.5;
	}

	ul.cloud span[data-weight="7"] {
		--size: 4.5;
	}

	ul.cloud span[data-weight="8"] {
		--size: 6;
	}

	ul.cloud span[data-weight="9"] {
		--size: 7;
	}

	ul[data-show-value] span::after {
		content: " (" attr(data-weight) ")";
		font-size: 0.7rem;
	}

	ul.cloud li:nth-child(2n+1) span {
		--color: #181;
	}

	ul.cloud li:nth-child(3n+1) span {
		--color: #33a;
	}

	ul.cloud li:nth-child(4n+1) span {
		--color: #c38;
	}

	ul.cloud span:focus,
	ul.cloud span:hover {
		cursor: pointer;
	}

	ul.cloud span::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 0;
		height: 100%;
		background: var(--color);
		transform: translate(-50%, 0);
		opacity: 0.15;
		transition: width 0.25s;
	}

	ul.cloud span:focus::before,
	ul.cloud span:hover::before {
		width: 100%;
	}

	@media (prefers-reduced-motion) {
		ul.cloud * {
			transition: none !important;
		}
	}
</style>
<script>
	$(document).ready(function() {
		$("#countryInput").on("keyup", function() {
			var value = $(this).val().toLowerCase();
			$(".custom-control-label").filter(function() {
				$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1);
			});
		});
	});
</script>

<section class="pt-4" id="listing-search">
	<div class="container">
		<div class="row">
			<div class="col-md-12 text-white">
				<h1 class="h3">
					Search
				</h1>
				<hr>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<div class="card bigbox-hvr-slow">
					<div class="card-body">
						<form action="{{ route('reviewerfinder', ['parameter' => 'afc43a1-dd72a4515']) }}" enctype="multipart/form-data" method="post">
							<input type="hidden" name="_token" value="{{ csrf_token() }}">
							<div class="row align-items-center col-md-10 mx-auto">
								<h5 class="col-12 col-md-3 col-lg-2 text-dark text-left border-right pt-4 h-100 m-0">
									Find a Reviewer
								</h5>

								<div class="col-md-9 col-lg-10 pr-0">
									<label class="mr-3">
										<input type="radio" name="searchOption" value="keywords" {{ $searchOption == 'keywords' ? 'checked' : ''}}> Search by keywords
									</label>
									<label>
										<input type="radio" name="searchOption" value="abstract" {{ $searchOption == 'abstract' ? 'checked' : ''}}> Search by title or abstract
									</label>

									<div class="input-group input-group-lg pull-right">
										<div id="keywordDiv" class="col-md-10 p-0">
											<input class="form-control" name="keywords" autocomplete="off" autocorrect="off" type="text" placeholder="Enter keyword" @if($searchOption=="keywords" ) value="{{$reviewerSearch}}" @endif id="keywords-input">
											<div class="col-md-12 alert alert-info mx-auto mt-2">
												<strong>Note: </strong>
												Use quotation marks (" ") to find an exact phrase (e.g. "baryon decay"). Use pipesign (" | ") to find anyone of these keywords (e.g. diabetes|lipids).
											</div>
										</div>

										<div id="abstractDiv" class="col-md-10 p-0" style="display: none;">
											<textarea class="form-control" name="abstract" placeholder="Enter abstract..." rows="2" minlength="10" maxlength="2000" id="abstract-textarea">@if($searchOption == "abstract") {{$reviewerSearch}} @endif</textarea>
											<p>Maximum 500 words</p>
										</div>
										<div class="input-group-prepend col-md-2 h-25 p-0">
											<button class="btn btn-info btn-block mr-2" value="reviewer_search" name="reviewer_search" type="submit">Search</button>
											<a href="{{route('reviewerfinder', ['parameter' => 'afc43a1-dd72a4515'])}}" class="btn btn-secondary mr-2" type="submit">Reset</a>
										</div>
									</div>
								</div>
							</div>
					</div>
				</div>
				@if(!empty($occurences))
				<div class="card card-body bigbox-hvr-slow mt-3">
					<h5 class="mb-2 pb-2 border-bottom ">Search Words</h5>
					<ul class="cloud" role="navigation" aria-label="Webdev word cloud">
						@foreach($occurences as $key => $words)
						@php
						$random = rand(1, 9); // Full range for top position within the box
						@endphp
						<li><span data-weight="{{$random}}" class="word-cloud-item">{{ $words }}</span></li>
						@endforeach
					</ul>
				</div>
				@endif

			</div>
		</div>
	</div>
	</div>
</section>

<main>
	<section>
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-3 mb-3">
					<div class="bg-siteblue py-4 px-3">
						<div class="text-white">
							<h5>Journal</h5>
							<select class="form-control select2" id="journal_code" name="journal_code">
								<option selected="true" value="">Select Journal</option>
								@foreach($journal_list as $journal)
								<option value="{{$journal->jms_jcode}}" @if(isset($param['journal_code']) && $journal->jms_jcode == $param['journal_code']) selected @endif>{{$journal->title}}</option>
								@endforeach
							</select>
						</div>
						<div class="text-white mt-3">
							<h5>Country</h5>
							<a class="btn btn-light text-dark font-14 d-block text-left" data-toggle="collapse" data-target="#collapse-country" aria-expanded="false" aria-controls="collapse-country">
								Select Country <i class="fa-solid fa-arrow-right-arrow-left fa-rotate-90 float-right mt-1"></i>
							</a>
							<div class="collapse text-dark" id="collapse-country">
								<input type="text" id="countryInput" class="form-control form-control-sm" placeholder="Search Country">
								<div class="card card-body py-3 px-2 rounded overflow-auto">
									@foreach($country_list as $country)
									<div class="custom-control custom-checkbox border-bottom mb-1 pb-1">
										<input name="country_name[]" type="checkbox" class="custom-control-input" id="{{$country->printable_name}}" value="{{$country->printable_name}}" @if(isset($param['country_name']) and in_array($country->printable_name, $param['country_name'])) checked @endif>
										<label class="custom-control-label" for="{{$country->printable_name}}">{{$country->printable_name}}</label>
									</div>
									@endforeach
								</div>
							</div>
						</div>
						<div class="text-white mt-3">
							<h5>H-Index Above</h5>
							<select class="form-control select2" id="h_index" name="h_index">
								<option selected="true" value="">Select H-Index Above</option>
								<option value="5" @isset($param['h_index']) @if($param['h_index']==5) selected @endif @endisset>5</option>
								<option value="10" @isset($param['h_index']) @if($param['h_index']==10) selected @endif @endisset>10</option>
								<option value="15" @isset($param['h_index']) @if($param['h_index']==15) selected @endif @endisset>15</option>
								<option value="20" @isset($param['h_index']) @if($param['h_index']==20) selected @endif @endisset>20</option>
								<option value="25" @isset($param['h_index']) @if($param['h_index']==25) selected @endif @endisset>25</option>
								<option value="30" @isset($param['h_index']) @if($param['h_index']==30) selected @endif @endisset>30</option>
								<option value="35" @isset($param['h_index']) @if($param['h_index']==35) selected @endif @endisset>35</option>
								<option value="40" @isset($param['h_index']) @if($param['h_index']==40) selected @endif @endisset>40</option>
								<option value="45" @isset($param['h_index']) @if($param['h_index']==45) selected @endif @endisset>45</option>
								<option value="50" @isset($param['h_index']) @if($param['h_index']==50) selected @endif @endisset>50</option>
							</select>
						</div>
						<div class="text-white mt-3">
							<h5>Reviewer</h5>
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline1" name="reviewer_data" value="new" class="custom-control-input" {{ isset($param['reviewer_data']) && $param['reviewer_data'] == 'new' ? 'checked' : '' }}>
								<label class="custom-control-label" for="customRadioInline1">Fresh</label>
							</div>
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline2" name="reviewer_data" value="experienced" class="custom-control-input" {{ isset($param['reviewer_data']) && $param['reviewer_data'] == 'experienced' ? 'checked' : '' }}>
								<label class="custom-control-label" for="customRadioInline2">Experienced</label>
							</div>
						</div>
						<button class="btn px-2 btn-info btn-block mt-2" value="reviewer_search" name="reviewer_search" type="submit">Search</button>
					</div>
					</form>
				</div>
				<div class="col-12 col-md-9 mb-3">
					@if(count($data_arr) > 0)
					<form action="{{ route('reviewerfinder', ['parameter' => 'afc43a1-dd72a4515']) }}" enctype="multipart/form-data" method="post" id="exportForm">
						<input type="hidden" name="_token" value="{{ csrf_token() }}">
						<input class="form-control" type="text" name="export_reviewer_list" id="export_reviewer_list" hidden>
						<h2 class="h3">Reviewer Lists <button class="btn btn-success float-right" type="submit" name="exportButton" value="exportButton">Export</button>
							@if($searchOption == "abstract" && !empty($data_arr))
							<button type="button" class="btn btn-primary float-right mr-2" data-toggle="modal" data-target="#exampleModalLong">Search Words</button>
							@endif
						</h2>
						<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title" id="exampleModalLongTitle">Search Words Lists</h4>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<p></p>
									</div>
									<div class="modal-footer border-0">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<hr>
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reviewerpattern">Search Pattern</button>
					<div class="modal fade" id="reviewerpattern" tabindex="-1" role="dialog" aria-labelledby="reviewerpatternTitle" aria-hidden="true">
						<div class="modal-dialog modal-lg" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="reviewerpatternTitle">Search Pattern</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body" style="word-wrap: break-word;">
									{{$reviewerSearchValue}}
								</div>
								<div class="modal-footer border-0">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
								</div>
							</div>
						</div>
					</div>
					@foreach($data_arr as $reviewer_details)
					<div class="card card-body shadow mb-3 pb-0">
						<div class="row border-bottom pb-2">
							<div class="col-md-4">
								<input type="checkbox" class="reviewer-checkbox mr-3" value="{{ $reviewer_details->id }}">
								<span class="lead font-weight-normal">{{$reviewer_details->first_name . ' ' .$reviewer_details->last_name}}</span>
							</div>
							<div class="col-md-8 text-right">
								<span style="background-color:orange;" class="px-2 py-0 d-inline-block mt-1 ml-3 rounded font-16 fw-bold mx-auto"><b>Search Score : @if(array_key_exists($reviewer_details->id, $reviewer_score_list)) {{$reviewer_score_list[$reviewer_details->id]}}@endif</b></span>
								<span class="p-2 text-white font-weight-bold rounded font-16 mr-2" style="background-color: orange;">Total Manuscript Reviewed: {{$reviewer_details->total_reviewed}}</span>
								<span class="p-2 bg-info text-white font-weight-bold rounded font-16">H-Index: {{$reviewer_details->h_index}}</span>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 pt-2 border-right">
								<span class="d-block border-bottom py-2"><strong>Country:</strong> {{$reviewer_details->country}}</span>
								<span class="d-block border-bottom py-2"><strong>City:</strong> {{$reviewer_details->city}}</span>
								<span class="d-block py-2"><strong>Institute:</strong> {{$reviewer_details->institution}}</span>
							</div>
							<div class="col-md-6 pt-2 border-right">
								<span class="d-block border-bottom py-2"><strong>Field of Experties:</strong> {{$reviewer_details->field_of_expertise}}</span>
								<span class="d-block py-2"><strong>Journal(s):</strong> {{ str_replace(',', ', ', $reviewer_details->reviewer_journal) }}</span>
							</div>
							<div class="col-md-12 d-flex py-1 border-top border-bottom">
								<span class="d-block py-2"><strong>Keywords:</strong> {{$reviewer_details->keywords}}</span>
							</div>
							@if(!empty($reviewer_details->orcid) || !empty($reviewer_details->scopus_id))
							<div class="col-md-3 offset-md-9 d-flex text-right py-1 border-bottom">
								@if(!empty($reviewer_details->orcid))
								<a href="https://orcid.org/{{$reviewer_details->orcid}}" class="col py-1 hvr-bob border-right" target="_blank"><img src="https://eurekaselect.com/images/orcid.png" alt="orcid"></a>
								@endif
								@if(!empty($reviewer_details->scopus_id))
								<a href="https://www.scopus.com/authid/detail.uri?authorId={{$reviewer_details->scopus_id}}" class="col py-1 hvr-bob" target="_blank"><img src="https://eurekaselect.com/images/scopus.png" alt="scopus"></a>
								@endif
							</div>
							@endif
						</div>
					</div>
					@endforeach
					<div class="d-flex justify-content-center">{{ $data_arr->appends(request()->input())->links() }}</dib>
						@else
						<div class="alert alert-danger col-12 mb-3">
							<p>No Record Found</p>
						</div>
						@endif

					</div>
				</div>
			</div>
	</section>
</main>

@endsection

{{-- page level scripts --}}
@section('footer_scripts')
<script src="{!! asset('assets/vendors/select2/js/select2.js') !!}"></script>
<script>
	jQuery.noConflict();
	(function($) {
		$(document).ready(function() {
			$("#journal_code").select2({
				theme: "bootstrap",
				//placeholder: "Select Journal",
				width: '100%'
			});
		});
		$(document).ready(function() {
			$("#h_index").select2({
				theme: "bootstrap",
				width: '100%'
			});
		});
	})(jQuery);
</script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		let radioButtons = document.querySelectorAll('input[name="searchOption"]');
		let keywordDiv = document.getElementById('keywordDiv');
		let abstractDiv = document.getElementById('abstractDiv');

		function toggleDivVisibility(selectedValue) {
			if (selectedValue === 'keywords') {
				keywordDiv.style.display = 'block';
				abstractDiv.style.display = 'none';

				// Required condition for keywords
				keywordDiv.querySelector('input').setAttribute('required', 'required');
				abstractDiv.querySelector('textarea').removeAttribute('required');
			} else if (selectedValue === 'abstract') {
				keywordDiv.style.display = 'none';
				abstractDiv.style.display = 'block';

				// Required condition for abstract
				abstractDiv.querySelector('textarea').setAttribute('required', 'required');
				keywordDiv.querySelector('input').removeAttribute('required');
			}
		}

		radioButtons.forEach(function(radioButton) {
			radioButton.addEventListener('change', function(event) {
				toggleDivVisibility(event.target.value);
			});
		});

		// Set initial visibility based on the selected radio button
		toggleDivVisibility("{{ $searchOption }}");

	});
</script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		let checkboxes = document.querySelectorAll('.reviewer-checkbox');
		let selectedCheckboxes = [];
		let exportReviewerListInput = document.getElementById('export_reviewer_list');
		let exportForm = document.getElementById('exportForm');

		checkboxes.forEach(function(checkbox) {
			checkbox.addEventListener('change', function() {
				if (this.checked) {
					if (selectedCheckboxes.length < 5) {
						selectedCheckboxes.push(this.value);
					} else {
						this.checked = false;
						alert('You can select a maximum of 5 reviewers.');
					}
				} else {
					selectedCheckboxes = selectedCheckboxes.filter(id => id !== this.value);
				}

				// Update the export_reviewer_list input value
				exportReviewerListInput.value = selectedCheckboxes.join(',');
			});
		});

		exportForm.addEventListener('submit', function(event) {
			if (selectedCheckboxes.length === 0) {
				alert('Please select at least one reviewer to export.');
				event.preventDefault(); // Prevent form submission
			}
		});
	});
</script>
<script>
	jQuery.noConflict();
	(function($) {
		$(document).ready(function() {
			var selectedWords = [];
			$('.word-cloud-item').click(function() {
				var word = $(this).text();
				selectedWords.push(word);
				var textareaValue = selectedWords.join(' ');
				$('#keywords-input').val(textareaValue);
				// Select the "Search by keywords" radio button
				$('input[name="searchOption"][value="keywords"]').prop('checked', true);
				$('#keywordDiv').show();
				$('#abstractDiv').hide();
			});

			// Trigger the click event for the radio button if it's initially checked
			$('input[name="searchOption"]:checked').trigger('click');
		});
	})(jQuery);
</script>
@stop