476 lines
22 KiB
PHP
476 lines
22 KiB
PHP
<?php
|
|
$pageTitle = "Cálculo de Costos";
|
|
include 'db/config.php';
|
|
include 'layout_header.php';
|
|
|
|
$db = db();
|
|
|
|
// Obtener productos para el select del modal
|
|
$stmt_products = $db->query("SELECT id, nombre FROM products ORDER BY nombre ASC");
|
|
$productos_select = $stmt_products->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// Obtener videos y sus costos asociados
|
|
$stmt = $db->query("SELECT mv.id, mv.orden, mv.foto_producto, p.nombre as nombre_producto,
|
|
mc.costo_producto, mc.costo_fijo_film, mc.comision_asesora,
|
|
mc.delivery, mc.costo_publicitario, mc.inversion_total,
|
|
mc.promo_1, mc.promo_2, mc.promo_3
|
|
FROM marketing_videos mv
|
|
LEFT JOIN products p ON mv.producto_id = p.id
|
|
LEFT JOIN marketing_costos mc ON mv.id = mc.video_id
|
|
ORDER BY mv.orden ASC, mv.fecha_creacion DESC");
|
|
$costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
?>
|
|
|
|
<style>
|
|
.table-excel {
|
|
font-size: 0.85rem;
|
|
}
|
|
.table-excel th {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
.table-excel td {
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.img-preview {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
.editable {
|
|
background-color: #ffffff;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
min-width: 80px;
|
|
pointer-events: auto !important;
|
|
}
|
|
.editable:hover {
|
|
background-color: #f0f7ff !important;
|
|
cursor: pointer;
|
|
box-shadow: inset 0 0 0 2px #0d6efd;
|
|
z-index: 1;
|
|
}
|
|
.edit-icon {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 4px;
|
|
font-size: 0.7rem;
|
|
color: #0d6efd;
|
|
background: rgba(255,255,255,0.9);
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
border: 1px solid #0d6efd;
|
|
display: none;
|
|
z-index: 10;
|
|
}
|
|
.editable:hover .edit-icon {
|
|
display: block;
|
|
}
|
|
.recaudo-cell {
|
|
background-color: #fdfdfd;
|
|
cursor: default;
|
|
color: #6c757d;
|
|
}
|
|
.inline-edit-input {
|
|
width: 100%;
|
|
padding: 4px 8px;
|
|
font-size: 0.85rem;
|
|
border: 2px solid #0d6efd;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
pointer-events: auto !important;
|
|
}
|
|
.bg-total {
|
|
background-color: #f1f3f5;
|
|
font-weight: bold;
|
|
}
|
|
.btn-delete-row {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 0.75rem;
|
|
opacity: 0.3;
|
|
transition: opacity 0.2s;
|
|
pointer-events: auto !important;
|
|
}
|
|
tr:hover .btn-delete-row {
|
|
opacity: 1;
|
|
}
|
|
/* Fix for modal selection and backdrop issues */
|
|
.modal {
|
|
z-index: 2000 !important;
|
|
}
|
|
.modal-backdrop {
|
|
z-index: 1900 !important;
|
|
}
|
|
.modal-content {
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
|
|
pointer-events: auto !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h2 class="mb-0">Cálculo de Costos</h2>
|
|
<p class="text-muted small">Gestión de costos por producto de marketing. <span class="badge bg-info text-dark">Haz clic en las celdas blancas para editar</span></p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="alert('JavaScript está funcionando correctamente en este navegador.')">
|
|
<i class="fas fa-bug"></i> Probar JS
|
|
</button>
|
|
<button type="button" class="btn btn-primary shadow-sm" onclick="abrirModalNuevo()">
|
|
<i class="fas fa-plus me-2"></i> Nuevo Producto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (isset($_GET['success'])): ?>
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
¡Operación realizada con éxito!
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-excel mb-0" id="costosTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">Orden</th>
|
|
<th>Producto</th>
|
|
<th class="text-center">Imagen</th>
|
|
<th class="text-center">Costo Producto</th>
|
|
<th class="text-center">Costo Fijo Film</th>
|
|
<th class="text-center">Comisión Asesora</th>
|
|
<th class="text-center">Delivery</th>
|
|
<th class="text-center">Costo Publicitario</th>
|
|
<th class="text-center bg-total">Inversión Total</th>
|
|
<th class="text-center">Promo 1</th>
|
|
<th class="text-center recaudo-cell">Recaudo 1 (Auto)</th>
|
|
<th class="text-center">Promo 2</th>
|
|
<th class="text-center recaudo-cell">Recaudo 2 (Auto)</th>
|
|
<th class="text-center">Promo 3</th>
|
|
<th class="text-center recaudo-cell">Recaudo 3 (Auto)</th>
|
|
<th class="text-center">Acción</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (empty($costos)): ?>
|
|
<tr>
|
|
<td colspan="16" class="text-center py-4 text-muted">No hay videos registrados en producción.</td>
|
|
</tr>
|
|
<?php else: ?>
|
|
<?php foreach ($costos as $c): ?>
|
|
<?php
|
|
$inversion_total = ($c['costo_producto'] ?? 0) +
|
|
($c['costo_fijo_film'] ?? 0) +
|
|
($c['comision_asesora'] ?? 0) +
|
|
($c['delivery'] ?? 0) +
|
|
($c['costo_publicitario'] ?? 0);
|
|
|
|
$costos_operativos = ($c['costo_fijo_film'] ?? 0) +
|
|
($c['comision_asesora'] ?? 0) +
|
|
($c['delivery'] ?? 0) +
|
|
($c['costo_publicitario'] ?? 0);
|
|
|
|
function calculateRecaudo($promo, $costos) {
|
|
if (!$promo || $promo == '-') return null;
|
|
preg_match('/[\d.]+/', $promo, $matches);
|
|
$val = isset($matches[0]) ? floatval($matches[0]) : 0;
|
|
return $val > 0 ? $val - $costos : null;
|
|
}
|
|
|
|
$recaudo1 = calculateRecaudo($c['promo_1'], $costos_operativos);
|
|
$recaudo2 = calculateRecaudo($c['promo_2'], $costos_operativos);
|
|
$recaudo3 = calculateRecaudo($c['promo_3'], $costos_operativos);
|
|
?>
|
|
<tr data-row-id="<?php echo $c['id']; ?>">
|
|
<td class="text-center fw-bold text-primary"><?php echo $c['orden']; ?></td>
|
|
<td class="fw-bold"><?php echo htmlspecialchars($c['nombre_producto'] ?: 'General'); ?></td>
|
|
<td class="text-center">
|
|
<?php if ($c['foto_producto']): ?>
|
|
<img src="<?php echo $c['foto_producto']; ?>" class="img-preview" alt="Ref">
|
|
<?php else: ?>
|
|
<span class="text-muted small">Sin foto</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="costo_producto" onclick="startEdit(this)">
|
|
S/ <?php echo number_format($c['costo_producto'] ?? 0, 2); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="costo_fijo_film" onclick="startEdit(this)">
|
|
S/ <?php echo number_format($c['costo_fijo_film'] ?? 0, 2); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="comision_asesora" onclick="startEdit(this)">
|
|
S/ <?php echo number_format($c['comision_asesora'] ?? 0, 2); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="delivery" onclick="startEdit(this)">
|
|
S/ <?php echo number_format($c['delivery'] ?? 0, 2); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="costo_publicitario" onclick="startEdit(this)">
|
|
S/ <?php echo number_format($c['costo_publicitario'] ?? 0, 2); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center bg-total inversion-total" id="total-<?php echo $c['id']; ?>">
|
|
S/ <?php echo number_format($inversion_total, 2); ?>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_1" onclick="startEdit(this)">
|
|
<?php echo htmlspecialchars($c['promo_1'] ?: '-'); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center recaudo-cell recaudo-1 <?php echo $recaudo1 !== null ? ($recaudo1 >= 0 ? 'text-success fw-bold' : 'text-danger fw-bold') : 'text-muted'; ?>" data-id="<?php echo $c['id']; ?>" title="Calculado automáticamente (Promo - Costos)">
|
|
<?php echo $recaudo1 !== null ? 'S/ ' . number_format($recaudo1, 2) : '-'; ?>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_2" onclick="startEdit(this)">
|
|
<?php echo htmlspecialchars($c['promo_2'] ?: '-'); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center recaudo-cell recaudo-2 <?php echo $recaudo2 !== null ? ($recaudo2 >= 0 ? 'text-success fw-bold' : 'text-danger fw-bold') : 'text-muted'; ?>" data-id="<?php echo $c['id']; ?>" title="Calculado automáticamente (Promo - Costos)">
|
|
<?php echo $recaudo2 !== null ? 'S/ ' . number_format($recaudo2, 2) : '-'; ?>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_3" onclick="startEdit(this)">
|
|
<?php echo htmlspecialchars($c['promo_3'] ?: '-'); ?>
|
|
<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>
|
|
</td>
|
|
<td class="text-center recaudo-cell recaudo-3 <?php echo $recaudo3 !== null ? ($recaudo3 >= 0 ? 'text-success fw-bold' : 'text-danger fw-bold') : 'text-muted'; ?>" data-id="<?php echo $c['id']; ?>" title="Calculado automáticamente (Promo - Costos)">
|
|
<?php echo $recaudo3 !== null ? 'S/ ' . number_format($recaudo3, 2) : '-'; ?>
|
|
</td>
|
|
<td class="text-center">
|
|
<button class="btn btn-outline-danger btn-delete-row" onclick="eliminarProducto(<?php echo $c['id']; ?>)" title="Eliminar">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Nuevo Video -->
|
|
<div class="modal fade" id="nuevoVideoModal" tabindex="-1" aria-labelledby="nuevoVideoModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<form action="save_marketing_video.php" method="POST" enctype="multipart/form-data">
|
|
<input type="hidden" name="redirect" value="calculo_costos.php?success=created">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="nuevoVideoModalLabel">Nuevo Producto para Marketing</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-2">
|
|
<label class="form-label">Orden</label>
|
|
<input type="number" name="orden" class="form-control" value="1">
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label class="form-label">Fecha Entrega</label>
|
|
<input type="date" name="fecha_entrega" class="form-control" value="<?php echo date('Y-m-d'); ?>">
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label class="form-label">Producto</label>
|
|
<select name="producto_id" class="form-select" required>
|
|
<option value="">Seleccionar producto...</option>
|
|
<?php foreach ($productos_select as $p): ?>
|
|
<option value="<?php echo $p['id']; ?>"><?php echo htmlspecialchars($p['nombre']); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Imagen Referencia</label>
|
|
<input type="file" name="foto_producto" class="form-control" accept="image/*">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Material</label>
|
|
<input type="text" name="material" class="form-control" placeholder="Ej: Acero, Plástico, etc.">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Instrucciones Adicionales</label>
|
|
<textarea name="instrucciones" class="form-control" rows="3"></textarea>
|
|
</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">Agregar Producto</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Funciones globales para asegurar que funcionen incluso si jQuery tarda en cargar
|
|
function abrirModalNuevo() {
|
|
try {
|
|
const modalEl = document.getElementById('nuevoVideoModal');
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
modal.show();
|
|
} catch (e) {
|
|
console.error("Error al abrir modal:", e);
|
|
// Fallback manual si bootstrap falla
|
|
$('#nuevoVideoModal').modal('show');
|
|
}
|
|
}
|
|
|
|
function startEdit(element) {
|
|
const cell = $(element);
|
|
if (cell.find('input').length > 0) return;
|
|
|
|
// Evitar selección de texto
|
|
if (window.getSelection) {
|
|
window.getSelection().removeAllRanges();
|
|
}
|
|
|
|
const id = cell.data('id');
|
|
const field = cell.data('field');
|
|
|
|
// Obtener el valor limpio (sin S/ ni comas)
|
|
let currentValue = cell.text().trim().replace('S/ ', '').replace(/,/g, '');
|
|
if (currentValue === '-') currentValue = '';
|
|
|
|
const isPromo = field.startsWith('promo_');
|
|
const input = $('<input>', {
|
|
type: isPromo ? 'text' : 'number',
|
|
class: 'form-control form-control-sm inline-edit-input',
|
|
value: currentValue
|
|
});
|
|
|
|
if (!isPromo) {
|
|
input.attr('step', '0.01');
|
|
}
|
|
|
|
const originalContent = cell.html();
|
|
cell.empty().append(input);
|
|
input.focus().select();
|
|
|
|
let isSaving = false;
|
|
|
|
const saveChange = () => {
|
|
if (isSaving) return;
|
|
const newValue = input.val();
|
|
|
|
if (newValue === currentValue) {
|
|
cell.html(originalContent);
|
|
return;
|
|
}
|
|
|
|
isSaving = true;
|
|
input.prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: 'update_marketing_costos_field.php',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({ id, field, value: newValue }),
|
|
success: function(data) {
|
|
if (data.success) {
|
|
if (isPromo) {
|
|
cell.html((newValue || '-') + '<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>');
|
|
} else {
|
|
const formatted = parseFloat(newValue || 0).toLocaleString('es-PE', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
});
|
|
cell.html('S/ ' + formatted + '<span class="edit-icon"><i class="fas fa-pencil-alt"></i></span>');
|
|
}
|
|
updateTotal(id);
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
cell.html(originalContent);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error de conexión al guardar.');
|
|
cell.html(originalContent);
|
|
},
|
|
complete: function() {
|
|
isSaving = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
input.on('blur', saveChange);
|
|
input.on('keydown', function(e) {
|
|
if (e.key === 'Enter') {
|
|
input.blur();
|
|
} else if (e.key === 'Escape') {
|
|
input.off('blur');
|
|
cell.html(originalContent);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateTotal(id) {
|
|
const row = $(`tr[data-row-id="${id}"]`);
|
|
if (!row.length) return;
|
|
|
|
const costFields = ['costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario'];
|
|
const allFields = ['costo_producto', ...costFields];
|
|
|
|
let totalInversion = 0;
|
|
let totalCostosOperativos = 0;
|
|
|
|
allFields.forEach(field => {
|
|
const cell = row.find(`[data-field="${field}"]`);
|
|
if (cell.length) {
|
|
const val = parseFloat(cell.text().replace('S/ ', '').replace(/,/g, '') || 0);
|
|
totalInversion += val;
|
|
if (costFields.includes(field)) {
|
|
totalCostosOperativos += val;
|
|
}
|
|
}
|
|
});
|
|
|
|
$(`#total-${id}`).text('S/ ' + totalInversion.toLocaleString('es-PE', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
|
|
|
|
// Update Recaudos
|
|
[1, 2, 3].forEach(num => {
|
|
const promoCell = row.find(`[data-field="promo_${num}"]`);
|
|
const recaudoCell = row.find(`.recaudo-${num}`);
|
|
|
|
if (promoCell.length && recaudoCell.length) {
|
|
const promoText = promoCell.text().trim();
|
|
const promoValMatch = promoText.match(/[\d.]+/);
|
|
const promoVal = promoValMatch ? parseFloat(promoValMatch[0]) : 0;
|
|
|
|
if (promoVal > 0) {
|
|
const recaudo = promoVal - totalCostosOperativos;
|
|
recaudoCell.text('S/ ' + recaudo.toLocaleString('es-PE', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
|
|
recaudoCell.removeClass('text-muted').addClass('fw-bold');
|
|
if (recaudo >= 0) {
|
|
recaudoCell.addClass('text-success').removeClass('text-danger');
|
|
} else {
|
|
recaudoCell.addClass('text-danger').removeClass('text-success');
|
|
}
|
|
} else {
|
|
recaudoCell.text('-').addClass('text-muted').removeClass('fw-bold text-success text-danger');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function eliminarProducto(id) {
|
|
if (confirm('¿Estás seguro de que deseas eliminar este producto de la lista de costos?')) {
|
|
window.location.href = 'delete_marketing_video.php?id=' + id + '&redirect=calculo_costos.php';
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Mover el modal al body para evitar problemas de z-index con el backdrop
|
|
$('#nuevoVideoModal').appendTo('body');
|
|
});
|
|
</script>
|
|
|
|
<?php include 'layout_footer.php'; ?>
|