{% 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 alert_modal(id, title, message, btn_class='btn-primary') %}
<div class="modal fade" id="{{ id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-warning">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill text-warning me-2"></i> {{ title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="{{ id }}Body">
                {{ message }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn {{ btn_class }}" data-bs-dismiss="modal">Entendido</button>
            </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 add_product_modal(zonas) %}
<div class="modal fade" id="addProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Nuevo Producto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('admin.manage_products') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nombre del Producto</label>
                        <input type="text" class="form-control" name="name" placeholder="Nombre del Producto" required>
                    </div>
                    <hr>
                    <h6 class="fw-bold mb-3">Precios y Comisiones por Zona</h6>
                    <div class="row fw-bold mb-2">
                        <div class="col-4">Zona</div>
                        <div class="col-4">Precio</div>
                        <div class="col-4">Comisión</div>
                    </div>
                    {% for z in zonas %}
                    <div class="row mb-2">
                        <div class="col-4 d-flex align-items-center">
                            <span class="badge bg-info text-dark w-100">{{ z[1] }}</span>
                        </div>
                        <div class="col-4">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">$</span>
                                <input type="text" class="form-control money-input" name="price_{{ z[0] }}" placeholder="0" required>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">$</span>
                                <input type="text" class="form-control money-input" name="comm_{{ z[0] }}" placeholder="0" required>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </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">Crear Producto</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endmacro %}

{% macro edit_worker_modal(modulos, bancos) %}
<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>
                    <div class="mb-3">
                        <label class="form-label">Jornada</label>
                        <select class="form-select" name="tipo" id="edit_worker_tipo" required>
                            <option value="Full Time">Full Time</option>
                            <option value="Part Time">Part Time</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Banco</label>
                        <select class="form-select" name="nombre_banco" id="edit_worker_nombre_banco" onchange="toggleOtroBanco(this, 'edit_otro_banco_wrapper')">
                            <option value="">Seleccionar...</option>
                            {% for b in bancos %}
                            <option value="{{ b }}">{{ b }}</option>
                            {% endfor %}
                            <option value="__otro__">Otro...</option>
                        </select>
                        <div id="edit_otro_banco_wrapper" class="mt-1" style="display:none">
                            <input type="text" class="form-control form-control-sm" name="nombre_banco_otro" id="edit_worker_nombre_banco_otro" placeholder="Especificar banco...">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">N° Cuenta</label>
                        <input type="text" class="form-control" name="numero_cuenta" id="edit_worker_numero_cuenta" placeholder="Ej: 12345678">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">RUT Cuenta</label>
                        <input type="text" class="form-control" name="rut_banco" id="edit_worker_rut_banco" placeholder="Ej: 12.345.678-9">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tipo Cuenta</label>
                        <select class="form-select" name="tipo_cuenta" id="edit_worker_tipo_cuenta">
                            <option value="">Seleccionar...</option>
                            <option value="Cuenta Corriente">Cuenta Corriente</option>
                            <option value="Cuenta Vista">Cuenta Vista</option>
                            <option value="Cuenta Rut">Cuenta Rut</option>
                            <option value="Cuenta de Ahorro">Cuenta de Ahorro</option>
                        </select>
                    </div>
                </form>

                <hr>
                
                <div class="d-grid">
                    <button type="button" class="btn btn-outline-warning btn-sm w-100" 
                            data-bs-toggle="modal" 
                            data-bs-target="#confirmResetPass"
                            data-bs-dismiss="modal">
                        <i class="bi bi-key me-1"></i> Restablecer Contraseña
                    </button>
                    <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 add_worker_modal(modulos, bancos) %}
<div class="modal fade" id="addWorkerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Nuevo Trabajador</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('admin.manage_workers') }}">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">RUT</label>
                            <input type="text" class="form-control" name="rut" id="addRutInput" placeholder="12.345.678-9" maxlength="12" required>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Nombre Completo</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Teléfono</label>
                            <input type="text" class="form-control" name="phone" id="addPhoneInput" placeholder="9 1234 5678" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Módulo Asignado</label>
                            <select class="form-select" name="modulo_id" required>
                                <option value="" selected disabled>Seleccionar Módulo...</option>
                                {% for mod in modulos %}
                                    <option value="{{ mod[0] }}">{{ mod[2] }} - {{ mod[1] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Jornada</label>
                            <select class="form-select" name="tipo" required>
                                <option value="Full Time">Full Time</option>
                                <option value="Part Time">Part Time</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Banco</label>
                            <select class="form-select" name="nombre_banco" onchange="toggleOtroBanco(this, 'add_otro_banco_wrapper')">
                                <option value="">Seleccionar...</option>
                                {% for b in bancos %}
                                <option value="{{ b }}">{{ b }}</option>
                                {% endfor %}
                                <option value="__otro__">Otro...</option>
                            </select>
                            <div id="add_otro_banco_wrapper" class="mt-1" style="display:none">
                                <input type="text" class="form-control form-control-sm" name="nombre_banco_otro" placeholder="Especificar banco...">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">N° Cuenta</label>
                            <input type="text" class="form-control" name="numero_cuenta" placeholder="Ej: 12345678">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">RUT Cuenta</label>
                            <input type="text" class="form-control" name="rut_banco" placeholder="Ej: 12.345.678-9">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipo Cuenta</label>
                            <select class="form-select" name="tipo_cuenta">
                                <option value="">Seleccionar...</option>
                                <option value="Cuenta Corriente">Cuenta Corriente</option>
                                <option value="Cuenta Vista">Cuenta Vista</option>
                                <option value="Cuenta Rut">Cuenta Rut</option>
                                <option value="Cuenta de Ahorro">Cuenta de Ahorro</option>
                            </select>
                        </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 Trabajador</button>
                </div>
            </form>
        </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">
                                <div class="table-responsive">
                                    <table class="table table-striped mb-0 text-nowrap">
                                        <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 class="text-wrap" style="min-width: 180px;">{{ 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 text-wrap">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-6">${{ "{:,.0f}".format(total_calculado or 0).replace(',', '.') }}</td>
                                                <td class="text-end fw-bold text-success fs-6">
                                                    {% if not rendicion[14] and not rendicion[15] %}
                                                        <span class="text-decoration-line-through text-muted">${{ "{:,.0f}".format(comision_total or 0).replace(',', '.') }}</span>
                                                    {% else %}
                                                        ${{ "{:,.0f}".format(comision_total or 0).replace(',', '.') }}
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </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] }}
                                        {% if session.get('is_admin') %}
                                        <span class="badge {% if rendicion[14] %}bg-success{% else %}bg-secondary{% endif %} ms-1" style="font-size: 0.65em;">
                                            {% if rendicion[14] %}Si Recibe Comision{% else %}No Recibe Comision{% endif %}
                                        </span>
                                        {% endif %}
                                    </dd>

                                    <dt class="col-sm-5 text-muted">Acompañante</dt>
                                    <dd class="col-sm-7">
                                        {% if rendicion[10] %}
                                            {{ rendicion[10] }}
                                            {% if session.get('is_admin') %}
                                            <span class="badge {% if rendicion[15] %}bg-success{% else %}bg-secondary{% endif %} ms-1" style="font-size: 0.65em;">
                                                {% if rendicion[15] %}Si Recibe Comision{% else %}No Recibe Comision{% endif %}
                                            </span>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted italic small">Sin acompañante</span>
                                        {% endif %}
                                    </dd>

                                    <dt class="col-sm-5 text-muted">Acompañante 2</dt>
                                    <dd class="col-sm-7">
                                        {% if rendicion[16] %}
                                            {{ rendicion[16] }}
                                            {% if session.get('is_admin') %}
                                            <span class="badge {% if rendicion[18] %}bg-success{% else %}bg-secondary{% endif %} ms-1" style="font-size: 0.65em;">
                                                {% if rendicion[18] %}Si Recibe Comision{% else %}No Recibe Comision{% endif %}
                                            </span>
                                            {% endif %}
                                        {% 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>
                                </dl>
                                <hr>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Débito <small>(x{{ rendicion[19] or 0 }})</small>:</span>
                                    <span>${{ "{:,.0f}".format(rendicion[4] or 0).replace(',', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Crédito <small>(x{{ rendicion[20] or 0 }})</small>:</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 <small>(x{{ rendicion[21] or 0 }})</small>:</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 <small>(x{{ rendicion[22] or 0 }})</small>:</span>
                                    <span>${{ "{:,.0f}".format(rendicion[7] or 0).replace(',', '.') }}</span>
                                </div>
                                
                                {% set total_declarado = (rendicion[4] or 0) + (rendicion[5] or 0) + (rendicion[6] or 0) + (rendicion[7] or 0) %}
                                <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 text-wrap text-break">
                                    <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 mb-0"> <div class="card-header bg-danger text-white fw-bold py-1">Gastos y Observaciones</div> <div class="card-body py-2">
                                <div class="mb-1"> <label class="small text-danger fw-bold mb-0">Monto Gastos</label>
                                    <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-body-tertiary p-2 rounded border border-secondary text-wrap text-break" 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 %}

{% macro edit_rendicion_modal(rendicion, items, workers, modulos) %}
<div class="modal fade" id="editRendicion{{ 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">Editar 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">
                <form method="POST" action="{{ url_for('admin.edit_rendicion', id=rendicion[0]) }}" id="editRendicionForm_{{ rendicion[0] }}">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <div class="card shadow-sm h-100">
                                <div class="card-header bg-secondary text-white">Productos Vendidos</div>
                                <div class="card-body p-0">
                                    <div class="table-responsive custom-scrollbar" style="max-height: 450px;">
                                        <table class="table table-striped mb-0 text-nowrap">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>Producto</th>
                                                    <th class="text-center" style="width: 80px;">Cant.</th>
                                                    <th class="text-end">Precio Un.</th>
                                                    <th class="text-end">Total Línea</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in items %}
                                                <tr>
                                                    <td class="text-wrap align-middle" style="min-width: 180px;">{{ item[0] }}</td>
                                                    <td class="p-1">
                                                        <input type="number" class="form-control form-control-sm text-center prod-qty-input" 
                                                               name="qty_{{ item[6] }}" value="{{ item[1] }}" min="0"
                                                               data-price="{{ item[2] }}" data-rid="{{ rendicion[0] }}"
                                                               oninput="recalcProductLine(this)">
                                                    </td>
                                                    <td class="text-end align-middle text-muted">${{ "{:,.0f}".format(item[2]).replace(',', '.') }}</td>
                                                    <td class="text-end align-middle fw-bold item-total-line">
                                                        ${{ "{:,.0f}".format(item[4]).replace(',', '.') }}
                                                    </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-6 text-primary" id="sys_total_{{ rendicion[0] }}">
                                                        ${{ "{:,.0f}".format(rendicion[24] or 0).replace(',', '.') }}
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-sm mb-3 border-info">
                                <div class="card-header bg-info text-dark fw-bold">Configuración y Dinero</div>
                                <div class="card-body py-2">
                                    <div class="mb-2">
                                        <label class="small text-muted mb-0">Fecha de Rendición</label>
                                        <input type="date" class="form-control form-control-sm" name="fecha" value="{{ rendicion[1] }}" required>

                                        <input type="hidden" name="modulo_id" value="{{ rendicion[13] }}">
                                        
                                        <label class="small text-muted mb-0 mt-2 d-block">Trabajador</label>
                                        <select class="form-select form-select-sm" name="worker_id" onchange="updateComisionToggle(this, 'wc_{{ rendicion[0] }}')" required>
                                            {% for w in workers %}
                                                {# w[3] es el modulo_id que agregamos en el paso anterior #}
                                                {% if w[3] == rendicion[13] %}
                                                    <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[11] %}selected{% endif %}>{{ w[1] }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        <div class="d-flex justify-content-between align-items-center mt-1">
                                            <div id="badge_worker_{{ rendicion[0] }}"></div>
                                            <div class="form-check m-0">
                                                <input class="form-check-input" type="checkbox" name="worker_comision" id="wc_{{ rendicion[0] }}" {% if rendicion[14] %}checked{% endif %}>
                                                <label class="form-check-label text-success small fw-bold" for="wc_{{ rendicion[0] }}">Recibe Comisión</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-2 border-top pt-2">
                                        <label class="small text-muted mb-0">Acompañante</label>
                                        <select class="form-select form-select-sm" name="companion_id" onchange="toggleCompDiv({{ rendicion[0] }}, this)">
                                            <option value="" data-tipo="">Sin acompañante</option>
                                            {% for w in workers %}
                                                {% if w[3] == rendicion[13] %}
                                                    <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[12] %}selected{% endif %}>{{ w[1] }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        <div class="d-flex justify-content-between align-items-center mt-1" id="comp_com_div_{{ rendicion[0] }}" {% if not rendicion[12] %}style="display:none;"{% endif %}>
                                            <div id="badge_comp_{{ rendicion[0] }}"></div>
                                            <div class="form-check m-0">
                                                <input class="form-check-input" type="checkbox" name="companion_comision" id="cc_{{ rendicion[0] }}" {% if rendicion[15] %}checked{% endif %}>
                                                <label class="form-check-label text-success small fw-bold" for="cc_{{ rendicion[0] }}">Recibe Comisión</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-2 border-top pt-2">
                                        <label class="small text-muted mb-0">Acompañante 2</label>
                                        <select class="form-select form-select-sm" name="companion2_id" onchange="toggleComp2Div({{ rendicion[0] }}, this)">
                                            <option value="" data-tipo="">Sin acompañante</option>
                                            {% for w in workers %}
                                                {% if w[3] == rendicion[13] %}
                                                    <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[17] %}selected{% endif %}>{{ w[1] }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        <div class="d-flex justify-content-between align-items-center mt-1" id="comp2_com_div_{{ rendicion[0] }}" {% if not rendicion[17] %}style="display:none;"{% endif %}>
                                            <div id="badge_comp2_{{ rendicion[0] }}"></div>
                                            <div class="form-check m-0">
                                                <input class="form-check-input" type="checkbox" name="companion2_comision" id="cc2_{{ rendicion[0] }}" {% if rendicion[18] %}checked{% endif %}>
                                                <label class="form-check-label text-success small fw-bold" for="cc2_{{ rendicion[0] }}">Recibe Comisión</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row g-2 mt-1 border-top pt-2">
                                        <div class="col-6">
                                            <label class="small text-muted mb-0">Débito</label>
                                            <input type="text" class="form-control form-control-sm text-end money-input mb-1" id="edit_debito_{{ rendicion[0] }}" name="venta_debito" value="{{ '{:,.0f}'.format(rendicion[4] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text bg-body-tertiary text-muted" style="font-size: 0.7em;">Boletas</span>
                                                <input type="number" class="form-control text-center bg-body text-body border-secondary" name="boletas_debito" value="{{ rendicion[19] or 0 }}">
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="small text-muted mb-0">Crédito</label>
                                            <input type="text" class="form-control form-control-sm text-end money-input mb-1" id="edit_credito_{{ rendicion[0] }}" name="venta_credito" value="{{ '{:,.0f}'.format(rendicion[5] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text bg-body-tertiary text-muted" style="font-size: 0.7em;">Boletas</span>
                                                <input type="number" class="form-control text-center bg-body text-body border-secondary" name="boletas_credito" value="{{ rendicion[20] or 0 }}">
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="small text-muted mb-0">Mercado Pago</label>
                                            <input type="text" class="form-control form-control-sm text-end money-input mb-1" id="edit_mp_{{ rendicion[0] }}" name="venta_mp" value="{{ '{:,.0f}'.format(rendicion[6] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text bg-body-tertiary text-muted" style="font-size: 0.7em;">Boletas</span>
                                                <input type="number" class="form-control text-center bg-body text-body border-secondary" name="boletas_mp" value="{{ rendicion[21] or 0 }}">
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="small text-muted mb-0">Efectivo</label>
                                            <input type="text" class="form-control form-control-sm text-end money-input mb-1" id="edit_efectivo_{{ rendicion[0] }}" name="venta_efectivo" value="{{ '{:,.0f}'.format(rendicion[7] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text bg-body-tertiary text-muted" style="font-size: 0.7em;">Boletas</span>
                                                <input type="number" class="form-control text-center bg-body text-body border-secondary" name="boletas_efectivo" value="{{ rendicion[22] or 0 }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-between mt-3 pt-2 border-top">
                                        <strong class="fs-6">Total Declarado:</strong>
                                        <strong class="fs-5 text-info" id="display_nuevo_total_{{ rendicion[0] }}">${{ "{:,.0f}".format((rendicion[4] or 0) + (rendicion[5] or 0) + (rendicion[6] or 0) + (rendicion[7] or 0)).replace(',', '.') }}</strong>
                                    </div>
                                </div>
                            </div>

                            <div class="card shadow-sm border-danger">
                                <div class="card-header bg-danger text-white fw-bold">Gastos y Observaciones</div>
                                <div class="card-body py-2">
                                    <div class="mb-2">
                                        <label class="small text-danger fw-bold">Monto Gastos</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text bg-danger-subtle border-danger text-danger">-$</span>
                                            <input type="text" class="form-control money-input border-danger text-end" name="gastos" value="{{ '{:,.0f}'.format(rendicion[8] or 0).replace(',', '.') }}" required>
                                        </div>
                                    </div>
                                    <div class="mb-0">
                                        <label class="small text-muted">Observaciones</label>
                                        <textarea class="form-control form-control-sm bg-body text-body" name="observaciones" rows="2">{{ rendicion[9] }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="editRendicionForm_{{ rendicion[0] }}" class="btn btn-primary btn-sm px-4">Guardar Cambios</button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% macro reportes_menu_modal(modulo_id, modulo_name) %}
<div class="modal fade" id="reportMenuModal{{ modulo_id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reportes: <span class="text-info">{{ modulo_name }}</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-body-tertiary text-start">
                <div class="row g-4 mt-1 mb-3">
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 hover-card">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-primary text-white rounded p-3 me-3">
                                        <i class="bi bi-cash-coin fs-4"></i>
                                    </div>
                                    <h5 class="card-title mb-0">Detalle de Ventas</h5>
                                </div>
                                <p class="text-muted small flex-grow-1">Análisis detallado de ventas diarias, productos vendidos y consolidado mensual.</p>
                                <a href="{{ url_for('admin.report_modulo_periodo', modulo_id=modulo_id) }}" class="btn btn-primary w-100 mt-3">Generar Reporte</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 hover-card">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-success text-white rounded p-3 me-3">
                                        <i class="bi bi-percent fs-4"></i>
                                    </div>
                                    <h5 class="card-title mb-0">Comisiones</h5>
                                </div>
                                <p class="text-muted small flex-grow-1">Cálculo de comisiones generadas por los trabajadores en este módulo.</p>
                                <a href="{{ url_for('admin.report_modulo_comisiones', modulo_id=modulo_id) }}" class="btn btn-success w-100 mt-3">Generar Reporte</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 hover-card">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-warning text-dark rounded p-3 me-3">
                                        <i class="bi bi-clock-history fs-4"></i>
                                    </div>
                                    <h5 class="card-title mb-0">Control de Horarios</h5>
                                </div>
                                <p class="text-muted small flex-grow-1">Registro de horas de entrada y salida de los trabajadores y acompañantes.</p>
                                <a href="{{ url_for('admin.report_modulo_horarios', modulo_id=modulo_id) }}" class="btn btn-warning w-100 mt-3">Generar Reporte</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 hover-card">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-info text-dark rounded p-3 me-3">
                                        <i class="bi bi-building fs-4"></i>
                                    </div>
                                    <h5 class="card-title mb-0">Centros Comerciales</h5>
                                </div>
                                <p class="text-muted small flex-grow-1">Reporte de datos exigidos por la administración del centro comercial.</p>
                                <a href="{{ url_for('admin.report_modulo_centros_comerciales', modulo_id=modulo_id) }}" class="btn btn-info w-100 mt-3">Generar Reporte</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 hover-card">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-secondary text-white rounded p-3 me-3">
                                        <i class="bi bi-calculator fs-4"></i>
                                    </div>
                                    <h5 class="card-title mb-0">Cálculo de IVA</h5>
                                </div>
                                <p class="text-muted small flex-grow-1">Proyección de impuestos basados en las ventas declaradas.</p>
                                <a href="{{ url_for('admin.report_modulo_calculo_iva', modulo_id=modulo_id) }}" class="btn btn-secondary w-100 mt-3">Generar Reporte</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 hover-card">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-danger text-white rounded p-3 me-3">
                                        <i class="bi bi-shield-exclamation fs-4"></i>
                                    </div>
                                    <h5 class="card-title mb-0">Robos y Mermas</h5>
                                </div>
                                <p class="text-muted small flex-grow-1">Cuadratura de inventario y registro de pérdida de productos.</p>
                                <button class="btn btn-outline-danger w-100 mt-3" onclick="alert('Reporte en construcción')">Generar Reporte</button>
                            </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 %}

{% macro report_filters(action_url, workers, selected_worker, fecha_inicio, fecha_fin) %}
<div class="card shadow-sm mb-4 border-0 bg-dark-subtle">
    <div class="card-body p-3">
        <form method="GET" action="{{ action_url }}" class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Desde</label>
                <input type="date" name="fecha_inicio" class="form-control form-control-sm" value="{{ fecha_inicio }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Hasta</label>
                <input type="date" name="fecha_fin" class="form-control form-control-sm" value="{{ fecha_fin }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small text-muted mb-1">Trabajador</label>
                <select name="worker_id" class="form-select form-select-sm">
                    <option value="">Todos los trabajadores</option>
                    {% for w in workers %}
                    <option value="{{ w[0] }}" {{ 'selected' if w[0]|string == selected_worker|string }}>{{ w[1] }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-filter"></i> Aplicar Filtros</button>
            </div>
        </form>
    </div>
</div>
{% endmacro %}


{% macro manage_complementos_modal(prod, complementos_catalogo) %}
<div class="modal fade" id="complementosModal{{ prod.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Complementos de: <span class="text-primary">{{ prod.name }}</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-start">
                <h6 class="fw-bold mb-3">Complementos Vinculados (Se entregan de regalo al vender este producto)</h6>
                {% if prod.complementos %}
                <div class="table-responsive mb-4">
                    <table class="table table-striped table-hover table-bordered mb-0 align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>Nombre Complemento</th>
                                <th class="text-center" style="width: 120px;">Cantidad</th>
                                <th class="text-end" style="width: 100px;">Desvincular</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for comp in prod.complementos %}
                            <tr>
                                <td>{{ comp.name }}</td>
                                <td class="text-center fw-bold">{{ comp.cantidad }}</td>
                                <td class="text-end">
                                    <form method="POST" action="{{ url_for('admin.delete_producto_complemento', assoc_id=comp.id) }}" class="d-inline">
                                        <button type="submit" class="btn btn-danger btn-sm py-0 px-2" title="Desvincular">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-light border text-center text-muted mb-4 py-3">
                    <i class="bi bi-info-circle me-1"></i> Este producto aún no tiene complementos asociados.
                </div>
                {% endif %}

                <hr>

                <h6 class="fw-bold mb-3">Vincular Nuevo Complemento</h6>
                <form method="POST" action="{{ url_for('admin.add_producto_complemento', prod_id=prod.id) }}">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label small text-muted mb-1">Seleccionar del Catálogo</label>
                            <select class="form-select form-select-sm" name="complemento_id" onchange="toggleNuevoComplementoInput({{ prod.id }}, this)" required>
                                <option value="" selected disabled>Elegir...</option>
                                {% for cat in complementos_catalogo %}
                                    <option value="{{ cat.id }}">{{ cat.name }}</option>
                                {% endfor %}
                                <option value="__nuevo__">+ Crear nuevo complemento...</option>
                            </select>
                        </div>
                        <div class="col-md-5" id="nuevo_comp_wrapper_{{ prod.id }}" style="display:none;">
                            <label class="form-label small text-muted mb-1">Nombre del Nuevo Complemento</label>
                            <input type="text" class="form-control form-control-sm" name="complemento_nombre_nuevo" placeholder="Ej. Paño microfibra">
                        </div>
                        <div class="col-md-2" id="cantidad_comp_wrapper_{{ prod.id }}">
                            <label class="form-label small text-muted mb-1">Cantidad</label>
                            <input type="number" class="form-control form-control-sm text-center" name="cantidad" value="1" min="1" required>
                        </div>
                        <div class="col-md-12 text-end mt-2">
                            <button type="submit" class="btn btn-success btn-sm"><i class="bi bi-plus-lg"></i> Vincular</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}