362 lines
15 KiB
HTML
362 lines
15 KiB
HTML
{% 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">
|
|
<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 class="col-md-12">
|
|
<label class="form-label">Acompañante (Opcional)</label>
|
|
<select class="form-select" name="companion_id">
|
|
<option value="">Trabajando solo / Sin acompañante</option>
|
|
{% for worker in otros_trabajadores %}
|
|
<option value="{{ worker[0] }}">{{ worker[1] }}</option>
|
|
{% endfor %}
|
|
</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>
|
|
|
|
<!-- 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">Venta Débito</label>
|
|
<div class="input-group">
|
|
<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>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Venta Crédito</label>
|
|
<div class="input-group">
|
|
<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>
|
|
<div class="col-md-3">
|
|
<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" placeholder="0" name="venta_mp" id="venta_mp" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<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" placeholder="0" 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-4">
|
|
<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" placeholder="0" id="total_digital" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-danger fw-bold">Gastos del Módulo</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 sale-input" name="gastos" id="gastos" placeholder="0">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-success fw-bold">Total Ventas (Neto)</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 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="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>
|
|
const inputsCantidad = document.querySelectorAll('input[name^="qty_"]');
|
|
const displayTotalProductos = document.getElementById('total_productos_calc');
|
|
|
|
function calcularVentaProductos() {
|
|
let granTotal = 0;
|
|
|
|
// Buscamos todas las filas del cuerpo de la tabla
|
|
const filas = document.querySelectorAll('tbody tr');
|
|
|
|
filas.forEach(fila => {
|
|
const inputQty = fila.querySelector('input[name^="qty_"]');
|
|
if (inputQty) {
|
|
const cantidad = parseInt(inputQty.value) || 0;
|
|
// Extraemos el precio del texto de la segunda celda (quitando '$' y '.')
|
|
const precioTexto = fila.cells[1].innerText.replace(/\D/g, '');
|
|
const precio = parseInt(precioTexto) || 0;
|
|
|
|
granTotal += (cantidad * precio);
|
|
}
|
|
});
|
|
|
|
displayTotalProductos.value = granTotal.toLocaleString('es-CL');
|
|
}
|
|
|
|
// Escuchar cambios en las cantidades de productos
|
|
inputsCantidad.forEach(input => {
|
|
input.addEventListener('input', 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');
|
|
// Validamos solo si está vacío y NO es un campo de dinero (que ya tiene '0')
|
|
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 {
|
|
// Cerramos el modal de confirmación antes de mostrar el de error
|
|
bootstrap.Modal.getInstance(submitModal).hide();
|
|
mostrarError("Por favor, rellena los campos obligatorios (Fecha y Turno) antes de enviar.");
|
|
}
|
|
});
|
|
|
|
// Inicializar campos de dinero en 0 para que no se queje la validación
|
|
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);
|
|
// Si no hay valor, asumimos 0 para que el cálculo no de NaN
|
|
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 gastos = getVal('gastos');
|
|
|
|
const totalDigital = debito + credito + mp;
|
|
const totalGeneral = (totalDigital + efectivo) - gastos;
|
|
|
|
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 => {
|
|
const isMoney = input.classList.contains('money-input');
|
|
// Si está vacío y no es campo de dinero (o el campo de dinero está totalmente vacío)
|
|
if (!input.value.trim() || (isMoney && input.value === '')) {
|
|
input.classList.add('is-invalid');
|
|
valid = false;
|
|
} else {
|
|
input.classList.remove('is-invalid');
|
|
}
|
|
});
|
|
|
|
if (!valid) {
|
|
e.preventDefault();
|
|
|
|
// Usamos la función del modal bonito en lugar del alert
|
|
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 {
|
|
// Respaldo por si el modal no carga por alguna razón mística
|
|
alert("Por favor, rellena todos los campos obligatorios.");
|
|
}
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.money-input').forEach(function(input) {
|
|
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 %} |