@extends('front.layouts.main')
@section('content')
  <h2 class="h2-main mt-0 mb-15">{{@$gcompany->company_name}}</h2>
@if($msg=Session::get('message'))
<script type="text/javascript">
  swal("", "{{ Session::get('message') }}", "");
</script>
@endif   
<div class="c-midsection">
<div>
  <!-- @include('front.includes.dashboard-menu') -->
  @include('front.includes.dashboard-header')
</div>
<section class="search">
	<div class="">
		<ul class="projects-list">
			<!-- Listing of project -->
			@if(count($projects))
			<li class="project-list-header">
				<div class="project-list-info">
					<div class="project-list-thumb"></div>
					<div class="project-list-data">
						<div class="project-list-text">Project Name</div>
						<div class="project-list-date">Created On</div>
						<div class="project-list-date ml-xl-3">Last Update On</div>
					</div>
				</div>
				<div class="project-remove">
					<div class="project-remove-btn"></div>
				</div>
			</li>
			@foreach($projects as $project)
			<li>
				<div class="project-list-info">
					<a href="{{route('projectinfo-hours.index',['project_id'=>$project->id])}}" class="project-list-thumb">
						<img src="{{$project->image=="" ?asset('images/no-image.png'):$project->image }}" />
					</a>
					<div class="project-list-data">
						<div class="project-list-text">
							<div class="porject-list-title">
								<a class="project-list-name" href="{{route('projectinfo-hours.index',['project_id'=>$project->id])}}">{{ucfirst($project->name)}}</a>
								<span class="project-list-status">
									@if($project->is_active == 0)
									(Inactive)
									@else
									(Active)
									@endif
								</span>
							</div>
							<p class="project-list-des">{{ucfirst($project->street_address)}} @if($project->city != ''),{{ucfirst($project->city)}} @endif</p>
						</div>
						<div class="project-list-date d-flex mb-2 mb-xl-0"><span class="mr-1">Created On: </span>{{$project->created_at}}</div>
						<div class="project-list-date d-flex ml-xl-3"><span class="mr-1">Last Update On: </span>{{$project->updated_at}}</div>
					</div>
				</div>
				@if(\Auth::user()->user_role->user_type == '2')
				<div class="project-remove">
					<button type="button" class="project-remove-btn" onclick="deleteAttribute('{{route('project-delete',['id'=>$project->id])}}', 'Delete Project Permanently','This project and all reports will be deleted and cannot be recovered.')"><i class="icon-delete"></i></button>
				</div>
				 @endif
				<!-- <div class="list-main clearfix">
					<div class="c-pro-list-profile left clearfix">
					<a class="projectHover" title="Click for project details!" href="{{route('projectinfo-hours.index',['project_id'=>$project->id])}}">
						<div class="text-profile left">
						<div class="c-pro-img"><img src="{{$project->image=="" ?asset('images/no-image.png'):$project->image }}" > </div>
						<div class="c-vie-con ">
						</div>
						</div>
						<div class="c-text left pad_top_20">
						<span class="bold">{{ucfirst($project->name)}}</span>
						<span>{{ucfirst($project->street_address)}} @if($project->city != ''),{{ucfirst($project->city)}} @endif</span>
						</div>
					</a>
					</div>
					<div class="c-pro-list-profile2 left  clearfix">
					<div class="c-pro-list-date left pad_right_80 pad_top_50">
						<p class="Date pad_right_60">{{$project->created_at}}</p>
						<p class="State">
						@if($project->is_active == 0)
						Inactive
						@else
						Active
						@endif
						</p>
					</div>
					@if(\Auth::user()->user_role->user_type == '2')
					<div class="c-pro-list-edt pad_top_20 left cdr-action-btn">
						<p><a href="javascript:void(0);" onclick="deleteAttribute('{{route('project-delete',['id'=>$project->id])}}', 'Delete Project Permanently','This project and all reports will be deleted and cannot be recovered.')" class="c-icn ripple-btn"><i class="icon-delete"></i></a><span>Delete</span></p>
					</div>
					@endif
					</div>
				</div -->
			</li>
			@endforeach
			@else
			No projects..
			@endif
			<!-- end of project listing -->
		</ul>
	</div>
    {{$projects->render()}}
</section>
@endsection
@section('js')
<script>
	$(document).ready(function(){
		$(".projectHover").hover(function(){
			$(this).css("background", "#F00");
		},
		function(){
			$(this).css("background", "#FFF");
		});
	});
	$(document).on('keyup search', '#search', _.debounce(function(){
		var query = $(this).val();
		$.ajax({
			type: "GET",
			url:"{{ route('projectinfo.index') }}",
			data:{search:query},
			success: function(data){
				$('.search').html(data);
			}
		});
	}, 300));
	$(document).on('change filter', '.filter', _.debounce(function () {
		var query = $(this).val();
		$.ajax({
			type: "GET",
			url: "{{ route('projectinfo.index') }}",
			data: { filter: { status: query } },
			success: function (data) {
				$('.search').html(data);
			}
		});
	}, 300));
</script>
@endsection