{% extends "macros/base.html" %}
{% from 'macros/modals.html' import confirm_modal, edit_product_modal %}

{% block title %}Catálogo de Productos{% endblock %}

{% block head %}
<!-- HEAD -->
{% endblock %}

{% 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 %}

{{ edit_product_modal(zonas) }}

<div class="card mb-4 shadow-sm">
    <div class="card-header bg-primary 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">
                        <button type="button" 
                                class="btn btn-primary btn-sm btn-edit-sm" 
                                data-bs-toggle="modal" 
                                data-bs-target="#editProductModal"
                                data-id="{{ prod[0] }}"
                                data-name="{{ prod[1] }}"
                                data-price="{{ prod[2]|int }}"
                                data-commission="{{ prod[3]|int }}"
                                data-zona="{{ prod[5] }}">
                            <i class="bi bi-pencil"></i>
                        </button>
                        
                        <button type="button" class="btn btn-danger btn-sm btn-del-sm" data-bs-toggle="modal" data-bs-target="#deleteProd{{ prod[0] }}">
                            <i class="bi bi-trash"></i>
                        </button>

                        {{ confirm_modal(
                            id='deleteProd' ~ prod[0],
                            title='Eliminar Producto',
                            message='¿Estás seguro de que deseas eliminar "' ~ prod[1] ~ '"?',
                            action_url=url_for('delete_product', id=prod[0]),
                            btn_class='btn-danger',
                            btn_text='Eliminar permanentemente'
                        ) }}
                    </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>
{% endblock %}

{% block scripts %}
<script>
    const editModal = document.getElementById('editProductModal');
    if (editModal) {
        editModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            
            // Atributos extraídos del botón
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const price = button.getAttribute('data-price');
            const commission = button.getAttribute('data-commission');
            const zonaId = button.getAttribute('data-zona');

            // Actualizamos el destino del formulario
            const form = editModal.querySelector('#editProductForm');
            form.action = `/admin/productos/edit/${id}`;

            // Llenamos los inputs
            editModal.querySelector('#edit_name').value = name;
            editModal.querySelector('#edit_price').value = price;
            editModal.querySelector('#edit_commission').value = commission;
            editModal.querySelector('#edit_zona_id').value = zonaId;

            // Forzamos el formato de miles (puntos) inmediatamente
            editModal.querySelectorAll('.money-input').forEach(input => {
                input.dispatchEvent(new Event('input'));
            });
        });
    }

    document.querySelectorAll('.money-input').forEach(function(input) {
        input.addEventListener('input', function(e) {
            let value = this.value.replace(/\D/g, '');
            if (value !== '') {
                this.value = parseInt(value, 10).toLocaleString('es-CL');
            } else {
                this.value = '';
            }
        });
    });
</script>
{% endblock %}