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

{% block dashboardHome %}
	
	<div class="col-2"></div>

    <div id="infoPage" class="col-8 pt-3">

		{# 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="fa-regular fa-circle-check" style="font-size: 20px;"></i>
					{{ flash_message }}
				</div>
			</div>
		{% endfor %}
		{# MENSAJES POST SINCRO #}
        
        <div class="alert alert-warning" role="alert">
            <i class="fa-solid fa-triangle-exclamation"></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 de la ERP.
	    </div>
        
        <div class="card">

            <ul class="list-group list-group-flush">
                <div class="card-header bg-success text-white">
                    <h6 class="pt-1">Información adicional sobre artículos:</h6>
                </div>

                <li class="list-group-item">
					{% if products_erp > 0 %}
						<p class="card-text">
                            Hay <span class="badge text-bg-success">{{ products_erp }}</span> {% if products_erp > 1 %} productos {% else %} producto {% endif %} en el WebApi del ERP
                        </p>
					{% else %}
						<p class="card-text">
                            No hay productos en el WebApi del ERP
                        </p>
					{% endif %}
                </li>

                <li class="list-group-item">
					{% if total_products_web > 0 %}
                        <p class="card-text">
                        	Hay <span class="badge text-bg-success">{{ total_products_web }}</span> {% if total_products_web > 1 %} productos {% else %} producto {% endif %} en PrestaShop
                        </p>
					{% else %}
						<p class="card-text">
							No hay productos en PrestaShop
						</p>
					{% endif %}
                </li>

				<li class="list-group-item">
					<p class="card-text">
					Total: <span class="badge text-bg-warning" style="color:#fff !important">{{products_simples}}</span> simples y <span class="badge text-bg-warning" style="color:#fff !important">{{products_combination}}</span> combinaciones
					</p>
                </li>
                
            </ul>

        </div>

        <button type="button" class="btn btn-success mt-4" id="botonProceso" data-bs-toggle="modal" data-bs-target="#modalSincroArticulos">Sincronizar Artículos</button>
        <button type="button" class="btn btn-success mt-4" id="botonProceso" data-bs-toggle="modal" data-bs-target="#modalSincroStock">Sincronizar Stock</button>
        <button type="button" class="btn btn-success mt-4" id="botonProceso" data-bs-toggle="modal" data-bs-target="#modalSincroImg">Sincronizar Imágenes</button>
        <button type="button" class="btn btn-success mt-4" id="botonProceso" data-bs-toggle="modal" data-bs-target="#modalSincroImgCombinacion">Sincronizar Imágenes Combinaciones</button>


		{# SECCIÓN TABLA #}
		{% if last_products %}
			<h5 class="pt-5">
				<i class="bi bi-search"></i>
				Ultimos artículos sincronizados:</h5>
			{# {% 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 class="table-success">
							<th scope="col" class="desc">Id Artículo Web</th>
							<th scope="col">Referencia Producto ERP</th>
						</tr>
					</thead>
					<tbody>
						{% for product in last_products %}
							<tr>
								<td>{{product.idWeb}}</td>
								<td>{{product.reference}}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
				{# {% if ultArt|length > 5 %} #}
			</div>
			{# {% endif %} #}
		{% endif %}
		{# SECCIÓN TABLA #}

    </div>

	<div class="col-2"></div>
    {% block modal_product %}
		<!-- 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						¿Quieres sincronizar los productos WEB?
					</div>
					<div class="modal-footer">
						<a href="{{ path('add_product') }}">
							<button class="btn btn-primary botonSincroModal" id="botonProceso">Aceptar</button>
						</a>
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
					</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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						¿Quieres sincronizar el stock de la WEB?
					</div>
					<div class="modal-footer">
						<a href="{{ path('add_stock') }}">
							<button class="btn btn-primary botonSincroModal" id="botonProceso">Aceptar</button>
						</a>
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
					</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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						¿Quieres sincronizar las imágenes de la WEB?
					</div>
					<div class="modal-footer">
						<a href="{{ path('add_image') }}">
							<button class="btn btn-primary botonSincroModal" id="botonProceso">Aceptar</button>
						</a>
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
					</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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						¿Quieres sincronizar las imágenes de las combinaciones de la WEB?
					</div>
					<div class="modal-footer">
						<a href="{{ path('add_image_combination') }}">
							<button class="btn btn-primary botonSincroModal" id="botonProceso">Aceptar</button>
						</a>
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
					</div>
				</div>
			</div>
		</div>
	{% endblock %}

{% endblock %}