<?php
include_once 'includes/header.php';
include_once 'config/database.php';

$database = new Database();
$conn = $database->getConnection();

// Obtener la empresa del usuario actual (igual que en header.php)
$user_empresa = null;
$empresa_info = ['nomempresa' => 'Empresa no encontrada'];

try {
    $stmt = $conn->prepare("SELECT t.codempresa, e.nomempresa 
                           FROM templeado t
                           INNER JOIN tempresa e ON t.codempresa = e.codempresa
                           WHERE t.codempleado = ?");
    $stmt->execute([$_SESSION['user']['codempleado']]);
    $empresaInfo = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($empresaInfo) {
        $user_empresa = $empresaInfo['codempresa'];
        $empresa_info = ['nomempresa' => $empresaInfo['nomempresa']];
    }
} catch(PDOException $e) {
    $_SESSION['error'] = "❌ Error al obtener información de la empresa: " . $e->getMessage();
}

// Fetch ofertas directamente de la tabla tofertas para la empresa del usuario
$ofertas = [];
if ($user_empresa) {
    try {
        $search = isset($_GET['search']) ? trim($_GET['search']) : '';
        
        $query = "SELECT o.*, e.nomempresa as empresa_nombre, emp.nombres as empleado_nombre, emp.apellidoPaterno as empleado_apellido
                  FROM tofertas o
                  LEFT JOIN tempresa e ON o.codempresa = e.codempresa
                  LEFT JOIN templeado emp ON o.codempleado = emp.codempleado
                  WHERE o.codempresa = ? 
                  AND o.estado = 'ACTIVO' 
                  AND DATE(o.fechainicio) <= CURDATE() 
                  AND DATE(o.fechafin) >= CURDATE()";
        
        $params = [$user_empresa];
        if ($search) {
            $query .= " AND (
                o.denominacion LIKE ? OR e.nomempresa LIKE ?
            )";
            $searchTerm = "%{$search}%";
            $params[] = $searchTerm;
            $params[] = $searchTerm;
        }
        
        $query .= " ORDER BY o.fechainicio DESC, o.denominacion";
        
        $stmt = $conn->prepare($query);
        $stmt->execute($params);
        $ofertas = $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch(PDOException $e) {
        $_SESSION['error'] = "❌ Error al obtener las ofertas: " . $e->getMessage();
        $ofertas = [];
    }
}
?>

<style>
.oferta-card {
    border: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.oferta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.oferta-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px;
    position: relative;
}

.oferta-body {
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.oferta-imagen {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.oferta-sin-imagen {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #e9ecef, #f8f9fa);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 2px dashed #dee2e6;
}

.estado-badge {
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 600;
}

.estado-activo {
    background-color: #28a745;
    color: white;
}

.fecha-vigente {
    background-color: #d4edda;
    color: #155724;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.dias-restantes {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
}

.detalles-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.detalles-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.modal-oferta .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-oferta .modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 25px;
}

.modal-oferta .modal-body {
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.modal-imagen {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: #f8f9fa;
    padding: 10px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.info-item i {
    color: #667eea;
    margin-right: 15px;
    width: 20px;
    text-align: center;
}

.info-item strong {
    color: #495057;
    margin-right: 10px;
}

.sin-ofertas {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 20px;
    margin: 40px 0;
}

.sin-ofertas i {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 20px;
}

.sin-ofertas h4 {
    color: #495057;
    margin-bottom: 15px;
}

.sin-ofertas p {
    color: #6c757d;
    font-size: 1.1rem;
}

.descargar-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    margin-left: 10px;
}

.descargar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    color: white;
}

.descargar-btn i {
    margin-right: 8px;
}
</style>

<div class="col-md-10 p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold;">
            <i class="fas fa-gift" style="color: #667eea;"></i> Ofertas Disponibles
        </h2>
        <div class="text-muted">
            <i class="fas fa-building"></i> <?php echo htmlspecialchars($empresa_info['nomempresa']); ?>
        </div>
    </div>

    <?php if (isset($_SESSION['success'])): ?>
        <div class="alert alert-success alert-custom">
            <i class="fas fa-check-circle"></i>
            <?php 
            echo $_SESSION['success']; 
            unset($_SESSION['success']);
            ?>
        </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert alert-danger alert-custom">
            <i class="fas fa-exclamation-triangle"></i>
            <?php 
            echo $_SESSION['error']; 
            unset($_SESSION['error']);
            ?>
        </div>
    <?php endif; ?>

    <!-- Search form -->
    <div class="card mb-4" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div class="card-body">
            <form method="GET" action="ver_ofertas.php" class="row g-3">
                <div class="col-md-8">
                    <input type="text" class="form-control" name="search" 
                           placeholder="Buscar ofertas por denominación..."
                           value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>"
                           style="border: 2px solid #e9ecef; border-radius: 10px; transition: all 0.3s ease;">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary" style="background: linear-gradient(135deg, #667eea, #764ba2); border: none; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                    <?php if (isset($_GET['search'])): ?>
                        <a href="ver_ofertas.php" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Limpiar
                        </a>
                    <?php endif; ?>
                </div>
            </form>
        </div>
    </div>

    <?php if (!empty($ofertas)): ?>
        <!-- Ofertas Grid -->
        <div class="row">
            <?php foreach ($ofertas as $oferta): ?>
                <?php
                // Calcular días restantes
                $fechaFin = new DateTime($oferta['fechafin']);
                $fechaActual = new DateTime();
                $diasRestantes = $fechaActual->diff($fechaFin)->days;
                if ($fechaActual > $fechaFin) {
                    $diasRestantes = 0;
                }
                ?>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card oferta-card">
                        <div class="oferta-header">
                            <h5 class="mb-2">
                                <i class="fas fa-tag"></i> <?php echo htmlspecialchars($oferta['denominacion']); ?>
                            </h5>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="estado-badge estado-activo">ACTIVO</span>
                                <span class="fecha-vigente">Vigente</span>
                            </div>
                        </div>
                        
                        <div class="oferta-body">
                            <?php if ($oferta['foto']): ?>
                                <img src="<?php echo htmlspecialchars($oferta['foto']); ?>" 
                                     alt="<?php echo htmlspecialchars($oferta['denominacion']); ?>" 
                                     class="oferta-imagen">
                            <?php else: ?>
                                <div class="oferta-sin-imagen">
                                    <div class="text-center">
                                        <i class="fas fa-image fa-3x text-muted mb-2"></i>
                                        <p class="text-muted mb-0">Sin imagen</p>
                                    </div>
                                </div>
                            <?php endif; ?>
                            
                            <div class="info-item">
                                <i class="fas fa-calendar-alt"></i>
                                <strong>Inicio:</strong>
                                <span><?php echo date('d/m/Y', strtotime($oferta['fechainicio'])); ?></span>
                            </div>
                            
                            <div class="info-item">
                                <i class="fas fa-calendar-times"></i>
                                <strong>Fin:</strong>
                                <span><?php echo date('d/m/Y', strtotime($oferta['fechafin'])); ?></span>
                            </div>
                            
                            <?php if ($diasRestantes > 0): ?>
                                <div class="text-center">
                                    <span class="dias-restantes">
                                        <i class="fas fa-clock"></i> 
                                        <?php echo $diasRestantes; ?> día<?php echo $diasRestantes != 1 ? 's' : ''; ?> restante<?php echo $diasRestantes != 1 ? 's' : ''; ?>
                                    </span>
                                </div>
                            <?php endif; ?>
                            
                            <div class="text-center mt-3">
                                <button type="button" class="btn detalles-btn" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#ofertaModal<?php echo $oferta['codofertas']; ?>">
                                    <i class="fas fa-eye"></i> Ver Detalles
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal para detalles de la oferta -->
                <div class="modal fade modal-oferta" id="ofertaModal<?php echo $oferta['codofertas']; ?>" tabindex="-1" aria-labelledby="ofertaModalLabel<?php echo $oferta['codofertas']; ?>" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="ofertaModalLabel<?php echo $oferta['codofertas']; ?>">
                                    <i class="fas fa-gift"></i> <?php echo htmlspecialchars($oferta['denominacion']); ?>
                                </h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <?php if ($oferta['foto']): ?>
                                    <div class="text-center mb-4">
                                        <img src="<?php echo htmlspecialchars($oferta['foto']); ?>" 
                                             alt="<?php echo htmlspecialchars($oferta['denominacion']); ?>" 
                                             class="modal-imagen"
                                             id="imagenOferta<?php echo $oferta['codofertas']; ?>">
                                        <div class="mt-3">
                                            <button type="button" class="btn descargar-btn" 
                                                    onclick="descargarImagen('<?php echo htmlspecialchars($oferta['foto']); ?>', '<?php echo htmlspecialchars($oferta['denominacion']); ?>')">
                                                <i class="fas fa-download"></i> Descargar Imagen
                                            </button>
                                        </div>
                                    </div>
                                <?php endif; ?>
                                
                                
                                
                                
                            </div>
                            <div class="modal-footer" style="background: #f8f9fa; border: none;">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <i class="fas fa-times"></i> Cerrar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <!-- Sin ofertas -->
        <div class="sin-ofertas">
            <i class="fas fa-gift"></i>
            <h4>No hay ofertas disponibles</h4>
            <p>No se encontraron ofertas activas y vigentes para su empresa en este momento.</p>
            <p class="text-muted">
                <i class="fas fa-info-circle"></i> 
                Las ofertas deben estar activas y dentro del rango de fechas para aparecer aquí.
            </p>
        </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animación suave para las tarjetas
    const cards = document.querySelectorAll('.oferta-card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        setTimeout(() => {
            card.style.transition = 'all 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });
    
    // Efecto hover mejorado para los botones
    const botones = document.querySelectorAll('.detalles-btn');
    botones.forEach(boton => {
        boton.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px) scale(1.05)';
        });
        
        boton.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
});

// Función para descargar imagen
function descargarImagen(urlImagen, nombreOferta) {
    try {
        // Crear un elemento temporal para descargar
        const link = document.createElement('a');
        link.href = urlImagen;
        
        // Limpiar el nombre de la oferta para el archivo
        const nombreArchivo = nombreOferta
            .replace(/[^a-zA-Z0-9\s]/g, '') // Remover caracteres especiales
            .replace(/\s+/g, '_') // Reemplazar espacios con guiones bajos
            .toLowerCase();
        
        // Obtener la extensión del archivo
        const extension = urlImagen.split('.').pop().toLowerCase();
        
        // Establecer el nombre del archivo
        link.download = `oferta_${nombreArchivo}.${extension}`;
        
        // Agregar al DOM temporalmente y hacer clic
        document.body.appendChild(link);
        link.click();
        
        // Remover el elemento temporal
        document.body.removeChild(link);
        
        // Mostrar mensaje de éxito
        mostrarMensaje('Imagen descargada correctamente', 'success');
        
    } catch (error) {
        console.error('Error al descargar la imagen:', error);
        mostrarMensaje('Error al descargar la imagen', 'error');
    }
}

// Función para mostrar mensajes
function mostrarMensaje(mensaje, tipo) {
    const alertClass = tipo === 'success' ? 'alert-success' : 'alert-danger';
    const iconClass = tipo === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle';
    
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert ${alertClass} alert-dismissible fade show`;
    alertDiv.style.position = 'fixed';
    alertDiv.style.top = '20px';
    alertDiv.style.right = '20px';
    alertDiv.style.zIndex = '9999';
    alertDiv.style.minWidth = '300px';
    
    alertDiv.innerHTML = `
        <i class="${iconClass}"></i> ${mensaje}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // Remover automáticamente después de 3 segundos
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 3000);
}
</script>

<?php
include_once 'includes/footer.php';
?>
