@extends('layouts.layout-para-vista-sin-menus')

@section('title', 'Intranet | Ficha Completada con Éxito')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
<div class="shape shape-1"></div>
    <div class="shape shape-2"></div>
    
    <div class="success-container">
        <div class="logo-container">
            <img src="{{asset('img/logo.png')}}" alt="">
        </div>

        <br><br><br>
        
        <div class="check-container">
            <div class="circle">
                <i class="fas fa-check checkmark"></i>
            </div>
        </div>
        
        <h1>¡Postulación <span>Completada</span>!</h1>
        
        <p>Tu ficha de postulación ha sido registrada exitosamente en nuestro sistema. Hemos recibido toda la información requerida y nuestro equipo de recursos humanos revisará tu solicitud en los próximos días.</p>        
    </div>
@stop

@section('footer')
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }
        
        .success-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 24px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
            max-width: 700px;
            width: 100%;
            text-align: center;
            padding: 60px 40px;
            position: relative;
            overflow: hidden;
            z-index: 10;
            backdrop-filter: blur(10px);
        }
        
        .logo-container {
            margin-bottom: 30px;
            padding: 20px;
        }
        
        .logo {
            width: 180px;
            height: 180px;
            background: #026ee6;
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 25px #026ee6;
            border: 5px solid white;
            position: relative;
            overflow: hidden;
        }
        
        .logo-inner {
            background: white;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: #4361ee;
        }
        
        .check-container {
            position: relative;
            margin: -90px auto 30px;
            width: 120px;
            height: 120px;
        }
        
        .circle {
            position: absolute;
            width: 120px;
            height: 120px;
            background: #4ade80;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: scaleCircle 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 5px 20px rgba(74, 222, 128, 0.4);
        }
        
        .checkmark {
            color: white;
            font-size: 60px;
            animation: scaleCheck 0.6s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
        }
        
        h1 {
            color: #1e293b;
            margin-bottom: 20px;
            font-size: 2.8rem;
            font-weight: 800;
            letter-spacing: -0.5px;
        }
        
        h1 span {
            background-color: #026ee6;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        p {
            color: #475569;
            font-size: 1.2rem;
            line-height: 1.7;
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(45deg, #4361ee, #3a0ca3);
            color: white;
            text-decoration: none;
            padding: 16px 40px;
            border-radius: 15px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(67, 97, 238, 0.3);
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(67, 97, 238, 0.5);
        }
        
        .btn-secondary {
            background: transparent;
            color: #4361ee;
            border: 2px solid #4361ee;
            box-shadow: none;
        }
        
        .btn i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .confetti {
            position: absolute;
            width: 15px;
            height: 15px;
            opacity: 0;
            z-index: 1;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            z-index: 0;
        }
        
        .shape-1 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), transparent);
            top: -150px;
            left: -150px;
        }
        
        .shape-2 {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.15), transparent);
            bottom: -100px;
            right: -100px;
        }
        
        @keyframes scaleCircle {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes scaleCheck {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @media (max-width: 768px) {
            .success-container {
                padding: 40px 25px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            p {
                font-size: 1.1rem;
            }
            
            .btn-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn {
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .logo {
                width: 140px;
                height: 140px;
            }
            
            .logo-inner {
                width: 100px;
                height: 100px;
            }
            
            .check-container {
                margin-top: -70px;
                width: 100px;
                height: 100px;
            }
            
            .circle {
                width: 100px;
                height: 100px;
            }
            
            .checkmark {
                font-size: 50px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            p {
                font-size: 1rem;
            }
        }
    </style>
@stop

@section('js')
<script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.success-container');
            const colors = ['#4361ee', '#3a0ca3', '#4ade80', '#f72585', '#ff9e00'];
            
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.top = Math.random() * 100 + '%';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.width = Math.random() * 15 + 10 + 'px';
                confetti.style.height = Math.random() * 15 + 10 + 'px';
                confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
                container.appendChild(confetti);
                
                // Animación
                const animationDuration = Math.random() * 3 + 2;
                const animationDelay = Math.random() * 1;
                
                confetti.style.animation = `confettiFall ${animationDuration}s ${animationDelay}s ease-out forwards`;
                
                // Crear regla de animación dinámica
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes confettiFall {
                        0% { 
                            transform: translateY(-100vh) rotate(0deg); 
                            opacity: 1;
                        }
                        100% { 
                            transform: translateY(100vh) rotate(${Math.random() * 720}deg); 
                            opacity: 0;
                        }
                    }
                `;
                document.head.appendChild(style);
            }
        });
    </script>
@stop