{% extends 'admin/layout.html.twig' %}

{% block title %}Administration site Internet - EDIFIA WEB{% endblock %}

{% block content %}
	<h1>Administration</h1>

	<p class="mb-4">Bienvenue sur l'interface d'administration.</p>

	<div class="row">
		<div class="col-9 m0 p0">
			<div class="row">
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_question_tovalidate') }}">
											<h3 class="primary">{{ validated_questions|length }}</h3>
										</a>
										<span>Questions validées</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="far fa-check-square"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_question_tomoderate') }}">
											<h3 class="primary">{{ tomoderate_questions|length }}</h3>
										</a>
										<span>Questions à modérer</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="far fa-smile"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_question_tovalidate') }}">
											<h3 class="primary">{{ tovalidate_questions|length }}</h3>
										</a>
										<span>Questions à valider</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-clipboard-check"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_question_tocorrect') }}">
											<h3 class="primary">{{ tocorrect_questions|length }}</h3>
										</a>
										<span>Questions à corriger</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-user-edit"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_question_tocomplete') }}">
											<h3 class="primary">{{ incomplete_questions|length }}</h3>
										</a>
										<span>Questions à compléter</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-user-clock"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_user_home') }}">
											<h3 class="primary">{{ users|length }}</h3>
										</a>
										<span>Utilisateurs</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-users"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_contestation_list') }}">
											<h3 class="primary">{{ contestations|length }}</h3>
										</a>
										<span>Contestations</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-users"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_comment_reported') }}">
											<h3 class="primary">
												{{ question_comment_reports|length }} -
												{{ post_comment_reports|length }} -
												{{ quiz_comment_reports|length }}
											</h3>
										</a>
										<span>Commentaires signalés</span><br>
										<span>Question / Post / Quiz</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-users"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 col-12">
					<div class="card">
						<div class="card-content">
							<div class="card-body">
								<div class="media d-flex">
									<div class="media-body text-left">
										<a href="{{ path('admin_comment_to_moderate') }}">
											<h3 class="primary">
												{{ question_comment_tomoderate|length }} -
												{{ post_comment_tomoderate|length }} -
												{{ quiz_comment_tomoderate|length }}
											</h3>
										</a>
										<span>Commentaires à modérer</span><br>
										<span>Question / Post / Quiz</span>
									</div>
									<div class="card-icon primary align-self-center">
										<i class="fas fa-users"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-3">
			<h4 class="d-flex flex-row justify-content-between" style="width: 100%;">
				Fil actualités

				<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreatePost">+</button>
			</h4>

			<table class="table table-hover table-striped">
				<tbody>
					{% for article in news %}
					<tr data-toggle="tooltip" title="{{ article.content }}">
						<td class="text-center">{{ article.id }}</td>
						<td>{{ article.title }}</td>
						<td class="text-center">{{ article.createdAt|date('d/m') }}</td>
						<td class="text-center">
							<button data-href="{{ path('admin_post_delete', {'id': article.id}) }}" class="btn btn-sm btn-danger delete-post">
								<i class="far fa-trash-alt"></i>
							</button>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	<div class="row mb-4">
		<div class="col-12 col-lg-6">
			<canvas id="userActivityStats"
					data-activity_entries='{{ user_activity_stats|json_encode|raw }}'
			></canvas>
		</div>
		<div class="col-12 col-lg-6">
			<canvas id="quizStats"
					data-creation_entries='{{ quiz_creation_stats|json_encode|raw }}'
					data-attempt_entries='{{ quiz_attempt_stats|json_encode|raw }}'
			></canvas>
		</div>
	</div>

	<div class="row mb-4">
		<div class="col-12 col-lg-6">
			<canvas id="questionsStats"
				data-creation_entries='{{ question_creation_stats|json_encode|raw }}'
				data-validation_entries='{{ question_validation_stats|json_encode|raw }}'
			></canvas>
		</div>
		<div class="col-12 col-lg-6">
			<canvas id="usersStats" data-creation_entries='{{ user_creation_stats|json_encode|raw }}'></canvas>
		</div>
	</div>

	<div class="row mb-4">
		<div class="col-12 col-lg-6">
			<canvas id="answersStats"
				data-creation_entries='{{ answer_creation_stats|json_encode|raw }}'
				data-correct_entries='{{ answer_correct_stats|json_encode|raw }}'
				data-training_entries='{{ answer_training_stats|json_encode|raw }}'
			></canvas>
		</div>
		<div class="col-12 col-lg-6">
			<canvas id="commentsStats"
					data-quiz_comments_entries='{{ quiz_comments_stats|json_encode|raw }}'
					data-question_comments_entries='{{ question_comments_stats|json_encode|raw }}'
					data-post_comments_entries='{{ post_comments_stats|json_encode|raw }}'
					data-post_likes_entries='{{ post_likes_stats|json_encode|raw }}'
			></canvas>
		</div>
	</div>
	<div class="row mb-4">
		<div class="col-12 col-lg-6">
			<canvas id="themeStats"
				data-labels_entries='{{ theme_stats.labels|json_encode|raw }}'
				data-all_entries='{{ theme_stats.count_all|json_encode|raw }}'
				data-validated_entries='{{ theme_stats.count_validated|json_encode|raw }}'
			></canvas>
		</div>
	</div>
	<div class="row mb-4">
		<div class="col-12 col-lg-6">
			<h5 class="mt-2 mb-3">Utilisateurs actifs aujourd'hui</h5>

			<table class="table table-hover table-striped">
				<thead>
				<tr>
					<th scope="col">{{ 'user.label.firstname'|trans({}, 'admin') }}</th>
					<th scope="col">{{ 'user.label.lastname'|trans({}, 'admin') }}</th>
					<th scope="col">{{ 'user.label.username'|trans({}, 'admin') }}</th>
					<th scope="col">{{ 'user.label.last_date'|trans({}, 'admin') }}</th>
					<th scope="col" class="text-center">{{ 'user.label.answers'|trans({}, 'admin') }}</th>
					<th scope="col" class="text-center">{{ 'user.label.attempts'|trans({}, 'admin') }}</th>
					<th scope="col" class="text-center"></th>
				</tr>
				</thead>
				<tbody>
				{% if today_active_users is defined and today_active_users is iterable %}
					{% for user in today_active_users %}
						<tr>
							<td>{{ user.firstname }}</td>
							<td>{{ user.lastname }}</td>
							<td data-toggle="tooltip" title="{{ user.email }}">
								{{ user.username }}
							</td>
							<td>{{ (user.last_date is not null) ? user.last_date|date('H:i') : '-' }}</td>
							<td class="text-center"><strong>{{ user.count_answers }}</strong></td>
							<td class="text-center"><strong>{{ user.count_attempts }}</strong></td>
							<td class="text-center">
								<a href="{{ path('admin_user_stats', {'id': user.id}) }}" class="btn btn-sm btn-info" data-toggle="tooltip" title="{{ 'user.stats.btn_tooltip'|trans({}, 'admin') }}">
									<i class="far fa-chart-bar"></i>
								</a>
							</td>
						</tr>
					{% endfor %}
				{% endif %}
				</tbody>
			</table>
		</div>

		<div class="col-12 col-lg-6">
			<h5 class="mt-2 mb-3">Utilisateurs actifs hier</h5>

			<table class="table table-hover table-striped">
				<thead>
				<tr>
					<th scope="col">{{ 'user.label.firstname'|trans({}, 'admin') }}</th>
					<th scope="col">{{ 'user.label.lastname'|trans({}, 'admin') }}</th>
					<th scope="col">{{ 'user.label.username'|trans({}, 'admin') }}</th>
					<th scope="col">{{ 'user.label.last_date'|trans({}, 'admin') }}</th>
					<th scope="col" class="text-center">{{ 'user.label.answers'|trans({}, 'admin') }}</th>
					<th scope="col" class="text-center">{{ 'user.label.attempts'|trans({}, 'admin') }}</th>
					<th scope="col" class="text-center"></th>
				</tr>
				</thead>
				<tbody>
				{% if yesterday_active_users is defined and yesterday_active_users is iterable %}
					{% for user in yesterday_active_users %}
						<tr>
							<td>{{ user.firstname }}</td>
							<td>{{ user.lastname }}</td>
							<td data-toggle="tooltip" title="{{ user.email }}">
								{{ user.username }}
							</td>
							<td>{{ user.last_date|date('H:i') }}</td>
							<td class="text-center"><strong>{{ user.count_answers }}</strong></td>
							<td class="text-center"><strong>{{ user.count_attempts }}</strong></td>
							<td class="text-center">
								<a href="{{ path('admin_user_stats', {'id': user.id}) }}" class="btn btn-sm btn-info" data-toggle="tooltip" title="{{ 'user.stats_btn_tooltip'|trans({}, 'admin') }}">
									<i class="far fa-chart-bar"></i>
								</a>
							</td>
						</tr>
					{% endfor %}
				{% endif %}
				</tbody>
			</table>
		</div>
	</div>
	<div class="modal fade" id="modalCreatePost" tabindex="-1" role="dialog" aria-labelledby="modalCreatePost" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				{{ form_start(form, {attr: attr|default({})}) }}
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Création de Post</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					{{ form_row(form.title) }}
					{{ form_row(form.content) }}
				</div>
				<div class="modal-footer">
					{{ form_widget(form.save, {'label': 'label.create_post' }) }}
					{{ form_end(form) }}
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	{{ encore_entry_link_tags('bootstrap_extended') }}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	{{ encore_entry_script_tags('admin_home') }}
	{{ encore_entry_script_tags('admin_utils') }}
{% endblock %}