
@if($page_name == '')
<script type="text/javascript">
	var page_name = ""
</script>
@else
<script type="text/javascript">
	var page_name = "{{$page_name}}"
</script>
@endif

<link href="{{ asset('/css/accordian.css') }}" type="text/css" rel="stylesheet">
<script type="text/javascript" src="{!! asset('/js/angular.js') !!}"></script>
<script type="text/javascript" src="{!! asset('/js/ajax_volume.js') !!}"></script>
<link rel="stylesheet" href="{{ asset('css/loader/spinner.css') }}" />

<div class="col-md-8 vols">


			@if($journal->journal_status!=2)
          	@if(strtolower($journal->subtitle) == 'cg')
					    <div class="row text-center mb-2">
					      <div class="col-md-7 text-left">
					        <a href="/journal/{{ $journal->journal_id }}/become_ebm_form"><img src="/images/ebm-long.png" class="img-thumbnail" alt="To become an editorial board member, register here"></a>
					      </div>
					      <div class="col-md-5">
					        <a href="/journal/{{ $journal->journal_id }}/become_reviewer_form"><img src="/images/reviewer.png" class="img-thumbnail" alt="To become a reviewer of this journal, register here"></a>
					      </div>
					    </div>
					  @else
				    <div class="row text-center mb-2">
			      <div class="col-md-4">
			        <a href="/journal/{{ $journal->journal_id }}/become_ebm_form"><img src="/images/ebm.png" class="img-thumbnail"></a>
			      </div>
			      <div class="col-md-4">
			        <a href="/journal/{{ $journal->journal_id }}/become_reviewer_form"><img src="/images/reviewer.png" class="img-thumbnail"></a>
			      </div>
			      <div class="col-md-4">
			        <a href="/journal/{{ $journal->journal_id }}/become_editor_form"><img src="/images/editors.png" class="img-thumbnail"></a>
			      </div>
			    </div>
			@endif
          @endif

          @if($section->count() > 0)  
				    <div class="row text-center mb-2 sectionbanner align-items-center rounded">
				      <div class="col-md-6">
				        <a href="/journal/{{ $journal->journal_id }}/section" class="d-block" target="_blank">&nbsp;</a>
				      </div>
				      <div class="col-md-6 text-right">
				        <div class="dropdown font-14 p-0 m-0">
								  <button class="btn btn-light dropdown-toggle bg-siteblue text-white" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
								    Journal Sections
								  </button>
								  <div class="dropdown-menu font-12" aria-labelledby="dropdownMenuButton">
								  	@foreach($section as $val)
									    <a class="dropdown-item" href="/journal/{{ $journal->journal_id }}/section/{{ $val->js_id }}" target="_blank">{{$val->js_title}}</a>
									  @endforeach  
								  </div>
								</div>
				      </div>
				    </div>
			    @endif



	<h2 class="h4" id="thematic_heading"></h2>
<div id="error_message"></div>

<div ng-app="APP.Subapp.Admin">
<div ng-controller="VolumeController" id="VolumeController" style="display:none;">
<h2 class="h4">
@php $subscribe='';	@endphp
@if($page_name == '' || $page_name == 'subscribe')
	 @php 
      if($page_name == 'subscribe')  {
          $subscribe ='/subscribe';
      }else{
          $subscribe ='';
      }    
    @endphp 
  Volumes
@else
	{!! str_replace('-', ' ', ucfirst($page_name)) !!}
	
@endif
</h2>
<hr>
<div id="accordion" class="mt-3">
<div ng-repeat="(index, volume) in volumes" class="card">

    <div id="volume_{[{index}]}">
	
		<div id="header_{[{index}]}" class="card-header" ng-click="getIssues(index)" >
			<strong>Volume: {[{volume.volume_name}]} </strong> ({[{volume.year}]}) &nbsp;
			<div ng-if="volume.access_base_text != '' " >
			<span class="text-info" >{[{volume.access_base_text}]}</span>			
			</div>			
			<span id="loader_{[{index}]}" class="float-right" style="display:none;"><i class="fas fa-cog fa-spin text-danger "></i><em> loading...</em></span>
			<span id="drop_{[{index}]}" ><i class="fas fa-chevron-circle-down float-right"></i></span>
		</div>
	
	</div>

	<?php if(in_array($journal->subtitle, $continues_publication_journal)	&& $journal->IsIssue == 0)	{ ?>

		 	<div id="issue_{[{index}]}" class="accordion-content list-group list-group-flush">
			<div ng-repeat="(index, issue) in volume.issue" class="list-group-item">
				<div id="issue_{[{issue.issue_id}]}">
						<div ng-switch on="(volume.year > 2022)">
							<a href="/issue/{[{issue.issue_id}]}{{$subscribe}}" ng-switch-when="true">Content View</a>
							<a href="/issue/{[{issue.issue_id}]}{{$subscribe}}" ng-switch-default>Issue : {[{issue.title}]}</a>
						</div>
					<div ng-if="issue.access_base_text != '' ">
						<span class="text-danger">{[{issue.access_base_text}]}</span>
					</div>
				</div>
				@if($journal->IsIssue <> 0)
					<!-- Model Window Start -->
					<div ng-switch="issue.type">
						<div ng-switch-when="2">
							<span class="small text-success">[ Issue in Progress ] : This issue is in progress but contains articles that are final and fully citable.</span>
						</div>
						<div ng-switch-when="1">

							<a class="small text-success" data-target="#myModal{[{issue.issue_id}]}" data-toggle="modal" href="javascript:void(0);">[ View thematic issue description ]</a>
						</div>
					</div>
					@endif
					<!-- Model Window start -->
					<div class="modal" tabindex="-1" role="dialog" id="myModal{[{issue.issue_id}]}">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header bg-primary">

									<h4 class="modal-title text-white" id="myModalLabel{[{issue.issue_id}]}" ng-switch="issue.type">
										<strong ng-switch-when="">Thematic Issue</strong>
										<strong ng-switch-default>Issue: {[{issue.issue_title}]}</strong>
									</h4>
									<button aria-label="Close" class="close  text-white" data-dismiss="modal" type="button">
										<span aria-hidden="true">×</span>
									</button>
								</div>
								<div class="modal-body" ng-switch="issue.about_issue">
									<p ng-switch-default>{[{issue.about_issue}]}</p>
									<p ng-switch-when="">No Text Found</p>
								</div>
								<div class="modal-footer">

									<a href="/issue/{[{issue.issue_id}]}{{$subscribe}}" class="btn btn-success btn-sm  text-white">View Articles</a>

									<button class="btn btn-sm btn-outline-dark" data-dismiss="modal" type="button">
										Close
									</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Model Window End -->

			</div>
		</div>

	<?php }elseif(!in_array($journal->subtitle, $continues_publication_journal) && $journal->IsIssue == 0) { ?>

		
		 	<div id="issue_{[{index}]}" class="accordion-content list-group list-group-flush">
			<div ng-repeat="(index, issue) in volume.issue" class="list-group-item">
				<div id="issue_{[{issue.issue_id}]}">
						<a href="/issue/{[{issue.issue_id}]}{{$subscribe}}">Content View</a>
					<div ng-if="issue.access_base_text != '' ">
						<span class="text-danger">{[{issue.access_base_text}]}</span>
					</div>
				</div>
				@if($journal->IsIssue <> 0)
					<!-- Model Window Start -->
					<div ng-switch="issue.type">
						<div ng-switch-when="2">
							<span class="small text-success">[ Issue in Progress ] : This issue is in progress but contains articles that are final and fully citable.</span>
						</div>
						<div ng-switch-when="1">

							<a class="small text-success" data-target="#myModal{[{issue.issue_id}]}" data-toggle="modal" href="javascript:void(0);">[ View thematic issue description ]</a>
						</div>
					</div>
					@endif
					<!-- Model Window start -->
					<div class="modal" tabindex="-1" role="dialog" id="myModal{[{issue.issue_id}]}">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header bg-primary">

									<h4 class="modal-title text-white" id="myModalLabel{[{issue.issue_id}]}" ng-switch="issue.type">
										<strong ng-switch-when="">Thematic Issue</strong>
										<strong ng-switch-default>Issue: {[{issue.issue_title}]}</strong>
									</h4>
									<button aria-label="Close" class="close  text-white" data-dismiss="modal" type="button">
										<span aria-hidden="true">×</span>
									</button>
								</div>
								<div class="modal-body" ng-switch="issue.about_issue">
									<p ng-switch-default>{[{issue.about_issue}]}</p>
									<p ng-switch-when="">No Text Found</p>
								</div>
								<div class="modal-footer">

									<a href="/issue/{[{issue.issue_id}]}{{$subscribe}}" class="btn btn-success btn-sm  text-white">View Articles</a>

									<button class="btn btn-sm btn-outline-dark" data-dismiss="modal" type="button">
										Close
									</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Model Window End -->

			</div>
		</div>

	<?php } else { ?>

	<div id="issue_{[{index}]}" class="accordion-content list-group list-group-flush">
		<div ng-repeat="(index, issue) in volume.issue" class="list-group-item" >
			<div id="issue_{[{issue.issue_id}]}" >
						<a href="/issue/{[{issue.issue_id}]}{{$subscribe}}">Issue : {[{issue.title}]}</a>
				<div ng-if="issue.access_base_text != '' " >
				<span class="text-danger"  >{[{issue.access_base_text}]}</span>				
				</div>					
			</div>	
			@if($journal->IsIssue <> 0)
			<!-- Model Window Start -->
			<div ng-switch="issue.type">
				<div ng-switch-when="2" >
					<span class="small text-success" >[ Issue in Progress ] : This issue is in progress but contains articles that are final and fully citable.</span>
				</div>	
				<div ng-switch-when="1" >

				<a class="small text-success" data-target="#myModal{[{issue.issue_id}]}" data-toggle="modal" href="javascript:void(0);">[ View thematic issue description ]</a>
				</div>
			</div>	
			@endif
				<!-- Model Window start -->
				<div class="modal" tabindex="-1" role="dialog" id="myModal{[{issue.issue_id}]}" >
					<div class="modal-dialog">
					<div class="modal-content">
					  <div class="modal-header bg-primary">
						 
						  <h4 class="modal-title text-white" id="myModalLabel{[{issue.issue_id}]}" ng-switch="issue.type">
							<strong ng-switch-when="">Thematic Issue</strong>
							<strong ng-switch-default>Issue: {[{issue.issue_title}]}</strong>
						  </h4>
						   <button aria-label="Close" class="close  text-white" data-dismiss="modal" type="button">
							  <span aria-hidden="true">×</span>
						  </button>
					  </div>
					  <div class="modal-body" ng-switch="issue.about_issue">
							<p ng-switch-default>{[{issue.about_issue}]}</p>
							<p ng-switch-when="">No Text Found</p>
					  </div>
					  <div class="modal-footer">
					  	
					  	<a  href="/issue/{[{issue.issue_id}]}{{$subscribe}}" class="btn btn-success btn-sm  text-white">View Articles</a>

						  <button class="btn btn-sm btn-outline-dark" data-dismiss="modal" type="button">								 
							  Close
						  </button>
					  </div>
					</div>
					</div>
				</div>
				<!-- Model Window End -->

			</div>
	</div>
		
	<?php } ?>
					
</div>
</div>
</div>

   <!-- Loader Start-->
	<div id="page_loader" class="card-body">
		<center>
				<div class="lds-spinner">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
		<h4 class="card-title"><strong>LOADING</strong></h4>
		</center>
	</div>
	<!-- Loader End -->

</div>
</div>