@extends('layouts.appNew')
@section('content')
<!--begin::Container-->
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
	<!--begin::Post-->
	<div class="content flex-row-fluid" id="kt_content">
		<!--begin::Row-->
		<div class="row g-5 g-xl-10 mb-5 mb-xl-10">
			<!--begin::Col-->
			<div class="col-xl-3">
				<!--begin::Card widget 3-->
				<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100" style="background-color: #F1416C;background-image:url('assets/media/svg/shapes/wave-bg-red.svg');border:0px !important;">
					<!--begin::Header-->
					<div class="card-header pt-5 mb-3">
						<!--begin::Icon-->
						<div class="d-flex flex-center rounded-circle h-80px w-80px" style="border: 1px dashed rgba(255, 255, 255, 0.4);background-color: #F1416C">
							<i class="ki-duotone ki-call text-white fs-2qx lh-0">
								<span class="path1"></span>
								<span class="path2"></span>
								<span class="path3"></span>
								<span class="path4"></span>
								<span class="path5"></span>
								<span class="path6"></span>
								<span class="path7"></span>
								<span class="path8"></span>
							</i>
						</div>
						<!--end::Icon-->
					</div>
					<!--end::Header-->
					<!--begin::Card body-->
					<div class="card-body d-flex align-items-end mb-3">
						<!--begin::Info-->
						<div class="d-flex align-items-center">
							<span class="fs-4hx text-white fw-bold me-6">{{$clients}}</span>
							<div class="fw-bold fs-6 text-white">
								<span class="d-block">Total</span>
								<span class="">Clients</span>
							</div>
						</div>
						<!--end::Info-->
					</div>
					<!--end::Card body-->
					<!--begin::Card footer-->
					<div class="card-footer" style="border-top: 1px solid rgba(255, 255, 255, 0.3);background: rgba(0, 0, 0, 0.15);">
						<!--begin::Progress-->
						<div class="fw-bold text-white py-2">
							<span class="fs-1 d-block">0</span>
							<span class="opacity-50">Daily Leads</span>
						</div>
						<!--end::Progress-->
					</div>
					<!--end::Card footer-->
				</div>
				<!--end::Card widget 3-->
			</div>
			<!--end::Col-->
			<!--begin::Col-->
			<div class="col-xl-3">
				<!--begin::Card widget 3-->
				<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100" style="background-color: #7239EA;background-image:url('assets/media/svg/shapes/wave-bg-purple.svg');border:0px !important;">
					<!--begin::Header-->
					<div class="card-header pt-5 mb-3">
						<!--begin::Icon-->
						<div class="d-flex flex-center rounded-circle h-80px w-80px" style="border: 1px dashed rgba(255, 255, 255, 0.4);background-color: #7239EA">
							<i class="ki-duotone ki-call text-white fs-2qx lh-0">
								<span class="path1"></span>
								<span class="path2"></span>
								<span class="path3"></span>
								<span class="path4"></span>
								<span class="path5"></span>
								<span class="path6"></span>
								<span class="path7"></span>
								<span class="path8"></span>
							</i>
						</div>
						<!--end::Icon-->
					</div>
					<!--end::Header-->
					<!--begin::Card body-->
					<div class="card-body d-flex align-items-end mb-3">
						<!--begin::Info-->
						<div class="d-flex align-items-center">
							<span class="fs-4hx text-white fw-bold me-6">{{$followups}}</span>
							<div class="fw-bold fs-6 text-white">
								<span class="d-block">Total</span>
								<span class="">Followups</span>
							</div>
						</div>
						<!--end::Info-->
					</div>
					<!--end::Card body-->
					<!--begin::Card footer-->
					<div class="card-footer" style="border-top: 1px solid rgba(255, 255, 255, 0.3);background: rgba(0, 0, 0, 0.15);">
						<!--begin::Progress-->
						<div class="fw-bold text-white py-2">
							<span class="fs-1 d-block">{{$total_followups}}</span>
							<span class="opacity-50">Total Followups</span>
						</div>
						<!--end::Progress-->
					</div>
					<!--end::Card footer-->
				</div>
				<!--end::Card widget 3-->
			</div>
			<!--end::Col-->
			<!--begin::Col-->
			<div class="col-xl-6">
				<!--begin::Chart widget 36-->
				<div class="card card-flush overflow-hidden h-lg-100">
					<!--begin::Header-->
					<div class="card-header pt-5">
						<!--begin::Title-->
						<h3 class="card-title align-items-start flex-column">
							<span class="card-label fw-bold text-gray-900">Last 5 days followups</span>
							<span class="text-gray-500 mt-1 fw-semibold fs-6">1,046 Inbound Calls today</span>
						</h3>
						<!--end::Title-->
						<!--begin::Toolbar-->
						<div class="card-toolbar">
							<!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
							<div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" data-kt-daterangepicker-range="today" class="btn btn-sm btn-light d-flex align-items-center px-4">
								<!--begin::Display range-->
								<div class="text-gray-600 fw-bold">Loading date range...</div>
								<!--end::Display range-->
								<i class="ki-duotone ki-calendar-8 text-gray-500 lh-0 fs-2 ms-2 me-0">
									<span class="path1"></span>
									<span class="path2"></span>
									<span class="path3"></span>
									<span class="path4"></span>
									<span class="path5"></span>
									<span class="path6"></span>
								</i>
							</div>
							<!--end::Daterangepicker-->
						</div>
						<!--end::Toolbar-->
					</div>
					<!--end::Header-->
					<!--begin::Card body-->
					<div class="card-body d-flex align-items-end p-0">
						<!--begin::Chart-->
						<div id="kt_charts_widget_36" class="min-h-auto w-100 ps-4 pe-6" style="height: 300px"></div>
						<!--end::Chart-->
					</div>
					<!--end::Card body-->
				</div>
				<!--end::Chart widget 36-->
			</div>
			<!--end::Col-->
		</div>
		<!--end::Row-->
		<!--begin::Row-->
		<div class="row g-5 g-xl-10 mb-5 mb-xl-10">
			<!--begin::Col-->
			<div class="col-xl-6">
				<!--begin::Card widget 19-->
				<div class="card card-flush h-lg-100">
					<!--begin::Header-->
					<div class="card-header pt-5">
						<!--begin::Title-->
						<h3 class="card-title align-items-start flex-column">
							<span class="card-label fw-bold text-gray-900">Performance</span>
							<span class="text-gray-500 mt-1 fw-semibold fs-6">{{$clients}} Inbound Calls today</span>
						</h3>
						<!--end::Title-->
						<!--begin::Toolbar-->
						<div class="card-toolbar">
							<!--begin::Label-->
							<span class="badge badge-light-danger fs-base mt-n3">
							<i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1">
								<span class="path1"></span>
								<span class="path2"></span>
							</i>7.4%</span>
							<!--end::Label-->
						</div>
						<!--end::Toolbar-->
					</div>
					<!--end::Header-->
					<!--begin::Card body-->
					<div class="card-body d-flex align-items-end pt-6">
						<!--begin::Row-->
						<div class="row align-items-center mx-0 w-100">
							<!--begin::Col-->
							<div class="col-7 px-0">
															</div>
							<!--end::Col-->
							<!--begin::Col-->
							<div class="col-5 d-flex justify-content-end px-0">
								<!--begin::Chart-->
								<div id="kt_card_widget_19_chart" class="min-h-auto h-150px w-150px" data-kt-size="150" data-kt-line="25"></div>
								<!--end::Chart-->
							</div>
							<!--end::Col-->
						</div>
						<!--end::Row-->
					</div>
					<!--end::Card body-->
				</div>
				<!--end::Card widget 19-->
			</div>
			<!--end::Col-->
			<!--begin::Col-->
			<div class="col-xl-6">
			</div>
			<!--end::Col-->
		</div>
		<!--end::Row-->
	</div>
	<!--end::Post-->
</div>
<!--end::Container-->
@endsection