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

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

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

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <a href="{{ url_for('worker_dashboard') }}" class="btn btn-outline-secondary btn-sm mb-2">
            <i class="bi bi-arrow-left"></i> Volver al Historial
        </a>
        <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>

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

<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>

    <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>
    document.getElementById('companion_select').addEventListener('change', function() {
        const timeDiv = document.getElementById('companion_times_div');
        const compIn = document.getElementById('comp_in');
        const compOut = document.getElementById('comp_out');
        if (this.value) {
            timeDiv.style.display = 'block';
            compIn.required = true;
            compOut.required = true;
        } else {
            timeDiv.style.display = 'none';
            compIn.required = false;
            compOut.required = false;
            compIn.value = '';
            compOut.value = '';
        }
    });
</script>

<script>
    const inputsCantidad = document.querySelectorAll('input[name^="qty_"]');
    const displayTotalProductos = document.getElementById('total_productos_calc');

    function calcularVentaProductos() {
        let granTotal = 0;
        const filas = document.querySelectorAll('tbody tr');
        
        filas.forEach(fila => {
            const inputQty = fila.querySelector('input[name^="qty_"]');
            if (inputQty) {
                if (parseInt(inputQty.value) < 0) {
                    inputQty.value = 0;
                }
                const cantidad = parseInt(inputQty.value) || 0;
                const precioTexto = fila.cells[1].innerText.replace(/\D/g, '');
                const precio = parseInt(precioTexto) || 0;
                granTotal += (cantidad * precio);
            }
        });
        displayTotalProductos.value = granTotal.toLocaleString('es-CL');
    }

    inputsCantidad.forEach(input => {
        input.addEventListener('keydown', function(e) {
            if (['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Enter'].includes(e.key) || e.ctrlKey || e.metaKey) return;
            if (e.key < '0' || e.key > '9') {
                e.preventDefault();
            }
        });
        
        input.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '');
            calcularVentaProductos();
        });
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const submitModal = document.getElementById('confirmSubmitModal');
    const mainForm = document.querySelector('form');
    const alertModalEl = document.getElementById('globalAlertModal');
    const alertModal = new bootstrap.Modal(alertModalEl);
    const confirmBtn = submitModal.querySelector('button[type="submit"]');

    function mostrarError(mensaje) {
        document.getElementById('globalAlertModalBody').textContent = mensaje;
        alertModal.show();
    }

    function validarFormulario() {
        const requiredInputs = mainForm.querySelectorAll('[required]');
        let valid = true;

        requiredInputs.forEach(input => {
            const isMoney = input.classList.contains('money-input');
            if (!input.value.trim() || (isMoney && input.value === '')) { 
                input.classList.add('is-invalid');
                valid = false;
            } else {
                input.classList.remove('is-invalid');
            }
        });
        return valid;
    }

    confirmBtn.addEventListener('click', function(e) {
        e.preventDefault();
        if (validarFormulario()) {
            mainForm.submit();
        } else {
            bootstrap.Modal.getInstance(submitModal).hide();
            mostrarError("Por favor, rellena los campos obligatorios (Fecha y Hora) antes de enviar.");
        }
    });

    document.querySelectorAll('.money-input').forEach(input => {
        if (!input.value.trim()) input.value = '0';
    });
});
</script>

<script>
    const inputsVenta = document.querySelectorAll('.sale-input');
    const displayDigital = document.getElementById('total_digital');
    const displayGeneral = document.getElementById('total_general');

    function calcularTotales() {
        const getVal = (id) => {
            const el = document.getElementById(id);
            if (!el || !el.value.trim() || el.value === '0') return 0; 
            return parseInt(el.value.replace(/\D/g, '')) || 0;
        };

        const debito = getVal('venta_debito');
        const credito = getVal('venta_credito');
        const mp = getVal('venta_mp');
        const efectivo = getVal('venta_efectivo');

        const totalDigital = debito + credito + mp;
        const totalGeneral = totalDigital + efectivo; // Ya no restamos los gastos aquí

        document.getElementById('total_digital').value = totalDigital.toLocaleString('es-CL');
        document.getElementById('total_general').value = totalGeneral.toLocaleString('es-CL');
    }

    inputsVenta.forEach(input => {
        input.addEventListener('input', calcularTotales);
    });

    document.querySelector('form').addEventListener('submit', function(e) {
        const requiredInputs = this.querySelectorAll('[required]');
        let valid = true;

        requiredInputs.forEach(input => {
            const isMoney = input.classList.contains('money-input');
            if (!input.value.trim() || (isMoney && input.value === '')) { 
                input.classList.add('is-invalid');
                valid = false;
            } else {
                input.classList.remove('is-invalid');
            }
        });

        if (!valid) {
            e.preventDefault();
            const alertModalEl = document.getElementById('globalAlertModal');
            if (alertModalEl) {
                const alertModal = bootstrap.Modal.getOrCreateInstance(alertModalEl);
                document.getElementById('globalAlertModalBody').textContent = "Por favor, rellena todos los campos obligatorios antes de enviar.";
                alertModal.show();
            } else {
                alert("Por favor, rellena todos los campos obligatorios.");
            }
        }
    });

    document.querySelectorAll('.money-input').forEach(function(input) {
        input.addEventListener('keydown', function(e) {
            if (['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Enter'].includes(e.key) || e.ctrlKey || e.metaKey) return;
            if (e.key < '0' || e.key > '9') {
                e.preventDefault();
            }
        });

        input.addEventListener('focus', function() {
            if (this.value === '0') this.value = '';
        });

        input.addEventListener('blur', function() {
            if (this.value.trim() === '' || this.value.trim() === '0') {
                this.value = '0';
            }
            calcularTotales();
        });

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