437 lines
22 KiB
PHP
437 lines
22 KiB
PHP
<?php
|
|
$pageTitle = "Producción de Video";
|
|
include 'db/config.php';
|
|
include 'layout_header.php';
|
|
|
|
$db = db();
|
|
|
|
// Obtener productos para el select
|
|
$stmt_products = $db->query("SELECT id, nombre FROM products ORDER BY nombre ASC");
|
|
$productos = $stmt_products->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// Obtener videos existentes
|
|
$stmt_videos = $db->query("SELECT mv.*, p.nombre as nombre_producto
|
|
FROM marketing_videos mv
|
|
LEFT JOIN products p ON mv.producto_id = p.id
|
|
ORDER BY mv.orden ASC, mv.fecha_creacion DESC");
|
|
$videos = $stmt_videos->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;
|
|
cursor: pointer;
|
|
}
|
|
.link-icon {
|
|
font-size: 1.1rem;
|
|
color: #0d6efd;
|
|
}
|
|
.link-icon:hover {
|
|
color: #0a58ca;
|
|
}
|
|
.status-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.35em 0.65em;
|
|
}
|
|
.editable:hover {
|
|
background-color: #f1f3f5;
|
|
cursor: pointer;
|
|
}
|
|
.inline-edit-input {
|
|
width: 100%;
|
|
padding: 2px 5px;
|
|
font-size: 0.85rem;
|
|
border: 1px solid #0d6efd;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h2 class="mb-0">Producción de Video</h2>
|
|
<p class="text-muted small">Vista de control estilo Excel</p>
|
|
</div>
|
|
<div>
|
|
<a href="marketing_assets.php" class="btn btn-outline-secondary me-2">
|
|
<i class="fas fa-folder-open"></i> Biblioteca de Assets
|
|
</a>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#nuevoVideoModal">
|
|
<i class="fas fa-plus"></i> Nuevo Pedido
|
|
</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">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">Orden</th>
|
|
<th>Fecha Entrega</th>
|
|
<th>Producto</th>
|
|
<th class="text-center">Imagen</th>
|
|
<th>Material</th>
|
|
<th>Ángulo</th>
|
|
<th class="text-center">Insp. Landing</th>
|
|
<th class="text-center">Insp. Video</th>
|
|
<th class="text-center">Link Video</th>
|
|
<th class="text-center">Link Landing</th>
|
|
<th class="text-center">Link Flyer</th>
|
|
<th class="text-center">Estado</th>
|
|
<th class="text-center">Acción</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (empty($videos)): ?>
|
|
<tr>
|
|
<td colspan="11" class="text-center py-4 text-muted">No hay pedidos registrados.</td>
|
|
</tr>
|
|
<?php else: ?>
|
|
<?php foreach ($videos as $v): ?>
|
|
<tr>
|
|
<td class="text-center fw-bold text-primary"><?php echo $v['orden']; ?></td>
|
|
<td>
|
|
<?php echo $v['fecha_entrega'] ? date('d/m/Y', strtotime($v['fecha_entrega'])) : '<span class="text-muted">-</span>'; ?>
|
|
</td>
|
|
<td class="fw-bold"><?php echo htmlspecialchars($v['nombre_producto'] ?: 'General'); ?></td>
|
|
<td class="text-center">
|
|
<?php if ($v['foto_producto']): ?>
|
|
<img src="<?php echo $v['foto_producto']; ?>" class="img-preview" alt="Ref" onclick="window.open(this.src)">
|
|
<?php else: ?>
|
|
<span class="text-muted small">Sin foto</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="editable" data-id="<?php echo $v['id']; ?>" data-field="material">
|
|
<div class="text-truncate" style="max-width: 150px;" title="<?php echo htmlspecialchars($v['material']); ?>">
|
|
<?php echo htmlspecialchars($v['material'] ?: '-'); ?>
|
|
</div>
|
|
</td>
|
|
<td class="editable" data-id="<?php echo $v['id']; ?>" data-field="angulo_video">
|
|
<div class="text-truncate" style="max-width: 150px;" title="<?php echo htmlspecialchars($v['angulo_video']); ?>">
|
|
<?php echo htmlspecialchars($v['angulo_video'] ?: '-'); ?>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<?php if ($v['link_inspiracion_landing']): ?>
|
|
<a href="<?php echo $v['link_inspiracion_landing']; ?>" target="_blank" class="link-icon"><i class="fas fa-external-link-alt"></i></a>
|
|
<?php else: ?>
|
|
<span class="text-muted">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="text-center">
|
|
<?php if ($v['link_inspiracion_video']): ?>
|
|
<a href="<?php echo $v['link_inspiracion_video']; ?>" target="_blank" class="link-icon text-danger"><i class="fab fa-youtube"></i></a>
|
|
<?php else: ?>
|
|
<span class="text-muted">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="text-center">
|
|
<?php if ($v['link_video']): ?>
|
|
<a href="<?php echo $v['link_video']; ?>" target="_blank" class="link-icon text-success"><i class="fas fa-play-circle"></i></a>
|
|
<?php else: ?>
|
|
<span class="text-muted">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="text-center">
|
|
<?php if ($v['link_landing']): ?>
|
|
<a href="<?php echo $v['link_landing']; ?>" target="_blank" class="link-icon text-info"><i class="fas fa-globe"></i></a>
|
|
<?php else: ?>
|
|
<span class="text-muted">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="text-center">
|
|
<?php if ($v['link_flyer']): ?>
|
|
<a href="<?php echo $v['link_flyer']; ?>" target="_blank" class="link-icon text-warning"><i class="fas fa-file-image"></i></a>
|
|
<?php else: ?>
|
|
<span class="text-muted">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="text-center editable" data-id="<?php echo $v['id']; ?>" data-field="estado">
|
|
<span class="badge status-badge <?php
|
|
echo $v['estado'] == 'Pendiente' ? 'bg-warning text-dark' :
|
|
($v['estado'] == 'En Proceso' ? 'bg-info' :
|
|
($v['estado'] == 'Terminado' ? 'bg-primary' : 'bg-success'));
|
|
?>">
|
|
<?php echo $v['estado']; ?>
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="gestionarVideo(<?php echo htmlspecialchars(json_encode($v)); ?>)">
|
|
<i class="fas fa-edit"></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-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<form action="save_marketing_video.php" method="POST" enctype="multipart/form-data">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Nuevo Pedido de Video</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">
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label class="form-label">Producto</label>
|
|
<select name="producto_id" class="form-select">
|
|
<option value="">Seleccionar producto...</option>
|
|
<?php foreach ($productos 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-md-6">
|
|
<label class="form-label">Ángulo del Video</label>
|
|
<input type="text" name="angulo_video" class="form-control" placeholder="Ej: Cenital, 45 grados...">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Link Inspiración Landing</label>
|
|
<input type="url" name="link_inspiracion_landing" class="form-control" placeholder="https://...">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Link Inspiración Video</label>
|
|
<input type="url" name="link_inspiracion_video" class="form-control" placeholder="https://...">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Link de Flyer</label>
|
|
<input type="url" name="link_flyer" class="form-control" placeholder="https://...">
|
|
</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">Crear Pedido</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Gestionar Video -->
|
|
<div class="modal fade" id="gestionarVideoModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<form action="save_marketing_video.php" method="POST">
|
|
<input type="hidden" name="action" value="update">
|
|
<input type="hidden" name="id" id="edit_id">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Gestionar Pedido</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-4">
|
|
<label class="form-label">Estado</label>
|
|
<select name="estado" id="edit_estado" class="form-select">
|
|
<option value="Pendiente">Pendiente</option>
|
|
<option value="En Proceso">En Proceso</option>
|
|
<option value="Terminado">Terminado</option>
|
|
<option value="Aprobado">Aprobado</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Orden</label>
|
|
<input type="number" name="orden" id="edit_orden" class="form-control">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Fecha Entrega</label>
|
|
<input type="date" name="fecha_entrega" id="edit_fecha_entrega" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Material</label>
|
|
<input type="text" name="material" id="edit_material" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Ángulo del Video</label>
|
|
<input type="text" name="angulo_video" id="edit_angulo_video" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Link Inspiración Landing</label>
|
|
<input type="url" name="link_inspiracion_landing" id="edit_link_insp_landing" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Link Inspiración Video</label>
|
|
<input type="url" name="link_inspiracion_video" id="edit_link_insp_video" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Link Video Final</label>
|
|
<input type="url" name="link_video" id="edit_link_video" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Link de la Landing</label>
|
|
<input type="url" name="link_landing" id="edit_link_landing" class="form-control">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Link de Flyer</label>
|
|
<input type="url" name="link_flyer" id="edit_link_flyer" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
<button type="submit" class="btn btn-success">Guardar Cambios</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function gestionarVideo(video) {
|
|
document.getElementById('edit_id').value = video.id;
|
|
document.getElementById('edit_estado').value = video.estado;
|
|
document.getElementById('edit_orden').value = video.orden || 0;
|
|
document.getElementById('edit_fecha_entrega').value = video.fecha_entrega || '';
|
|
document.getElementById('edit_material').value = video.material || '';
|
|
document.getElementById('edit_angulo_video').value = video.angulo_video || '';
|
|
document.getElementById('edit_link_insp_landing').value = video.link_inspiracion_landing || '';
|
|
document.getElementById('edit_link_insp_video').value = video.link_inspiracion_video || '';
|
|
document.getElementById('edit_link_video').value = video.link_video || '';
|
|
document.getElementById('edit_link_landing').value = video.link_landing || '';
|
|
document.getElementById('edit_link_flyer').value = video.link_flyer || '';
|
|
|
|
var myModal = new bootstrap.Modal(document.getElementById('gestionarVideoModal'));
|
|
myModal.show();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const editableCells = document.querySelectorAll('.editable');
|
|
|
|
editableCells.forEach(cell => {
|
|
cell.addEventListener('dblclick', function() {
|
|
if (this.querySelector('input') || this.querySelector('select')) return;
|
|
|
|
const id = this.getAttribute('data-id');
|
|
const field = this.getAttribute('data-field');
|
|
const currentValue = this.innerText.trim() === '-' ? '' : this.innerText.trim();
|
|
|
|
let input;
|
|
if (field === 'estado') {
|
|
input = document.createElement('select');
|
|
input.className = 'form-select form-select-sm inline-edit-input';
|
|
const options = ['Pendiente', 'En Proceso', 'Terminado', 'Aprobado'];
|
|
options.forEach(opt => {
|
|
const option = document.createElement('option');
|
|
option.value = opt;
|
|
option.text = opt;
|
|
if (opt === currentValue) option.selected = true;
|
|
input.appendChild(option);
|
|
});
|
|
} else {
|
|
input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.className = 'form-control form-control-sm inline-edit-input';
|
|
input.value = currentValue;
|
|
}
|
|
|
|
const originalContent = this.innerHTML;
|
|
this.innerHTML = '';
|
|
this.appendChild(input);
|
|
input.focus();
|
|
|
|
const saveChange = () => {
|
|
const newValue = input.value;
|
|
if (newValue === currentValue) {
|
|
this.innerHTML = originalContent;
|
|
return;
|
|
}
|
|
|
|
fetch('update_marketing_video_field.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id, field, value: newValue })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (field === 'estado') {
|
|
let badgeClass = 'bg-secondary';
|
|
if (newValue === 'Pendiente') badgeClass = 'bg-warning text-dark';
|
|
else if (newValue === 'En Proceso') badgeClass = 'bg-info';
|
|
else if (newValue === 'Terminado') badgeClass = 'bg-primary';
|
|
else if (newValue === 'Aprobado') badgeClass = 'bg-success';
|
|
|
|
this.innerHTML = `<span class="badge status-badge ${badgeClass}">${newValue}</span>`;
|
|
} else {
|
|
this.innerHTML = `<div class="text-truncate" style="max-width: 150px;" title="${newValue}">${newValue || '-'}</div>`;
|
|
}
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
this.innerHTML = originalContent;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', 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;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php include 'layout_footer.php'; ?>
|