{% extends 'manager.html' %}
{% block content %}

<div class="container my-5">

    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-dark fw-bold"><i class="bi bi-shoe-print me-2"></i>Catálogo Corporativo de Zapatos</h2>
        <a href="nuevoproducto" class="btn btn-primary btn-lg">
            <i class="bi bi-plus-circle me-2"></i>Nuevo Producto
        </a>
    </div>

    
    <div class="card shadow border-0">
        <div class="card-header bg-dark text-white">
            <h5 class="mb-0"><i class="bi bi-table me-2"></i>Listado de Productos</h5>
        </div>
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle" id="tbl_producto">
                    <thead class="table-secondary text-center">
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Foto</th>
                            <th>Galería</th> 
                            <th>Marca</th>
                            <th>Talla</th>
                            <th>Color</th>
                            <th>Precio</th>
                            <th>Categoria</th>
                            <th>Estilo</th>
                            <th>Cantidad</th>
                            <th>Fecha Ingreso</th>
                            <th>Compartir</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for producto in productos %}
                        <tr class="text-center">
                            <td>{{ producto.id }}</td>
                            <td>{{ producto.nombre }}</td>
                            <td>
                                {% if producto.foto %}
                                    <img src="{{ producto.foto.url }}" class="img-fluid rounded" width="80" height="80" alt="Foto">
                                {% else %}
                                    <span class="text-muted small">Sin foto</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if producto.galeria %}
                                    <span class="badge rounded-pill bg-info text-dark">
                                        <i class="bi bi-images"></i> {{ producto.galeria|length }} fotos
                                    </span>
                                {% else %}
                                    <span class="badge rounded-pill bg-light text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>{{ producto.marca }}</td>
                            <td>{{ producto.talla }}</td>
                            <td>{{ producto.color }}</td>
                            <td>${{ producto.precio }}</td>
                            <td>{{ producto.categoria }}</td>
                            <td>{{ producto.estilo }}</td>
                             <td>{{ producto.cantidad }}</td>
                            <td>{{ producto.fecha_ingreso }}</td>
                            <td>
                               <div class="d-flex justify-content-center gap-2">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.scheme }}://{{ request.get_host }}{{ producto.foto.url }}&quote=¡Modelo: {{ producto.nombre }}! - Precio: ${{ producto.precio }} - Talla: {{ producto.talla }} en V%26M Calzado" 
                                    target="_blank" class="btn btn-sm text-white" style="background-color: #1877F2;" title="Facebook">
                                        <i class="bi bi-facebook"></i>
                                    </a>

                                    <a href="https://api.whatsapp.com/send?text=¡Mira este zapato de *V%26M Calzado*!%0A%0A👞 *Modelo:* {{ producto.nombre }}%0A💰 *Precio:* ${{ producto.precio }}%0A📏 *Talla:* {{ producto.talla }}%0A🎨 *Color:* {{ producto.color }}%0A%0A🖼️ *VER FOTO AQUÍ:* {{ request.scheme }}://{{ request.get_host }}{{ producto.foto.url }}" 
                                    target="_blank" class="btn btn-sm text-white" style="background-color: #25D366;" title="Enviar Foto por WhatsApp">
                                        <i class="bi bi-whatsapp"></i>
                                    </a>
                                </div>
                            </td>
                            
                            <td>
                            <div class="d-flex justify-content-center gap-2">
                                

                              
                                <a href="/manager/editarproducto/{{ producto.id }}" class="btn btn-warning btn-sm">
                                    <i class="bi bi-pencil-square"></i>
                                </a>

                                
                                <button onclick="eliminarproducto('{{ producto.id }}');" class="btn btn-danger btn-sm">
                                    <i class="bi bi-trash-fill"></i>
                                </button>

                            </div>
                        </td>

                            
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>


<script>
function eliminarproducto(id) {
    Swal.fire({
        title: "¿Deseas eliminar este producto?",
        text: "Esta acción no se puede deshacer",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#0d6efd",
        cancelButtonColor: "#6c757d",
        confirmButtonText: "Sí, eliminar",
        cancelButtonText: "Cancelar"
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "/manager/eliminarproducto/" + id;
        }
    });
}
</script>


<script>
$(document).ready(function() {
    $('#tbl_producto').DataTable({
        language: {
            url: 'https://cdn.datatables.net/plug-ins/2.3.1/i18n/es-ES.json'
        },
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        lengthMenu: [5, 10, 25, 50],
        pageLength: 10,
        responsive: true
    });
});
</script>

{% endblock %}