@extends('layouts.master')
@section('title', 'Pnscrm')
@section('page', 'Home')
@section('sidebar')
    @parent

@endsection

@section('content')
  <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 grid-margin stretch-card">
              <div class="card card-statistics">
                <div class="card-body">
                  <div class="clearfix">
                    <div class="float-left">
                      <i class="mdi mdi-cube text-danger icon-lg"></i>
                    </div>
                    <div class="float-right">
                      <p class="mb-0 text-right">Total Projects</p>
                      <div class="fluid-container">
                        <h3 class="font-weight-medium text-right mb-0">{{$totalrevenue}}</h3>
                      </div>
                    </div>
                  </div>
                  <p class="text-muted mt-3 mb-0">
                    <i class="mdi mdi-alert-octagon mr-1" aria-hidden="true"></i> Total no of projects
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 grid-margin stretch-card">
              <div class="card card-statistics">
                <div class="card-body">
                  <div class="clearfix">
                    <div class="float-left">
                      <i class="mdi mdi-receipt text-warning icon-lg"></i>
                    </div>
                    <div class="float-right">
                      <p class="mb-0 text-right">Won</p>
                      <div class="fluid-container">
                        <h3 class="font-weight-medium text-right mb-0">{{$won}}</h3>
                      </div>
                    </div>
                  </div>
                  <p class="text-muted mt-3 mb-0">
                    <i class="mdi mdi-bookmark-outline mr-1" aria-hidden="true"></i> Total number of leads won
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 grid-margin stretch-card">
              <div class="card card-statistics">
                <div class="card-body">
                  <div class="clearfix">
                    <div class="float-left">
                      <i class="mdi mdi-poll-box text-success icon-lg"></i>
                    </div>
                    <div class="float-right">
                      <p class="mb-0 text-right">Leads</p>
                      <div class="fluid-container">
                        <h3 class="font-weight-medium text-right mb-0">{{$leads}}</h3>
                      </div>
                    </div>
                  </div>
                  <p class="text-muted mt-3 mb-0">
                    <i class="mdi mdi-calendar mr-1" aria-hidden="true"></i> Total number of leads present
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 grid-margin stretch-card">
              <div class="card card-statistics">
                <div class="card-body">
                  <div class="clearfix">
                    <div class="float-left">
                      <i class="mdi mdi-alert-octagon text-info icon-lg"></i>
                    </div>
                    <div class="float-right">
                      <p class="mb-0 text-right">Lost</p>
                      <div class="fluid-container">
                        <h3 class="font-weight-medium text-right mb-0">{{$closed}}</h3>
                      </div>
                    </div>
                  </div>
                  <p class="text-muted mt-3 mb-0">
                    <i class="mdi mdi-reload mr-1" aria-hidden="true"></i> Total number of leads losted
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-7 grid-margin stretch-card">
              <!--weather card-->
              <div class="card card-weather">
                <div class="card-body">
                  <div class="weather-date-location">
                    <h3>@php
echo "" . date("l");
@endphp</h3>
                    <p class="text-gray">
                      <span class="weather-date">@php

echo "" . date("d-m-y") . "<br>";
@endphp</span>
                      <span class="weather-location">@php 
 @endphp</span>
                    </p>
                  </div>
                  <div class="weather-data d-flex">
                    <div class="mr-auto">
                      <h4 class="display-3">21<span class="symbol">&deg;</span>C</h4>
                      <p>
                        Mostly Cloudy
                      </p>
                    </div>
                  </div>
                </div>
                <div class="card-body p-0">
                  <div class="d-flex weakly-weather">
                    <div class="weakly-weather-item">
                      <p class="mb-0">
                        Sun
                      </p>
                      <i class="mdi mdi-weather-cloudy"></i>
                      <p class="mb-0">
                        30°
                      </p>
                    </div>
                    <div class="weakly-weather-item">
                      <p class="mb-1">
                        Mon
                      </p>
                      <i class="mdi mdi-weather-hail"></i>
                      <p class="mb-0">
                        31°
                      </p>
                    </div>
                    <div class="weakly-weather-item">
                      <p class="mb-1">
                        Tue
                      </p>
                      <i class="mdi mdi-weather-partlycloudy"></i>
                      <p class="mb-0">
                        28°
                      </p>
                    </div>
                    <div class="weakly-weather-item">
                      <p class="mb-1">
                        Wed
                      </p>
                      <i class="mdi mdi-weather-pouring"></i>
                      <p class="mb-0">
                        30°
                      </p>
                    </div>
                    <div class="weakly-weather-item">
                      <p class="mb-1">
                        Thu
                      </p>
                      <i class="mdi mdi-weather-pouring"></i>
                      <p class="mb-0">
                        29°
                      </p>
                    </div>
                    <div class="weakly-weather-item">
                      <p class="mb-1">
                        Fri
                      </p>
                      <i class="mdi mdi-weather-snowy-rainy"></i>
                      <p class="mb-0">
                        31°
                      </p>
                    </div>
                    <div class="weakly-weather-item">
                      <p class="mb-1">
                        Sat
                      </p>
                      <i class="mdi mdi-weather-snowy"></i>
                      <p class="mb-0">
                        32°
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!--weather card ends-->
            </div>
            <div class="col-lg-5 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <h2 class="card-title text-primary mb-5">Performance History(Demo Data)</h2>
                  <div class="wrapper d-flex justify-content-between">
                    <div class="side-left">
                      <p class="mb-2">The best performance</p>
                      <p class="display-3 mb-4 font-weight-light">+45%</p>
                    </div>
                    <div class="side-right">
                      <small class="text-muted">2018</small>
                    </div>
                  </div>
                  <div class="wrapper d-flex justify-content-between">
                    <div class="side-left">
                      <p class="mb-2">Worst performance</p>
                      <p class="display-3 mb-5 font-weight-light">-20%</p>
                    </div>
                    <div class="side-right">
                      <small class="text-muted">2018</small>
                    </div>
                  </div>
                  <div class="wrapper">
                    <div class="d-flex justify-content-between">
                      <p class="mb-2">Sales(demo)</p>
                      <p class="mb-2 text-primary">88%</p>
                    </div>
                    <div class="progress">
                      <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                  <div class="wrapper mt-4">
                    <div class="d-flex justify-content-between">
                      <p class="mb-2">Leads(demo)</p>
                      <p class="mb-2 text-success">56%</p>
                    </div>
                    <div class="progress">
                      <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
           <!-- <div class="col-md-4 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title mb-4">New Accounts</h5>
                  <div class="new-accounts">
                    <ul class="chats">
                      <li class="chat-persons">
                        <a href="#">
                          <span class="pro-pic"><img src="images/faces/face1.jpg" alt=""></span>
                          <div class="user">
                            <p class="u-name">David</p>
                            <p class="u-designation">Python Developer</p>
                          </div>
                          <p class="joined-date">Yesterday</p>
                        </a>
                      </li>
                      <!-- list person -->
                    <!--  <li class="chat-persons">
                        <a href="#">
                          <span class="pro-pic"><img src="images/faces/face2.jpg" alt=""></span>
                          <div class="user">
                            <p class="u-name">Stella Johnson</p>
                            <p class="u-designation">SEO Expert</p>
                          </div>
                          <p class="joined-date">Today</p>
                        </a>
                      </li>
                      <!-- list person -->
                <!--      <li class="chat-persons">
                        <a href="#">
                          <span class="pro-pic"><img src="images/faces/face3.jpg" alt=""></span>
                          <div class="user">
                            <p class="u-name">Marina Michel</p>
                            <p class="u-designation">Business Development</p>
                          </div>
                          <p class="joined-date">14d ago</p>
                        </a>
                      </li>
                      <!-- list person -->
                  <!--    <li class="chat-persons">
                        <a href="#">
                          <span class="pro-pic"><img src="images/faces/face4.jpg" alt=""></span>
                          <div class="user">
                            <p class="u-name">Edward Fletcher</p>
                            <p class="u-designation">UI/UX Designer</p>
                          </div>
                          <p class="joined-date">3d ago</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 grid-margin stretch-card">
              <div class="row flex-grow">
                <div class="col-12 grid-margin stretch-card">
                  <div class="card card-revenue">
                    <div class="card-body d-flex align-items-center">
                      <div class="d-flex flex-grow">
                        <div class="mr-auto">
                          <p class="highlight-text mb-0">
                            $168.90
                          </p>
                          <p>
                            This Month
                          </p>
                          <div class="badge badge-pill">
                            18%
                          </div>
                        </div>
                        <div class="ml-auto align-self-end">
                          <div id="revenue-chart" sparkType="bar" sparkBarColor="#e6ecf5" barWidth="2">
                            4,3,10,9,4,3,8,6,7,8
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 stretch-card">
                  <div class="card card-revenue-table">
                    <div class="card-body">
                      <div class="revenue-item d-flex">
                        <div class="revenue-desc">
                          <h6>Member Profit</h6>
                          <p class="font-weight-light">
                            Average Weekly Profit
                          </p>
                        </div>
                        <div class="revenue-amount">
                          <p class="text-primary">
                            +168.900
                          </p>
                        </div>
                      </div>
                      <div class="revenue-item d-flex">
                        <div class="revenue-desc">
                          <h6>Total Profit</h6>
                          <p class="font-weight-light">
                            Weekly Customer Orders
                          </p>
                        </div>
                        <div class="revenue-amount">
                          <p class="text-primary">
                            +6890.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 grid-margin stretch-card">
							<div class="card">
								<div class="card-body">
									<h4 class="card-title">Todo</h4>
									<div class="add-items d-flex">
										<input type="text" class="form-control todo-list-input"  placeholder="What do you need to do today?">
										<button class="add btn btn-primary font-weight-medium todo-list-add-btn">Add</button>
									</div>
									<div class="list-wrapper">
										<ul class="d-flex flex-column-reverse todo-list todo-list-custom">
											<li>
												<div class="form-check form-check-flat">
													<label class="form-check-label">
														<input class="checkbox" type="checkbox">
														Meeting with Alisa
													</label>
												</div>
												<i class="remove mdi mdi-close-circle-outline"></i>
											</li>
											<li class="completed">
												<div class="form-check form-check-flat">
													<label class="form-check-label">
														<input class="checkbox" type="checkbox" checked>
														Call John
													</label>
												</div>
												<i class="remove mdi mdi-close-circle-outline"></i>
											</li>
											<li>
												<div class="form-check form-check-flat">
													<label class="form-check-label">
														<input class="checkbox" type="checkbox">
														Create invoice
													</label>
												</div>
												<i class="remove mdi mdi-close-circle-outline"></i>
											</li>
											<li>
												<div class="form-check form-check-flat">
													<label class="form-check-label">
														<input class="checkbox" type="checkbox">
														Print Statements
													</label>
												</div>
												<i class="remove mdi mdi-close-circle-outline"></i>
											</li>
											<li class="completed">
												<div class="form-check form-check-flat">
													<label class="form-check-label">
														<input class="checkbox" type="checkbox" checked>
														Prepare for presentation
													</label>
												</div>
												<i class="remove mdi mdi-close-circle-outline"></i>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>-->
          </div>
       
        
        </div>
        <!-- content-wrapper ends -->
        
@endsection
@section('footer')
 <!-- Custom js for this page-->
  <script src="{{ asset('js/dashboard.js')}}"></script>
  <script src="{{ asset('js/modal-demo.js')}}"></script>
  <!-- End custom js for this page-->
@endsection