<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrabajoParaTi.co - Formulario de Inscripción</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --primary-color: #4CAF50;
            --secondary-color: #45a049;
            --text-color: #333;
            --border-color: #ddd;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

        .steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }

        .step {
            flex: 1;
            text-align: center;
            padding: 10px;
            position: relative;
            z-index: 1;
        }

        .step-number {
            width: 30px;
            height: 30px;
            background: var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            color: white;
            transition: background-color 0.3s;
        }

        .step.active .step-number {
            background: var(--primary-color);
        }

        .step.completed .step-number {
            background: var(--secondary-color);
        }

        .progress-bar {
            position: absolute;
            top: 25px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--border-color);
            z-index: 0;
        }

        .progress {
            width: 0%;
            height: 100%;
            background: var(--primary-color);
            transition: width 0.3s;
        }

        .form-section {
            display: none;
        }

        .form-section.active {
            display: block;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
        }

        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="date"],
        select {
            width: 100%;
            padding: 12px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        .buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: var(--secondary-color);
        }

        button.prev {
            background-color: #666;
        }

        button.prev:hover {
            background-color: #555;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
                margin: 10px;
                width: calc(100% - 20px);
            }

            .step-text {
                display: none;
            }

            .buttons {
                flex-direction: column;
                gap: 10px;
            }

            button {
                width: 100%;
            }

            .form-group {
                margin-bottom: 15px;
            }

            input[type="text"],
            input[type="number"],
            input[type="email"],
            input[type="date"],
            select {
                padding: 10px;
                font-size: 14px;
            }

            label {
                font-size: 14px;
            }

            .radio-group {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .radio-group label {
                margin-bottom: 0;
            }

            .step-number {
                width: 25px;
                height: 25px;
                font-size: 14px;
            }

            .progress-bar {
                top: 22px;
            }

            input[type="file"] {
                width: 100%;
                padding: 10px 0;
            }

            .form-section {
                padding: 10px 0;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 10px;
                margin: 5px;
                width: calc(100% - 10px);
            }

            .steps {
                margin-bottom: 20px;
            }

            .step {
                padding: 5px;
            }
        }
    </style>
</head>
<body>
    <center>
        <h3>Proceso de inscripción de empleo.</h3><img width="50" height="50" src="logo.png" alt="">
    </center>
    <div class="container">
        <div class="steps">
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
            <div class="step active">
                <div class="step-number">1</div>
                <div class="step-text">Información Personal</div>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <div class="step-text">Contacto y Ubicación</div>
            </div>
            <div class="step">
                <div class="step-number">3</div>
                <div class="step-text">Documentación</div>
            </div>
        </div>

        <form id="registro-form" action="procesar.php" method="POST" enctype="multipart/form-data">
            <!-- Sección 1: Información Personal -->
            <div class="form-section active" id="step-1">
                <div class="form-group">
                    <label for="nombre">Nombre</label>
                    <input type="text" id="nombre" name="nombre" required>
                </div>

                <div class="form-group">
                    <label for="apellido">Apellido</label>
                    <input type="text" id="apellido" name="apellido" required>
                </div>

                <div class="form-group">
                    <label for="edad">Edad</label>
                    <input type="number" id="edad" name="edad" required>
                </div>

                <div class="form-group">
                    <label for="identificacion">Número de identificación</label>
                    <input type="text" id="identificacion" name="identificacion" required>
                </div>

                <div class="form-group">
                    <label for="fecha_expedicion">Fecha de expedición</label>
                    <input type="date" id="fecha_expedicion" name="fecha_expedicion" required>
                </div>

                <div class="form-group">
                    <label for="lugar_expedicion">Lugar de expedición</label>
                    <input type="text" id="lugar_expedicion" name="lugar_expedicion" required>
                </div>

                <div class="form-group">
                    <label for="fecha_nacimiento">Fecha de nacimiento</label>
                    <input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required>
                </div>
            </div>

            <!-- Sección 2: Contacto y Ubicación -->
            <div class="form-section" id="step-2">
                <div class="form-group">
                    <label>Tipo de vivienda</label>
                    <div class="radio-group">
                        <label><input type="radio" name="tipo_vivienda" value="Propia" required> Propia</label>
                        <label><input type="radio" name="tipo_vivienda" value="Arriendo"> Arriendo</label>
                        <label><input type="radio" name="tipo_vivienda" value="Familiar"> Familiar</label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="ciudad">Ciudad</label>
                    <input type="text" id="ciudad" name="ciudad" required>
                </div>

                <div class="form-group">
                    <label for="direccion">Dirección</label>
                    <input type="text" id="direccion" name="direccion" required>
                </div>

                <div class="form-group">
                    <label for="barrio">Barrio</label>
                    <input type="text" id="barrio" name="barrio" required>
                </div>

                <div class="form-group">
                    <label for="telefono">Teléfono</label>
                    <input type="text" id="telefono" name="telefono">
                </div>

                <div class="form-group">
                    <label for="celular">Celular</label>
                    <input type="text" id="celular" name="celular" required>
                </div>

                <div class="form-group">
                    <label for="email">Correo electrónico</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div class="form-group">
                    <label>Experiencia previa laboral</label>
                    <div class="radio-group">
                        <label><input type="radio" name="experiencia_laboral" value="1" required> Sí</label>
                        <label><input type="radio" name="experiencia_laboral" value="0"> No</label>
                    </div>
                </div>

                <div class="form-group">
                    <label>¿Posee cuentas bancarias?</label>
                    <div class="radio-group">
                        <label><input type="radio" name="cuenta_bancaria" value="1" required> Sí</label>
                        <label><input type="radio" name="cuenta_bancaria" value="0"> No</label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="banco">¿Cuál banco?</label>
                    <input type="text" id="banco" name="banco">
                </div>

                <div class="form-group">
                    <label>¿Tiene Nequi?</label>
                    <div class="radio-group">
                        <label><input type="radio" name="nequi" value="1" required> Sí</label>
                        <label><input type="radio" name="nequi" value="0"> No</label>
                    </div>
                </div>

                <div class="form-group">
                    <label>¿Tiene Daviplata?</label>
                    <div class="radio-group">
                        <label><input type="radio" name="daviplata" value="1" required> Sí</label>
                        <label><input type="radio" name="daviplata" value="0"> No</label>
                    </div>
                </div>
            </div>

            <!-- Sección 3: Documentación -->
            <div class="form-section" id="step-3">
                <div class="form-group">
                    <label>Foto de cédula (frontal)</label>
                    <input type="file" name="foto_cedula_frontal" accept="image/*" required class="file-upload">
                </div>

                <div class="form-group">
                    <label>Foto de cédula (trasera)</label>
                    <input type="file" name="foto_cedula_trasera" accept="image/*" required class="file-upload">
                </div>

                <div class="form-group">
                    <label>Foto de rostro (frontal)</label>
                    <input type="file" name="foto_rostro_frontal" accept="image/*" required class="file-upload">
                </div>

                <div class="form-group">
                    <label>Foto de rostro (lateral)</label>
                    <input type="file" name="foto_rostro_lateral" accept="image/*" required class="file-upload">
                </div>
            </div>

            <div class="buttons">
                <button type="button" class="prev" style="display: none;">Anterior</button>
                <button type="button" class="next">Siguiente</button>
                <button type="submit" style="display: none;">Enviar</button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('registro-form');
            const sections = document.querySelectorAll('.form-section');
            const steps = document.querySelectorAll('.step');
            const progress = document.querySelector('.progress');
            const prevBtn = document.querySelector('.prev');
            const nextBtn = document.querySelector('.next');
            const submitBtn = document.querySelector('button[type="submit"]');
            let currentStep = 0;

            function updateStep(step) {
                sections.forEach(section => section.classList.remove('active'));
                sections[step].classList.add('active');

                steps.forEach((s, index) => {
                    s.classList.remove('active', 'completed');
                    if (index < step) {
                        s.classList.add('completed');
                    } else if (index === step) {
                        s.classList.add('active');
                    }
                });

                progress.style.width = `${(step / (steps.length - 1)) * 100}%`;

                prevBtn.style.display = step === 0 ? 'none' : 'block';
                nextBtn.style.display = step === sections.length - 1 ? 'none' : 'block';
                submitBtn.style.display = step === sections.length - 1 ? 'block' : 'none';
            }

            function validateSection(step) {
                const inputs = sections[step].querySelectorAll('input[required]');
                let valid = true;
                inputs.forEach(input => {
                    if (!input.value) {
                        valid = false;
                        input.classList.add('error');
                    } else {
                        input.classList.remove('error');
                    }
                });
                return valid;
            }

            nextBtn.addEventListener('click', () => {
                if (validateSection(currentStep)) {
                    currentStep++;
                    updateStep(currentStep);
                } else {
                    alert('Por favor complete todos los campos requeridos');
                }
            });

            prevBtn.addEventListener('click', () => {
                currentStep--;
                updateStep(currentStep);
            });

            form.addEventListener('submit', (e) => {
                if (!validateSection(currentStep)) {
                    e.preventDefault();
                    alert('Por favor complete todos los campos requeridos');
                }
            });
        });
    </script>
</body>
</html> 