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

{% block title %}
	{{ 'app.global.pages.dashboard.head_title'|trans }}
{% endblock %}

{% block search %}
	{% include 'Search/dashboard.html.twig' %}
{% endblock %}

{% block body %}
<div id="kt_app_content" class="app-content flex-column-fluid">
	<div class="row">
		<div class="col-sm-12 col-md-12 col-lg-3 h-md-300px">
			{% include 'Dashboard/Components/sales-component.html.twig' %}
		</div>
		<div class="col-sm-12 col-md-12 col-lg-3 h-md-300px">
			{% include 'Dashboard/Components/customers-component.html.twig' %}
		</div>
		<div class="col-sm-12 col-md-12 col-lg-3 h-md-300px">
			{% include 'Dashboard/Components/modes-chart.html.twig' %}
		</div>
		<div class="col-sm-12 col-md-12 col-lg-3 h-md-300px">
			{% include 'Dashboard/Components/payment-method-chart.html.twig' %}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12 col-md-12 col-lg-6 h-md-550px mt-md-6 mt-sm-6">
			{% include 'Dashboard/Components/turnover-chart.html.twig' %}
		</div>
		<div class="col-sm-12 col-md-12 col-lg-6 h-md-550px mt-md-6 mt-sm-6">
			{% include 'Dashboard/Components/sales-chart.html.twig' %}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12 col-md-12 col-lg-12 h-md-550px mt-md-6 mt-sm-6">
			{% include 'Dashboard/Components/sales-hourly-chart.html.twig' %}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12 col-md-12 col-lg-6 mt-md-6 mt-sm-6" id="bestSelling"></div>
		<div class="col-sm-12 col-md-12 col-lg-6 h-md-550px mt-sm-6">
			{% include 'Dashboard/Components/orders-chart.html.twig'%}
		</div>
	</div>
	<div class="row">
		<div class="col-12 mt-md-6 mt-sm-6" id="ordersLastarriving"></div>
	</div>
</div>
{% endblock %}
{% block modals %}
	{% if tou is defined and tou is not null %}
		{% include 'Dashboard/form.html.twig' with {
			'title': 'app.legal_terms.type.tou.title'|trans,
			'id': 'tou',
			'form': tou.form,
			'content': tou.fileContent
		} %}
	{% endif %}
{% endblock %}
{% block javascripts %}
	{{ parent() }}
	<script>
		{% if id is defined %}
			var id = {{ id }};
			var entityName = '{{ entityName }}';
		{% else %}
			var id = null;
			var entityName = null;
		{% endif %}

		var period = "{{ period }}";
		var periodicity = "{{ periodicity }}";
		var inputId = "#dashboard_period";
		var daysOfWeek = {{ daysOfWeek | raw }};
		var monthNames = {{ monthNames | raw }};
		var maxDate = "{{ lastOrderDate|date('Y-m-d') }}";
		var tou = {{ (tou is defined and tou is not null)|json_encode }};

		var translations = {
			"apply": '{{ 'app.global.date.input.apply'|trans }}',
			"cancel": '{{ 'app.global.date.input.cancel'|trans }}',
			"from": '{{ 'app.global.date.input.from'|trans }}',
			"to": '{{ 'app.global.date.input.to'|trans }}',
			"custom": '{{ 'app.global.date.input.custom'|trans }}',
			"today": '{{ 'app.global.date.today'|trans }}',
			"yesterday": '{{ 'app.global.date.yesterday'|trans }}',
			"last7Days": '{{ 'app.global.date.last_7_days'|trans }}',
			"last30Days": '{{ 'app.global.date.last_30_days'|trans }}',
			"thisMonth": '{{ 'app.global.date.this_month'|trans }}',
			"lastMonth": '{{ 'app.global.date.last_month'|trans }}',
			"customRange": '{{ 'app.global.date.custom_range'|trans }}'
		};
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
	<script src="{{ asset('foxorders/js/statistics/range-picker.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/dashboard.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/charts/sales.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/charts/sales_per_payment_method.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/charts/sales_per_hour.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/charts/turnover.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/charts/sales_per_mode.js') }}"></script>
	<script src="{{ asset('foxorders/js/statistics/charts/orders_per_device.js') }}"></script>
{% endblock %}