{% 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 clientes en Prestashop, es necesario cerciorarse de que no está anulado en 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 clientes:</h6>
                </div>

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

                <li class="list-group-item">
                    {% if last_customers|length > 0 %}
                        <p class="card-text">
                        	Hay <span class="badge text-bg-success">{{ last_customers|length }}</span> {% if last_customers|length > 1 %} clientes {% else %} cliente {% endif %} en PrestaShop
                        </p>
					{% else %}
						<p class="card-text">
							No hay clientes en PrestaShop
						</p>
					{% endif %}
                </li>

            </ul>
        </div>

        <button type="button" class="btn btn-success mt-4" id="botonProceso" data-bs-toggle="modal" data-bs-target="#modalSincroClientes">Sincronizar Clientes</button>

        {# SECCIÓN TABLA #}
		{% if last_customers %}
			<h5 class="pt-5">
				<i class="bi bi-search"></i>
				Ultimos clientes 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 Cliente ERP</th>
							<th scope="col">Id Cliente Web</th>
							<th scope="col">Email</th>
						</tr>
					</thead>
					<tbody>
						{% for customer in last_customers %}
							<tr>
								<td>{{customer.idCustomerErp}}</td>
								<td>{{customer.idCustomerWeb}}</td>
								<td>{{customer.email}}</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="modalSincroClientes" 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="modalSincroClientesLabel">PROCESO SINCRONIZACIÓN CLIENTES</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						¿Quieres sincronizar los clientes WEB?
					</div>
					<div class="modal-footer">
						<a href="{{ path('add_professional_customer') }}">
							<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 %}