{% extends "macros/base.html" %}
{% from 'macros/modals.html' import confirm_modal, alert_modal %}
{% from "macros/ui.html" import flashed_messages, back_link %}

{% block title %}Rendición de Caja{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        {{ back_link(url_for('worker.worker_dashboard'), 'Volver al Historial') }}
        <h2>Nueva Rendición de Caja</h2>
    </div>
    <div class="text-end text-muted">
        <div><strong>Módulo:</strong> <span class="badge bg-primary">{{ modulo_name }}</span></div>
        <div><small>Zona: {{ zona_name }}</small></div>
    </div>
</div>

{{ flashed_messages() }}

<form method="POST">
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-primary text-white">Datos del Turno</div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Fecha</label>
                    <input type="date" class="form-control" name="fecha" value="{{ today }}" min="{{ today }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Entrada</label>
                    <input type="time" class="form-control" name="hora_entrada" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Salida</label>
                    <input type="time" class="form-control" name="hora_salida" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Acompañante (Opcional)</label>
                    <select class="form-select" name="companion_id" id="companion_select">
                        <option value="">Trabajando solo / Sin acompañante</option>
                        {% for worker in otros_trabajadores %}
                            <option value="{{ worker[0] }}">{{ worker[1] }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6" id="companion_times_div" style="display: none;">
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label">Entrada Acompañante</label>
                            <input type="time" class="form-control" name="companion_hora_entrada" id="comp_in">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Salida Acompañante</label>
                            <input type="time" class="form-control" name="companion_hora_salida" id="comp_out">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-primary text-white">Detalle de Productos Vendidos</div>
        <div class="card-body p-0">
            <table class="table table-striped table-hover mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>Producto / Rango de Precio</th>
                        <th>Precio</th>
                        {% if has_commission %}
                            <th>Comisión</th>
                        {% endif %}
                        <th style="width: 150px;">Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                    {% for prod in productos %}
                    <tr>
                        <td class="align-middle">{{ prod[1] }}</td>
                        <td class="align-middle text-muted">${{ "{:,.0f}".format(prod[2]).replace(',', '.') }}</td>
                        
                        {% if has_commission %}
                            <td class="align-middle text-muted">${{ "{:,.0f}".format(prod[3]).replace(',', '.') }}</td>
                        {% endif %}
                        
                        <td>
                            <input type="number" class="form-control form-control-sm" name="qty_{{ prod[0] }}" min="0" placeholder="0">
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="{% if has_commission %}4{% else %}3{% endif %}" class="text-center py-4">
                            No hay productos configurados para esta zona.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>

                <!-- OPCIONAL -->
                <tfoot class="table-group-divider">
                    <tr class="custom-total-row fw-bold"> <td colspan="{% if has_commission %}3{% else %}2{% endif %}" class="text-end align-middle">
                            Total Venta por Productos:
                        </td>
                        <td>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text border-0 bg-transparent text-info">$</span>
                                <input type="text" class="form-control border-0 bg-transparent text-info fw-bold fs-5" id="total_productos_calc" value="0" readonly>
                            </div>
                        </td>
                    </tr>
                </tfoot>
                <!-- OPCIONAL -->
            </table>
        </div>
    </div>

<div class="card mb-4 shadow-sm border-info">
        <div class="card-header bg-info text-dark">Resumen Financiero</div>
        <div class="card-body">
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <label class="form-label">Débito</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" name="venta_debito" id="venta_debito" required>
                    </div>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-secondary text-white border-0">Nº Boletas</span>
                        <input type="number" class="form-control" name="boletas_debito" min="0" placeholder="0">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Crédito</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" name="venta_credito" id="venta_credito" required>
                    </div>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-secondary text-white border-0">Nº Boletas</span>
                        <input type="number" class="form-control" name="boletas_credito" min="0" placeholder="0">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Mercado Pago</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" placeholder="0" name="venta_mp" id="venta_mp" required>
                    </div>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-secondary text-white border-0">Nº Boletas</span>
                        <input type="number" class="form-control" name="boletas_mp" min="0" placeholder="0">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Efectivo</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" placeholder="0" name="venta_efectivo" id="venta_efectivo" required>
                    </div>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-secondary text-white border-0">Nº Boletas</span>
                        <input type="number" class="form-control" name="boletas_efectivo" min="0" placeholder="0">
                    </div>
                </div>
            </div>
            
            <div class="row g-3 p-3 bg-body-secondary rounded shadow-sm">
                <div class="col-md-6">
                    <label class="form-label text-info fw-bold">Total Digital (Tarjetas + MP)</label>
                    <div class="input-group">
                        <span class="input-group-text bg-info text-white border-info">$</span>
                        <input type="text" class="form-control bg-dark-subtle fw-bold" placeholder="0" id="total_digital" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label text-success fw-bold">Total Ventas Declaradas</label>
                    <div class="input-group">
                        <span class="input-group-text bg-success text-white border-success">$</span>
                        <input type="text" class="form-control bg-dark-subtle fw-bold" placeholder="0" id="total_general" readonly>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4 shadow-sm border-danger">
        <div class="card-header bg-danger text-white">Gastos y Observaciones</div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label text-danger fw-bold">Monto de Gastos</label>
                    <div class="input-group">
                        <span class="input-group-text bg-danger text-white border-danger">$</span>
                        <input type="text" class="form-control money-input" name="gastos" id="gastos" placeholder="0">
                    </div>
                </div>
                <div class="col-md-8">
                    <label class="form-label">Observaciones / Motivo</label>
                    <textarea class="form-control" name="observaciones" rows="2" placeholder="Si hubo gastos o necesitas reportar algo, anótalo aquí..."></textarea>
                </div>
            </div>
        </div>
    </div>

    <div id="discrepancy_warning" class="alert alert-warning mb-4" style="display: none;">
        <i class="bi bi-exclamation-triangle-fill me-2"></i> <span id="discrepancy_text"></span>
    </div>

    <button type="button" class="btn btn-primary w-100 py-3 mb-5" data-bs-toggle="modal" data-bs-target="#confirmSubmitModal">
        <i class="bi bi-send-check me-2"></i> Enviar Rendición Diaria
    </button>
</form>

{{ confirm_modal(
    id='confirmSubmitModal',
    title='¿Enviar Rendición?',
    message='Asegúrate de que todas las cantidades y montos ingresados sean correctos. Una vez enviada, no podrás editarla.',
    action_url='#',
    btn_class='btn-success',
    btn_text='Sí, enviar ahora'
) }}

{{ alert_modal(
    id='globalAlertModal',
    title='Atención',
    message='Por favor, completa los campos requeridos.'
) }}

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/worker_dashboard.js') }}"></script>
{% endblock %}