Rendiciones-App/templates/macros/modals.html

{% macro confirm_modal(id, title, message, action_url, btn_class='btn-primary', btn_text='Confirmar') %}
<div class="modal fade" id="{{ id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ message }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form action="{{ action_url }}" method="POST" class="d-inline">
                    <button type="submit" class="btn {{ btn_class }}">{{ btn_text }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% macro edit_product_modal(zonas) %}
<div class="modal fade" id="editProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Producto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editProductForm" method="POST" action="">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Zona</label>
                        <select class="form-select" name="zona_id" id="edit_zona_id" required>
                            {% for zona in zonas %}
                                <option value="{{ zona[0] }}">{{ zona[1] }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nombre del Producto</label>
                        <input type="text" class="form-control" name="name" id="edit_name" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Precio</label>
                            <input type="text" class="form-control money-input" name="price" id="edit_price" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Comisión</label>
                            <input type="text" class="form-control money-input" name="commission" id="edit_commission" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endmacro %}

{% macro edit_worker_modal(modulos) %}
<div class="modal fade" id="editWorkerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Trabajador</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body">
                <form id="editWorkerForm" method="POST" action="">
                    <div class="mb-3">
                        <label class="form-label text-muted-rut">RUT (No editable)</label>
                        <input type="text" class="form-control" id="edit_worker_rut" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nombre Completo</label>
                        <input type="text" class="form-control" name="name" id="edit_worker_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Teléfono</label>
                        <input type="text" class="form-control phone-input" name="phone" id="edit_worker_phone" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Módulo Asignado</label>
                        <select class="form-select" name="modulo_id" id="edit_worker_modulo" required>
                            {% for mod in modulos %}
                                <option value="{{ mod[0] }}">{{ mod[2] }} - {{ mod[1] }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </form>

                <hr>
                
                <div class="d-grid">
                    <form id="resetPasswordForm" method="POST" action="" onsubmit="return confirm('¿Generar nueva contraseña?');">
                        <button type="submit" class="btn btn-outline-warning btn-sm w-100">
                            <i class="bi bi-key me-1"></i> Restablecer Contraseña
                        </button>
                    </form>
                    <small class="text-muted text-center mt-1">Generará una nueva clave aleatoria.</small>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="editWorkerForm" class="btn btn-primary">Guardar Cambios</button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% macro rendicion_detail_modal(rendicion, items, total_calculado, comision_total) %}
<div class="modal fade" id="viewRendicion{{ rendicion[0] }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalle de Rendición #{{ rendicion[0] }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-start">
                <div class="row">
                    <div class="col-md-8 mb-4">
                        <div class="card shadow-sm h-100">
                            <div class="card-header bg-secondary text-white">Productos Vendidos</div>
                            <div class="card-body p-0">
                                <table class="table table-striped mb-0">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Producto</th>
                                            <th class="text-center">Cant.</th>
                                            <th class="text-end">Precio Un.</th>
                                            <th class="text-end">Total Línea</th>
                                            <th class="text-end">Comisión</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in items %}
                                        <tr>
                                            <td>{{ item[0] }}</td>
                                            <td class="text-center fw-bold">{{ item[1] }}</td>
                                            <td class="text-end text-muted">${{ "{:,.0f}".format(item[2]).replace(',', '.') }}</td>
                                            <td class="text-end fw-bold">${{ "{:,.0f}".format(item[4]).replace(',', '.') }}</td>
                                            <td class="text-end text-success">${{ "{:,.0f}".format(item[5]).replace(',', '.') }}</td>
                                        </tr>
                                        {% else %}
                                        <tr>
                                            <td colspan="5" class="text-center py-3">No se registraron productos en esta rendición.</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot class="table-group-divider">
                                        <tr>
                                            <td colspan="3" class="text-end fw-bold">Total Calculado por Sistema:</td>
                                            <td class="text-end fw-bold fs-5">${{ "{:,.0f}".format(total_calculado or 0).replace(',', '.') }}</td>
                                            <td class="text-end fw-bold text-success">${{ "{:,.0f}".format(comision_total or 0).replace(',', '.') }}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-4">
                        <div class="card shadow-sm mb-4 border-info">
                            <div class="card-header bg-info text-dark fw-bold">Declaración del Trabajador</div>
                            <div class="card-body">
                                <dl class="row mb-0">
                                    <dt class="col-sm-5 text-muted">Fecha</dt>
                                    <dd class="col-sm-7">{{ rendicion[1] }}</dd>
                                    
                                    <dt class="col-sm-5 text-muted">Trabajador</dt>
                                    <dd class="col-sm-7">{{ rendicion[2] }}</dd>

                                    <dt class="col-sm-5 text-muted">Acompañante</dt>
                                    <dd class="col-sm-7">
                                        {% if rendicion[10] %}
                                            {{ rendicion[10] }}
                                        {% else %}
                                            <span class="text-muted italic small">Sin acompañante</span>
                                        {% endif %}
                                    </dd>

                                    <dt class="col-sm-5 text-muted">Módulo</dt>
                                    <dd class="col-sm-7"><span class="badge bg-secondary">{{ rendicion[3] }}</span></dd>

                                    <dt class="col-sm-5 text-muted">Turno</dt>
                                    <dd class="col-sm-7">{{ rendicion[4] }}</dd>
                                </dl>
                                <hr>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Tarjetas:</span>
                                    <span>${{ "{:,.0f}".format(rendicion[5] or 0).replace(',', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Mercado Pago:</span>
                                    <span>${{ "{:,.0f}".format(rendicion[6] or 0).replace(',', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Efectivo:</span>
                                    <span>${{ "{:,.0f}".format(rendicion[7] or 0).replace(',', '.') }}</span>
                                </div>
                                
                                {% set total_declarado = rendicion[5] + rendicion[6] + rendicion[7] %}
                                <div class="d-flex justify-content-between mt-3 pt-2 border-top">
                                    <strong class="fs-5">Total Declarado:</strong>
                                    <strong class="fs-5">${{ "{:,.0f}".format(total_declarado).replace(',', '.') }}</strong>
                                </div>

                                {% if total_declarado != total_calculado %}
                                <div class="alert alert-warning mt-3 mb-0 py-2">
                                    <small>Discrepancia: El total declarado (${{ "{:,.0f}".format(total_declarado).replace(',', '.') }}) no coincide con la suma de los productos vendidos (${{ "{:,.0f}".format(total_calculado).replace(',', '.') }}).</small>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="card shadow-sm border-danger">
                            <div class="card-header bg-danger text-white">Gastos y Observaciones</div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-3">
                                    <strong class="text-danger">Monto Gastos:</strong>
                                    <strong class="text-danger">-${{ "{:,.0f}".format(rendicion[8] or 0).replace(',', '.') }}</strong>
                                </div>
                                <div>
                                    <span class="text-muted d-block mb-1">Observaciones:</span>
                                    <p class="mb-0 bg-dark p-2 rounded border border-secondary" style="font-size: 0.9em;">
                                        {{ rendicion[9] if rendicion[9] else "Sin observaciones." }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}