{% 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">Articulos WEB</h3>
			<hr>

			{# 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 style="font-size: 20px;">✗</i>
						{{ flash_message }}
					</div>
				</div>
			{% endfor %}
			{# MENSAJES POST SINCRO #}

			{# SECCIÓN PANEL INFORMATIVO #}
			<div class="alert alert-warning" role="alert">
				<i class="bi bi-exclamation-triangle-fill" style="font-size: 20px;"></i>
				Para sincronizar un artículo en Prestashop, es necesario cerciorarse de que no está anulado y tiene la marca de web en el WebApi AFIX.
			</div>
			<div id="contenedorInfoPagina" class="pt-1">
			<ul class="list-group list-group-flush">
				<div class="card-header">
					<h6>Información adicional sobre artículos:</h6>
				</div>

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

						{% if totalesArticulos[1] == totalesArticulos[2] %}
							<span class="badge badge-success">{{totalesArticulos[1]}}</span>
							artículos en el WebApi de Afix
					</p>
				</li>

				<li class="list-group-item">
					<p class="card-text">Hay
					<span class="badge badge-success">{{totalesArticulos[2]}}</span>
					artículos en PrestaShop
				{% else %}
					<span class="badge badge-danger">{{totalesArticulos[1]}}</span>
					artículos en el WebApi de Afix
					</p>
				</li>

				<li class="list-group-item">
					<p class="card-text">Hay
						<span class="badge badge-danger">{{totalesArticulos[2]}}</span>
						artículos en PrestaShop
					{% endif %}
					</p>
				</li>

				<li class="list-group-item">
					<p class="card-text">Total:
						<span class="badge badge-warning">{{totalesArticulos[0][0]}}</span>
						simples y
						<span class="badge badge-warning">{{totalesArticulos[0][1]}}</span>
						combinaciones
					</p>
				</li>
			</ul>
			</div>
			{# SECCIÓN PANEL INFORMATIVO #}

			{# SECCIÓN BOTONES SINCRO #}
			<button class="btn mt-4" id="botonProceso" data-toggle="modal" data-target="#modalSincroArticulos">Sincronizar Artículos</button>
			<button class="btn mt-4" id="botonProceso" data-toggle="modal" data-target="#modalSincroStock">Sincronizar Stock</button>
			<button class="btn mt-4" id="botonProceso" data-toggle="modal" data-target="#modalSincroTarifa">Sincronizar Tarifa</button>
			<button class="btn mt-4" id="botonProceso" data-toggle="modal" data-target="#modalSincroImg">Sincronizar Imágenes</button>
			<button class="btn mt-4" id="botonProceso" data-toggle="modal" data-target="#modalSincroImgCombinacion">Sincronizar Imágenes Combinaciones</button>
			
			<a href="{{ path('mostrarProductosSinImagen') }}">
				<button class="btn mt-4" id="botonProceso">Descargar CSV productos sin imagen</button>
			</a>
			{# SECCIÓN BOTONES SINCRO #}

			{# SECCIÓN TABLA #}
			{% if ultArt %}
				<h5 class="pt-5">
					<i class="bi bi-search"></i>
					Ultimos artículos sincronizados:</h5>

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

				{# {% if ultArt|length > 5 %} #}
				<div
					class="divTabla mb-5 overflow-auto">
					{# {% endif %} #}
					<table class="table table-hover table-bordered" id="tablaArt">
						<thead class="thead">
							<tr>
								<th scope="col" class="desc">Id Artículo Web</th>
								<th scope="col">Id Artículo Afix</th>
								<th scope="col">Fecha Actualización</th>
							</tr>
						</thead>
						<tbody>
							{% for ult in ultArt %}
								<tr>
									<td>{{ult.id_articulo_web}}</td>
									<td>{{ult.articulo_af}}</td>
									<td>{{ult.fecha_actualizacion}}</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
					{# {% if ultArt|length > 5 %} #}
				</div>
				{# {% endif %} #}
			{% endif %}
			{# SECCIÓN TABLA #}


		</div>

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


	</div>

	{% block modales %}
		<!-- MODAL PARA LA SINCRO DE LOS ARTICULOS -->
		<div class="modal fade" id="modalSincroArticulos" tabindex="-1" role="dialog" aria-labelledby="modalSincroArticulosLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroArticulosLabel">PROCESO SINCRONIZACIÓN ARTÍCULOS</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 artículos WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincro', {'slug':'Articulos'}) }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Articulos</button>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- MODAL PARA LA SINCRO DEL STOCK -->
		<div class="modal fade" id="modalSincroStock" tabindex="-1" role="dialog" aria-labelledby="modalSincroStockLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroStockLabel">PROCESO SINCRONIZACIÓN STOCK</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 el stock de la WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincro', {'slug':'Stock'}) }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Stock</button>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- MODAL PARA LA SINCRO DE TARIFAS -->
		<div class="modal fade" id="modalSincroTarifa" tabindex="-1" role="dialog" aria-labelledby="modalSincroTarifaLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroTarifaLabel">PROCESO SINCRONIZACIÓN TARIFA</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 el tarifa de la WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincro', {'slug':'Tarifa'}) }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Tarifa</button>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- MODAL PARA LA SINCRO DE LAS IMÁGENES -->
		<div class="modal fade" id="modalSincroImg" tabindex="-1" role="dialog" aria-labelledby="modalSincroImgLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroImgLabel">PROCESO SINCRONIZACIÓN IMÁGENES</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 las imágenes de la WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincro', {'slug':'Img'}) }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Imágenes</button>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- MODAL PARA LA SINCRO DE LAS IMÁGENES COMBINACIONES-->
		<div class="modal fade" id="modalSincroImgCombinacion" tabindex="-1" role="dialog" aria-labelledby="modalSincroImgCombinacionLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroImgCombinacionLabel">PROCESO SINCRONIZACIÓN IMÁGENES</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 las imágenes de las combinaciones de la WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincro', {'slug':'ImgCombinacion'}) }}">
							<button class="btn botonSincroModal" id="botonProceso">Sincronizar Imágenes Combinaciones</button>
						</a>
					</div>
				</div>
			</div>
		</div>
	{% endblock %}

{% endblock %}