@extends('layouts.app')
@section('content')
@include('layouts.sidebar')
<!-- Page Sidebar Ends-->
<div class="page-body">
  <div class="container-fluid">        
    <div class="page-title">
      <div class="row">
        <div class="col-6">
          <h3>Project Manager</h3>
        </div>
        <div class="col-6">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('home')}}"><i data-feather="home"></i></a></li>
            <li class="breadcrumb-item">Dashboard</li>
            <li class="breadcrumb-item active">Default</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
  <!-- Container-fluid starts-->
  <div class="container-fluid">
    <div class="row second-chart-list third-news-update">
	  <div class="col-xl-3 xl-50 chart_data_right box-col-12">
		<div class="card">
		  <div class="card-body">
			<div class="new-order text-center">
			  <div><span>Total Sale</span>
				<h4 class="font-primary mb-0 mt-1">100</h4>
				<div class="progress sm-progress-bar">
				  <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">                                               </div>
				</div>
				<ul>
				  <li class="font-roboto">
					<h6>Target</h6>
					<h5 class="font-success f-w-700">75</h5>
				  </li>
				  <li class="font-roboto">
					<h6>Required</h6>
					<h5 class="font-danger f-w-700">25</h5>
				  </li>
				</ul>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
		
		
		<div class="col-xl-9 xl-100 chart_data_left box-col-12">
			<div class="card">
			  <div class="card-body p-0">
				<div class="row m-0 chart-main">
				  <div class="col-xl-3 col-md-6 col-sm-6 p-0 box-col-6">
					<div class="media align-items-center">
					  <div class="media-body">
						<div class="right-chart-content">
						  <h4>{{$data['invoices'] ?? '0'}}</h4><span>Projects </span>
						</div>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-3 col-md-6 col-sm-6 p-0 box-col-6">
					<div class="media align-items-center">
					  <div class="media-body">
						<div class="right-chart-content">
						  <h4>{{$data['paidinvoices'] ?? '0'}}</h4><span>InProgress Project</span>
						</div>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-3 col-md-6 col-sm-6 p-0 box-col-6">
					<div class="media align-items-center">
					  <div class="media-body">
						<div class="right-chart-content">
						  <h4>{{$data['unpaidinvoices'] ?? '0'}}</h4><span>Completed Project</span>
						</div>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-3 col-md-6 col-sm-6 p-0 box-col-6">
					<div class="media border-none align-items-center">
					  <div class="media-body">
						<div class="right-chart-content">
						  <h4>{{$data['leads'] ?? '0'}}</h4><span>Leads</span>
						</div>
					  </div>
					</div>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
      <div class="col-xl-3 xl-50 chart_data_right second d-none"> 
        <div class="card">
          <div class="card-body">
            <div class="media align-items-center">
              <div class="media-body right-chart-content"> 
                <h4>$95,000<span class="new-box">New</span></h4><span>Product Order Value</span>
              </div>
              <div class="knob-block text-center">
                <input class="knob1" data-width="50" data-height="70" data-thickness=".3" data-fgcolor="#7366ff" data-linecap="round" data-angleoffset="0" value="60">
              </div>
            </div>
          </div>
        </div>
      </div>
	  
		<div class="col-xl-12 xl-100 box-col-12">
			<div class="card">
				<div class="card-header">
				<h5>Recent Payment Information</h5>
				</div>
				<div class="card-body">
					<div class="user-status table-responsive best-seller-table mb-0">
						<table class="table table-bordernone">
							<thead>
								<tr>
									<th scope="col">ID#</th>
									<th scope="col">CLIENT NAME</th>
									<th scope="col">SERVICE</th>
									<th scope="col">BRAND NAME	</th>
									<th scope="col">SALE AGENT	</th>
									<th scope="col">AMOUNT	</th>
									<th scope="col">STATUS</th>
									<th class="text-end" scope="col">ACTION	</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Dummy text usedout print</td>
									<td class="digits">10</td>
									<td class="digits">$6523</td>
									<td class="digits">$6523</td>
									<td class="digits">$6523</td>
									<td class="digits">$6523</td>
									<td class="digits"><span class="badge badge-light-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check me-2"><polyline points="20 6 9 17 4 12"></polyline></svg> Done</span></td>
									<td class="digits text-end"><a href="java:;" class="copy_text"><span><i class="fa fa-clipboard"></i></span></a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div> 
    </div>
  </div>
  <!-- Container-fluid Ends-->
</div>
@endsection