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

{% block contenido %}

	<div
		class="row pt-4">
		{# PRIMERA COLUMNA #}
		<div class="col-xl-1 col-sm-0"></div>

		{# SEGUNDA COLUMNA #}
		<div class="col-xl-10 col-sm-12">
			<h3 class="tituloPagina">Clientes WEB</h3>
			<hr>

			{# SECCION MENSAJES POST SINCRO #}
			{% for flash_message in app.session.flashbag.get('success') %}
				<div class="flash-notice">
					<div class="alert alert-success" role="alert">
						<i class="bi bi-check-circle-fill" style="font-size: 20px;"></i>
						{{ flash_message }}
					</div>
				</div>
			{% endfor %}

			{% for flash_message in app.session.flashbag.get('danger') %}
				<div class="flash-notice">
					<div class="alert alert-danger" role="alert">
						<i class="" style="font-size: 20px;">✗</i>
						{{ flash_message }}
					</div>
				</div>
			{% endfor %}
			{# SECCION MENSAJES POST SINCRO #}

			{# SECCION PANEL INFORMATIVO #}
			<div class="alert alert-warning" role="alert">
				<i class="bi bi-exclamation-triangle-fill" style="font-size: 20px;"></i>
				Cuando un cliente se elimina de PrestaShop, se dará de baja del WebApi pero seguirá existiendo en Afix
			</div>

			<div id="contenedorInfoPagina" class="pt-1">
				<ul class="list-group list-group-flush">
					<div class="card-header">
						<h6>Información adicional sobre clientes:</h6>
					</div>

					<li class="list-group-item">
						<p class="card-text">
							{% if totalesClientes[1] > 0 %}
								Hay
							{% else %}
								No hay
							{% endif %}

							{% if totalesClientes[0] == totalesClientes[1] %}
								<span class="badge badge-success">{{totalesClientes[1]}}</span>
								clientes en el WebApi de Afix
						</p>

					</li>
					<li class="list-group-item">
						<p class="card-text">Hay
							<span class="badge badge-success">{{totalesClientes[0]}}</span>
							clientes en PrestaShop
						{% else %}
							<span class="badge badge-danger">{{totalesClientes[1]}}</span>
							clientes en el WebApi de Afix
						</p>
					</li>
					<li class="list-group-item">
						<p class="card-text">Hay
							<span class="badge badge-danger">{{totalesClientes[0]}}</span>
							clientes en PrestaShop
						{% endif %}
						</p>
					</li>
				</ul>
			</div>
			{# FIN SECCION PANEL INFORMATIVO #}

			{# SECCION BOTONES SINCRO #}
			<button class="btn mt-4" data-toggle="modal" data-target="#modalSincroClientes" id="botonProceso">Sincronizar Clientes</button>
			{# SECCION BOTONES SINCRO #}

			{# SECCION TABLA #}
			{% if ultCli %}
				<h5 class="pt-5">
					<i class="bi bi-search"></i>
					Ultimos clientes sincronizados:</h5>

				<div class="form-group">
					<input type="text" class="form-control pull-right" style="width:25%" id="search" placeholder="Para buscar..">
				</div>

				{# La clase divTabla se utiliza para preasignar un height a la tabla, 
				 esto permitirá el tamaño adecuado cuando haya scroll #}
				<div
					class="divTabla mb-5 overflow-auto">

					<table class="table table-hover table-bordered" id="tablaArt">
						<thead class="thead-dark">
							<tr>
								<th class="desc" scope="col">Id Web</th>
								<th scope="col">Id Afix</th>
								<th scope="col">Correo electrónico</th>
								{% if is_granted('ROLE_SUPER_ADMIN') %}
									<th scope="col">Passwd</th>
								{% endif %}
							</tr>
						</thead>
						<tbody>
							{% for u in ultCli|sort %}
								<tr>
									<td>{{u.id_cliente_web}}</td>
									<td>{{u.cliente_af}}</td>
									<td>{{u.usuario_af}}</td>
									{% if is_granted('ROLE_SUPER_ADMIN') %}
										<td>{{u.passw}}</td>
									{% endif %}
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			{% endif %}
			{# SECCION TABLA #}

		</div>

		{# TERCERA COLUMNA #}
		<div class="col-xl-1 col-sm-0"></div>

	</div>


	{% block modales %}
		{# SECCION MODALES #}
		<div class="modal fade" id="modalSincroClientes" tabindex="-1" role="dialog" aria-labelledby="modalSincroClientesLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroClientesLabel">PROCESO SINCRONIZACIÓN CLIENTES</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						¿Quieres sincronizar los clientes de la WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('GeneraClientes') }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Clientes</button>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	{# SECCION MODALES #}
{% endblock %}

{% endblock %}