@include('layout/backend/_header')
@include('layout/backend/_navbar')
<div id="wrapper">
	@include('layout/backend/_sidebar')
	<div id="content-wrapper">
		<div class="container-fluid">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a title="Go to Dashboard" href="{{route('dashboard')}}">Dashboard</a></li>
				<li class="breadcrumb-item active">All Projects</li>
				@if ( isset($_GET['ct_nm']) && $_GET['ct_nm'] )
					<li class="breadcrumb-item active">{{$_GET['ct_nm']}}</li>
				@endif
				@if ( isset($_GET['t_d']) )
					<li class="breadcrumb-item active">{{ getThemeNmByID($_GET['t_d']) }}</li>
				@endif
			</ol>
			<div class="row">
				<div class="col-12 nextRw">
					<div class="">
						@if ( !isset($_GET['t']) )
							<form action="{{url('overall-projects')}}" method="GET" class="pull-right" style="margin-right: 15px;">
								<p class="" style="display:inline-flex; margin-bottom:0px;">
									<input type="text" class="form-control" name="s_t" id="myInput" style="width:275px;margin-right:10px;" onkeyup="valueCheck();" placeholder="Search" value="{{ (isset($_GET['s_t']) && $_GET['s_t']) ? $_GET['s_t'] : '' }}" />
									<select name="t_d" id="themeFilter" class="form-control" style="width:275px;margin-right:10px;" onchange="valueCheck();">
										<option value="">Project Theme</option>
										@if ( count( $themes ) > 0 )
											@foreach( $themes as $k => $v )
												<option value="{{ $v['id'] }}" {{ (isset($_GET['t_d']) && $_GET['t_d']==$v['id']) ? 'selected=selected' : '' }}>{{$v['name']}}</option>
											@endforeach
										@endif
									</select>
									<select name="ct_nm" id="categoryFilter" class="form-control" style="width:275px;" onchange="valueCheck();">
										<option value="">Project Category</option>
										<option value="Global" {{ (isset($_GET['ct_nm']) && $_GET['ct_nm']=='Global') ? 'selected=selected' : '' }}>Global</option>
										<option value="Regional" {{ (isset($_GET['ct_nm']) && $_GET['ct_nm']=='Regional') ? 'selected=selected' : '' }}>Regional</option>
										<option value="Bilateral" {{ (isset($_GET['ct_nm']) && $_GET['ct_nm']=='Bilateral') ? 'selected=selected' : '' }}>Bilateral</option>
									</select>
									<input type="submit" class="srch-btn btn btn-md btn-primary" id="myBtn" style="margin-left:5px;" value="Search" onClick="return checkIfValue()" />
									@if ( isset($_GET['ct_nm']) || isset($_GET['t_d']) )
										<a href="javascript://" class="clearFilter btn btn-md btn-default" title="Clear Filters" style="border: 1px solid #ddd;margin-left:5px;" onClick="clearFilters()"><i style="font-size:16px;" class="fa fa-times"></i></a>
									@endif
								</p>
								<p style="margin:0px;"><span class="errorMsg" style="display:none;font-size:11px;color:red;">Please select theme or category to filter the projects.</span></p>
							</form>
						@endif
					</div>
				</div>
				<div class="col-12 nextRw">
					<div class="table-responsive">
						<table  class="table align-items-center table-flush" id="volunteers">
							<thead  class="thead-light">
								<tr>
									<th width="9%" scope="col"></th>
									<th width="25%" scope="col">Title</th>
									<th width="35%" scope="col">Project PI</th>
									<th width="12%" scope="col">Start Date</th>
									<th width="12%" scope="col">End Date</th>
									<th width="7%" scope="col">Status</th>
								</tr>
							</thead>
							<tbody id="volunteerBdy">
								{{ csrf_field() }}
								@if( $projects && count($projects) > 0 )
									@foreach( $projects as $k => $v )
										<tr>
											<td>
												@if ( count($v['project_attachment']) > 0 && $v['project_attachment'][0]['attachment'] )
																										<img style="height:55px;width:55px;" src="{{ $singleImage }}" title="{{$v['title']}}" />
												@else 
													<img style="height:55px;width:55px;" class="text-center" src="{{ URL::asset('images/no-image.png') }}" title="{{$v['title']}}" />
												@endif
											</td>
											<td>
												<a target="_blank" href="single-project/{{ encrypt_decrypt('encrypt', $v['id'])}}" title="{{$v['title']}}" class="headng">{{$v['title']}}</a>
											</td>
											<td>
												@php $piIDs = $v['pi_ids']; $i = 0; $total = count($piIDs); @endphp 
												@foreach($piIDs as $pk => $pv)
													@php $i++; @endphp
													{{ ' - ' }} {{ getUserNameByID($pv) }} <span style="font-size:16px;">({{getEmailByID($pv)}})</span>
													@if ( $i != $total )
														<br/>
													@endif
												@endforeach
											</td>
											<td>{{ date('M, d Y', strtotime($v['start_date'])) }}</td>
											<td>{{ date('M, d Y', strtotime($v['end_date'])) }}</td>
											<td>
												@if( $v['project_status']==0 )
													<span style="position: absolute;right: 25px;background-color: #5bc0de;display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em;margin-top: 5px;" class="label label-info pull-right">{{'On-going'}}</span>
												@elseif( $v['project_status']==1 )
													<span style="position: absolute;right: 25px;background-color: #5bc0de;display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em;margin-top: 5px;" class="label label-success pull-right">{{'Completed'}}</span>
												@elseif( $v['project_status']==2 )
													<span style="position: absolute;right: 25px;background-color: #5bc0de;display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em;margin-top: 5px;" class="label label-warning pull-right">{{'On-Hold'}}</span>
												@endif
											</td>
										</tr>
									@endforeach
								@endif
							</tbody>
						</table>
					</div>
				</div>
				@if( count($projects)==0 )
					<div class="alert alert-info text-center col-12 nextRw">No records found</div>
				@endif
			</div>
			@if(count($projects) > 0)
				{{ $projects->links() }}
			@endif
		</div>
	</div>
</div>
@include('layout/backend/_footer')
<script type="text/javascript">
	function filterAsPerStatus(status, event){
		var status = status; 
		$(".timeline li").each(function(){
			$(this).hide();
			if($(this).attr('data-status') == status) {
				$(this).show();
			}
		});
	}
	$(document).ready(function(){
		filterAsPerStatus('1', event);
	});
	function valueCheck(){
		$('#categoryFilter').css('border','1px solid #cad1d7');
		$('#themeFilter').css('border','1px solid #cad1d7');
		$('#myInput').css('border','1px solid #cad1d7');
		$('.errorMsg').hide();
	}
	function checkIfValue(){
		var searchText = $('#categoryFilter').val();
		var textSearch = $('#myInput').val();
		var themeFilter = $('#themeFilter').val();
		if ( !searchText && !themeFilter && !textSearch ){
			$('#categoryFilter').css('border','1px solid red');
			$('#themeFilter').css('border','1px solid red');
			$('#myInput').css('border','1px solid red');
			$('.errorMsg').show();
			return false;
		} else {
			return true;
		}
	}
	function clearFilters(){
		var url = window.location.href;
			url = url.split('?')[0];
		window.location.href = url;
	}
</script>