{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">Catálogo de Productos por Zona</h2>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }}">{{ message|safe }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}

<div class="card mb-4 shadow-sm">
    <div class="card-header bg-secondary text-white">Agregar Nuevo Producto</div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('manage_products') }}">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Zona</label>
                    <select class="form-select" name="zona_id" required>
                        <option value="" selected disabled>Seleccionar Zona...</option>
                        {% for zona in zonas %}
                            <option value="{{ zona[0] }}">{{ zona[1] }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Nombre del Producto</label>
                    <input type="text" class="form-control" name="name" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Precio de Venta</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input" name="price" placeholder="1.500" required>
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Comisión</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input" name="commission" placeholder="500" required>
                    </div>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">+</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body p-0">
        <table class="table table-striped table-hover mb-0">
            <thead class="table-dark">
                <tr>
                    <th>Zona</th>
                    <th>Producto</th>
                    <th>Precio</th>
                    <th>Comisión</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for prod in productos %}
                <tr>
                    <td class="align-middle"><span class="badge bg-info text-dark">{{ prod[4] }}</span></td>
                    <td class="align-middle">{{ prod[1] }}</td>
                    <td class="align-middle">${{ "{:,.0f}".format(prod[2]).replace(',', '.') }}</td>
                    <td class="align-middle">${{ "{:,.0f}".format(prod[3]).replace(',', '.') }}</td>
                    <td class="text-end">
                        <a href="{{ url_for('edit_product', id=prod[0]) }}" class="btn btn-sm btn-outline-info">Editar</a>
                        <form action="{{ url_for('delete_product', id=prod[0]) }}" method="POST" class="d-inline">
                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar este producto?');">Eliminar</button>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="text-center py-3 text-muted">No hay productos registrados.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
    // Automatically format money inputs with standard Chilean dots
    document.querySelectorAll('.money-input').forEach(function(input) {
        input.addEventListener('input', function(e) {
            // Strip everything that isn't a number
            let value = this.value.replace(/\D/g, '');
            
            if (value !== '') {
                // Parse and format back to a string with dots
                this.value = parseInt(value, 10).toLocaleString('es-CL');
            } else {
                this.value = '';
            }
        });
    });
</script>
{% endblock %}