@extends('layouts.admin')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
@section('content')
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif


<div class="row">
<div class="col-sm-4" style="float:left"> 
    <h6> 
   @can('project_create',Auth::user())
  
<a  href="{{ route('project.create')}}" class="btn btn-success">New Project <i class="fa fa-plus-circle"></i></a>

</h6>

@endcan
</div>
<div class="col-sm-8"  style="float:right;">
  <form method="post" action="{{route('project.psearch')}}"  >
    @csrf
                        <div class="input-group col-sm-12" >
                            <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
                                aria-label="Search" aria-describedby="basic-addon2" name="search">
                            <div class="input-group-append">
                                
                            </div>
                       
               </div>
           </form>
       </div></div>
@foreach($projects as $p)  

   <div class="row border border-top-0  border-left-0  border-right-0">
   <div class="col-2 align-middle" style="padding:30px 20px">
       <img   src="../../dist/img/{{$p->donor}}.png" alt="user-avatar" class="img-fluid donor_logo">
    </div>
    <div class="col-7">
	
      <div class="card-body">
        <h5 class="card-title"><a href="">{{$p->code}}/{{$p->donor}}</a></h5>
        <p class="font-weight-bold font-italic">{{$p->title}}</p>
		
		<div class="row">
		<div class="col-sm-2">Budget</div><div class="col-sm">{{$p->currency}} <span class="numformat" style="display:inline">{{$p->budget}}</div>
		</div>
		<div class="row">
		<div class="col-sm-2">Timeline</div><div class="col-sm">{{date('d-M-Y', strtotime($p->start_date))}} to {{date('d-M-Y', strtotime($p->end_date))}}</div>
		</div>
		<div class="row">
		<div class="col-sm-2">Created By</div><div class="col-sm"><a href="">{{$p->owner->name}}</a></div>
		<div class="col-sm-2">Managed By</div><div class="col-sm"><a href="">@isset($p->project_manager->first()->user->name)
		{{$p->project_manager->first()->user->name}}
		@endisset</a></div>
		</div>
		<div class="row">
		<div class="col-sm-2">Status</div><div class="col-sm"><a href="">{{$p->status}}</a></div>
		<div class="col-sm-2">Last Update</div><div class="col-sm"><a href="">{{$p->updated_at}}</a></div>
		</div>
		
		
				
		
		
		<form action="{{ route('project.destroy', $p->id)}}" method="post" >
		@if($p->status=='Initiated')
					@isset($p->project_manager->first()->user->id)
					@if($isAdmin|| Auth::user()->id==$p->owner->id ||Auth::user()->id==$p->project_manager->first()->user->id )
					<a href="{{ route('result.getProject', $p->id) }}" class="btn-xs text-warning">Settings</a> |
					@endif
					@endisset
					@endif
					
					@if($isAdmin|| Auth::user()->id==$p->owner->id)
					
					@can('project_edit',Auth::user())    
					<a class="btn-xs" href="{{ route('project.edit',$p->id) }}" >Edit General Information</a> |
					@endcan
					@endif

					@can('project_view',Auth::user())    
					<a href="{{ route('project.show',$p->id)}}" class="btn-xs text-success">Detail</a>
					@endcan
					@if($p->status!='Endorsed')
					@csrf
					@method('DELETE')
					@can('project_delete',Auth::user())    
					 | <a href="" class="btn-xs text-danger" onclick="this.closest('form').submit();return false;" type="submit">Delete</a>
					@endcan
					@endif
					<!--button class="btn-xs btn-danger" type="submit">Delete</button-->
				</form>
      </div>
    </div>
	
	<div class="col-3">
      <div class="card-body" >
       <div id="{{$p->id}}" class="align-middle border" style="height: 80%;margin-top:0; background: rgb(248 249 250);  "></div>
	              @foreach($p->projectdistrict as $pd)
				  @if($pd->geographies->type=='District')
                  <input type="hidden" id="geodata[]" name='' value="{{$pd->geographies->geometry}}">
				@endif
                  @endforeach
	   <script type="text/javascript">
		var data=document.getElementsByName('');
		var geoData=[];
		for(var i=0;i<data.length;i++)
			geoData.push(JSON.parse(data[i].value));
		var mymap = L.map('{{$p->id}}', {attributionControl: false,zoomControl:false}).setView([30.17775, 66.99648], 7);
		L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
		}).addTo(mymap);

		colorArray = [ '#e6816c','#ccab66','#b0c25d','#95bd82','#b54a4a','#6199c2','#E31A1C','#FC4E2A','#FD8D3C','#FEB24C' ,'#FED976','#FFEDA0','#E6E5A6','#F1D9B4'];
		var layer= L.geoJSON(geoData,{
		style: function(feature) {
		return {
		fillColor: colorArray[Math.floor(Math.random() * 14)],
		weight: 1,
		opacity: 0.7,
		color: 'white',
		dashArray: '1',
		fillOpacity: .8
		};
		}
		}).addTo(mymap);
		mymap.fitBounds(layer.getBounds());
		</script>
      </div>
    </div>
	<div class="pagination justify-content-end">
    </div>
  </div>
  
  @endforeach
          <div class="row">
			<div class="col-sm-12 col-md-5">
			   <div class="dataTables_info" role="status" aria-live="polite">
				Showing {{$projects->firstItem()}} to {{$projects->lastItem()}} of {{$projects->total()}}
			   </div>
			</div>
			<div class="col-sm-12 col-md-7">
				<div class="dataTables_paginate paging_simple_numbers">
					{{ $projects->links() }} 
				</div>
			</div>
		</div>

@endsection