Autosave: 20260518-192226

This commit is contained in:
Flatlogic Bot 2026-05-18 19:22:27 +00:00
parent b928365afa
commit ff10c06eaf
6 changed files with 368 additions and 47 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 445 KiB

View File

@ -0,0 +1,24 @@
<?php
include 'db/config.php';
$db = db();
if (isset($_GET['id'])) {
$id = $_GET['id'];
// Obtener la ruta de la foto para borrarla del servidor si existe
$stmt = $db->prepare("SELECT foto_producto FROM marketing_videos WHERE id = ?");
$stmt->execute([$id]);
$video = $stmt->fetch(PDO::FETCH_ASSOC);
if ($video) {
if (!empty($video['foto_producto']) && file_exists($video['foto_producto'])) {
unlink($video['foto_producto']);
}
$stmt = $db->prepare("DELETE FROM marketing_videos WHERE id = ?");
$stmt->execute([$id]);
}
}
header("Location: marketing_produccion.php?success=1");
exit;

View File

@ -15,66 +15,250 @@ $stmt_videos = $db->query("SELECT mv.*, p.nombre as nombre_producto
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);
// Contadores de estado
$stats = [
'TOTAL' => count($videos),
'PENDIENTE' => 0,
'EN PROCESO' => 0,
'TERMINADO' => 0,
'APROBADO' => 0
];
foreach ($videos as $v) {
if (isset($stats[$v['estado']])) {
$stats[$v['estado']]++;
}
}
?>
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #4cc9f0;
--success-color: #4cc9f0;
--info-color: #4895ef;
--warning-color: #f72585;
}
body {
background-color: #f8f9fa;
}
.table-excel {
font-size: 0.85rem;
}
.table-excel th {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
background-color: #ffffff;
border-bottom: 2px solid #f1f3f5;
white-space: nowrap;
text-transform: uppercase;
font-weight: 600;
color: #495057;
font-size: 0.75rem;
letter-spacing: 0.5px;
font-weight: 700;
color: #6c757d;
padding: 15px 10px;
}
.table-excel td {
vertical-align: middle;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #f1f3f5;
padding: 12px 10px;
background-color: #fff;
}
.img-preview {
width: 50px;
height: 50px;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 4px;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.img-preview:hover {
transform: scale(2.2);
z-index: 100;
position: relative;
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
/* Estilos para Vista de Tarjetas */
#cardsView {
display: none;
}
.video-card {
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
background: #fff;
height: 100%;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.video-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.video-card-img-container {
position: relative;
height: 220px;
overflow: hidden;
background: #f8f9fa;
}
.video-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.video-card:hover .video-card-img {
transform: scale(1.1);
}
.video-card-status {
position: absolute;
top: 15px;
right: 15px;
z-index: 2;
}
.video-card-body {
padding: 1.5rem;
}
.video-card-title {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #2b2d42;
}
.video-card-info {
font-size: 0.85rem;
color: #6c757d;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.video-card-info i {
width: 20px;
color: #4361ee;
}
.video-card-footer {
padding: 1.25rem 1.5rem;
background: #f8f9fc;
border-top: 1px solid #edf2f7;
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-view-toggle {
padding: 0.5rem 1rem;
border-radius: 10px;
font-weight: 600;
transition: all 0.2s;
}
.btn-view-toggle.active {
background-color: #4361ee;
color: white;
box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
}
.link-icon {
font-size: 1.1rem;
color: #0d6efd;
transition: transform 0.2s;
}
.link-icon:hover {
color: #0a58ca;
transform: translateY(-2px);
}
.status-badge {
font-size: 0.75rem;
padding: 0.35em 0.65em;
font-size: 0.7rem;
padding: 0.5em 1em;
border-radius: 50px;
font-weight: 600;
letter-spacing: 0.3px;
}
.editable:hover {
background-color: #f1f3f5;
background-color: #f8f9fa;
cursor: pointer;
}
.inline-edit-input {
width: 100%;
padding: 2px 5px;
font-size: 0.85rem;
border: 1px solid #0d6efd;
border-radius: 3px;
.card-stats {
border: none;
border-radius: 15px;
transition: transform 0.3s, box-shadow 0.3s;
}
.card-stats:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
margin-bottom: 10px;
}
</style>
<div class="row mb-4 g-3">
<div class="col-md-2">
<div class="card card-stats shadow-sm h-100">
<div class="card-body">
<div class="stat-icon bg-primary text-white"><i class="fas fa-list"></i></div>
<h6 class="text-muted mb-1 small">Total Pedidos</h6>
<h3 class="mb-0 fw-bold"><?php echo $stats['TOTAL']; ?></h3>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-stats shadow-sm h-100">
<div class="card-body">
<div class="stat-icon bg-warning text-white"><i class="fas fa-clock"></i></div>
<h6 class="text-muted mb-1 small">Pendientes</h6>
<h3 class="mb-0 fw-bold"><?php echo $stats['PENDIENTE']; ?></h3>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-stats shadow-sm h-100">
<div class="card-body">
<div class="stat-icon bg-info text-white"><i class="fas fa-sync"></i></div>
<h6 class="text-muted mb-1 small">En Proceso</h6>
<h3 class="mb-0 fw-bold"><?php echo $stats['EN PROCESO']; ?></h3>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-stats shadow-sm h-100">
<div class="card-body">
<div class="stat-icon bg-primary text-white" style="background-color: #4361ee !important;"><i class="fas fa-check-double"></i></div>
<h6 class="text-muted mb-1 small">Terminados</h6>
<h3 class="mb-0 fw-bold"><?php echo $stats['TERMINADO']; ?></h3>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-stats shadow-sm h-100">
<div class="card-body">
<div class="stat-icon bg-success text-white" style="background-color: #2ec4b6 !important;"><i class="fas fa-thumbs-up"></i></div>
<h6 class="text-muted mb-1 small">Aprobados</h6>
<h3 class="mb-0 fw-bold"><?php echo $stats['APROBADO']; ?></h3>
</div>
</div>
</div>
</div>
<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>
<h2 class="mb-0 fw-bold" style="color: #2b2d42;">Producción de Video</h2>
<p class="text-muted small">Gestión de activos y flujo de trabajo creativo</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
<div class="d-flex align-items-center gap-3">
<div class="bg-white p-1 rounded-3 shadow-sm d-flex border">
<button class="btn btn-view-toggle active border-0" id="btnViewTable" onclick="switchView('table')">
<i class="fas fa-table me-1"></i> Tabla
</button>
<button class="btn btn-view-toggle border-0" id="btnViewCards" onclick="switchView('cards')">
<i class="fas fa-th-large me-1"></i> Tarjetas
</button>
</div>
<a href="marketing_assets.php" class="btn btn-light border shadow-sm">
<i class="fas fa-folder-open text-primary"></i> Biblioteca
</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 type="button" class="btn btn-primary shadow-sm px-4" data-bs-toggle="modal" data-bs-target="#nuevoVideoModal">
<i class="fas fa-plus me-2"></i> Nuevo Pedido
</button>
</div>
</div>
@ -86,20 +270,21 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
</div>
<?php endif; ?>
<div class="card shadow-sm border-0">
<!-- Vista de Tabla -->
<div id="tableView" class="card shadow-sm border-0" style="border-radius: 15px; overflow: hidden;">
<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 class="text-center" style="width: 60px;">#</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">Video Ref.</th>
<th class="text-center">Link Video</th>
<th class="text-center">Link Landing</th>
<th class="text-center">Link Flyer</th>
@ -110,30 +295,38 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
<tbody>
<?php if (empty($videos)): ?>
<tr>
<td colspan="11" class="text-center py-4 text-muted">No hay pedidos registrados.</td>
<td colspan="13" class="text-center py-5 text-muted">
<i class="fas fa-video-slash fa-3x mb-3 d-block opacity-25"></i>
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>'; ?>
<div class="d-flex align-items-center">
<i class="far fa-calendar-alt me-2 text-muted"></i>
<?php echo $v['fecha_entrega'] ? date('d/m/Y', strtotime($v['fecha_entrega'])) : '<span class="text-muted">-</span>'; ?>
</div>
</td>
<td class="fw-bold"><?php echo htmlspecialchars($v['nombre_producto'] ?: 'General'); ?></td>
<td class="fw-bold text-dark"><?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>
<div class="bg-light rounded d-flex align-items-center justify-content-center mx-auto" style="width: 120px; height: 120px; border-radius: 12px;">
<i class="fas fa-image text-muted opacity-50 fa-2x"></i>
</div>
<?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']); ?>">
<div style="min-width: 120px;">
<?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']); ?>">
<div style="min-width: 150px;">
<?php echo htmlspecialchars($v['angulo_video'] ?: '-'); ?>
</div>
</td>
@ -144,7 +337,7 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
$link = trim($link);
if (!$link) continue;
?>
<a href="<?php echo $link; ?>" target="_blank" class="link-icon d-inline-block me-1"><i class="fas fa-external-link-alt"></i></a>
<a href="<?php echo $link; ?>" target="_blank" class="link-icon d-inline-block me-1 text-primary"><i class="fas fa-external-link-alt"></i></a>
<?php endforeach; ?>
<?php else: ?>
<span class="text-muted">-</span>
@ -205,19 +398,24 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
<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' :
($v['estado'] == 'OBSERVADO' ? 'bg-danger' :
($v['estado'] == 'APROBADO' ? 'bg-success' :
($v['estado'] == 'PUBLICADO' ? 'bg-dark' : 'bg-secondary')))));
($v['estado'] == 'EN PROCESO' ? 'bg-info text-white' :
($v['estado'] == 'TERMINADO' ? 'bg-primary text-white' :
($v['estado'] == 'OBSERVADO' ? 'bg-danger text-white' :
($v['estado'] == 'APROBADO' ? 'bg-success text-white' :
($v['estado'] == 'PUBLICADO' ? 'bg-dark text-white' : 'bg-secondary text-white')))));
?>">
<?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>
<div class="d-flex justify-content-center gap-1">
<button class="btn btn-sm btn-light border shadow-sm" onclick="gestionarVideo(<?php echo htmlspecialchars(json_encode($v)); ?>)" title="Editar">
<i class="fas fa-edit text-primary"></i>
</button>
<button class="btn btn-sm btn-light border shadow-sm" onclick="eliminarVideo(<?php echo $v['id']; ?>)" title="Eliminar">
<i class="fas fa-trash-alt text-danger"></i>
</button>
</div>
</td>
</tr>
<?php endforeach; ?>
@ -228,6 +426,69 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
</div>
</div>
<!-- Vista de Tarjetas -->
<div id="cardsView" class="mb-5">
<div class="row g-4">
<?php foreach ($videos as $v): ?>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<div class="video-card">
<div class="video-card-img-container">
<?php if ($v['foto_producto']): ?>
<img src="<?php echo $v['foto_producto']; ?>" class="video-card-img" alt="Producto">
<?php else: ?>
<div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted">
<i class="fas fa-image fa-3x opacity-25"></i>
</div>
<?php endif; ?>
<div class="video-card-status">
<span class="badge status-badge <?php
echo $v['estado'] == 'PENDIENTE' ? 'bg-warning text-dark' :
($v['estado'] == 'EN PROCESO' ? 'bg-info text-white' :
($v['estado'] == 'TERMINADO' ? 'bg-primary text-white' :
($v['estado'] == 'OBSERVADO' ? 'bg-danger text-white' :
($v['estado'] == 'APROBADO' ? 'bg-success text-white' :
($v['estado'] == 'PUBLICADO' ? 'bg-dark text-white' : 'bg-secondary text-white')))));
?> shadow-sm">
<?php echo $v['estado']; ?>
</span>
</div>
</div>
<div class="video-card-body">
<div class="video-card-title text-truncate"><?php echo htmlspecialchars($v['nombre_producto'] ?: 'General'); ?></div>
<div class="video-card-info">
<i class="far fa-calendar-alt"></i>
<span>Entrega: <?php echo $v['fecha_entrega'] ? date('d/m/Y', strtotime($v['fecha_entrega'])) : '-'; ?></span>
</div>
<div class="video-card-info">
<i class="fas fa-hashtag"></i>
<span>Orden: <?php echo $v['orden']; ?></span>
</div>
<div class="mt-3">
<small class="text-muted d-block mb-1 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;">
<?php echo htmlspecialchars($v['material'] ?: 'No especificado'); ?>
</p>
</div>
</div>
<div class="video-card-footer">
<div class="d-flex gap-2">
<?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>
<?php endif; ?>
<?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>
<?php endif; ?>
</div>
<button class="btn btn-sm btn-primary rounded-pill px-3" onclick="gestionarVideo(<?php echo htmlspecialchars(json_encode($v)); ?>)">
Gestionar
</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Modal Nuevo Video -->
<div class="modal fade" id="nuevoVideoModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
@ -294,7 +555,7 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
</div>
<div class="col-md-6">
<label class="form-label d-flex justify-content-between">
Link Inspiración Video
Video Referencial
<button type="button" class="btn btn-sm btn-link p-0 text-decoration-none" onclick="addLinkInput('links_video_container', 'link_inspiracion_video[]')">
<i class="fas fa-plus-circle"></i> Añadir otro
</button>
@ -423,7 +684,7 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
</div>
<div class="col-md-6">
<label class="form-label d-flex justify-content-between">
Link Inspiración Video
Video Referencial
<button type="button" class="btn btn-sm btn-link p-0 text-decoration-none" onclick="addLinkInput('edit_links_video_container', 'link_inspiracion_video[]')">
<i class="fas fa-plus-circle"></i> Añadir otro
</button>
@ -468,6 +729,9 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger me-auto" onclick="if(confirm('¿Eliminar este pedido?')) window.location.href='delete_marketing_video.php?id=' + document.getElementById('edit_id').value">
<i class="fas fa-trash-alt"></i> Eliminar
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Guardar Cambios</button>
</div>
@ -477,6 +741,32 @@ $videos = $stmt_videos->fetchAll(PDO::FETCH_ASSOC);
</div>
<script>
function switchView(view) {
const tableView = document.getElementById('tableView');
const cardsView = document.getElementById('cardsView');
const btnTable = document.getElementById('btnViewTable');
const btnCards = document.getElementById('btnViewCards');
if (view === 'table') {
tableView.style.display = 'block';
cardsView.style.display = 'none';
btnTable.classList.add('active');
btnCards.classList.remove('active');
localStorage.setItem('video_production_view', 'table');
} else {
tableView.style.display = 'none';
cardsView.style.display = 'block';
btnTable.classList.remove('active');
btnCards.classList.add('active');
localStorage.setItem('video_production_view', 'cards');
}
}
document.addEventListener('DOMContentLoaded', function() {
const savedView = localStorage.getItem('video_production_view') || 'table';
switchView(savedView);
});
function addLinkInput(containerId, inputName, value = '') {
const container = document.getElementById(containerId);
const div = document.createElement('div');
@ -546,6 +836,12 @@ function gestionarVideo(video) {
myModal.show();
}
function eliminarVideo(id) {
if (confirm('¿Estás seguro de que deseas eliminar este pedido de video? Esta acción no se puede deshacer.')) {
window.location.href = 'delete_marketing_video.php?id=' + id;
}
}
document.addEventListener('DOMContentLoaded', function() {
const editableCells = document.querySelectorAll('.editable');
@ -607,7 +903,8 @@ document.addEventListener('DOMContentLoaded', function() {
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>`;
const minWidth = field === 'material' ? '120px' : '150px';
this.innerHTML = `<div style="min-width: ${minWidth};">${newValue || '-'}</div>`;
}
} else {
alert('Error: ' + data.error);