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

{% block contenido %}
	{# CONTENEDOR PRINCIPAL #}
	<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">Pedidos 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 #}


			{# SECCION PANEL INFORMATIVO #}
			<div class="alert alert-warning" role="alert">
				<i class="bi bi-exclamation-triangle-fill" style="font-size: 20px;"></i>
				En AFIX no se pueden eliminar clientes si tienen pedidos registrados.
			</div>

			<div id="contenedorInfoPagina" class="pt-1">
				<ul class="list-group list-group-flush">
					<div class="card-header">
						<h6>Pedidos realizados en PrestaShop:</h6>
					</div>

				<li class="list-group-item">
					<p class="card-text">Actualmente hay
						<span class="badge badge-success">{{ data|length }}</span> pedidos en PrestaShop.
					</p>
				</li>
				
				</ul>
			</div>
			{# FIN SECCION PANEL INFORMATIVO #}

			{# BOTON #}
			<button class="btn mt-4" data-toggle="modal" data-target="#modalSincroPedidos" id="botonProceso">Sincronizar Pedidos</button>
			{# BOTON #}

			{% if data %}
				<h5 class="pt-5">
					<i class="bi bi-search"></i>
					Ultimos pedidos realizados:</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 class="desc" scope="col">Id</th>
								<th scope="col">Ejercicio</th>
								<th scope="col">Serie</th>
								<th scope="col">Documento</th>
							</tr>
						</thead>
						<tbody>
							{% for d in data %}
								<tr>
									<td>{{d.id_catalogo}}</td>
									<td>{{d.ejercicio}}</td>
									<td>{{d.serie}}</td>
									<td>{{d.documento}}</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			{% endif %}

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


	{% block modales %}
		<!-- Modal -->
		<div class="modal fade" id="modalSincroPedidos" tabindex="-1" role="dialog" aria-labelledby="modalSincroPedidosLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalSincroPedidosLabel">PROCESO DE SINCRONIZACIÓN DE PEDIDOS</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 pedidos WEB?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
						<a href="{{ path('sincroPedidos') }}">
							<button class="btn btn-dark botonSincroModal">Sincronizar Pedidos</button>
						</a>
					</div>
				</div>
			</div>
		</div>
	{% endblock %}

{% endblock %}