@extends('crm::layouts.crm_master')
@section('page_title')
	CRM Dashboard
@endsection
@section('page_header')
	
  <div class="page-header">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Page pre-title -->
					{{ Breadcrumbs::render('crm') }}
                <h2 class="page-title">
                  Dashboard
                </h2>
              </div>
              <!-- Page title actions -->
              
            </div>
          </div>
@endsection
@section('page_body')
<div class="row mt-3">
<div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		<span class="bg-blue text-white stamp mr-3"><i class="fa fa-chart-bar"></i>
		</span>
		<div class="mr-3 lh-sm">
		  <div class="strong">
			{{$lead_list->count()}}
		  </div>
		  <div class="text-muted"><strong>Total Leads</strong> </div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		<span class="bg-success text-white stamp mr-3 ">
			<i class="fa fa-chart-bar"></i>
		</span>
		<div class="mr-3 lh-sm">
		  <div class="strong">
			{{$total_task_count}}
		  </div>
		  <div class="text-muted"><strong>Total Tasks</strong></div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		<span class="bg-info text-white stamp mr-3"><i class="fa fa-chart-bar"></i>
		</span>
		<div class="mr-3 lh-sm">
		  <div class="strong">
			{{$total_visit_count}}
		  </div>
		  <div class="text-muted"><strong>Total Visits</strong></div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		@php($per = EF::calculatePercentage($new_lead_list_count,$total_lead_count,100))
		
		<div class=" chart-circle chart-circle-sm" data-value="{{($per/100)}}" data-thickness="6" data-color="green
		">
			<div class="chart-circle-value">{{$new_lead_list_count}}</div>
		</div>
				<div class="ml-3 lh-sm">
				
				 <h2 class="strong text-success">{{$new_lead_list_count}}</h2>
				<div class="text-dark"> New Contacted Leads</div>
				</div>
			</div>
			</div>
		</div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		 
		@php($per = EF::calculatePercentage($contacted_lead_list_count,$total_lead_count,100))
  <div class=" chart-circle chart-circle-sm" data-value="{{($per/100)}}" data-thickness="6" data-color="primary">
	<div class="chart-circle-value">{{$contacted_lead_list_count}}</div>
  </div>
		<div class="ml-4 lh-sm">
			<h2 class="strong text-primary">
			{{$contacted_lead_list_count}}
		  </h2>
		  <div class="text-dark">Contacted Leads</div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		 
		@php($per = EF::calculatePercentage($interested_lead_list_count,$total_lead_count,100))
  <div class=" chart-circle chart-circle-sm" data-value="{{($per/100)}}" data-thickness="6" data-color="info">
	<div class="chart-circle-value">{{$interested_lead_list_count}}</div>
  </div>
		<div class="ml-3 lh-sm">
			<h2 class="strong text-info">
			{{$interested_lead_list_count}}
		  </h2>
		  <div class="text-dark">Interested Leads</div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		 
		@php($per = EF::calculatePercentage($underreview_lead_list_count,$total_lead_count,100))
  <div class=" chart-circle chart-circle-sm" data-value="{{($per/100)}}" data-thickness="6" data-color="secondary">
	<div class="chart-circle-value">{{$underreview_lead_list_count}}</div>
  </div>
		<div class="ml-3 lh-sm">
			<h2 class="strong text-secondary">
			{{$underreview_lead_list_count}}
		  </h2>
		  <div class="text-dark">Under Review Leads</div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		 
		@php($per = EF::calculatePercentage($demo_lead_list_count,$total_lead_count,100))
  <div class=" chart-circle chart-circle-sm" data-value="{{($per/100)}}" data-thickness="6" data-color="yellow">
	<div class="chart-circle-value">{{$demo_lead_list_count}}</div>
  </div>
		<div class="ml-3 lh-sm">
			<h2 class="strong text-warning">
			{{$demo_lead_list_count}}
		  </h2>

		  <div class="text-dark">Demo Leads</div>
		</div>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-xl-4">
	<div class="card card-sm">
	  <div class="card-body d-flex align-items-center">
		 
		@php($per = EF::calculatePercentage($unqualified_lead_list_count,$total_lead_count,100))
  <div class=" chart-circle chart-circle-sm" data-value="{{($per/100)}}" data-thickness="6" data-color="red">
	<div class="chart-circle-value">{{$unqualified_lead_list_count}}</div>
  </div>
		<div class="ml-3 lh-sm">
			<h2 class="strong text-danger">
			{{$unqualified_lead_list_count}}
		  </h2>

		  <div class="text-dark">Unqualified Leads</div>
		</div>
	  </div>
	</div>
  </div>

  <div class="col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Total Leads</h3>
				  </div>
				  <div class="card-body">
				  <div id="lead_chart" style="height: 12rem"></div>
				</div>
                </div>
			</div>

			<div class="col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Total Tasks</h3>
				  </div>
				  <div class="card-body">
				  <div id="task_chart" style="height: 12rem"></div>
				</div>
                </div>
			</div>


</div>
<div class="row">
	<div class="col-md-6 col-lg-12">
              <div class="card">
                <div class="card-header p-2" style="background-color:#1978d1;">
                  <h4 class="card-title text-light">Latest Leads </h4>
				</div>
                <div class="table-responsive ">
                  <table class="table card-table table-vcenter">
                    <thead>
					  <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Sales Person</th>
						<th>Date</th>
                        <th>Status</th>
						
                      </tr>
                    </thead>
					<tbody>
					@foreach($lead_list->take(5) as $rows)
						<tr>
                      <td class="text-muted">{{$loop->iteration}}</td>
                      <td class="text-muted">{{$rows->name}}  ({{$rows->lead_no}}) </td>
					  <td class="text-muted">{{$rows->activeTransferLead->user->name}}</td>
					  <td class="text-muted">{{EF::dateFormat($rows->date)}}</td>
					  <td>
					@if($rows->status == "New Contacted") 
						<span class="badge badge-success">{{$rows->status}}</span>
					@elseif($rows->status == "Contacted") 
					<span class="badge badge-primary">{{$rows->status}}</span>
					@elseif($rows->status == "Interested") 
					<span class="badge badge-info">{{$rows->status}}</span>
					@elseif($rows->status == "Under Review") 
					<span class="badge badge-secondary">{{$rows->status}}</span>
					@elseif($rows->status == "Demo") 
					<span class="badge badge-warning">{{$rows->status}}</span>
					@elseif($rows->status == "Unqualified") 
					<span class="badge badge-danger">{{$rows->status}}</span>
					@endif
				</td>

					 
					</tr>
					
					@endforeach
					
                  </tbody></table>
				</div>
              </div>
			</div>
			
			<div class="col-md-6 col-lg-12">
              <div class="card">
				<div class="card-header p-2" style="background-color:#1978d1;">
                  <h4 class="card-title text-light">Latest Tasks </h4>
				</div>
				
                <div class="table-responsive">
                  <table class="table card-table table-vcenter">
                    <thead>
					  <tr>
                        <th>#</th>
						<th>Title</th>
						<th>Lead no</th>
						<th>Date</th>
						<th>Assign To</th>
                        <th>Status</th>
                      </tr>
                    </thead>
					<tbody>
					
						@foreach($task_list->take(5) as $rows)
						<tr>
					  <td class="text-muted">{{$loop->iteration}}</td>
					  <td class="text-muted">{{ucfirst($rows->title)}}</td>
					  <td class="text-muted"> <a href="{{route('lead.view' , ['id'=> Crypt::encrypt($rows->lead_id)])}}"  class="text-muted">{{$rows->lead->lead_no}}</a></td>
                      <td class="text-muted">{{EF::dateFormat($rows->date)}}</td>
					  <td class="text-muted">{{$rows->assignTo->name}}</td>
                      <td class="text-muted">{{$rows->status}}</td>
					</tr>
					
					@endforeach
					
                  </tbody></table>
				</div>
              </div>
            </div>
	
			<div class="col-md-6 col-lg-12">
              <div class="card">
				<div class="card-header p-2" style="background-color:#1978d1;">
                  <h4 class="card-title text-light">Latest Correspondences </h4>
				</div>
				<div class="" style="">
                <div class="table-responsive ">
                  <table class="table card-table table-vcenter">
                    <thead>
					  <tr>
                        <th>#</th>
                        <th>Name</th>
						<th>Description</th>
						<th>Lead no</th>
                        <th>Date</th>
                      </tr>
                    </thead>
					<tbody>
					@foreach($visit_list->take(5) as $rows)
					<tr>
                      <td class="text-muted">{{$loop->iteration}}</td>
                      <td class="text-muted">{{$rows->visit_no}}</td>
					  <td class="text-muted">{{ucfirst($rows->description)}}</td>
					  <td><a href="{{route('lead.view' , ['id'=> Crypt::encrypt($rows->lead_id)])}}"  class="text-muted">{{$rows->lead->lead_no}}</a></td>
                      <td class="text-muted">{{EF::dateFormat($rows->date)}}</td>
					</tr>
					
					@endforeach
					
                  </tbody></table>
				</div>
              </div>
			</div>
			
		

	</div>
@endsection
@section('page_modal')
	
@endsection
@section('page_script')

<!-- JS FOR CHARTS -->

<script src="{{ asset('/assets/js/require.min.js')}}"></script>
<script src="{{ asset('/assets/plugins/charts-c3/plugin.js')}}"></script>

<script>
requirejs.config({
  baseUrl: "{{url('/')}}"
});


</script>

<script src="{{ asset('/assets/js/dashboard.js')}}"></script>


<script>
    require(['c3', 'jquery'], function(c3, $) {
        $(document).ready(function(){
            var chart = c3.generate({
                bindto: '#lead_chart', // id of chart wrapper
                data: {
                    columns: [
                        // each columns data
                        @json($lead)
                    ],
                    type: 'bar', // default type of chart
                    groups: [
                        [ 'data1', 'data4']
                    ],
                    colors: {
						'data1': tabler.colors["blue"],
						'data2': tabler.colors["pink"],
						'data3': tabler.colors["green"],
						'data4': tabler.colors["blue"]
                    },
                    names: {
                        // name of each serie
                        'data1': 'Leads'
                    }
                },
                axis: {
                    x: {
                       
                            type: 'category',
                            // name of each category
                            categories: @json($lead_list_chart)
                    },
                },
				legend: {
                                  show: false, //hide legend
                        },
                tooltip: {
                    format: {
                        title: function (x) {
                            return '';
                        }
                    }
                },
                padding: {
					top: 0
                },
               
            });
        });
    });
  </script>

  <script>
    require(['c3', 'jquery'], function(c3, $) {
        $(document).ready(function(){
            var chart = c3.generate({
                bindto: '#task_chart', // id of chart wrapper
                data: {
                    columns: [
                        // each columns data
                        @json($task)
                    ],
                    type: 'bar', // default type of chart
                    groups: [
                        [ 'data1', 'data4']
                    ],
                    colors: {
						'data1': tabler.colors["green"],
						'data2': tabler.colors["pink"],
						'data3': tabler.colors["green"],
						'data4': tabler.colors["blue"]
                    },
                    names: {
                        // name of each serie
                        'data1': 'Tasks'
                    }
                },
                axis: {
                    x: {
                       
                            type: 'category',
                            // name of each category
                            categories: @json($task_list_chart)
                    },
                },
				legend: {
                                  show: false, //hide legend
                        },
                tooltip: {
                    format: {
                        title: function (x) {
                            return '';
                        }
                    }
                },
                padding: {
					top: 0
                },
               
            });
        });
    });
  </script>
  
@endsection