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

<div class="col-md-10 p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 style="background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold;">
                <i class="fab fa-whatsapp" style="color: #25D366;"></i> Mensajes WhatsApp
            </h2>
            <small class="text-muted" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 8px 12px; border-radius: 20px; border-left: 4px solid #25D366;">
                <i class="fas fa-comments" style="color: #25D366;"></i>
                Envía mensajes de forma rápida y eficiente
            </small>
        </div>
    </div>

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

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

    <!-- Formulario de Envío -->
    <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-header" style="background: linear-gradient(135deg, #25D366, #128C7E); color: white; border: none;">
            <h5 class="mb-0"><i class="fab fa-whatsapp"></i> Enviar Mensaje WhatsApp</h5>
        </div>
        <div class="card-body">
            <form id="envioRapidoForm">
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label" style="color: #25D366; font-weight: bold;"><i class="fas fa-phone"></i> Número de Teléfono</label>
                        <input type="text" class="form-control" name="telefono" id="telefonoInput" placeholder="Ej: 51987654321" required style="border: 2px solid #e9ecef; border-radius: 10px;">
                        <div class="form-text">Ingresa el número con código de país (ej: 51987654321)</div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label" style="color: #25D366; font-weight: bold;"><i class="fas fa-comment"></i> Mensaje</label>
                        <textarea class="form-control" name="mensaje" id="mensajeText" rows="5" placeholder="Escribe tu mensaje aquí..." required style="border: 2px solid #e9ecef; border-radius: 10px;"></textarea>
                        <div class="form-text">Máximo 1000 caracteres</div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12 text-end">
                        <button type="submit" class="btn btn-lg" style="background: linear-gradient(135deg, #25D366, #128C7E); border: none; color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(37, 211, 102, 0.3); padding: 12px 30px;">
                            <i class="fab fa-whatsapp"></i> Enviar Mensaje
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Event listener para envío de mensaje
    document.getElementById('envioRapidoForm').addEventListener('submit', function(e) {
        e.preventDefault();
        enviarMensaje();
    });
});

// Función para enviar mensaje
function enviarMensaje() {
    const form = document.getElementById('envioRapidoForm');
    const telefono = document.getElementById('telefonoInput').value.trim();
    const mensaje = document.getElementById('mensajeText').value.trim();
    
    // Validaciones
    if (!telefono) {
        alert('Por favor ingresa un número de teléfono');
        return;
    }
    
    if (!mensaje) {
        alert('Por favor escribe un mensaje');
        return;
    }
    
    // Validar longitud del mensaje
    if (mensaje.length > 1000) {
        alert('El mensaje no puede exceder 1000 caracteres');
        return;
    }
    
    // Validar formato de teléfono (básico)
    if (!/^[0-9+\-\s()]+$/.test(telefono)) {
        alert('Por favor ingresa un número de teléfono válido');
        return;
    }
    
    // Limpiar número de teléfono (solo números)
    const telefonoLimpio = telefono.replace(/[^0-9]/g, '');
    
    // Mostrar loading
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';
    submitBtn.disabled = true;
    
    // Preparar URL de WhatsApp
    const mensajeCodificado = encodeURIComponent(mensaje);
    const whatsappURL = `https://wa.me/${telefonoLimpio}?text=${mensajeCodificado}`;
    
    // Abrir WhatsApp en nueva ventana
    window.open(whatsappURL, '_blank');
    
    // Mostrar confirmación
    setTimeout(() => {
        alert('WhatsApp abierto. El mensaje se enviará cuando completes el proceso.');
        form.reset();
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 500);
}
</script>

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