<?php
/**
 * PÁGINA DE PRUEBA - VALIDACIONES
 * 
 * Esta página demuestra el funcionamiento de las validaciones mejoradas
 * para RUT, email y teléfono.
 */

$page_title = "Prueba de Validaciones";
require_once __DIR__ . '/header.php';
require_once __DIR__ . '/navbar.php';
?>

<div class="container mt-5 pt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Card principal -->
            <div class="card shadow-lg border-0">
                <div class="card-header bg-gradient text-white" style="background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);">
                    <h4 class="mb-0">
                        <i class="bi bi-check2-circle me-2"></i>
                        Prueba de Validaciones Mejoradas
                    </h4>
                </div>
                <div class="card-body p-4">
                    <p class="text-muted mb-4">
                        Este formulario demuestra las validaciones en tiempo real para RUT chileno, email y teléfono.
                        Los campos se validarán automáticamente mientras escribes.
                    </p>

                    <form id="testForm" class="needs-validation" novalidate>
                        <!-- RUT -->
                        <div class="mb-4">
                            <label for="test_rut" class="form-label fw-semibold">
                                <i class="bi bi-person-vcard text-primary me-1"></i>
                                RUT
                            </label>
                            <input 
                                type="text" 
                                class="form-control form-control-lg" 
                                id="test_rut" 
                                name="rut"
                                placeholder="12.345.678-9"
                                data-validate="rut"
                                maxlength="12"
                            >
                            <div class="field-feedback"></div>
                            <small class="text-muted">
                                Formato: XX.XXX.XXX-X (se formateará automáticamente)
                            </small>
                        </div>

                        <!-- Email -->
                        <div class="mb-4">
                            <label for="test_email" class="form-label fw-semibold">
                                <i class="bi bi-envelope text-primary me-1"></i>
                                Email
                            </label>
                            <input 
                                type="email" 
                                class="form-control form-control-lg" 
                                id="test_email" 
                                name="email"
                                placeholder="usuario@ejemplo.cl"
                                data-validate="email"
                            >
                            <div class="field-feedback"></div>
                            <small class="text-muted">
                                Formato: usuario@dominio.com
                            </small>
                        </div>

                        <!-- Teléfono -->
                        <div class="mb-4">
                            <label for="test_phone" class="form-label fw-semibold">
                                <i class="bi bi-telephone text-primary me-1"></i>
                                Teléfono
                            </label>
                            <input 
                                type="tel" 
                                class="form-control form-control-lg" 
                                id="test_phone" 
                                name="telefono"
                                placeholder="912345678"
                                data-validate="phone"
                                maxlength="15"
                            >
                            <div class="field-feedback"></div>
                            <small class="text-muted">
                                Formato: 9 XXXX XXXX (móvil) o 2 XXXX XXXX (fijo)
                            </small>
                        </div>

                        <div class="divider my-4"></div>

                        <!-- Botones -->
                        <div class="d-flex gap-3">
                            <button type="submit" class="btn btn-primary btn-lg flex-grow-1">
                                <i class="bi bi-check-circle me-2"></i>
                                Validar Formulario
                            </button>
                            <button type="reset" class="btn btn-outline-secondary btn-lg">
                                <i class="bi bi-arrow-clockwise me-2"></i>
                                Limpiar
                            </button>
                        </div>
                    </form>

                    <!-- Resultado -->
                    <div id="result" class="mt-4" style="display: none;"></div>
                </div>
            </div>

            <!-- Card de ejemplos -->
            <div class="card shadow-sm border-0 mt-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="bi bi-lightbulb text-warning me-2"></i>
                        Ejemplos para Probar
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="text-success">✅ RUT Válidos</h6>
                            <ul class="small">
                                <li>12.345.678-5</li>
                                <li>11.111.111-1</li>
                                <li>22.222.222-K</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-danger">❌ RUT Inválidos</h6>
                            <ul class="small">
                                <li>12.345.678-0</li>
                                <li>123-4</li>
                                <li>11.111.111-2</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-success">✅ Teléfonos Válidos</h6>
                            <ul class="small">
                                <li>912345678 (móvil)</li>
                                <li>223456789 (fijo)</li>
                                <li>+56 9 1234 5678</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Manejar envío del formulario
document.getElementById('testForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const rut = document.getElementById('test_rut').value;
    const email = document.getElementById('test_email').value;
    const phone = document.getElementById('test_phone').value;
    
    // Validar todos los campos
    const rutResult = validateRUT(rut);
    const emailResult = validateEmail(email);
    const phoneResult = validatePhone(phone);
    
    const resultDiv = document.getElementById('result');
    
    if (rutResult.valid && emailResult.valid && phoneResult.valid) {
        resultDiv.className = 'alert alert-success';
        resultDiv.innerHTML = `
            <h5><i class="bi bi-check-circle-fill me-2"></i>¡Todos los datos son válidos!</h5>
            <hr>
            <p class="mb-1"><strong>RUT:</strong> ${rutResult.formatted}</p>
            <p class="mb-1"><strong>Email:</strong> ${emailResult.normalized}</p>
            <p class="mb-0"><strong>Teléfono:</strong> ${phoneResult.formatted} (${phoneResult.type})</p>
        `;
    } else {
        resultDiv.className = 'alert alert-danger';
        let errors = '<h5><i class="bi bi-exclamation-triangle-fill me-2"></i>Hay errores en el formulario:</h5><ul class="mb-0">';
        
        if (!rutResult.valid) errors += `<li>${rutResult.message}</li>`;
        if (!emailResult.valid) errors += `<li>${emailResult.message}</li>`;
        if (!phoneResult.valid) errors += `<li>${phoneResult.message}</li>`;
        
        errors += '</ul>';
        resultDiv.innerHTML = errors;
    }
    
    resultDiv.style.display = 'block';
    resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

// Limpiar resultado al resetear
document.getElementById('testForm').addEventListener('reset', function() {
    document.getElementById('result').style.display = 'none';
    
    // Limpiar feedback de todos los campos
    document.querySelectorAll('.form-control').forEach(field => {
        clearFieldFeedback(field);
    });
});
</script>

<?php require_once __DIR__ . '/footer.php'; ?>
