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


{% block contenido %}
	{# ROW DEL CONTENIDO DE ARTICULO #}
	<div
		class="row pt-4">

		{# PRIMER COLUMNA #}
		<div class="col-xl-1"></div>

		{# SEGUNDA COLUMNA#}
		<div class="col-xl-10">

			<h3 class="tituloPagina">Fabricantes</h3>
			<hr>

			{# SECCION MENSAJES POST SINCRO #}
			{% for flash_message in app.session.flashbag.get('success') %}
				<div class="flash-notice">
					<div class="alert alert-success alert-dismissible fade show" role="alert">
						<i class="bi bi-check-circle-fill" style="font-size: 20px;"></i>
						{{ flash_message }}
						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
					</div>
				</div>
			{% endfor %}

			{% for flash_message in app.session.flashbag.get('danger') %}
				<div class="flash-notice">
					<div class="alert alert-danger" role="alert">
						<i 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>
				Tanto las categorías como los proveedores/marcas deben sincronizarse antes que los articulos, ya que por el contrario, no se pueden asociar productos a categorías inexistentes.
			</div>

			<div id="contenedorInfoPagina" class="pt-1">
			<ul class="list-group list-group-flush">
				<div class="card-header">
					<h6>Fabricantes actuales:</h6>
				</div>

				<li class="list-group-item">
					<p class="card-text">Actualmente hay
						<span class="badge badge-success">{{ numFabricantes }}</span>
						fabricantes en PrestaShop.
					</p>
				</li>

			</ul>
			</div>
			{# FIN SECCION PANEL INFORMATIVO #}

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

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

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

			<div class="divTabla mb-5 overflow-auto">

				<table class="table table-hover table-bordered" id="tablaArt">
					<thead class="thead-dark">
						<tr>
							<th scope="col" class="desc">Fabricante</th>
							<th scope="col">Fecha</th>
						</tr>
					</thead>
					<tbody>
						{% for fabricante in fabricantes %}
							<tr>
								<td>{{fabricante.name}}</td>
								<td>{{fabricante.date_add}}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			{# SECCION TABLA #}

		</div>

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

	</div>

	{% block modales %}
		<div class="modal fade" id="modalSincroFabricantes" tabindex="-1" role="dialog" aria-labelledby="modalSincroFabricantesLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroFabricantesLabel">PROCESO SINCRONIZACIÓN FABRICANTES</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 fabricantes de los productos WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincroFabricantes') }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Fabricantes</button>
						</a>
					</div>
				</div>
			</div>
		</div>
	{% endblock %}

{% endblock %}