{% extends 'base.html.twig' %}

{% block title %}Dashboard
{% endblock %}

{% block body %}
	{{ block('nav', 'internal/libs/nav.html.twig') }}

	<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg">
		{{ block('topnav', 'internal/libs/top-nav.html.twig') }}

		<div class='container-fluid py-2'>
			<div class='row'>
				<div class='ms-3' style='margin:5px;'>
					<h2 class='mb-0 h4 font-weight-bolder'>Dashboard</h2>
				</div>

				<div class='col-xl-3 col-sm-6 mb-xl-0 mb-4'>
					<div class='card'>
						<div class='card-header p-2 ps-3'>
							<div class='d-flex justify-content-between'>
								<div>
									<p class='text-sm mb-0 text-capitalize'>Miles Travelled</p>
									<h4 class='mb-0' title='30 Days / YTD'>
										{{ milesTravelled30Days }}
										mi /
										{{ milesTravelledYTD }}
										mi
									</h4>
								</div>
								<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
									<i class="material-symbols-rounded opacity-10">weekend</i>
								</div>
							</div>
						</div>
						<hr class='dark horizontal my-0'>
						<div class='card-footer p-2 ps-3'>
							<p class='mb-0 text-sm'>
								<span class='text-info font-weight-bolder'>
                                    Deductable amount: ${{ (milesTravelled30Days * mileage_rate)|number_format(2, '.', ',') }} / ${{ (milesTravelledYTD * mileage_rate)|number_format(2, '.', ',') }}
                                </span>
							</p>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
					<div class='card'>
						<div class='card-header p-2 ps-3'>
							<div class='d-flex justify-content-between'>
								<div>
									<p class='text-sm mb-0 text-capitalize'>Time Travelled</p>
									<h4 class='mb-0'>
                                        {{ totalTimeTravelled30Days|date("%a %H:%I'%S''") }}
                                        /
                                        {{ totalTimeTravelledYTD|date("%a %H:%I'%S''") }}
                                    </h4>
								</div>
								<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
									<i class="material-symbols-rounded opacity-10">weekend</i>
								</div>
							</div>
						</div>
						<hr class='dark horizontal my-0'>
						<div class='card-footer p-2 ps-3'>
							<p class='mb-0 text-sm'>
								<span class='text-info font-weight-bolder'></span>
							</p>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
					<div class='card'>
						<div class='card-header p-2 ps-3'>
							<div class='d-flex justify-content-between'>
								<div>
									<p class='text-sm mb-0 text-capitalize'>Case Mileage</p>
									<h4 class='mb-0'>
                                        {{ caseMileage30Days }} / {{ caseMileageYTD }}
                                    </h4>
								</div>
								<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
									<i class="material-symbols-rounded opacity-10">weekend</i>
								</div>
							</div>
						</div>
						<hr class='dark horizontal my-0'>
						<div class='card-footer p-2 ps-3'>
							<p class='mb-0 text-sm'>
								<span class='text-info font-weight-bolder' title='30 Days / YTD'></span>
							</p>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
					<div class='card'>
						<div class='card-header p-2 ps-3'>
							<div class='d-flex justify-content-between'>
								<div>
									<h4 class='mb-0'>Miles Travelled</h4>
									<p class='text-sm mb-0 text-capitalize'></p>
								</div>
								<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
									<i class="material-symbols-rounded opacity-10">weekend</i>
								</div>
							</div>
						</div>
						<hr class='dark horizontal my-0'>
						<div class='card-footer p-2 ps-3'>
							<p class='mb-0 text-sm'>
								<span class='text-info font-weight-bolder' title='30 Days / YTD'>{{ milesTravelled30Days }}
									mi /
									{{ milesTravelledYTD }}
									mi</span>
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class='row'>
				<div class="col-lg-4 col-md-6 mt-4 mb-4">
					<div class="card">
						<div class="card-body">
							<h6 class="mb-0 ">Website Views</h6>
							<p class="text-sm ">Last Campaign Performance</p>
							<div class="pe-2">
								<div class="chart">
									<canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
								</div>
							</div>
							<hr class="dark horizontal">
							<div class="d-flex ">
								<i class="material-symbols-rounded text-sm my-auto me-1">schedule</i>
								<p class="mb-0 text-sm">
									campaign sent 2 days ago
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
{% endblock %}