<div class="fab-container">
    <form id="fabWhatsAppForm" class="space-y-4">
        <input type="hidden" id="whatsappNumber" value="<?php echo esc_attr( $atts['phone_number'] ); ?>">

        <?php if ( ! empty( $atts['description'] ) ) : ?>
            <p class="text-gray-600"><?php echo esc_html( $atts['description'] ); ?></p>
        <?php endif; ?>

        <div>
            <label for="whatsappName" class="block text-sm font-medium text-gray-700 mb-1">
                <?php esc_html_e( 'Your Name', 'floating-awesome-button' ); ?>
            </label>
            <input 
                type="text" 
                id="whatsappName" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-[#25D366]"
                placeholder="<?php echo esc_attr( $atts['name_placeholder'] ); ?>"
                required
            >
        </div>

        <div>
            <label for="whatsappMessage" class="block text-sm font-medium text-gray-700 mb-1">
                <?php esc_html_e( 'Message', 'floating-awesome-button' ); ?>
            </label>
            <textarea 
                id="whatsappMessage" 
                rows="4"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-[#25D366]"
                placeholder="<?php echo esc_attr( $atts['message_placeholder'] ); ?>"
                required
            ></textarea>
        </div>

        <button 
            type="submit" 
            class="w-full bg-[#25D366] hover:bg-[#128C7E] text-white font-medium py-2 px-4 rounded-md transition duration-200"
        >
            <?php esc_html_e( 'Send Message', 'floating-awesome-button' ); ?>
        </button>
    </form>
</div>

<script>
    document.getElementById('fabWhatsAppForm').addEventListener('submit', function (e) {
        e.preventDefault();
 
        const number = document.getElementById('whatsappNumber').value.replace(/[^0-9]/g, '');
        const name = document.getElementById('whatsappName').value;
        const message = document.getElementById('whatsappMessage').value;

        const formattedMessage = encodeURIComponent(`Name: ${name}\nMessage: ${message}`);
        const whatsappURL = `https://wa.me/${number}?text=${formattedMessage}`;
        window.open(whatsappURL, '_blank');
    });
</script>
