@include('layout/frontend/_header')
<div id="colorlib-doctor" style="    background-color: #f1f4fa;">
	<div class="container">
		<div class="row">
            <div class="col-sm-12 breadcrumbs">
                <ol class="breadcrumb breadcrumb-2new">
                    <li class="breadcrumb-item"><a title="Go to IKI" href="{{ url('/') }}">Home</a></li>
					@if ( ( isset($_GET['ct_nm']) ) || ( isset($_GET['t_d']) ) )
						<li class="breadcrumb-item"><a href="{{ url('projects') }}">Projects</a></li>
					@else 
						<li class="breadcrumb-item"><a href="javascript://">Projects</a></li>
					@endif
					@if ( isset($_GET['ct_nm']) && $_GET['ct_nm'] )
						<li class="breadcrumb-item"><a href="javascript://">{{$_GET['ct_nm']}}</a></li>
					@endif
					@if ( isset($_GET['t_d']) )
						<li class="breadcrumb-item"><a href="javascript://">{{ getThemeNmByID($_GET['t_d']) }}</a></li>
					@endif
                </ol>
            </div>
        </div>
		<div class="row animate-box">
			<div class="col-md-6 col-md-offset-3 text-center colorlib-heading" @if ( isset($_GET['t']) && $_GET['t'] ) style="margin-bottom:0px;" @endif>
				<h2>Projects</h2>
			</div>
		</div>
		@if ( isset($_GET['t']) && $_GET['t'] )
			<div class="row">
				<div class="col-sm-12">
					<h4 class="text-center">(Project Theme: {{ getThemeNmByID($_GET['t_d']) }})</h4>
					<p class="text-center">{{ getThemeDescByID($_GET['t_d']) }}</p>
				</div>
			</div>
		@endif
		<div class="row">
			@if ( !isset($_GET['t']) )
				<form action="{{url('projects')}}" method="GET" class="pull-right" style="margin-right: 15px;">
					<p class="" style="display:inline-flex; margin-bottom:0px;">
						<select name="t_d" id="themeFilter" class="form-control" style="width:300px;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:300px;" 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>
						<button style="margin-left:10px;" class="srch-btn" id="myBtn" value="Search" onClick="return checkIfValue()" type="submit"><i style="padding:7px;" class="fa fa-search"></i></button>
						@if ( isset($_GET['ct_nm']) ) 
							<button style="margin-left:4px;" class="srch-btn" id="clearBtn" value="Clear" onClick="clearFilters()" type="button"><i style="padding:7px;" class="fa fa-times"></i></button>
						@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
			
			<section>
<div class="container">

	
		<div class="row mbr-justify-content-center">

				@if( $projects && count($projects) > 0 )
			
			@foreach( $projects as $k => $v )
            <div class="col-lg-12 mbr-col-md-10">
                <div class="wrap">
                    <div class="ico-wrap">
                    	@if ( count($v['project_attachment']) > 0 && $v['project_attachment'][0]['attachment'] )
							                      		<img style="height:200px;width:200px;" src="{{ $singleImage }}" title="{{$v['title']}}" />
                      	@else 
                      		<img style="height:200px;width:200px;" class="text-center" src="{{ URL::asset('images/no-image.png') }}" title="{{$v['title']}}" />
                      	@endif
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">
							<a href="single-project/{{ encrypt_decrypt('encrypt', $v['id'])}}" title="{{$v['title']}}" class="headng">{{$v['title']}}</a>
							@if( $v['project_status']==0 )
								<span style="font-size: 82%;vertical-align: text-top;text-align: right;padding: 5px;" class="label label-info pull-right">{{'On-going'}}</span>
							@elseif( $v['project_status']==1 )
								<span style="font-size: 82%;vertical-align: text-top;text-align: right;padding: 5px;" class="label label-success pull-right">{{'Completed'}}</span>
							@elseif( $v['project_status']==2 )
								<span style="font-size: 82%;vertical-align: text-top;text-align: right;padding: 5px;" class="label label-warning pull-right">{{'On-Hold'}}</span>
							@endif
						</h2>
						<span style="line-height: 45px"><strong>Author Name:</strong> {{$v['author_name']}}</span><br>
							<span class="bg-danger" style="padding: 5px"> <i class="fa fa-calendar" aria-hidden="true"></i> {{ date('d', strtotime($v['start_date'])) }} {{ date('M', strtotime($v['start_date'])) }} {{ date('Y', strtotime($v['start_date'])) }} to {{ date('d', strtotime($v['end_date'])) }} {{ date('M', strtotime($v['end_date'])) }} {{ date('Y', strtotime($v['end_date'])) }}</span>
						
                        <p class="mbr-fonts-style text1 mbr-text display-6">{{ substr( $v['description'], 0, 200 ) }}...<br><a style="text-decoration:underline;font-size:14px;" href="single-project/{{ encrypt_decrypt('encrypt', $v['id'])}}" title="Read More">Read More &rarr;</a></p>
                    </div>
                </div>
            </div>
	@endforeach

            	@else 
									<p style="margin-top: 60px;" class="alert alert-info text-center">No records found for the search</p>
								@endif	

            
        </div>
	@if(count($projects) > 0)
				{{ $projects->links() }}
			@endif
</div>

</section>
			
		

		</div>
	</div>
</div>
@include('layout/frontend/_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');
		$('.errorMsg').hide();
	}
	function checkIfValue(){
		var searchText = $('#categoryFilter').val();
		var themeFilter = $('#themeFilter').val();
		if ( !searchText && !themeFilter ){
			$('#categoryFilter').css('border','1px solid red');
			$('#themeFilter').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>