<?php
// envio_exitoso.php
// Recuperar número de referencia de la URL si existe
$numeroReferencia = isset($_GET['ref']) ? htmlspecialchars($_GET['ref']) : 'TR-' . date('Y') . '-' . rand(1000, 9999);

// Fecha formateada
$fechaEnvio = date("d/m/Y H:i");
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resumen Enviado Exitosamente - Trauma 2026</title>
    
    <!-- Enlaces a CSS externos -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #1a5cb0;
            --primary-light: #2978e2;
            --primary-dark: #0e347a;
            --secondary: #1aae9f;
            --secondary-light: #21d7c5;
            --secondary-dark: #137d72;
            --accent: #ff6b35;
            --accent-light: #ff8b5e;
            --accent-dark: #e54e16;
            --success: #28a745;
            --danger: #dc3545;
            --warning: #ffc107;
            --info: #17a2b8;
            --light: #f8f9fa;
            --dark: #343a40;
            --text: #212529;
            --text-light: #6c757d;
            --text-muted: #adb5bd;
            --body-bg: #f5f8ff;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--body-bg);
            background-image: linear-gradient(135deg, #f5f7ff 0%, #e3eeff 100%);
            background-attachment: fixed;
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .main-header {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            color: white;
            padding: 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .main-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1597852074816-d933c7d2b988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover;
            opacity: 0.15;
            z-index: 0;
        }
        
        .header-content {
            position: relative;
            z-index: 1;
            padding: 40px 0;
        }
        
        .logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .logo {
            height: 80px;
            filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
        }
        
        .main-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
        
        .main-subtitle {
            text-align: center;
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .success-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 50px;
            max-width: 800px;
            margin: -50px auto 50px;
            position: relative;
            z-index: 2;
            transform: translateY(0);
            transition: transform 0.3s;
        }
        
        .success-container:hover {
            transform: translateY(-5px);
        }
        
        .success-icon {
            width: 120px;
            height: 120px;
            background: var(--success);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 30px;
            box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
            animation: success-pulse 2s infinite;
        }
        
        @keyframes success-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(40, 167, 69, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
            }
        }
        
        .success-icon i {
            font-size: 60px;
        }
        
        .success-title {
            text-align: center;
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--success);
            margin-bottom: 20px;
        }
        
        .success-message {
            text-align: center;
            font-size: 1.1rem;
            color: var(--text);
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }
        
        .reference-card {
            background: var(--light);
            border: 2px dashed var(--success);
            padding: 25px;
            border-radius: 15px;
            margin: 30px auto;
            max-width: 500px;
            position: relative;
        }
        
        .reference-card::before, 
        .reference-card::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 15px;
            background: white;
        }
        
        .reference-card::before {
            left: -8px;
            border-radius: 50%;
        }
        
        .reference-card::after {
            right: -8px;
            border-radius: 50%;
        }
        
        .reference-label {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 5px;
            text-align: center;
        }
        
        .reference-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--success);
            text-align: center;
            letter-spacing: 2px;
        }
        
        .reference-copy {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255,255,255,0.7);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--primary);
        }
        
        .reference-copy:hover {
            background: white;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            color: var(--primary-dark);
        }
        
        .submission-details {
            background: rgba(40, 167, 69, 0.05);
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
        }
        
        .detail-item {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 1px dashed rgba(0,0,0,0.1);
            padding-bottom: 15px;
        }
        
        .detail-item:last-child {
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .detail-icon {
            margin-right: 15px;
            color: var(--success);
            font-size: 1.2rem;
            width: 24px;
            text-align: center;
        }
        
        .detail-label {
            font-weight: 600;
            margin-right: 10px;
            min-width: 120px;
        }
        
        .detail-value {
            flex: 1;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 40px;
        }
        
        .btn-action {
            padding: 12px 25px;
            border-radius: 50px;
            font-weight: 600;
            display: flex;
            align-items: center;
            transition: all 0.3s;
            text-decoration: none;
            min-width: 200px;
            justify-content: center;
        }
        
        .btn-action i {
            margin-right: 8px;
        }
        
        .btn-primary-custom {
            background: var(--primary);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(26, 92, 176, 0.3);
        }
        
        .btn-primary-custom:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(26, 92, 176, 0.4);
            color: white;
        }
        
        .btn-accent-custom {
            background: var(--accent);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }
        
        .btn-accent-custom:hover {
            background: var(--accent-dark);
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4);
            color: white;
        }
        
        .btn-outline-custom {
            background: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }
        
        .btn-outline-custom:hover {
            background: var(--primary-light);
            color: white;
            transform: translateY(-3px);
        }
        
        .email-note {
            text-align: center;
            margin-top: 30px;
            padding: 15px;
            background: rgba(23, 162, 184, 0.1);
            border-radius: 10px;
            font-size: 0.95rem;
            color: var(--text-light);
        }
        
        .email-note i {
            color: var(--info);
            margin-right: 5px;
        }
        
        .contact-info {
            text-align: center;
            margin-top: 30px;
            font-size: 0.95rem;
        }
        
        .contact-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        
        .contact-link:hover {
            text-decoration: underline;
            color: var(--primary-dark);
        }
        
        .main-footer {
            background: var(--primary-dark);
            color: rgba(255,255,255,0.8);
            padding: 20px 0;
            margin-top: auto;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-logo {
            height: 40px;
        }
        
        .footer-text {
            font-size: 0.9rem;
        }
        
        .footer-links a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            margin-left: 15px;
            font-size: 0.9rem;
            transition: all 0.2s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        /* Copy animation */
        .copied-message {
            position: absolute;
            top: -40px;
            right: 0;
            background: var(--success);
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 0.85rem;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
        }
        
        .copied-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .copied-message::after {
            content: '';
            position: absolute;
            bottom: -5px;
            right: 15px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid var(--success);
        }
        
        @media (max-width: 768px) {
            .success-container {
                padding: 30px 20px;
                margin-top: -30px;
            }
            
            .success-icon {
                width: 100px;
                height: 100px;
            }
            
            .success-icon i {
                font-size: 50px;
            }
            
            .success-title {
                font-size: 1.8rem;
            }
            
            .reference-number {
                font-size: 1.5rem;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .btn-action {
                width: 100%;
            }
            
            .footer-content {
                flex-direction: column;
                text-align: center;
            }
            
            .footer-logo {
                margin-bottom: 15px;
            }
            
            .footer-links {
                margin-top: 15px;
            }
            
            .footer-links a {
                margin: 0 8px;
            }
            
            .detail-item {
                flex-direction: column;
            }
            
            .detail-label {
                margin-bottom: 5px;
                min-width: auto;
            }
        }
    </style>
</head>
<body>
    <!-- Animación de confeti (se mostrará al cargar la página) -->
    <canvas id="confetti-canvas" style="position:fixed;z-index:1000;top:0;left:0;pointer-events:none;"></canvas>
    
    <!-- Header -->
    <header class="main-header">
        <div class="header-content">
            <div class="container">
                <div class="logo-container">
                    <img src="https://www.jotform.com/uploads/eliasibjulio/form_files/spt_logo_gr.5b9850f455a7a5.11289802.gif" alt="Logo SPT" class="logo">
                </div>
                <h1 class="main-title">TRAUMA 2026</h1>
                <p class="main-subtitle">Congreso Panamericano de Trauma, Cuidados Críticos y Cirugía de Emergencia</p>
            </div>
        </div>
    </header>
    
    <!-- Main Content -->
    <div class="container">
        <div class="success-container">
            <div class="success-icon">
                <i class="fas fa-check"></i>
            </div>
            
            <h2 class="success-title">¡Resumen Enviado Exitosamente!</h2>
            
            <p class="success-message">
                Gracias por enviar su resumen científico para Trauma 2026. Su trabajo ha sido recibido correctamente y será revisado por nuestro comité científico. Le notificaremos el resultado de la evaluación por correo electrónico.
            </p>
            
            <div class="reference-card">
                <div class="reference-label">NÚMERO DE REFERENCIA</div>
                <div class="reference-number" id="referenceNumber"><?php echo $numeroReferencia; ?></div>
                <button class="reference-copy" id="copyReference" title="Copiar número de referencia">
                    <i class="fas fa-copy"></i>
                </button>
                <div class="copied-message" id="copiedMessage">¡Copiado!</div>
            </div>
            
            <div class="submission-details">
                <div class="detail-item">
                    <div class="detail-icon"><i class="fas fa-calendar-alt"></i></div>
                    <div class="detail-label">Fecha de envío:</div>
                    <div class="detail-value"><?php echo $fechaEnvio; ?></div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-icon"><i class="fas fa-clock"></i></div>
                    <div class="detail-label">Tiempo estimado de respuesta:</div>
                    <div class="detail-value">4-6 semanas</div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                    <div class="detail-label">Notificación:</div>
                    <div class="detail-value">Se enviará por correo electrónico al autor corresponsal</div>
                </div>
            </div>
            
            <div class="email-note">
                <i class="fas fa-info-circle"></i> Hemos enviado un correo de confirmación con los detalles de su envío al correo electrónico del autor corresponsal. Si no lo recibe en los próximos minutos, por favor revise su carpeta de spam.
            </div>
            
            <div class="action-buttons">
                <a href="index.php" class="btn-action btn-primary-custom">
                    <i class="fas fa-home"></i> Volver al Inicio
                </a>
                
                <a href="enviar_resumen.php" class="btn-action btn-accent-custom">
                    <i class="fas fa-plus"></i> Enviar Otro Resumen
                </a>
                
                <a href="https://trauma2025.org/cronograma" class="btn-action btn-outline-custom">
                    <i class="fas fa-calendar-check"></i> Ver Cronograma
                </a>
            </div>
            
            <div class="contact-info">
                <p>Si tiene alguna consulta, por favor contacte a <a href="mailto:info@trauma2025.org" class="contact-link">info@trauma2025.org</a></p>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <img src="https://www.jotform.com/uploads/eliasibjulio/form_files/spt_logo_gr.5b9850f455a7a5.11289802.gif" alt="Logo SPT" class="footer-logo">
                
                <div class="footer-text">
                    &copy; 2026 Sociedad Panamericana de Trauma. Todos los derechos reservados.
                </div>
                
                <div class="footer-links">
                    <a href="#">Términos y Condiciones</a>
                    <a href="#">Política de Privacidad</a>
                    <a href="#">Contacto</a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/confetti-js@0.0.18/dist/index.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Animación de confeti al cargar la página
            var confettiSettings = {
                target: 'confetti-canvas',
                max: 150,
                size: 1.5,
                animate: true,
                props: ['circle', 'square', 'triangle', 'line'],
                colors: [[165,104,246], [230,61,135], [0,199,228], [253,214,126]],
                clock: 25,
                rotate: true,
                start_from_edge: true,
                respawn: false
            };
            var confetti = new ConfettiGenerator(confettiSettings);
            confetti.render();
            
            // Detener el confeti después de 5 segundos
            setTimeout(function() {
                confetti.clear();
                document.getElementById('confetti-canvas').remove();
            }, 5000);
            
            // Copiar número de referencia al portapapeles
            document.getElementById('copyReference').addEventListener('click', function() {
                var referenceNumber = document.getElementById('referenceNumber').innerText;
                
                // Crear un elemento temporal para copiar el texto
                var tempInput = document.createElement('input');
                tempInput.value = referenceNumber;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                
                // Mostrar mensaje de copiado
                var copiedMessage = document.getElementById('copiedMessage');
                copiedMessage.classList.add('show');
                
                setTimeout(function() {
                    copiedMessage.classList.remove('show');
                }, 2000);
            });
            
            // Animación de aparición de elementos
            function animateElements() {
                const elements = [
                    '.success-icon',
                    '.success-title',
                    '.success-message',
                    '.reference-card',
                    '.submission-details',
                    '.email-note',
                    '.action-buttons',
                    '.contact-info'
                ];
                
                elements.forEach((selector, index) => {
                    setTimeout(() => {
                        document.querySelector(selector).classList.add('animate__animated', 'animate__fadeInUp');
                    }, index * 200);
                });
            }
            
            // Iniciar animaciones con un pequeño retraso
            setTimeout(animateElements, 500);
        });
    </script>
</body>
</html>