{% extends "macros/base.html" %}

{% 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">
    <h2>Rendición de Caja</h2>
    <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-6">
                    <label class="form-label">Fecha de Venta</label>
                    <input type="date" class="form-control" name="fecha" value="{{ today }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Turno</label>
                    <select class="form-select" name="turno" required>
                        <option value="" disabled selected>Seleccionar...</option>
                        <option value="Primer Turno">Primer Turno</option>
                        <option value="Segundo Turno">Segundo Turno</option>
                        <option value="Part Time">Part Time</option>
                    </select>
                </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>
            </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-4">
                    <label class="form-label">Venta Tarjeta</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" name="venta_tarjeta" id="venta_tarjeta" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Venta Mercado Pago</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" name="venta_mp" id="venta_mp" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Venta Efectivo</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control money-input sale-input" name="venta_efectivo" id="venta_efectivo" required>
                    </div>
                </div>
            </div>

            <div class="row g-3 mb-4 p-3 bg-body-secondary rounded shadow-sm">
                <div class="col-md-6">
                    <label class="form-label text-info fw-bold">Total Digital (Tarjeta + 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" id="total_digital" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label text-success fw-bold">Total Ventas (Todos los medios)</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" id="total_general" readonly>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <label class="form-label">Observaciones / Concepto de Gastos</label>
                <textarea class="form-control" name="observaciones" rows="2" placeholder="Si hubo gastos, anota el motivo aquí..."></textarea>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary w-100 py-3 mb-5" onclick="return confirm('¿Enviar rendición? Revisa bien las cantidades.');">Enviar Rendición Diaria</button>
</form>
{% endblock %}

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

    function calcularTotales() {
        // Limpiamos los puntos para sumar números puros
        const getVal = (id) => parseInt(document.getElementById(id).value.replace(/\D/g, '')) || 0;

        const tarjeta = getVal('venta_tarjeta');
        const mp = getVal('venta_mp');
        const efectivo = getVal('venta_efectivo');

        const totalDigital = tarjeta + mp;
        const totalGeneral = totalDigital + efectivo;

        // Formateamos de vuelta a moneda chilena para mostrar
        displayDigital.value = totalDigital.toLocaleString('es-CL');
        displayGeneral.value = totalGeneral.toLocaleString('es-CL');
    }

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

    // Validación antes de enviar el formulario
    document.querySelector('form').addEventListener('submit', function(e) {
        const requiredInputs = this.querySelectorAll('[required]');
        let valid = true;

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

        if (!valid) {
            e.preventDefault();
            alert("Por favor, rellena todos los campos obligatorios antes de enviar.");
        }
    });

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