Autosave: 20260518-221627
This commit is contained in:
parent
ff10c06eaf
commit
faacccd59f
BIN
assets/uploads/vouchers/6a0b67b410d5c-Screenshot_349.png
Normal file
BIN
assets/uploads/vouchers/6a0b67b410d5c-Screenshot_349.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
assets/uploads/vouchers/6a0b821d6131a-248.png
Normal file
BIN
assets/uploads/vouchers/6a0b821d6131a-248.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
assets/uploads/vouchers/6a0b8d3552742-723.png
Normal file
BIN
assets/uploads/vouchers/6a0b8d3552742-723.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
@ -8,7 +8,8 @@ $db = db();
|
|||||||
// Obtener videos y sus costos asociados
|
// Obtener videos y sus costos asociados
|
||||||
$stmt = $db->query("SELECT mv.id, mv.orden, mv.foto_producto, p.nombre as nombre_producto,
|
$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.costo_producto, mc.costo_fijo_film, mc.comision_asesora,
|
||||||
mc.delivery, mc.costo_publicitario, mc.inversion_total, mc.promo_1
|
mc.delivery, mc.costo_publicitario, mc.inversion_total,
|
||||||
|
mc.promo_1, mc.promo_2, mc.promo_3
|
||||||
FROM marketing_videos mv
|
FROM marketing_videos mv
|
||||||
LEFT JOIN products p ON mv.producto_id = p.id
|
LEFT JOIN products p ON mv.producto_id = p.id
|
||||||
LEFT JOIN marketing_costos mc ON mv.id = mc.video_id
|
LEFT JOIN marketing_costos mc ON mv.id = mc.video_id
|
||||||
@ -38,19 +39,32 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.editable {
|
||||||
|
background-color: #ffffff;
|
||||||
|
transition: all 0.2s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
.editable:hover {
|
.editable:hover {
|
||||||
background-color: #f1f3f5;
|
background-color: #f0f7ff !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
box-shadow: inset 0 0 0 1px #0d6efd;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.recaudo-cell {
|
||||||
|
background-color: #fdfdfd;
|
||||||
|
cursor: default;
|
||||||
|
color: #6c757d;
|
||||||
}
|
}
|
||||||
.inline-edit-input {
|
.inline-edit-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
border: 1px solid #0d6efd;
|
border: 2px solid #0d6efd;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.bg-total {
|
.bg-total {
|
||||||
background-color: #e9ecef;
|
background-color: #f1f3f5;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -58,14 +72,14 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="mb-0">Cálculo de Costos</h2>
|
<h2 class="mb-0">Cálculo de Costos</h2>
|
||||||
<p class="text-muted small">Gestión de costos por producto de marketing</p>
|
<p class="text-muted small">Gestión de costos por producto de marketing. <span class="badge bg-info text-dark">Doble clic en las celdas blancas para editar</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card shadow-sm border-0">
|
<div class="card shadow-sm border-0">
|
||||||
<div class="card-body p-0">
|
<div class="card-body p-0">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-hover table-excel mb-0">
|
<table class="table table-hover table-excel mb-0" id="costosTable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-center">Orden</th>
|
<th class="text-center">Orden</th>
|
||||||
@ -78,12 +92,17 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
<th class="text-center">Costo Publicitario</th>
|
<th class="text-center">Costo Publicitario</th>
|
||||||
<th class="text-center bg-total">Inversión Total</th>
|
<th class="text-center bg-total">Inversión Total</th>
|
||||||
<th class="text-center">Promo 1</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>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<?php if (empty($costos)): ?>
|
<?php if (empty($costos)): ?>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="10" class="text-center py-4 text-muted">No hay videos registrados en producción.</td>
|
<td colspan="15" class="text-center py-4 text-muted">No hay videos registrados en producción.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?php foreach ($costos as $c): ?>
|
<?php foreach ($costos as $c): ?>
|
||||||
@ -93,8 +112,24 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
($c['comision_asesora'] ?? 0) +
|
($c['comision_asesora'] ?? 0) +
|
||||||
($c['delivery'] ?? 0) +
|
($c['delivery'] ?? 0) +
|
||||||
($c['costo_publicitario'] ?? 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>
|
<tr data-row-id="<?php echo $c['id']; ?>">
|
||||||
<td class="text-center fw-bold text-primary"><?php echo $c['orden']; ?></td>
|
<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="fw-bold"><?php echo htmlspecialchars($c['nombre_producto'] ?: 'General'); ?></td>
|
||||||
<td class="text-center">
|
<td class="text-center">
|
||||||
@ -125,6 +160,21 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_1">
|
<td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_1">
|
||||||
<?php echo htmlspecialchars($c['promo_1'] ?: '-'); ?>
|
<?php echo htmlspecialchars($c['promo_1'] ?: '-'); ?>
|
||||||
</td>
|
</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">
|
||||||
|
<?php echo htmlspecialchars($c['promo_2'] ?: '-'); ?>
|
||||||
|
</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">
|
||||||
|
<?php echo htmlspecialchars($c['promo_3'] ?: '-'); ?>
|
||||||
|
</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>
|
||||||
</tr>
|
</tr>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
@ -136,83 +186,126 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const editableCells = document.querySelectorAll('.editable');
|
const tableBody = document.querySelector('#costosTable tbody');
|
||||||
|
|
||||||
editableCells.forEach(cell => {
|
tableBody.addEventListener('dblclick', function(e) {
|
||||||
cell.addEventListener('dblclick', function() {
|
const cell = e.target.closest('.editable');
|
||||||
if (this.querySelector('input')) return;
|
if (!cell || cell.querySelector('input')) return;
|
||||||
|
|
||||||
const id = this.getAttribute('data-id');
|
const id = cell.getAttribute('data-id');
|
||||||
const field = this.getAttribute('data-field');
|
const field = cell.getAttribute('data-field');
|
||||||
let currentValue = this.innerText.trim().replace('S/ ', '').replace(',', '');
|
let currentValue = cell.innerText.trim().replace('S/ ', '').replace(',', '');
|
||||||
if (currentValue === '-') currentValue = '';
|
if (currentValue === '-') currentValue = '';
|
||||||
|
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
input.type = field === 'promo_1' ? 'text' : 'number';
|
const isPromo = field.startsWith('promo_');
|
||||||
if (input.type === 'number') input.step = '0.01';
|
input.type = isPromo ? 'text' : 'number';
|
||||||
input.className = 'form-control form-control-sm inline-edit-input';
|
if (input.type === 'number') input.step = '0.01';
|
||||||
input.value = currentValue;
|
input.className = 'form-control form-control-sm inline-edit-input';
|
||||||
|
input.value = currentValue;
|
||||||
|
|
||||||
const originalContent = this.innerHTML;
|
const originalContent = cell.innerHTML;
|
||||||
this.innerHTML = '';
|
cell.innerHTML = '';
|
||||||
this.appendChild(input);
|
cell.appendChild(input);
|
||||||
input.focus();
|
input.focus();
|
||||||
|
input.select();
|
||||||
|
|
||||||
const saveChange = () => {
|
const saveChange = () => {
|
||||||
const newValue = input.value;
|
const newValue = input.value;
|
||||||
if (newValue === currentValue) {
|
if (newValue === currentValue) {
|
||||||
this.innerHTML = originalContent;
|
cell.innerHTML = originalContent;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch('update_marketing_costos_field.php', {
|
fetch('update_marketing_costos_field.php', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ id, field, value: newValue })
|
body: JSON.stringify({ id, field, value: newValue })
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
if (field === 'promo_1') {
|
if (isPromo) {
|
||||||
this.innerHTML = newValue || '-';
|
cell.innerHTML = newValue || '-';
|
||||||
} else {
|
|
||||||
this.innerHTML = 'S/ ' + parseFloat(newValue || 0).toFixed(2);
|
|
||||||
updateTotal(id);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
alert('Error: ' + data.error);
|
cell.innerHTML = 'S/ ' + parseFloat(newValue || 0).toFixed(2);
|
||||||
this.innerHTML = originalContent;
|
|
||||||
}
|
}
|
||||||
})
|
updateTotal(id);
|
||||||
.catch(error => {
|
} else {
|
||||||
console.error('Error:', error);
|
alert('Error: ' + data.error);
|
||||||
this.innerHTML = originalContent;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
input.addEventListener('blur', saveChange);
|
|
||||||
input.addEventListener('keydown', function(e) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
input.blur();
|
|
||||||
} else if (e.key === 'Escape') {
|
|
||||||
cell.innerHTML = originalContent;
|
cell.innerHTML = originalContent;
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
cell.innerHTML = originalContent;
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
input.addEventListener('blur', saveChange);
|
||||||
|
input.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
input.blur();
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
input.removeEventListener('blur', saveChange);
|
||||||
|
cell.innerHTML = originalContent;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateTotal(id) {
|
function updateTotal(id) {
|
||||||
const row = document.querySelector(`[data-id="${id}"]`).closest('tr');
|
const row = document.querySelector(`tr[data-row-id="${id}"]`);
|
||||||
const fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario'];
|
if (!row) return;
|
||||||
let total = 0;
|
|
||||||
|
const costFields = ['costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario'];
|
||||||
|
const allFields = ['costo_producto', ...costFields];
|
||||||
|
|
||||||
fields.forEach(field => {
|
let totalInversion = 0;
|
||||||
|
let totalCostosOperativos = 0;
|
||||||
|
|
||||||
|
allFields.forEach(field => {
|
||||||
const cell = row.querySelector(`[data-field="${field}"]`);
|
const cell = row.querySelector(`[data-field="${field}"]`);
|
||||||
const val = parseFloat(cell.innerText.replace('S/ ', '').replace(',', '') || 0);
|
if (cell) {
|
||||||
total += val;
|
const val = parseFloat(cell.innerText.replace('S/ ', '').replace(',', '') || 0);
|
||||||
|
totalInversion += val;
|
||||||
|
if (costFields.includes(field)) {
|
||||||
|
totalCostosOperativos += val;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById(`total-${id}`).innerText = 'S/ ' + total.toFixed(2);
|
const totalEl = document.getElementById(`total-${id}`);
|
||||||
|
if (totalEl) totalEl.innerText = 'S/ ' + totalInversion.toFixed(2);
|
||||||
|
|
||||||
|
// Update Recaudos
|
||||||
|
[1, 2, 3].forEach(num => {
|
||||||
|
const promoCell = row.querySelector(`[data-field="promo_${num}"]`);
|
||||||
|
const recaudoCell = row.querySelector(`.recaudo-${num}`);
|
||||||
|
|
||||||
|
if (promoCell && recaudoCell) {
|
||||||
|
const promoText = promoCell.innerText.trim();
|
||||||
|
const promoValMatch = promoText.match(/[\d.]+/);
|
||||||
|
const promoVal = promoValMatch ? parseFloat(promoValMatch[0]) : 0;
|
||||||
|
|
||||||
|
if (promoVal > 0) {
|
||||||
|
const recaudo = promoVal - totalCostosOperativos;
|
||||||
|
recaudoCell.innerText = 'S/ ' + recaudo.toFixed(2);
|
||||||
|
recaudoCell.classList.remove('text-muted');
|
||||||
|
recaudoCell.classList.add('fw-bold');
|
||||||
|
if (recaudo >= 0) {
|
||||||
|
recaudoCell.classList.add('text-success');
|
||||||
|
recaudoCell.classList.remove('text-danger');
|
||||||
|
} else {
|
||||||
|
recaudoCell.classList.add('text-danger');
|
||||||
|
recaudoCell.classList.remove('text-success');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
recaudoCell.innerText = '-';
|
||||||
|
recaudoCell.classList.add('text-muted');
|
||||||
|
recaudoCell.classList.remove('fw-bold', 'text-success', 'text-danger');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
3
db/migrations/021_add_promo_2_3_to_marketing_costos.sql
Normal file
3
db/migrations/021_add_promo_2_3_to_marketing_costos.sql
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
-- Add promo_2 and promo_3 to marketing_costos
|
||||||
|
ALTER TABLE marketing_costos ADD COLUMN promo_2 VARCHAR(255) DEFAULT NULL AFTER promo_1;
|
||||||
|
ALTER TABLE marketing_costos ADD COLUMN promo_3 VARCHAR(255) DEFAULT NULL AFTER promo_2;
|
||||||
@ -43,18 +43,19 @@ foreach ($videos as $v) {
|
|||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
}
|
}
|
||||||
.table-excel {
|
.table-excel {
|
||||||
font-size: 0.85rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.table-excel th {
|
.table-excel th {
|
||||||
background-color: #ffffff;
|
background-color: #f8f9fa;
|
||||||
border-bottom: 2px solid #f1f3f5;
|
border-bottom: 2px solid #dee2e6;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.75rem;
|
font-size: 0.85rem;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.8px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
color: #6c757d;
|
color: #495057;
|
||||||
padding: 15px 10px;
|
padding: 18px 12px;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.table-excel td {
|
.table-excel td {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@ -156,12 +157,18 @@ foreach ($videos as $v) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.link-icon {
|
.link-icon {
|
||||||
font-size: 1.1rem;
|
font-size: 1.35rem;
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
.link-icon:hover {
|
.link-icon:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
.text-wrap-cell {
|
||||||
|
white-space: normal !important;
|
||||||
|
word-break: break-word;
|
||||||
|
line-height: 1.4;
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
.status-badge {
|
.status-badge {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
@ -190,6 +197,48 @@ foreach ($videos as $v) {
|
|||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
.card-link-badge {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
/* Estilos para Cuadros (Tags) */
|
||||||
|
.tag-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
.tag-item {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
color: #475569;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-block;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
|
||||||
|
transition: all 0.2s;
|
||||||
|
max-width: 100%;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
.tag-item:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
.tag-item-material {
|
||||||
|
border-left: 4px solid #4361ee;
|
||||||
|
background-color: #f8faff;
|
||||||
|
}
|
||||||
|
.tag-item-angulo {
|
||||||
|
border-left: 4px solid #f72585;
|
||||||
|
background-color: #fff5f9;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="row mb-4 g-3">
|
<div class="row mb-4 g-3">
|
||||||
@ -277,19 +326,19 @@ foreach ($videos as $v) {
|
|||||||
<table class="table table-hover table-excel mb-0">
|
<table class="table table-hover table-excel mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-center" style="width: 60px;">#</th>
|
<th class="text-center" style="width: 60px;"><i class="fas fa-hashtag me-1"></i> #</th>
|
||||||
<th>Fecha Entrega</th>
|
<th><i class="far fa-calendar-alt me-1"></i> Fecha Entrega</th>
|
||||||
<th>Producto</th>
|
<th><i class="fas fa-box me-1"></i> Producto</th>
|
||||||
<th class="text-center">Imagen</th>
|
<th class="text-center"><i class="fas fa-image me-1"></i> Imagen</th>
|
||||||
<th>Material</th>
|
<th><i class="fas fa-layer-group me-1"></i> Material</th>
|
||||||
<th>Ángulo</th>
|
<th><i class="fas fa-video me-1"></i> Ángulo</th>
|
||||||
<th class="text-center">Insp. Landing</th>
|
<th class="text-center"><i class="fas fa-link me-1"></i> Insp. Landing</th>
|
||||||
<th class="text-center">Video Ref.</th>
|
<th class="text-center"><i class="fab fa-youtube me-1"></i> Video Ref.</th>
|
||||||
<th class="text-center">Link Video</th>
|
<th class="text-center"><i class="fas fa-play-circle me-1"></i> Link Video</th>
|
||||||
<th class="text-center">Link Landing</th>
|
<th class="text-center"><i class="fas fa-globe me-1"></i> Link Landing</th>
|
||||||
<th class="text-center">Link Flyer</th>
|
<th class="text-center"><i class="fas fa-file-image me-1"></i> Link Flyer</th>
|
||||||
<th class="text-center">Estado</th>
|
<th class="text-center"><i class="fas fa-tasks me-1"></i> Estado</th>
|
||||||
<th class="text-center">Acción</th>
|
<th class="text-center"><i class="fas fa-cog me-1"></i> Acción</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -320,14 +369,32 @@ foreach ($videos as $v) {
|
|||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</td>
|
</td>
|
||||||
<td class="editable" data-id="<?php echo $v['id']; ?>" data-field="material">
|
<td class="editable text-wrap-cell" data-id="<?php echo $v['id']; ?>" data-field="material" data-value="<?php echo htmlspecialchars($v['material']); ?>">
|
||||||
<div style="min-width: 120px;">
|
<div class="tag-container">
|
||||||
<?php echo htmlspecialchars($v['material'] ?: '-'); ?>
|
<?php
|
||||||
|
$items = explode(',', $v['material']);
|
||||||
|
$hasItems = false;
|
||||||
|
foreach ($items as $item):
|
||||||
|
$item = trim($item);
|
||||||
|
if (!$item) continue;
|
||||||
|
$hasItems = true;
|
||||||
|
?>
|
||||||
|
<span class="tag-item tag-item-material"><?php echo htmlspecialchars($item); ?></span>
|
||||||
|
<?php endforeach; if (!$hasItems) echo '<span class="text-muted">-</span>'; ?>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="editable" data-id="<?php echo $v['id']; ?>" data-field="angulo_video">
|
<td class="editable text-wrap-cell" data-id="<?php echo $v['id']; ?>" data-field="angulo_video" data-value="<?php echo htmlspecialchars($v['angulo_video']); ?>">
|
||||||
<div style="min-width: 150px;">
|
<div class="tag-container">
|
||||||
<?php echo htmlspecialchars($v['angulo_video'] ?: '-'); ?>
|
<?php
|
||||||
|
$items = explode(',', $v['angulo_video']);
|
||||||
|
$hasItems = false;
|
||||||
|
foreach ($items as $item):
|
||||||
|
$item = trim($item);
|
||||||
|
if (!$item) continue;
|
||||||
|
$hasItems = true;
|
||||||
|
?>
|
||||||
|
<span class="tag-item tag-item-angulo"><?php echo htmlspecialchars($item); ?></span>
|
||||||
|
<?php endforeach; if (!$hasItems) echo '<span class="text-muted">-</span>'; ?>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
<td class="text-center">
|
||||||
@ -464,19 +531,28 @@ foreach ($videos as $v) {
|
|||||||
<span>Orden: <?php echo $v['orden']; ?></span>
|
<span>Orden: <?php echo $v['orden']; ?></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3">
|
<div class="mt-3">
|
||||||
<small class="text-muted d-block mb-1 fw-bold">MATERIAL:</small>
|
<small class="text-muted d-block mb-2 fw-bold">MATERIAL:</small>
|
||||||
<p class="small text-dark mb-0 text-truncate-2" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.8em;">
|
<div class="tag-container">
|
||||||
<?php echo htmlspecialchars($v['material'] ?: 'No especificado'); ?>
|
<?php
|
||||||
</p>
|
$items = explode(',', $v['material']);
|
||||||
|
$hasItems = false;
|
||||||
|
foreach ($items as $item):
|
||||||
|
$item = trim($item);
|
||||||
|
if (!$item) continue;
|
||||||
|
$hasItems = true;
|
||||||
|
?>
|
||||||
|
<span class="tag-item tag-item-material" style="font-size: 0.7rem;"><?php echo htmlspecialchars($item); ?></span>
|
||||||
|
<?php endforeach; if (!$hasItems) echo '<span class="text-muted small">No especificado</span>'; ?>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-card-footer">
|
<div class="video-card-footer">
|
||||||
<div class="d-flex gap-2">
|
<div class="d-flex gap-2">
|
||||||
<?php if ($v['link_inspiracion_video']): ?>
|
<?php if ($v['link_inspiracion_video']): ?>
|
||||||
<span class="badge bg-danger-soft text-danger rounded-pill" style="background: #fee2e2;"><i class="fab fa-youtube"></i></span>
|
<div class="card-link-badge text-danger" style="background: #fee2e2;" title="Video Referencia"><i class="fab fa-youtube"></i></div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($v['link_video']): ?>
|
<?php if ($v['link_video']): ?>
|
||||||
<span class="badge bg-success-soft text-success rounded-pill" style="background: #dcfce7;"><i class="fas fa-play"></i></span>
|
<div class="card-link-badge text-success" style="background: #dcfce7;" title="Video Final"><i class="fas fa-play"></i></div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-sm btn-primary rounded-pill px-3" onclick="gestionarVideo(<?php echo htmlspecialchars(json_encode($v)); ?>)">
|
<button class="btn btn-sm btn-primary rounded-pill px-3" onclick="gestionarVideo(<?php echo htmlspecialchars(json_encode($v)); ?>)">
|
||||||
@ -846,12 +922,20 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
const editableCells = document.querySelectorAll('.editable');
|
const editableCells = document.querySelectorAll('.editable');
|
||||||
|
|
||||||
editableCells.forEach(cell => {
|
editableCells.forEach(cell => {
|
||||||
cell.addEventListener('dblclick', function() {
|
cell.addEventListener('dblclick', function(e) {
|
||||||
if (this.querySelector('input') || this.querySelector('select')) return;
|
if (this.querySelector('input') || this.querySelector('select')) return;
|
||||||
|
|
||||||
|
// Evitar que el doble clic seleccione el texto
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
|
|
||||||
const id = this.getAttribute('data-id');
|
const id = this.getAttribute('data-id');
|
||||||
const field = this.getAttribute('data-field');
|
const field = this.getAttribute('data-field');
|
||||||
const currentValue = this.innerText.trim() === '-' ? '' : this.innerText.trim();
|
|
||||||
|
// Usar data-value si existe (para material y angulo_video), de lo contrario innerText
|
||||||
|
let currentValue = this.getAttribute('data-value');
|
||||||
|
if (currentValue === null) {
|
||||||
|
currentValue = this.innerText.trim() === '-' ? '' : this.innerText.trim();
|
||||||
|
}
|
||||||
|
|
||||||
let input;
|
let input;
|
||||||
if (field === 'estado') {
|
if (field === 'estado') {
|
||||||
@ -892,6 +976,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
|
// Actualizar data-value para la próxima edición
|
||||||
|
this.setAttribute('data-value', newValue);
|
||||||
|
|
||||||
if (field === 'estado') {
|
if (field === 'estado') {
|
||||||
let badgeClass = 'bg-secondary';
|
let badgeClass = 'bg-secondary';
|
||||||
if (newValue === 'PENDIENTE') badgeClass = 'bg-warning text-dark';
|
if (newValue === 'PENDIENTE') badgeClass = 'bg-warning text-dark';
|
||||||
@ -902,9 +989,21 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
else if (newValue === 'PUBLICADO') badgeClass = 'bg-dark';
|
else if (newValue === 'PUBLICADO') badgeClass = 'bg-dark';
|
||||||
|
|
||||||
this.innerHTML = `<span class="badge status-badge ${badgeClass}">${newValue}</span>`;
|
this.innerHTML = `<span class="badge status-badge ${badgeClass}">${newValue}</span>`;
|
||||||
|
} else if (field === 'material' || field === 'angulo_video') {
|
||||||
|
const items = newValue.split(',').map(i => i.trim()).filter(i => i !== '');
|
||||||
|
if (items.length === 0) {
|
||||||
|
this.innerHTML = '<div class="tag-container"><span class="text-muted">-</span></div>';
|
||||||
|
} else {
|
||||||
|
let html = '<div class="tag-container">';
|
||||||
|
const tagClass = field === 'material' ? 'tag-item-material' : 'tag-item-angulo';
|
||||||
|
items.forEach(item => {
|
||||||
|
html += `<span class="tag-item ${tagClass}">${item}</span>`;
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
this.innerHTML = html;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
const minWidth = field === 'material' ? '120px' : '150px';
|
this.innerHTML = `<div>${newValue || '-'}</div>`;
|
||||||
this.innerHTML = `<div style="min-width: ${minWidth};">${newValue || '-'}</div>`;
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
alert('Error: ' + data.error);
|
alert('Error: ' + data.error);
|
||||||
|
|||||||
@ -21,7 +21,7 @@ $field = $data['field'];
|
|||||||
$value = $data['value'];
|
$value = $data['value'];
|
||||||
|
|
||||||
// Whitelist allowed fields for security
|
// Whitelist allowed fields for security
|
||||||
$allowed_fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario', 'promo_1'];
|
$allowed_fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario', 'promo_1', 'promo_2', 'promo_3'];
|
||||||
if (!in_array($field, $allowed_fields)) {
|
if (!in_array($field, $allowed_fields)) {
|
||||||
http_response_code(400);
|
http_response_code(400);
|
||||||
echo json_encode(['error' => 'Campo no permitido.']);
|
echo json_encode(['error' => 'Campo no permitido.']);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user