{# templates/admin/custom_dashboard.html.twig #}

{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content %}

		<h1>Tableau de bord</h1>
		<div class="row">
		<form method="get" action="{{ path('custom_admin_dashboard') }}" class="mb-4">
		        <div class="col">
		            <div class="form-group">
		                <label for="startDate">Date de début</label>
		                <input type="date" id="startDate" name="startDate" class="form-control" required>
		            </div>
		        </div>
		        <div class="col">
		            <div class="form-group">
		                <label for="endDate">Date de fin</label>
		                <input type="date" id="endDate" name="endDate" class="form-control" required>
		            </div>
		        </div>
		        <div class="col align-self-end">
		            <button type="submit" class="btn btn-primary">View Sales</button>
		        </div>
		</form> 
    </div>


	<div class="row">
		<div class="col-md-4">
			<h2>Ventes du jour</h2>
			<canvas id="todaySalesChart"></canvas>
		</div>
		<div class="col-md-4">
			<h2>Ventes de la semaine</h2>
			<canvas id="weekSalesChart"></canvas>
		</div>
		<div class="col-md-4">
			<h2>Ventes du mois</h2>
			<canvas id="monthSalesChart"></canvas>
		</div>
	</div>

	<div class="row mt-4">
		<div class="col-md-12">
			<h2>Ventes personnalisées</h2>
			<canvas id="customSalesChart"></canvas>
		</div>
	</div>






<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
	const todaySalesData = {{ todaySales|json_encode|raw }};
const weekSalesData = {{ weekSales|json_encode|raw }};
const monthSalesData = {{ monthSales|json_encode|raw }};
const customSalesData = {{ customSales|json_encode|raw }};

const todaySalesChart = new Chart(document.getElementById('todaySalesChart'), {
type: 'bar',
data: {
labels: todaySalesData.map(sale => sale.createdAt),
datasets: [
{
label: 'Ventes',
data: todaySalesData.map(sale => sale.totalAmount),
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

const weekSalesChart = new Chart(document.getElementById('weekSalesChart'), {
type: 'line',
data: {
labels: weekSalesData.map(sale => sale.createdAt),
datasets: [
{
label: 'Ventes',
data: weekSalesData.map(sale => sale.totalAmount),
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

const monthSalesChart = new Chart(document.getElementById('monthSalesChart'), {
type: 'line',
data: {
labels: monthSalesData.map(sale => sale.createdAt),
datasets: [
{
label: 'Ventes',
data: monthSalesData.map(sale => sale.totalAmount),
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgba(255, 159, 64, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

const customSalesChart = new Chart(document.getElementById('customSalesChart'), {
type: 'line',
data: {
labels: customSalesData.map(sale => sale.createdAt),
datasets: [
{
label: 'Ventes',
data: customSalesData.map(sale => sale.totalAmount),
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
{% endblock %}