@extends('layouts.app')
@section('content')

@php
$user= auth()->user();
@endphp
<section class="content">
	<div class="container-fluid">

		<div class="px-sm-4">
			<div class="row mt-2 mt-sm-3 align-items-center">
                <div class="col-md-12">
                    <div class="d-sm-flex d-block align-items-center">
                        <div class="top-menuhome">
                            <ul>
								@php
								$permission = App\Helpers\CommonHelper::checkPermission($user, 'Home');
								@endphp

								@if($permission)
								<li><a href="{{url('/home')}}">Overview</a></li>
								@endif
								
                                @php
                                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Financials');
                                @endphp

                                @if($permission)
                                <li><a href="{{route('financial.home')}}">Financials</a></li>
                                @endif

                                @php
                                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Credit Committee');
                                @endphp

                                @if($permission)
                                <li><a href="{{url('/credit-committee')}}">Credit Committee</a></li>
                                @endif

								@php
                                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Investors');
                                @endphp

								@if($permission)
                                <li><a href="{{route('investor.dashboard')}}">
										<div class="top-head">
											<h1>Investors</h1>
										</div>
									</a>
								</li>
								@endif
                            </ul>
                        </div>
                    </div>
                </div>
			</div>
			<div class="row mt-2 mt-sm-3">
				<div class="col-md-12">
					<div class="top-head">
						<h1>Investors</h1>
					</div>
				</div>
			</div>

			<div class="row mt-sm-4 mt-3">
				<div class="col-6 col-sm mb-sm-0 mb-3">
					<div class="farmer-kpibox text-center new-investorsbox">
						<div class="farmer-kpiboximg">
							<img src="img/investors1.svg" alt="">
						</div>
						<h3>UGX 1.5M</h3>
						<h4>Grant <span>(09)</span> </h4>
					</div>
				</div>
				<div class="col-6 col-sm mb-sm-0 mb-3">
					<div class="farmer-kpibox text-center new-investorsbox">
						<div class="farmer-kpiboximg">
							<img src="img/investors2.svg" alt="">
						</div>
						<h3>UGX 1.8M</h3>
						<h4>Institution <span>(02)</span> </h4>
					</div>
				</div>
				<div class="col-6 col-sm mb-sm-0 mb-3">
					<div class="farmer-kpibox text-center new-investorsbox">
						<div class="farmer-kpiboximg">
							<img src="img/investors3.svg" alt="">
						</div>
						<h3>UGX 1.8M</h3>
						<h4>Bank <span>(04)</span> </h4>
					</div>
				</div>
				<div class="col-6 col-sm mb-sm-0 mb-3">
					<div class="farmer-kpibox text-center new-investorsbox">
						<div class="farmer-kpiboximg">
							<img src="img/investors4.svg" alt="">
						</div>
						<h3>UGX 1.8M</h3>
						<h4>Private Equity <span>(08)</span> </h4>
					</div>
				</div>
				<div class="col-6 col-sm">
					<div class="farmer-kpibox text-center new-investorsbox">
						<div class="farmer-kpiboximg">
							<img src="img/investors5.svg" alt="">
						</div>
						<h3>UGX 1.8M</h3>
						<h4> Others <span> (12)</span> </h4>
					</div>
				</div>
			</div>

			<div class="row mt-4 mb-2">
				<div class="col-md-6 ">
					<div class="card">
						<div class="row align-items-start">
							<div class="col-md-8 col-9">
								<div class="card-header border-0 pb-0">
									<h4 class="card-title float-none">Investments <span class="investors-badge">05</span></h4>
								</div>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="card-header border-0 pb-0">
									<img src="img/more.svg" class="three-dots" alt="">
								</div>
							</div>
						</div>

						<div class="card-body pt-0">
							<div class="row">
								<div class="col-md-7 col-7">
									<div class="investors-chartcontent mt-sm-4 mt-3">
										<label class="investors-label" >Email address</label>
										<p>15,200,000</p>

										<label class="investors-label mt-sm-2 mt-1">Disbursed Funds</label>
										<p class="green">12,000,000</p>

										<label class="investors-label mt-sm-2 mt-1">Balance</label>
										<p class="red">3,200,000</p>
									</div>
								</div>
								<div class="col-md-5 col-5">
									<canvas id="zoneChart" width="100%" height="100px"></canvas>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="col-md-6 ">
					<div class="card">
						<div class="row align-items-start">
							<div class="col-md-8 col-9">
								<div class="card-header border-0 pb-0">
									<h4 class="card-title float-none">Fund Utilization</h4>
								</div>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="card-header border-0 pb-0">
									<img src="img/more.svg" class="three-dots" alt="">
								</div>
							</div>
						</div>

						<div class="card-body pt-0">
							<div class="row">
								<div class="col-md-7 col-7">
									<div class="investors-chartcontent mt-sm-4 mt-3">
										<label class="investors-label" >Email address</label>
										<p>15,200,000</p>

										<label class="investors-label mt-2">Disbursed Funds</label>
										<p class="maroon">12,000,000</p>

										<label class="investors-label mt-2">Balance</label>
										<p class="yellow">3,200,000</p>
									</div>
								</div>
								<div class="col-md-5 col-5">
									<canvas id="zoneChart2" width="100%" height="100px"></canvas>
								</div>
							</div>

						</div>
					</div>
				</div>
				
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="row align-items-start">
							<div class="col-md-8 col-9">
								<div class="card-header border-0 pb-0">
									<h4 class="card-title float-none">Projects</h4>
								</div>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="card-header border-0 pb-0">
									<img src="img/more.svg" class="three-dots" alt="">
								</div>
							</div>
						</div>

						<div class="card-body pt-0">
							
								<div class="row align-items-center mt-sm-4 mt-3">
									<div class="col-md-3 mb-sm-0 mb-3">
										<div class="d-flex align-items-center">
											<div class="mr-2">
												<div class="funded-box">
													<img src="img/invest3.svg" alt="">
												</div>
											</div>
											<div>
												<div class="investors-projects">
													<h6>10</h6>
													<p>Total Projects Funded</p>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-3 mb-sm-0 mb-3">
										<div class="d-flex align-items-center">
											<div class="mr-2">
												<div class="funded-box green">
													<img src="img/invest2.svg" alt="">
												</div>
											</div>
											<div>
												<div class="investors-projects">
													<h6 class="green">300,000</h6>
													<p>Completed Projects <span> (06)</span> </p>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-3 mb-sm-0 mb-3">
										<div class="d-flex align-items-center">
											<div class="mr-2">
												<div class="funded-box yellow">
													<img src="img/invest1.svg" alt="">
												</div>
											</div>
											<div>
												<div class="investors-projects">
													<h6 class="yellow">100,000</h6>
													<p>Completed Projects <span> (06)</span> </p>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-3 mb-sm-0 mb-3">
										<div class="d-flex align-items-center">
											<div class="mr-2">
												<div class="funded-box maroon">
													<img src="img/invest4.svg" alt="">
												</div>
											</div>
											<div>
												<div class="investors-projects">
													<h6 class="maroon">10</h6>
													<p>Farmers Impected </p>
												</div>
											</div>
										</div>
									</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection